A comprehensive web application for managing class activities, assignments, seminars, and more. Built with Next.js, TypeScript, Tailwind CSS, and Supabase.
- Secure Login: Authentication using registration number and password
- Dashboard Overview: View all upcoming assignments, seminars, and important dates
- Seminars: Browse and register for upcoming seminars and events
- Assignments: Track assignment due dates and requirements
- Homework: Access homework assignments and related materials
- Tests: View test schedules and syllabi
- Notes: Access study notes and materials
- To-dos: Personal task management
- Admin Dashboard: Comprehensive overview of system statistics
- User Management: Add, edit, and manage student accounts
- Content Management: Create and manage seminars, assignments, tests, and homework
- System Settings: Configure application settings and database connections
- Analytics: View system usage and user engagement metrics
- Dual Authentication: Separate login systems for students and admins
- JWT Token-based Authentication: Secure session management
- Role-based Access Control: Different permissions for students and admins
- Password Hashing: Bcrypt encryption for secure password storage
- Protected Routes: Middleware-based route protection
- Mobile-First: Optimized for mobile devices
- Tablet Support: Perfect layout for tablet viewing
- Desktop Responsive: Full-featured desktop experience
- Modern UI: Clean, intuitive interface using Tailwind CSS
- Frontend: Next.js 15, React 19, TypeScript
- Styling: Tailwind CSS 4
- Database: Supabase (PostgreSQL)
- Authentication: Custom JWT implementation
- Icons: Lucide React
- Animations: Framer Motion
Before you begin, ensure you have the following installed:
- Node.js (version 18 or higher)
- npm or yarn
- Supabase account (for database)
```bash git clone cd class-management-system ```
```bash npm install ```
-
Create a Supabase Project:
- Go to supabase.com
- Create a new project
- Note down your project URL and anon key
-
Run Database Setup:
- Open the Supabase SQL Editor
- Copy and paste the contents of `database/setup.sql`
- Execute the script to create all tables and sample data
Create a `.env.local` file in the root directory and add:
```env
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key
ADMIN_PASSKEY=admin123
JWT_SECRET=your_jwt_secret_key_here ```
Important: Replace the placeholder values with your actual Supabase credentials and choose a strong JWT secret.
```bash npm run dev ```
Open http://localhost:3000 to view the application.
After running the database setup script, you can use these default credentials:
- Passkey: `admin123`
- Registration Number: `STU001`, `STU002`, or `STU003`
- Password: `admin123` (for demo purposes)
``` class-management-system/ ├── src/ │ ├── app/ # Next.js app directory │ │ ├── api/ # API routes │ │ │ └── auth/ # Authentication endpoints │ │ ├── dashboard/ # Student dashboard │ │ ├── admin/ # Admin dashboard │ │ ├── layout.tsx # Root layout │ │ └── page.tsx # Home/login page │ ├── components/ # Reusable components │ │ └── auth/ # Authentication components │ ├── contexts/ # React contexts │ │ └── AuthContext.tsx # Authentication context │ └── lib/ # Utility functions │ ├── auth.ts # Authentication utilities │ └── supabase.ts # Supabase client ├── database/ │ └── setup.sql # Database setup script ├── middleware.ts # Route protection middleware └── package.json ```
- `POST /api/auth/student` - Student authentication
- `POST /api/auth/admin` - Admin authentication
- `POST /api/auth/logout` - Logout
- `GET /api/auth/me` - Get current user info
The application uses the following main tables:
- users - Student and admin accounts
- seminars - Seminar information and scheduling
- assignments - Assignment details and due dates
- homework - Homework assignments
- tests - Test schedules and information
- todos - Task management
- notes - Study notes and materials
- syllabus - Course syllabi
- Create new database tables in Supabase
- Update the TypeScript interfaces in `src/lib/supabase.ts`
- Add new API routes in `src/app/api/`
- Create new components and pages as needed
- Modify Tailwind classes in components
- Add custom CSS in `src/app/globals.css`
- Configure Tailwind in `tailwind.config.js`
- Modify auth logic in `src/lib/auth.ts`
- Update middleware rules in `middleware.ts`
- Customize login forms in `src/components/auth/`
- Push your code to GitHub
- Connect your repository to Vercel
- Add environment variables in Vercel dashboard
- Deploy automatically
The application can be deployed on any platform that supports Next.js:
- Netlify
- Railway
- DigitalOcean App Platform
- AWS Amplify
- Environment Variables: Never commit `.env` files to version control
- JWT Secret: Use a strong, random JWT secret in production
- Admin Passkey: Change the default admin passkey before deployment
- HTTPS: Always use HTTPS in production
- CORS: Configure CORS properly for your domain
- Fork the repository
- Create a feature branch (`git checkout -b feature/amazing-feature`)
- Commit your changes (`git commit -m 'Add some amazing feature'`)
- Push to the branch (`git push origin feature/amazing-feature`)
- Open a Pull Request
If you encounter any issues or have questions:
- Check the Issues page
- Create a new issue with detailed information
- Include steps to reproduce any bugs
This project is licensed under the MIT License - see the LICENSE file for details.
- Next.js for the amazing React framework
- Supabase for the backend-as-a-service platform
- Tailwind CSS for the utility-first CSS framework
- Lucide for the beautiful icons