A modern, user-friendly CGPA calculator designed for university students worldwide. Built with Next.js 15, TypeScript, Tailwind CSS, and React Hot Toast for a smooth, responsive, and interactive experience.

• Multi-semester management - Add unlimited semesters and courses
• Real-time CGPA calculation - Automatic updates as you enter grades
• Weighted calculations - Proper credit hour weighting for accurate results
• Individual semester GPA - Track performance for each term

• Performance indicators - Visual feedback on academic standing
• Credit hour tracking - Monitor total completed credits with flexible increments (0.25 steps)
• Progress visualization - Real-time CGPA display
• Academic status - Clear indication of graduation eligibility

• Local storage - Your data is automatically saved and persists between sessions
• Smart confirmation dialogs - Beautiful toast notifications for data operations
• Clear data option - Modern confirmation system with React Hot Toast

• Responsive design - Works perfectly on desktop, tablet, and mobile
• Dark mode support - Easy on the eyes with automatic theme detection
• Smooth animations - Beautiful transitions and hover effects
• Glass morphism effects - Modern, translucent design elements

• University-standard grades - Common grading scale used by most universities
• Grade point ranges - Clear mapping from marks to grade points
• Performance categories - Understand what each grade means

• Toast notifications - Beautiful, non-intrusive alerts using React Hot Toast
• Confirmation dialogs - Elegant confirmation system for critical actions
• Success feedback - Visual confirmation for completed actions

• Node.js 18+
• npm or yarn

1. Clone the repository

   git clone https://github.com/your-username/cgpa-calculator.git
   cd cgpa-calculator

2. Install dependencies

   npm install
   # or
   yarn install

3. Run the development server

   npm run dev
   # or
   yarn dev

4. Open your browser Navigate to http://localhost:3000

npm run build
npm start

1. Click "Add New Semester" to create a new academic term
2. Each semester starts with a default name (can be customized)
3. Delete semesters using the trash icon (minimum 1 semester required)

1. Within each semester, click "Add Course" or "Add First Course"
2. Fill in the course details:
   • Course Name: Enter the full course name
   • Credits: Course credit hours (0.25 to 6.0 in 0.25 increments)
   • Grade: Select from the dropdown menu
3. Grade points are calculated automatically
4. View real-time CGPA updates next to the "Add Course" button

• Current CGPA: Displayed prominently at the top
• Total Credits: Sum of all completed course credits
• Academic Progress: Visual indicators of performance level
• Semester GPA: Individual GPA for each term

• All data is automatically saved to your browser's local storage
• Data persists between browser sessions
• Use "Clear All Data" to reset with beautiful confirmation dialog
• Toast notifications provide feedback for all data operations

• Framework: Next.js 15 with Turbopack
• Language: TypeScript
• Styling: Tailwind CSS v4
• UI Components: React Hot Toast for notifications
• State Management: React Hooks (useState, useEffect, useCallback)
• Storage: Browser Local Storage
• Icons: Heroicons (SVG)
• Fonts: Inter, Geist Sans, Geist Mono

cgpa-calculator/
├── src/
│   ├── app/
│   │   ├── globals.css          # Global styles and animations
│   │   ├── layout.tsx           # Root layout with metadata
│   │   └── page.tsx             # Main calculator component
│   └── components/
│       └── CGPASummaryCard.tsx  # Summary display component
├── public/                      # Static assets
├── package.json
└── README.md

CGPA = Σ(Grade Point × Credit Hours) / Σ(Credit Hours)

• Supports increments of 0.25 credits
• Examples: 0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0, etc.
• Perfect for universities with fractional credit systems

• Confirmation dialogs: Elegant toast-based confirmations for critical actions
• Success notifications: Visual feedback for completed operations
• Warning alerts: Clear warnings with action buttons
• Auto-dismiss: Smart timing for different notification types

If you have:

• Course A: Grade A (3.75 points) × 3 credits = 11.25
• Course B: Grade B+ (3.25 points) × 4 credits = 13.00
• Total: 24.25 points ÷ 7 credits = 3.46 CGPA

• Excellent: 3.75-4.00 CGPA (Green indicator)
• Very Good: 3.00-3.74 CGPA (Blue indicator)
• Satisfactory: 2.00-2.99 CGPA (Yellow indicator)
• Need Improvement: Below 2.00 CGPA (Red indicator)

• Glass morphism effects with backdrop blur
• Gradient backgrounds for modern appeal
• Smooth transitions for all interactive elements
• Custom scrollbars for better aesthetics
• Responsive grid layouts for all screen sizes

• High contrast colors for readability
• Clear typography with optimal font sizes
• Keyboard navigation support
• Screen reader friendly structure

Update the university name and details in:

• src/app/layout.tsx (metadata)
• src/app/page.tsx (header and footer)

Edit the gradeOptions array in src/app/page.tsx:

const gradeOptions = [
  { grade: "A+", point: 4.0, range: "80-100" },
  // Add or modify grades as needed
];

Modify credit input constraints in the course input section:

min = "0.25"; // Minimum credit value
max = "6"; // Maximum credit value
step = "0.25"; // Credit increment steps

Customize toast behavior in the clearAllData function:

toast.success("Message", {
  duration: 3000, // Display duration
  position: "top-center", // Position on screen
  icon: "🗑️", // Custom icon
});

• ✅ Chrome 80+
• ✅ Firefox 75+
• ✅ Safari 13+
• ✅ Edge 80+

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

This project is licensed under the MIT License - see the LICENSE file for details.

Built with ❤️ for university students worldwide.

• 📧 Email: sohan75632@gmail.com
• 🌐 GitHub: sohan-99

• Next.js team for the amazing framework
• Tailwind CSS for the utility-first styling approach
• React Hot Toast for beautiful notification system
• University students worldwide who inspired this project

Made for students, by developers who care about education 🎓✨