Inspiration

"I didn't build Gravio because I had it all figured out. I built it because I wish it existed when I didn't."

As a 300-level Computer Science student, I realized that every existing CGPA calculator on the market was purely reactive. They only told you where you were, but they never told you what to do next. The inspiration for Gravio came from a very real, very anxious question I couldn't answer: "If I work hard from today, what exact grades do I need to average to graduate with a First Class?"

I realized students didn't just need a calculator; they needed an Academic Command Center. They needed a strategic planner that could reverse-engineer their target degree class into actionable, per-semester GPA targets.

What it does

Gravio is an offline-first, mobile-ready web application that helps Nigerian university students take control of their academic trajectory. It features four main tools:

  • Live GPA Calculator: Recalculates semester and cumulative GPAs on every keystroke.
  • The Orbit Planner: A predictive engine that calculates the exact GPA you must maintain for your remaining semesters to hit your target CGPA.
  • The Pledge: A psychological commitment tool where students lock in their academic goals before the semester starts and review them at the end.
  • Academic Profile: A complete, color-coded semester history with JSON data export.

To make the Orbit Planner accurate, we designed a weighted quality-points (QP) formula. Here is the mathematical core that powers Gravio's recovery path:

$$ QP_{done} = CGPA_{current} \times Units_{done} $$

$$ Units_{total} = Units_{done} + Units_{remaining} $$

$$ QP_{needed} = CGPA_{target} \times Units_{total} $$

$$ QP_{remaining} = QP_{needed} - QP_{done} $$

$$ GPA_{required} = \frac{QP_{remaining}}{Units_{remaining}} $$

How we built it

We made a strict architectural decision early on: No frameworks, no libraries, no build tools.

We wanted to demonstrate a deep mastery of software engineering fundamentals. Gravio is built using pure HTML5, CSS3 (leveraging custom properties for a full design system), and Vanilla JavaScript (ES6).

The logic is modular. We utilized ES6 Classes (Course, Semester, Student, Pledge) where each data model owns its own logic and knows how to serialize itself. For persistence, we used localStorage. This ensures the app is blazing fast, costs zero dollars to host, protects student privacy, and works completely offline—a critical feature for students with unstable internet access.

Challenges we ran into

Building a complex state-management system without React or Vue was tough.

  1. Data Synchronization: Keeping the UI updated across the Dashboard, Calculator, and Orbit Planner required writing custom event listeners and a centralized storage module to ensure the localStorage data never drifted out of sync with the DOM.
  2. Floating-Point Math: JavaScript is notoriously bad with floating-point math (e.g., yielding 3.8999999 instead of 3.90). We had to build custom rounding guards to ensure the GPA calculations were academically precise.
  3. Edge Cases: Writing the logic to handle brand-new students (0 units completed) without throwing division-by-zero errors required careful conditional mapping.

Accomplishments that we're proud of

We are incredibly proud of building a fully functional, mathematically precise application entirely from scratch without relying on modern frameworks. Successfully translating the complex "Orbit Formula" into a clean, instant-recalculation UI is a massive win. Furthermore, ensuring the entire app runs flawlessly offline via localStorage proves that a high-quality, reliable user experience doesn't always require a heavy tech stack or a constant internet connection. Finally, building a custom CSS variable system for our dark-mode UI from the ground up gave the app a premium feel without needing Tailwind or Bootstrap.

What we learned

Stripping away frameworks forced a deeper understanding of the DOM, how to architect clean object-oriented JavaScript, and how to master complex application state from scratch. It was a masterclass in realizing that frameworks are just tools, and true engineering is about solving problems with the foundational building blocks of the web.

What's next for Gravio

The MVP is fully functional and ready to help students today, but the roadmap is exciting. We plan to introduce multi-device sync via a lightweight backend (Supabase), add push notifications for assignment deadlines, and build a predictive feature that calculates the statistical probability of hitting a specific degree class based on historical semester trends.

Built With

Share this project:

Updates