SETUP_GUIDE.md

Class Management System - Quick Setup Guide

🚀 Your Website is Ready!

I've created a comprehensive class management system with dual login functionality exactly as you requested. Here's what you have:

✅ What's Included

1. Dual Login System:

   • Students login with registration number + password
   • Admin login with passkey only

2. Responsive Design:

   • Mobile-first approach
   • Perfect for both mobile and desktop
   • Modern, clean UI with Tailwind CSS

3. Complete Feature Set:

   • Student dashboard with overview, seminars, assignments, homework, tests, notes, todos
   • Admin dashboard with user management and content management
   • Real-time data from Supabase database
   • Secure authentication with JWT tokens

🛠️ Setup Instructions

Step 1: Supabase Database Setup

1. Create Supabase Account:

   • Go to supabase.com
   • Sign up for a free account
   • Create a new project

2. Set Up Database:

   • In your Supabase dashboard, go to "SQL Editor"
   • Copy the entire content from database/setup.sql
   • Paste and execute it
   • This creates all tables and sample data

3. Get Your Credentials:

   • Go to Settings > API
   • Copy your Project URL and anon/public key

Step 2: Configure Environment Variables

1. Update .env file:

   # Replace with your actual Supabase credentials
   NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
   NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key_here
   SUPABASE_SERVICE_ROLE_KEY=your_service_role_key_here
   
   # Change this to something secure
   ADMIN_PASSKEY=your_secure_admin_passkey
   
   # Generate a strong random string
   JWT_SECRET=your_very_secure_jwt_secret_here

Step 3: Install and Run

1. Install Dependencies:

   npm install

2. Start Development Server:

   npm run dev

3. Open in Browser:

   • Navigate to http://localhost:3000
   • You should see the login page

🔑 Default Login Credentials

After running the database setup, you can use these credentials:

Admin Login

• Passkey: admin123 (or whatever you set in .env)

Student Login

• Registration Number: STU001, STU002, or STU003
• Password: admin123

📱 Features Overview

Student Features:

• Dashboard: Overview of all activities
• Seminars: View and register for events
• Assignments: Track due dates and requirements
• Homework: Access homework assignments
• Tests: View test schedules and syllabi
• Notes: Study materials and notes
• To-dos: Personal task management

Admin Features:

• User Management: Add, edit, delete students
• Content Management: Create seminars, assignments, tests
• System Settings: Configure application settings
• Analytics: View system statistics

🔒 Security Features

• Role-based access control
• JWT token authentication
• Password hashing with bcrypt
• Protected API routes
• Middleware-based route protection

📱 Mobile Responsive

The entire application is built mobile-first:

• ✅ Responsive navigation
• ✅ Touch-friendly interface
• ✅ Optimized for all screen sizes
• ✅ Fast loading on mobile networks

🎨 Technology Stack

• Frontend: Next.js 15, React 19, TypeScript
• Database: Supabase (PostgreSQL)
• Styling: Tailwind CSS 4
• Authentication: Custom JWT implementation
• Icons: Lucide React

🚀 Deployment

Option 1: Vercel (Recommended)

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

Option 2: Other Platforms

• Netlify
• Railway
• DigitalOcean App Platform

📞 Support

If you need help:

1. Check the main README.md for detailed documentation
2. Ensure all environment variables are set correctly
3. Verify Supabase database is set up properly
4. Check the browser console for any errors

🎯 Next Steps

1. Customize the Design: Modify colors, layouts in the components
2. Add More Features: Create new sections as needed
3. Set Up Production: Deploy to a hosting platform
4. Configure Domain: Point your domain to the deployed app

Your class management system is now ready to use! 🎉