IH Sajjad

Posted on Apr 4

How I Built an HSC GPA Calculator for Bangladeshi Students Using Next.js

#nextjs #typescript #react #webdev

🚀 Introduction

As a Bangladeshi student, I know how confusing it can be for HSC examinees to calculate their GPA — especially when it involves optional subject logic. That’s why I built a simple, fast, and mobile-friendly GPA calculator tailored specifically for Bangladeshi students.

🔗 Live Demo: HSC GPA Calculator

In this post, I’ll walk you through the technologies and approach I used to build this app using Next.js, TypeScript, React Hook Form, and Zod for validation.

🛠️ Tech Stack

Frontend Framework: Next.js (App Router)
Language: TypeScript
Form Management: React Hook Form
Validation Schema: Zod
Styling: Tailwind CSS
Deployment: Vercel

🎯 Goals of the Project

Let users input subject-wise grades
Handle optional subject GPA rules
Auto-calculate GPA instantly
Export GPA as PDF
Work smoothly on mobile devices

📐 How GPA is Calculated in Bangladesh

The HSC grading system includes:

Core subjects (must-have)
Optional subject (adds extra points only if GPA > 2)

I implemented a logic where:

The optional subject’s GPA is counted only if it’s above 2.0
Then subtract 2 from the optional GPA and add it to the average of the main subjects

🔧 Implementation Highlights

1. Form Management with React Hook Form + Zod

const formSchema = z.object({
  group: z.enum(["science", "commerce", "arts"]),
  subjects: z.array(
    z.object({
      name: z.string(),
      grade: z.enum(["A+", "A", "A-", "B", "C", "D", "F"]),
    })
  ),
});

Using useForm with zodResolver allowed me to catch invalid input instantly and provide user-friendly messages.

2. Dynamic Subject Fields

Depending on the selected group (Science, Commerce, Arts), subjects update automatically using React’s state and conditional rendering.

useEffect(() => {
  if (group === "science") setSubjects(scienceSubjects);
}, [group]);

3. GPA Logic with Optional Subject Handling

const optionalGPA = optionalGrade > 2 ? optionalGrade - 2 : 0;
const finalGPA = (mainTotal + optionalGPA) / subjectCount;

4. PDF Export

Used react-to-pdf to let users download their GPA summary as a neat PDF for future reference or printing.

🖼️ UI Overview

I designed the UI with Tailwind CSS to be:

Simple and clean
Optimized for mobile use
Fast and distraction-free

📈 SEO and Performance

The page is server-rendered for better SEO using Next.js App Router, and loads in milliseconds thanks to Vercel’s CDN.

🔗 Live Preview

👉 Try the HSC GPA Calculator

👨‍💻 Final Thoughts

This project was both fun and meaningful for me. If you’re from Bangladesh or interested in building tools for local communities, I hope this inspires you to launch something useful!

DEV Community