A React-based quiz application built with Firebase and Vite. This app allows users to take quizzes, view results, and analyze their performance.
- User Authentication: Sign up, log in, and log out using Firebase Authentication.
- Quiz Management: Fetch and display quizzes dynamically from Firebase Realtime Database.
- Progress Tracking: Track quiz progress with a progress bar.
- Result Analysis: View detailed results and performance analysis after completing a quiz.
- Responsive Design: Fully responsive UI for mobile and desktop devices.
- Infinite Scrolling: Load videos dynamically with infinite scrolling.
- Frontend: React, React Router, CSS Modules
- Backend: Firebase Realtime Database
- Build Tool: Vite
- State Management: React Hooks
- Other Libraries:
lodashfor utility functionsreact-infinite-scroll-componentfor infinite scrollingreact-playerfor embedding YouTube videos
You can view the live demo of the project here.
-
Clone the repository.
-
Install Dependency:
yarn install
-
Set up Firebase:
- Create a Firebase project in the Firebase Console.
- Add your Firebase configuration to a
.envfile: Start the development server:
-
Start the development server:
yarn dev
-
Open the app in your browser:
http://localhost:5173
quiz-app/
├── src/
│ ├── components/ # React components
│ ├── contexts/ # Context API for authentication
│ ├── hooks/ # Custom React hooks
│ ├── styles/ # CSS Modules for styling
│ ├── assets/ # Static assets (images, etc.)
│ ├── database/ # Firebase database rules and mock data
│ └── [main.jsx](http://_vscodecontentref_/1) # Entry point of the app
├── public/ # Public assets
├── .env # Environment variables
├── [vite.config.js](http://_vscodecontentref_/2) # Vite configuration
├── [package.json](http://_vscodecontentref_/3) # Project dependencies and scripts
└── [README.md](http://_vscodecontentref_/4) # Project documentationEnsure your Firebase Realtime Database rules are set up as follows:
{
"rules": {
"videos": {
".read": true,
".write": false
},
"quiz": {
".read": "auth != null",
".write": "auth != null"
},
"answers": {
".read": "auth != null",
".write": "auth != null"
},
"result": {
"$uid": {
".read": "$uid === auth.uid",
".write": "$uid === auth.uid"
}
}
}
}