Skip to content

Latest commit

 

History

History
66 lines (54 loc) · 2.58 KB

README.md

File metadata and controls

66 lines (54 loc) · 2.58 KB
Raw
logo

Bakin Mania

Are you also the foodie? Do you love Desserts? Bakin Mania is for you! Its the Fun Quiz App which tests your knowledge on Cakes, Muffins, Indian Sweets and Baking!

How to run the app locally?

$ git https://github.com/romabulani/bakinMania-react.git
$ cd bakinMania-react
$ npm install
$ npm start

Screens in this project

  • Landing Page
  • Rules Page
  • Authentication (Login, Signup and Logout) Pages
  • Password Reset Page
  • MCQ based Question Page
  • Result Page with Answers & Score
  • Leaderboard
  • Dashboard
  • 404 (Not Found) Page

Features

  • Authentication including Login, Signup and Logout using Firebase. All the authentication forms have the proper validation.
  • Password Reset Form with validation, the reset link will be sent to user's email.
  • Landing Page with Featured Quiz Categories. User can choose the quiz to play by selecting category.
  • Share Quiz - User can share the link of the quiz with others.
  • Landing Page with Featured Quiz Categories. User can choose the quiz to play by selecting category. User can share the quiz with others.
  • Rules page displaying the rules for the Quiz
  • Question Page with four options.
  • Timer for every question.
  • Quit Quiz on the Question Page.
  • User cannot go back to Previous Question.
  • Results page displaying the correct answers, answers chosen by user and the score for that quiz.
  • Leaderboard displaying the scores of all participants with their rank, name and total score.
  • Dashboard with user's details and the progress with all the quiz history of user. Retake option to take the quiz again.
  • Toggle Theme - Light and Dark Theme, theme is persistent even after page refresh.
  • Alerts in the app to notify the users about success/failure operations.
  • Loader is shown while the information is fetched.
  • 404 Page as the fallback for the routes not present in the project.
  • All the screens are Responsive.

Tech Stack and Tools

  • Typescript with React JS
  • Firebase for Backend
  • React Router v6
  • React Context API + useReducer
  • Vanilla CSS integrated with Muffin UI Component Library
  • Git For Version Control
  • Netlify for Deployment
  • Cloudinary for Image Hosting of Quiz Thumbnails

Live Link

Bakin Mania

Demo Video

bakin-mania.mp4