A modern quiz platform built with React, Vite, Axios, and Open Trivia DB API that allows users to test their knowledge across multiple categories, track performance, and review past quiz attempts.
DevLore is a dynamic quiz application designed to provide a smooth and engaging learning experience. Instead of relying on hardcoded questions, quizzes are fetched in real time from an external API, allowing users to explore a wide range of topics and difficulty levels.
The project focuses on practical React concepts including:
- Component-based architecture
- State management with Hooks
- API integration with Axios
- React Router navigation
- Local Storage persistence
- Dynamic rendering
- Performance tracking and analytics
🔗 Website: [(https://devlore-ebon.vercel.app/)]
🔗 GitHub Repository: [(https://github.com/pritesh-4/DevLore)]
- Choose quiz category
- Select difficulty level
- Choose number of questions
- Dynamic question generation
- Randomized answer positions
- Real-time timer
- Instant answer selection
- Score tracking
- Final score calculation
- Accuracy percentage
- Completion time tracking
- Save result functionality
- Total quizzes completed
- Highest score achieved
- Total time spent
- Recent quiz activity
- Average performance analytics
- Quiz history stored using Local Storage
- Progress remains available after page refresh
- Saved results accessible from dashboard
- React
- React Router DOM
- Vite
- CSS
- Open Trivia DB API
- Browser Local Storage
- Axios
src/
│
├── components/
│ ├── Navbar.jsx
│ ├── Footer.jsx
│ ├── Hero.jsx
│ └── Statsection.jsx
│ ├── StatCard.jsx
│ └── Activity.jsx
│
├── pages/
│ ├── Home.jsx
│ ├── QuizSetup.jsx
│ ├── Quiz.jsx
│ ├── Result.jsx
│ └── Dashboard,jsx
│
├── App.jsx
├── main.jsx
│
└── assets/
Clone the repository:
git clone https://github.com/pritesh-4/DevLore.gitNavigate into the project:
cd DevLoreInstall dependencies:
npm installStart development server:
npm run devBuild for production:
npm run buildThis project helped me learn and apply:
- React Components
- Props
- useState
- useEffect
- Conditional Rendering
- Lists and Mapping
- API Fetching
- Axios
- React Router
- Local Storage
- State Management
- Dashboard Design
- Error Handling
Planned features for future versions:
- User authentication
- Global leaderboard
- Dark mode
- User profiles
- Quiz categories analytics
- Difficulty-based statistics
- Backend database integration
- Achievement system
- Streak tracking
During development, several challenges were solved:
- Dynamic API integration
- Handling API failures
- Random answer shuffling
- Accurate score calculation
- Preserving quiz history
- Managing navigation state
- Preventing duplicate result saves
These challenges helped strengthen understanding of React application development and debugging.
Pritesh Jena
Built as a learning project to explore modern React development, API integration, and frontend application architecture.
If you found this project interesting, consider giving the repository a star.