Back to Projects

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.

React NativeExpoZustandReanimated

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.