Student-management-system

Student Management System

A full-stack student management application built with Node.js, Express, MySQL, and React.

📁 Project Structure

TSA/
├── backend/                 # Node.js + Express API
│   ├── config/             # Database configuration
│   ├── controllers/        # Route controllers
│   ├── database/           # SQL schema
│   ├── routes/             # API routes
│   ├── server.js           # Entry point
│   └── package.json
│
├── frontend/               # React Application
│   ├── public/             # Static files
│   ├── src/
│   │   ├── components/     # React components
│   │   ├── services/       # API service
│   │   ├── App.js          # Main component
│   │   └── index.js        # Entry point
│   └── package.json
│
└── README.md

🚀 Quick Start

Prerequisites

• Node.js (v14 or higher)
• MySQL Server
• npm or yarn

1. Setup Database

# Login to MySQL
mysql -u root -p

# Run the schema (creates database and table)
source /path/to/TSA/backend/database/schema.sql

Or manually run:

CREATE DATABASE IF NOT EXISTS student_management;
USE student_management;

CREATE TABLE IF NOT EXISTS students (
    id INT AUTO_INCREMENT PRIMARY KEY,
    first_name VARCHAR(50) NOT NULL,
    last_name VARCHAR(50) NOT NULL,
    email VARCHAR(100) NOT NULL UNIQUE,
    age INT,
    course VARCHAR(100),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

2. Configure Backend

cd backend

# Install dependencies
npm install

# Update .env file with your MySQL credentials
# Edit .env and set DB_PASSWORD to your MySQL password

# Start the server
npm run dev

Backend runs on: http://localhost:5000

3. Start Frontend

cd frontend

# Install dependencies
npm install

# Start React app
npm start

Frontend runs on: http://localhost:3000

🔧 API Endpoints

📋 Features

• ✅ Add new students
• ✅ View list of all students
• ✅ Delete students
• ✅ Form validation
• ✅ Responsive design
• ✅ Real-time feedback messages

🛠️ Technologies Used

Backend

• Node.js
• Express.js
• MySQL (mysql2)
• CORS
• dotenv

Frontend

• React 18
• Axios
• CSS3

📸 Screenshots

Once running, the application provides:

• A header with the title "Student Management System"
• A form to add new students (first name, last name, email, age, course)
• A table displaying all students with delete functionality

👨‍💻 Author

Tanzanite Skills Academy - Full-Stack JavaScript Developer Task