Technical Design Document: GPA Calculator

Architecture

• Frontend: Next.js (React) for UI, JavaScript for logic.
• Storage: LocalStorage for client-side data.
• Styling: Plain CSS for responsive design.
• Hosting: Vercel for deployment and CI/CD.

Components

• Form: Inputs for course name, grade, credits.
• Calculation: Computes GPA (A=4.0, etc.).
• History: Displays saved courses.

Technology Choices

• Next.js: Easy React setup, Vercel integration.
• CSS: Familiar to developer, simple styling.
• LocalStorage: No backend, low cost.
• Vercel: Free, scalable hosting.
• Justification: Scalable (CDN), maintainable (modular code), cost-free.

Infrastructure

• Vercel: Auto-configured via GitHub integration.
• Settings: Framework (Next.js), Build (npm run build), Install (npm install).

Security

• Client-side validation prevents invalid inputs (e.g., negative credits).
• No sensitive data stored (course names/grades only).
• HTTPS via Vercel ensures secure access.

Compliance

• No user data collected, no GDPR/PCI concerns.
• LocalStorage is device-specific, privacy-compliant.