Skip to content

PuneetP16/magnificent-quiz

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Magnificent Quiz in React

Magnificent Quiz is a Quiz App, where users can play quizzes by category.

Authors

Live App link

Technologies used

  • HTML
  • CSS
  • JavaScript
  • ReactJS
  • Firebase (for backend)

Features and Functionalities

1. Home page :

- Login button
- Dark Mode Toggle Button
- All time Popular Quiz
- Trending Categories

2. Rules Page (Modal) :

- a modal listing rules 
- Start quiz button

3 Quiz Page:

Play the quiz having 20 second timer for each question.
UI 
- Image related to question
- timer showing countdown
- question number
- score

Functionality
- select the answer
- if correct show's green color
- if wrong show's red color

4. Quiz Score Board Modal:

- current score
- highest score
- total score
- buttons to navigate to leaderboard or category page

5 Categories Page:

- Show all quizes category
- on clicking any category quiz starts

6. Sign Up page -

- Input first and last name
- Input email address
- Input Password and verify password by click show password button
- confirm password
- User agreement checkbox
- Create new account button
- Already have an account button

7. Login page -

- Input Username
- Input password
- Remember me option (ONLY UI)
- Forgot password option (ONLY UI)
- Login button
- Login with Google button
- Login with Facebook button
- Dummy login data preloaded
- Create a New Account button

8. Log out button

9. Responsiveness

- All pages are made responsive with respect to mobile screens with width greater than 320px

10. Dark Mode Toggle

- Theme can be toggled between light mode and dark mode by clicking the toggle located at the top-right corner of every page.

- Theme will remain persistent between different browser sessions. (Implemented local storage to store theme memory)

How to run this app Locally

To run this app locally on your machine, clone the repo to your local machine.

1. `git clone https://github.com/PuneetP16/magnificent-quiz.git`
2. `cd magnificent-quiz`
In the project directory, you can run
3. `npm install`
4. `npm start`

This will start the app in development mode.
Open http://localhost:3000 to view it in your browser.
Make sure you have access to internet to make use of the API call inside the App.


👨‍💻 Lets connect !


About

Magnificent Quiz - An App for Quiz Play

Resources

Stars

Watchers

Forks

Packages

No packages published