StudentPro — Student Management System

A full-stack student management application built with a Go (Gin) backend and a Next.js frontend. Educators and administrators can manage student profiles, track academic performance, add subject marks, and view analytics.

---

Table of Contents

• Tech Stack
• Architecture
• Project Structure
• Getting Started
  • Prerequisites
  • Running Locally
• API Reference
• Frontend Overview
• Data Models
• Development Workflow

---

Tech Stack

Backend

Layer	Technology
Language	Go
HTTP Framework	Gin
ORM	GORM
HTTP Logger	Gin middleware for structured logging

Frontend

Layer	Technology
Framework	Next.js 14+ (App Router)
Language	TypeScript
Styling	Tailwind CSS
UI Components	Radix UI + shadcn/ui
Charts	Recharts
Forms	React Hook Form + Zod
Icons	Lucide React

---

Architecture

┌─────────────────────────────────────────────────────────┐
│                     Next.js Frontend                    │
│                                                         │
│  App Router pages  →  Client Components  →  Fetch API   │
│  (app/(dashboard))    (components/)                     │
│                              │                          │
└──────────────────────────────┬──────────────────────────┘
                               │ HTTP / JSON
                               ▼
┌─────────────────────────────────────────────────────────┐
│                      Go API Server                      │
│                                                         │
│  Gin Router  →  Handlers  →  Services  →  Repositories  │
│  (cmd/server)  (internal/)                              │
│                              │                          │
│                           GORM ORM                      │
└──────────────────────────────┬──────────────────────────┘
                               │
                               ▼
                            Database

The application uses a separated frontend and backend architecture. The frontend connects to the backend REST API to perform CRUD operations on students and their marks.

---

Project Structure

StudentManagement/
├── cmd/
│   └── server/
│       └── main.go              # Backend entry point
├── internal/
│   ├── handler/                 # HTTP handlers (e.g., StudentHandler, MarkHandler)
│   ├── middleware/              # Gin middlewares (e.g., logging)
│   └── ...                      # Models, routing, and DB connection
├── pkg/                         # Shared utilities
├── docker-compose.yml           # Local infrastructure
├── go.mod                       # Go dependencies
└── frontend/
    ├── app/                     # Next.js App Router pages
    │   ├── dashboard/           # Protected dashboard layout and pages
    │   │   ├── analytics/       # Analytics dashboard
    │   │   ├── students/        # Student list and details
    │   │   └── settings/        # App settings
    │   └── login/               # Authentication pages
    ├── components/              # Reusable UI components (shadcn/ui, StudentForm, etc)
    ├── lib/                     # Types, schemas, and API clients
    │   ├── schemas.ts           # Zod validation schemas
    │   └── types.ts             # TypeScript interfaces
    ├── package.json             # Node dependencies
    └── next.config.mjs

---

Getting Started

Prerequisites

• Go 1.21 or later
• Node.js 18 or later
• Database (PostgreSQL/SQLite as configured in your backend)

Running Locally

1. Start the Database If using Docker for your database, start it with Docker Compose:

docker compose up -d

2. Start the Backend

# From the repo root
go run ./cmd/server/main.go

The API server will start on http://localhost:8080.

3. Start the Frontend

cd frontend
npm install
npm run dev

The Next.js development server starts on http://localhost:3000.

---

API Reference

The backend API is accessible at http://localhost:8080/api.

Students

Method	Path	Description
GET	/api/students	List all students with pagination
POST	/api/students	Create a new student
GET	/api/students/:id	Get details for a specific student
PUT	/api/students/:id	Update a student
DELETE	/api/students/:id	Delete a student

POST /api/students

{
  "first_name": "Krishna",
  "last_name": "Thakur",
  "email": "krishna@test.com",
  "age": 22
}

Marks

Method	Path	Description
GET	/api/students/:id/marks	Get all marks for a student
POST	/api/students/:id/marks	Add a new subject mark to a student
PUT	/api/marks/:id	Update an existing mark
DELETE	/api/marks/:id	Delete a mark

POST /api/students/:id/marks

{
  "subject": "Mathematics",
  "marks": 92
}

---

Frontend Overview

The Next.js frontend uses Client Components ('use client') for pages heavily reliant on interactivity and data fetching.

Data fetching is handled using the native fetch API directly interacting with the Go backend. When receiving data from the Go API, which formats its JSON payload properties in PascalCase (e.g. FirstName, LastName), the frontend actively maps these properties into its native snake_case models (first_name, last_name) prior to updating React state to ensure unified form integrations and UI rendering.

Key Workflows

• Student Management: Admins can view paginated lists of students, add new students via modal dialogs, and edit details inline.
• Academic Tracking: Navigating to an individual student’s profile renders a comprehensive view containing Recharts-powered interactive graphs charting their subject marks and performance trend.
• Form Validation: All inputs are strictly checked against Zod schemas (lib/schemas.ts) before triggering API calls.

---

Data Models

Student

Field	Frontend Mapped Field	Type
ID	id	UUID/String
FirstName	first_name	string
LastName	last_name	string
Email	email	string
Age	age	integer

Mark

Field	Frontend Mapped Field	Type
ID	id	UUID/String
StudentID	student_id	UUID/String
Subject	subject	string
Marks	marks	integer
CreatedAt	-	timestamp

---

Development Workflow

# Backend — run directly
go run ./cmd/server/main.go

# Frontend — development server
cd frontend && npm run dev

# Frontend — production build
cd frontend && npm run build && npm start

Contributing

1. Fork the repository and create a feature branch from main.
2. Follow the existing code style — Go standard formatting (gofmt), TypeScript strict mode.
3. Keep mutations and their cache invalidation logic co-located in the relevant React Query hook file.
4. Open a pull request with a clear description of what changed and why.

Contact

X: https://x.com/i_krsna4

LinkedIn: https://www.linkedin.com/in/krishnathakur1/