A simple React app that shows trivia questions from OpenTDB in charts. Built for a JetBrains interview.
- Shows all trivia categories in a bar chart
- Shows question difficulty (easy/medium/hard) in another chart
- You can filter by category to see how hard questions are in that topic
- Works on mobile and desktop
- Handles errors gracefully (the API sometimes goes down)
- React with hooks (no classes)
- Recharts for the visualizations
- Vite for building
- Dark theme inspired by JetBrains IDEs
- Deployed on GitHub Pages
git clone https://github.com/Ptak07/trivia-visualizer.git
cd trivia-visualizer
npm install
npm run devsrc/
├── components/ # The charts and UI bits
├── hooks/ # Custom hook for fetching data
├── services/ # API calls to OpenTDB
├── utils/ # Data transformation
└── App.jsx # Main app
- ✅ List of categories
- ✅ Bar chart of questions by category
- ✅ Bar chart of questions by difficulty
- ✅ Filter by category
- ✅ React functional components
- ✅ Recharts library
- ✅ Static hosting
Built with care for the JetBrains frontend assessment.
- How to handle API rate limiting gracefully (OpenTDB can be unpredictable)
- The importance of caching for better UX - nobody likes waiting for the same data twice
- Building components that fail gracefully instead of crashing
- Performance matters even in simple apps
Smart caching: Prevents unnecessary API calls and makes the app feel snappy Error boundaries: The app never completely breaks, just shows helpful error messages Skeleton loading: Keeps the UI responsive while data loads Memoized calculations: Chart data transformations are cached for smooth interactions
Accessibility: Keyboard navigation, screen reader support, and responsive design that actually works on mobile
- Add TypeScript for better developer experience
- Implement data export functionality (CSV/JSON)
- Add unit tests with Vitest