Grade Planner is a mobile-first academic planning app for tracking degree progress, credits, GPA, and semester-by-semester course completion.
The project was originally built as a personal curriculum tracker and is being prepared as a reusable open-source template for students who need a lightweight way to understand graduation requirements and academic progress.
- Live demo: https://johenking.github.io/grade-planner
- Repository: https://github.com/johenking/grade-planner
| Mobile dashboard | Desktop dashboard |
|---|---|
 |
 |
- Semester-based curriculum checklist
- Credit and GPA progress dashboard
- Required/elective course grouping
- Firebase-backed sync with anonymous and Google sign-in
- Offline-friendly Firestore persistence
- Mobile-first interface with animated interactions
Many students manage graduation requirements in spreadsheets, screenshots, or disconnected school portals. Grade Planner provides an open, customizable implementation that can be adapted to different university programs without requiring a full student information system.
- React 18
- Create React App
- Firebase Authentication
- Cloud Firestore
- Framer Motion
- Lucide React
npm install
cp .env.example .env.local
npm startCreate a Firebase web app and fill in the REACT_APP_FIREBASE_* values in .env.local.
The app reads Firebase configuration from environment variables first. For backward compatibility with hosted demos, it can still fall back to the demo configuration in src/App.js.
npm start # run locally
npm test # run tests in jsdom
npm run build- Extract curriculum data into JSON files
- Add import/export for custom degree plans
- Add test coverage for GPA and credit calculations
- Add i18n support for English and Chinese interfaces
- Publish versioned releases and demo screenshots
Maintained by @johenking. Contributions, bug reports, and curriculum adaptation ideas are welcome.
MIT License. See LICENSE.