School Management System

A comprehensive school directory management system built with Next.js, React Hook Form, and MySQL. This project allows users to add schools with detailed information and browse them in a responsive, ecommerce-style grid layout.

🚀 Features

• Add School Form: Complete form with validation using react-hook-form
• Image Upload: Upload and store school images with automatic file handling
• Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
• School Directory: Browse schools in a beautiful grid layout
• Form Validation: Email validation, phone number validation, and required field validation
• Modern UI: Clean, professional interface using Tailwind CSS

🛠️ Tech Stack

• Frontend: Next.js 14, React, Tailwind CSS
• Backend: Next.js API Routes
• Database: MySQL
• Form Handling: React Hook Form
• File Upload: Multer with Next.js
• Styling: Tailwind CSS

📋 Prerequisites

Before running this project, make sure you have:

• Node.js (version 14 or higher)
• MySQL database server
• npm or yarn package manager

🔧 Installation & Setup

1. Clone the repository

   git clone <your-repo-url>
   cd school-management

2. Install dependencies

   npm install

3. Set up the database

   • Create a MySQL database named school_management
   • Run the SQL schema from database/schema.sql:

   mysql -u your_username -p school_management < database/schema.sql

4. Configure environment variables

   • Copy .env.local and update the database credentials:

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

5. Run the development server

   npm run dev

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

📁 Project Structure

school-management/
├── src/
│   ├── app/
│   │   ├── addSchool/
│   │   │   └── page.js          # Add school form page
│   │   ├── showSchools/
│   │   │   └── page.js          # Display schools page
│   │   ├── api/
│   │   │   └── schools/
│   │   │       └── route.js     # API endpoints for schools
│   │   ├── globals.css          # Global styles
│   │   ├── layout.js            # App layout
│   │   └── page.js              # Home page
├── lib/
│   └── db.js                    # Database connection
├── public/
│   └── schoolImages/            # Uploaded school images
├── database/
│   └── schema.sql               # Database schema
├── .env.local                   # Environment variables
└── README.md

🎯 Pages

Home Page (/)

• Landing page with navigation to other features
• Overview of system capabilities
• Quick access buttons to add or view schools

Add School (/addSchool)

• Comprehensive form with the following fields:
  • School Name (required)
  • Address (required)
  • City (required)
  • State (required)
  • Contact Number (required, 10 digits)
  • Email Address (required, valid email format)
  • School Image (optional)
• Form validation using react-hook-form
• Image upload functionality
• Success/error messaging

Show Schools (/showSchools)

• Grid layout displaying all schools
• Each school card shows:
  • School image (or placeholder)
  • School name
  • Address
  • City and state
• Responsive design (1-4 columns based on screen size)
• Loading states and error handling

🔌 API Endpoints

POST /api/schools

Add a new school to the database.

Request Body (FormData):

• name: School name
• address: School address
• city: City
• state: State
• contact: Contact number
• email_id: Email address
• image: School image file (optional)

GET /api/schools

Retrieve all schools from the database.

Response: Array of school objects with all fields.

🎨 Design Features

• Responsive Grid: Adapts from 1 column (mobile) to 4 columns (desktop)
• Modern Cards: Clean card design with hover effects
• Form Validation: Real-time validation with error messages
• Loading States: Proper loading indicators
• Error Handling: User-friendly error messages
• Image Handling: Automatic placeholder for schools without images

📱 Responsive Breakpoints

• Mobile: 1 column grid (< 640px)
• Tablet: 2 columns grid (640px - 1024px)
• Desktop: 3 columns grid (1024px - 1280px)
• Large Desktop: 4 columns grid (> 1280px)

🚀 Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Add environment variables in Vercel dashboard
4. Deploy automatically

Other Platforms

• Netlify: Use for static deployment (API routes won't work)
• Railway: Good for full-stack deployment with database
• Heroku: Traditional deployment option

🔐 Environment Variables

# Database Configuration
DB_HOST=your_database_host
DB_USER=your_database_username
DB_PASSWORD=your_database_password
DB_NAME=school_management

# Next.js Configuration
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-secret-key

🧪 Testing

To test the application:

1. Add a school:

   • Go to /addSchool
   • Fill out the form with valid data
   • Upload an image (optional)
   • Submit the form

2. View schools:

   • Go to /showSchools
   • Verify the school appears in the grid
   • Check responsive behavior on different screen sizes

🤝 Contributing

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

📄 License

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

🆘 Troubleshooting

Common Issues

1. Database Connection Error

   • Verify MySQL is running
   • Check database credentials in .env.local
   • Ensure database exists

2. Image Upload Issues

   • Check if public/schoolImages directory exists
   • Verify file permissions
   • Ensure file size is reasonable

3. Build Errors

   • Run npm install to ensure all dependencies are installed
   • Check for any TypeScript/JavaScript syntax errors

📞 Support

If you encounter any issues or have questions, please:

1. Check the troubleshooting section above
2. Review the GitHub issues
3. Create a new issue with detailed information

---