NitPicker is a React + TypeScript web app for Philnits FE exam preparation.
this is a rush side project, there might be bugs but I intend to fix later, but for now, just have fun and study <3
It includes:
- Mock exam generation from the question vault
- Configurable exam setup (timed/untimed, question count, topic filters)
- Instant answer reveal mode with explanation support
- Results analytics (score, percentage, pass/fail, category breakdown, wrong-question review)
- Previous exams browser grouped by year, with dropdown question review
Questions are loaded from markdown files under philnits-vault. The app parses each markdown file and extracts:
- Question text
- Choices (A-D)
- Correct answer
- Explanation text
- Inferred category/topic
Markdown and math in explanations are rendered in HTML using:
- react-markdown
- remark-gfm
- remark-math
- rehype-katex
- katex
- / : Home page
- /notes : Notes page
- /mockexamprep : Mock exam setup
- /mockexam : Exam-taking page
- /mockexamresults : Results page
- /previousexams : Previous exam explorer
- React 19
- TypeScript
- Vite
- Tailwind CSS
- Phosphor Icons
- Sentry (optional, env-gated)
- Install dependencies
npm install- Run development server
npm run dev- Build for production
npm run build- Preview production build
npm run previewCopy .env.example to .env.local and configure as needed:
VITE_MOCK_EXAM_IMAGE_BASE_PATHVITE_ENABLE_ANALYTICSVITE_GA_MEASUREMENT_IDVITE_ENABLE_ERROR_TRACKINGVITE_SENTRY_DSN
- Manifest:
public/manifest.webmanifest - Service worker:
public/sw.js - Registered in production from
src/main.tsx
- src/pages : App pages
- src/components : Shared UI components
- src/exam : Exam models and question-bank logic
- src/assets : App assets used in components
- public : Static files served directly (including favicon)
- philnits-vault : Markdown question source files