🎓 Elite College Management System

A premium, full-stack college management system with modern glassmorphism UI and comprehensive backend functionality.

✨ Features

Student Features

• ✅ Secure authentication (signup/login)
• ✅ Personal dashboard with statistics
• ✅ View enrolled courses
• ✅ Check timetable
• ✅ Pay fees online
• ✅ View payment history
• ✅ Check results and grades
• ✅ Track attendance
• ✅ Receive notifications
• ✅ Update profile

Admin Features

• ✅ Manage students (Add/Edit/Delete)
• ✅ Manage courses
• ✅ Manage fees
• ✅ View reports
• ✅ Manage timetable
• ✅ Post announcements
• ✅ View analytics

🚀 Tech Stack

Frontend

• HTML5
• CSS3 (Glassmorphism Design)
• Bootstrap 5
• Vanilla JavaScript
• Premium UI/UX

Backend

• Node.js
• Express.js
• MySQL
• JWT Authentication
• bcrypt (Password Hashing)

Security

• Helmet (Security headers)
• CORS
• Rate Limiting
• SQL Injection Prevention
• XSS Protection

📁 Project Structure

college-management/
│
├── frontend/
│   ├── css/
│   │   ├── style.css          # Main styles
│   │   ├── auth.css           # Authentication pages
│   │   └── dashboard.css      # Dashboard styles
│   ├── js/
│   │   ├── main.js            # Core JavaScript
│   │   └── auth.js            # Authentication logic
│   ├── pages/
│   │   ├── login.html
│   │   ├── signup.html
│   │   ├── dashboard.html
│   │   ├── courses.html
│   │   ├── fees.html
│   │   ├── timetable.html
│   │   ├── profile.html
│   │   └── admin.html
│   └── index.html             # Homepage
│
├── backend/
│   ├── routes/
│   ├── controllers/
│   ├── models/
│   ├── middleware/
│   ├── config/
│   └── server.js              # Main server file
│
├── database.sql               # Database schema + sample data
├── package.json
├── .env.example
└── README.md

🛠️ Installation & Setup

Prerequisites

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

Step 1: Clone the Repository

git clone <repository-url>
cd college-management

Step 2: Install Dependencies

npm install

Step 3: Database Setup

1. Create the database:

mysql -u root -p

2. Import the schema:

mysql -u root -p < database.sql

Or manually:

• Open MySQL Workbench or phpMyAdmin
• Create database: college_management
• Import database.sql file

Step 4: Environment Configuration

1. Copy .env.example to .env:

cp .env.example .env

2. Edit .env file with your settings:

PORT=5000
DB_HOST=localhost
DB_USER=root
DB_PASSWORD=your_mysql_password
DB_NAME=college_management
JWT_SECRET=your-super-secret-key

Step 5: Start the Backend Server

npm start

Or for development with auto-reload:

npm run dev

Server will run on: http://localhost:5000

Step 6: Start the Frontend

Option 1: Using Live Server (VS Code)

1. Install "Live Server" extension
2. Right-click on frontend/index.html
3. Select "Open with Live Server"

Option 2: Using Python

cd frontend
python -m http.server 3000

Option 3: Using Node.js http-server

npm install -g http-server
cd frontend
http-server -p 3000

Frontend will run on: http://localhost:3000

🔑 Default Login Credentials

Admin Account

• Email: admin@elitecollege.edu
• Password: admin123

Student Accounts

• Email: john.doe@student.edu

• Password: student123

• Email: jane.smith@student.edu

• Password: student123

⚠️ Note: Change these passwords in production!

📊 Database Schema

The system includes the following tables:

1. users - Authentication data
2. students - Student information
3. courses - Course catalog
4. enrollments - Student course enrollments
5. fees - Fee structure
6. payments - Payment records
7. timetable - Class schedules
8. results - Exam results and grades
9. notifications - System announcements
10. attendance - Attendance tracking

🔐 API Endpoints

Authentication

• POST /api/auth/signup - Student registration
• POST /api/auth/login - User login

Student Routes (Protected)

• GET /api/students/profile - Get student profile
• PUT /api/students/profile - Update profile

Course Routes

• GET /api/courses - Get all courses
• GET /api/courses/enrolled - Get enrolled courses
• POST /api/courses/enroll - Enroll in course

Fee Routes

• GET /api/fees - Get student fees
• GET /api/fees/payments - Get payment history
• POST /api/fees/pay - Process payment

Timetable Routes

• GET /api/timetable - Get student timetable

Results Routes

• GET /api/results - Get student results

Admin Routes (Protected + Admin Only)

• GET /api/admin/students - Get all students
• POST /api/admin/students - Add student
• PUT /api/admin/students/:id - Update student
• DELETE /api/admin/students/:id - Delete student
• POST /api/admin/courses - Add course

🎨 Design Features

• Glassmorphism UI - Modern transparent glass effect
• Gradient Backgrounds - Beautiful gradient color schemes
• Smooth Animations - Engaging micro-interactions
• Responsive Design - Mobile, tablet, and desktop friendly
• Premium Typography - Playfair Display + Inter fonts
• Icon Library - Bootstrap Icons
• Counter Animations - Animated statistics
• Scroll Effects - Fade-in and slide animations

🔒 Security Features

• Password hashing with bcrypt
• JWT token-based authentication
• Protected API routes
• Role-based access control (RBAC)
• SQL injection prevention
• XSS protection
• CORS configuration
• Rate limiting
• Helmet security headers
• Input validation

🚀 Deployment

Backend Deployment (Heroku/Railway/DigitalOcean)

1. Set environment variables on your hosting platform
2. Deploy the backend folder
3. Ensure MySQL database is accessible

Frontend Deployment (Netlify/Vercel/GitHub Pages)

1. Update API_URL in frontend/js/main.js to your backend URL
2. Deploy the frontend folder
3. Configure CORS on backend to allow your frontend domain

Database Deployment

• Use managed MySQL service (AWS RDS, Google Cloud SQL, etc.)
• Or use your hosting provider's MySQL service

📝 Sample Data

The database includes sample data:

• 5 student accounts
• 10 courses
• Enrollment records
• Fee records
• Payment history
• Timetable entries
• Results
• Notifications

🐛 Troubleshooting

Database Connection Error

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

CORS Error

• Check cors() configuration in server.js
• Ensure frontend URL is allowed

Port Already in Use

• Change PORT in .env file
• Or kill the process using that port

Cannot Login

• Verify database has user records
• Check password hashing is working
• Ensure JWT_SECRET is set

📞 Support

For issues and questions:

• Check the troubleshooting section
• Review the code comments
• Contact: support@elitecollege.edu

📄 License

MIT License - Feel free to use this for educational purposes.

👨‍💻 Developer Notes

To Add New Features:

1. Create new route in server.js
2. Add corresponding HTML page
3. Implement frontend JavaScript
4. Update database schema if needed

Code Standards:

• Use async/await for database operations
• Always validate user input
• Include error handling
• Add comments for complex logic
• Follow RESTful API conventions

---

Built with ❤️ for Educational Excellence