🧠 Frontend – AI-Powered Quiz Web App

This is the React.js frontend for the AI-powered quiz generation app. Users can sign up, upload documents, generate quizzes using AI, and review quiz results – all in a clean, responsive, and dark/light mode interface.

---

Related Repositories

🚀 This project is powered by a FastAPI backend. Check it out here: quiz-app-backend

---

🚀 Tech Stack

• React.js (with React Router)
• Bootstrap 5
• Fetch API for backend integration
• JWT Authentication (stored in localStorage)
• Confetti + Toasts for fun user experience
• Dark Mode Toggle throughout

---

📁 Project Structure

frontend/
├── public/ 
│   └── index.html 
├── src/ 
│   ├── api/           # Axios/fetch logic
│   ├── components/    # Page & UI Components
│   ├── App.js         # Routing logic
│   └── index.js       # ReactDOM root

---

⚙️ Setup Instructions

1. Clone the repo:

git clone git@github.com:YourUsername/quiz-frontend.git
cd quiz-frontend

2. Install dependencies:

npm install

3. Create a .env file:

REACT_APP_API_URL=https://your-backend-url

4. Start the frontend:

npm start

Access the app at: http://localhost:3000

---

🔐 Auth Flow

• JWT tokens are stored in localStorage
• Protected routes require valid token
• Header format:

Authorization: Bearer <token>

---

🌍 Live App

You can try the frontend live on Heroku here: 👉 https://quiz-frontend-nick-b973ee3e10ba.herokuapp.com

---

🧠 Pages & Routing

Page	Path	Auth Required	Description
Login	/login	❌ No	User login
Register	/register	❌ No	New account signup
Dashboard	/	✅ Yes	List of uploaded files + quizzes
File Upload	/upload	✅ Yes	Upload DOCX, PDF, or TXT files
Quiz Page	/quiz	✅ Yes	Take quiz generated by AI
Results	/results	✅ Yes	View correct answers and explanations
History	/history	✅ Yes	View past quiz attempts

---

AI-Powered Quiz Web App

Welcome to the AI-Powered Quiz Web App, a full-stack web application that transforms any uploaded document into an interactive quiz using Google's Gemini AI. Users can upload PDF, DOCX, or TXT files, take generated quizzes, and receive instant feedback, all within a modern, responsive interface.

---

🌟 Features

• 📄 Smart Uploads: Upload PDF, DOCX, or TXT files.
• 🤖 AI Quiz Generation: Uses Gemini AI to generate accurate multiple-choice questions.
• 🧠 Instant Feedback: Get answers and explanations right after quiz submission.
• 🗂 Progress Tracking: View quiz history and reattempt previous quizzes.
• 🔒 JWT Authentication: Secure signup/login with protected routes.
• 🌗 Dark Mode: Full dark/light theme support.

---

🌙 Dark Mode Support

• Toggle applied globally to all pages and components
• Affects card themes, button variants, backgrounds, text, overlays, etc.

---

📸 Demo & Screenshots

44 detailed screenshots have been uploaded to showcase user flow, dark/light mode, quiz results, and dashboard views. Here are some visual highlights of the app in both light and dark modes:

🔐 Login

---

📂 Upload File & Generate Quiz

---

🧠 Quiz Page

---

📊 Results Page

---

🗂️ Dashboard & History

---

🧪 Testing

No frontend tests have been written yet. You can add tests using React Testing Library or Cypress.

---

📌 Notes

• Uses React Bootstrap for rapid prototyping.
• Works seamlessly with FastAPI backend at localhost:8000.
• Accessible, responsive, and optimized for both desktop and mobile.

---

Related Docs

• Overview: High-level description of system components.
• Data Flow: Describes how data moves from upload to evaluation.
• API Design: RESTful endpoints powering the system.
• General System Diagram (PDF): Visual architecture representation.
• User Stories: Features from a user perspective.
• System Architecture: Direct access to all technical documentation related to the system design, architecture, and data flow of the AI-Powered Quiz Web App.

---

📬 Contact

Built with 💙 by Nick Efe Oni.

Feel free to fork, star, and share your feedback!

✍️ Author

Nick Efe Oni
GitHub • LinkedIn
✉️ efeoni10@gmail.com