GradeWise: CGPA Calculator
A React Native (Expo) application for student grade tracking. Designed with an offline-first architecture using Zustand and AsyncStorage, featuring seamless PDF reporting capabilities.
The Challenge
University students need a reliable, offline-first way to track their CGPA across multiple semesters without relying on constant internet connectivity. The challenge was building a fluid, native-feeling application with Expo that handled complex state management, grading scale configurations, and PDF generation purely on-device without a backend.
Architecture & State Management
To maintain a lightweight footprint, I architected the application using Zustand combined with AsyncStorage. This replaced the need for heavier state management libraries like Redux, allowing for lightning-fast updates to the UI when a user tweaked a hypothetical grade to immediately see its impact on their overall CGPA.
// Simplified Zustand Store for Grades
import { create } from 'zustand';
import { persist } from 'zustand/middleware';
export const useGradeStore = create(
persist(
(set, get) => ({
semesters: [],
addCourse: (semesterId, course) => set((state) => {
// Find semester and append course
const newSemesters = state.semesters.map(s =>
s.id === semesterId ? { ...s, courses: [...s.courses, course] } : s
);
return { semesters: newSemesters };
}),
calculateCGPA: () => {
// Compute total quality points / total credits dynamically
const { semesters } = get();
return computeOverallGPA(semesters);
}
}),
{ name: 'gradewise-storage' }
)
);
Seamless User Experience
- Fluid Animations: By integrating
react-native-reanimated, the layout transitions—such as expanding semester details or revealing GPA updates—feel significantly more premium and native compared to standard React Native Animated API. - On-Device PDF Generation: Generating shareable academic reports in PDF format without a cloud backend required specialized native bridging in Expo, ensuring that users have complete control and privacy over their academic data.