DEV Community

IH Sajjad
IH Sajjad

Posted on

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

#webdev #react #nextjs #typescript

🚀 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"]),
    })
  ),
});
Enter fullscreen mode Exit fullscreen mode

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]);
Enter fullscreen mode Exit fullscreen mode

3. GPA Logic with Optional Subject Handling 

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

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!

Top comments (0)