School Management System

A comprehensive full-stack web application designed to streamline school administration and management. This platform allows users to register, authenticate, and manage school information efficiently, including detailed profiles and image uploads.

Features

• User Authentication: Secure registration, login, and logout functionality with password hashing
• School Registration: Add new schools with comprehensive details including name, address, contact information, and image uploads
• School Directory: View all registered schools with their details and uploaded images
• Responsive Design: Mobile-friendly interface built with Bootstrap
• File Upload: Support for school image uploads using Multer
• RESTful API: Well-structured backend API for all operations
• Database Integration: MySQL database with proper schema design

Tech Stack

Frontend

• React - Component-based UI library
• React Router - Client-side routing
• Bootstrap - Responsive CSS framework
• Axios - HTTP client for API requests
• React Hook Form - Form handling and validation

Backend

• Node.js - JavaScript runtime
• Express.js - Web application framework
• MySQL2 - MySQL database driver
• bcryptjs - Password hashing
• Multer - File upload middleware
• CORS - Cross-origin resource sharing

Development Tools

• Vite - Fast build tool and development server
• ESLint - Code linting
• npm - Package management

Prerequisites

Before running this application, make sure you have the following installed:

• Node.js (version 16 or higher)
• MySQL (version 8.0 or higher)
• npm or yarn package manager

Installation

1. Clone the repository:

   git clone <repository-url>
   cd school-management

2. Install dependencies:

   npm install

3. Set up environment variables: Create a .env file in the root directory and configure your database connection:

   DB_HOST=localhost
   DB_USER=your_mysql_username
   DB_PASSWORD=your_mysql_password
   DB_NAME=schoolDB
   

Database Setup

1. Create the database: Log into your MySQL shell and run:

   CREATE DATABASE IF NOT EXISTS schoolDB;

2. Run the database schema: Execute the SQL commands from database.sql in your MySQL client or run:

   mysql -u your_username -p schoolDB < database.sql

   This will create the necessary tables:

   • users - Stores user account information
   • schools - Stores school details and image references

Usage

1. Start the development server:

   npm run dev

   This will start the Vite development server on http://localhost:5173

2. Start the backend server: In a separate terminal:

   node server.js

   The backend will run on http://localhost:3001

3. Access the application: Open your browser and navigate to http://localhost:5173

Application Workflow

1. Register/Login: Create an account or log in with existing credentials
2. Dashboard: Access the main dashboard with quick actions
3. Add School: Fill out the school registration form with required details and upload an image
4. View Schools: Browse all registered schools with their information and images

API Endpoints

Authentication

• POST /api/register - Register a new user
  • Body: { username, email, password }
• POST /api/login - User login
  • Body: { username, password }
• POST /api/logout - User logout

Schools Management

• POST /api/addSchool - Add a new school (requires authentication)
  • Form data: name, address, city, state, contact, email_id, image
• GET /api/getSchools - Retrieve all schools (requires authentication)
  • Returns: Array of school objects with image URLs

External API

• GET /api/purchase-orders - Fetch sample data from JSONPlaceholder API

Project Structure

school-management/
├── public/
│   └── schoolImages/          # Uploaded school images
├── src/
│   ├── components/            # React components
│   │   ├── AddSchool.jsx      # School registration form
│   │   ├── ShowSchools.jsx    # Schools listing page
│   │   ├── Login.jsx          # User login form
│   │   ├── Register.jsx       # User registration form
│   │   ├── Home.jsx           # Landing/dashboard page
│   │   ├── Navigation.jsx     # Navigation bar
│   │   ├── About.jsx          # About page
│   │   └── Footer.jsx         # Footer component
│   ├── App.jsx                # Main app component
│   ├── main.jsx               # React entry point
│   └── index.css              # Global styles
├── lib/
│   └── db.js                  # Database connection utilities
├── server.js                  # Express server
├── database.sql               # Database schema
├── package.json               # Project dependencies
├── vite.config.js             # Vite configuration
└── README.md                  # Project documentation

Contributing

1. Fork the repository
2. Create a 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

License

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

Support

For support or questions, please open an issue in the repository or contact the development team.

---

Note: This application is for educational and demonstration purposes. Ensure proper security measures are implemented before deploying to production.