https://github.com/romabulani/bakinmania-react

Bakin Mania - A fun Quiz App to test your knowledge on cakes, muffins, baking and Indian Sweets
https://github.com/romabulani/bakinmania-react

css3 firebase firebase-auth netlify react react-router-v6 reactjs typescript

Last synced: 4 days ago
JSON representation

Bakin Mania - A fun Quiz App to test your knowledge on cakes, muffins, baking and Indian Sweets

• Host: GitHub
• URL: https://github.com/romabulani/bakinmania-react
• Owner: romabulani
• Created: 2022-04-15T04:08:02.000Z (over 2 years ago)
• Default Branch: dev
• Last Pushed: 2022-11-08T16:29:22.000Z (about 2 years ago)
• Last Synced: 2023-03-09T07:41:41.459Z (over 1 year ago)
• Topics: css3, firebase, firebase-auth, netlify, react, react-router-v6, reactjs, typescript
• Language: TypeScript
• Homepage: https://bakin-mania.netlify.app/
• Size: 353 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  

  
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](https://muffinui.netlify.app/) Component Library

- Git For Version Control

- Netlify for Deployment

- Cloudinary for Image Hosting of Quiz Thumbnails

## Live Link

[Bakin Mania](https://bakin-mania.netlify.app/)

## Demo Video

https://user-images.githubusercontent.com/42478246/165312993-1c10d758-f529-40ab-a2fe-53dd4e56a0c3.mp4