A modern quiz application built with React, Vite, and Tailwind CSS. The application fetches trivia questions from the Open Trivia Database API and provides an interactive quiz experience with authentication, timer, progress tracking, and quiz resume functionality.
- 🔐 Simple Login Authentication
- 🌐 Fetch Questions from Open Trivia DB API
- 📝 One Question Per Page
- ⚡ Automatic Next Question After Answer Selection
- 📊 Quiz Progress Tracking
- ⏱️ Countdown Timer
- 🏆 Quiz Result Summary
- 💾 Resume Quiz Using LocalStorage
- 📱 Responsive Design
- 🎨 Modern UI with Tailwind CSS
- React
- Vite
- React Router DOM
- Axios
- Tailwind CSS
- LocalStorage API
- Open Trivia DB API
src
├── assets
├── pages
│ ├── LoginPage.jsx
│ ├── QuizPage.jsx
│ └── ResultPage.jsx
│
├── components
│ ├── Timer.jsx
│ ├── ProgressBar.jsx
│ └── QuestionCard.jsx
│
├── services
│ └── triviaApi.js
│
├── hooks
├── utils
├── context
│
├── App.jsx
└── main.jsx
Clone repository:
git clone https://github.com/your-username/quiz-app.gitMove into project directory:
cd quiz-appInstall dependencies:
npm installRun development server:
npm run devOpen:
http://localhost:5173
- Login using any valid username and password.
- Start the quiz.
- Answer questions one by one.
- Monitor your progress and remaining time.
- View your final score after completing the quiz or when the timer expires.
- Resume your quiz if the browser is accidentally closed.
Open Trivia Database
Endpoint:
https://opentdb.com/api.php?amount=10&type=multipleDocumentation:
Add screenshot here
Add screenshot here
Add screenshot here
Loom Recording:
Add your Loom link here
Dimas Brotowali
GitHub: https://github.com/your-github-username
This project was created for Frontend Developer Internship Assessment purposes.