FinLingo

FinLingo: Master your money, one question at a time.

Comment

Inspiration

Study finance or any subject is kind of boring and nowadays people with very low attention span didn't like to sit and study with books so i thought of building an gamified quiz app for finance. Where people can learn and play at same time.

What it does

Ask you Quiz question and you have to select answere, Based on your answere it give you score.

How we built it

I built is using Next.js (easy and scalable) for frontend with React component based architecture, which allowed me to build modular and reusable UI elements. For styling, i used Tailwind CSS enabling rapid and consistent design. I enhanced the user interface with Shadcn UI components, ensuring a clean and professional look.

The backend is entirely powered by Supabase. This allowed me to quickly set up a PostgreSQL database to store questions and answers, handle user authentication and manage data with ease.

The application flow involves fetching questions from Supabase, shuffling them to provide a new experience each time, and presenting them one by one. User answers are checked against the correct solution, and a unique scoring mechanism (where wrong answers deduct from correct ones) adds an interesting challenge. The final results page calculates scores.

Challenges we ran into

  1. The first challenge was to keep the design of app simple i wanted an simple yet efficient app. So i used figma to design the UI from scratch without unnecessary design or animation.

  2. Setup for tailwind with headache i run through many problem at first build when i deploy the app the tailwind didn't worked so i downgraded my tailwind to version 3 to work. And when tailwind work the Shadcn UI button were not working also i redesign button again by myself for making app more clean and efficient design.

  3. Other issues i faced is with scoring logic. Scoring logic wasn't working it wasn't count my correct answere and giving me minus mark every time. So i have to build the score function again.

  4. After Deploy the app I realise I'm not storing the cache files so I build a new component for cache and a function for storing cache data locally.

  5. Also I forgot to add environment variables and I directly hard coded the password and url of my database.

  6. The biggest issue from all was implementing progressive web app features I first time doing this progressive web app so I have no clue how to do that and it took me several hours to just implement few things I was not aware how to add images and then I have to make sure the size of the images also and I was getting error after error every time.

Accomplishments that we're proud of

Two feature I am proud of are

  1. I implemented progressive web app so I have to code the app one time only in javascript and now all the users either they are windows, mac, ios or Android they can use my app at the same time this is the best thing if you are making an mvp this was the first time I was making a progressive web app but I did it and that was a fun learning.

  2. Thinking of an gamified environment because I myself sometimes bored of studying so I want something that I can quickly answers and learn so whenever using is free he can just quickly open the app and answer some questions The app is divided into sections of five questions So the user did not have to answer huge number of questions to see his course the user will see their scores after every five answers keep in mind that the people nowadays have very low attention span and at the end of the quiz user will get finally score.

The app is primarily for gen-z keep in mind there low attention spans.

What we learned

  1. Learn Next.js and how to use it for routing and how to use it as full stack development framework.

2.Learned how to use Shadcn UI buttons.

  1. Also i first time use supabase so also learned how to use that run some sql commands build table in it and also learned how to fetch data from it.

  2. Learn how to build an PWA app.

What's next for FinLingo

  1. I wanted to make different ** difficulty levels** in the app as the user play the game after every set of questions the level will increase.

  2. Implementing personalised questions on the basis of user's age background the app will detect which type of question will be best for the user.

  3. Adding and featured so that user can share his scoring result on social media platforms. Sharing score with her friends and family will be fun.

  4. Adding more advanced scoring logic and better gamified feature the original idea of the app is to make the app's environment gamified so the user did not feel bored while answering the questions.

Built With

Share this project:

Updates