🎓 ClassRep

ClassRep is a comprehensive education platform designed to streamline classroom management, communication, and resource allocation for students and class representatives (CRs) in educational institutions.

🌟 Features

👤 Authentication & User Management

Email/Password Authentication with secure password hashing
Google OAuth Integration for seamless sign-in
Email Verification system with automatic link generation
Password Reset functionality with secure token-based recovery
Automatic CR Label Assignment - Students matching CR database entries are automatically assigned CR roles
Role-Based Access Control (Student/CR/Admin permissions)

📢 Announcement System

Course-Based Channels - Dedicated communication channels for each course
Join Request Management - Students can request to join channels, CRs approve/reject
Real-Time Announcements - CRs can post announcements to their channels
File Attachments - Support for sharing files with announcements (coming soon)
Channel Administration - CRs can manage their course channels
Multi-Section Support - Channels organized by section and department

🏫 Classroom Management

Empty Room Finder - Real-time detection of available classrooms/labs
Gender-Specific Schedules - Automatic schedule detection based on user section
Building Selection - Filter rooms by building (Main, Annex, etc.)
Room Booking System (CR Only) - CRs can book empty rooms for their sections
My Bookings (CR Only) - View and manage booked classrooms
Time Slot Management - Period-based room availability checking

📅 Academic Tools

Class Routine Viewer - Display weekly class schedules
Teacher Information - Access teacher contact details and office hours
Section-Based Content - Personalized content based on user's section and department
Course Management - Organized by course codes and departments

🎨 User Experience

Dark/Light Theme Toggle - Seamless theme switching with persistence
Responsive Design - Mobile-first approach, works on all devices
Modern UI Components - Built with Radix UI primitives
Smooth Animations - Framer Motion & GSAP for delightful interactions
Sidebar Navigation - Collapsible sidebar with dynamic menu items
Breadcrumb Navigation - Clear navigation hierarchy

🚀 Tech Stack

Frontend

Framework: Next.js 16 with App Router
UI Library: React 19
Styling: Tailwind CSS 4.1
UI Components: Radix UI (comprehensive primitive library)
Icons: Lucide React
Animations:
- Framer Motion
- GSAP React
- Lenis for smooth scrolling
Form Handling: React Hook Form with Zod validation
Charts: Recharts

Backend

BaaS: Appwrite (Client & Server SDKs)
- Authentication (Email/Password, OAuth)
- Database (TablesDB)
- Storage
- Functions
- Real-time subscriptions

Developer Tools

Language: TypeScript 5
Package Manager: npm
Linting: ESLint
Build Tool: Next.js built-in compiler

📦 Installation

Prerequisites

Node.js 18+ and npm
An Appwrite instance (Cloud or Self-hosted)
Appwrite project with configured database and tables

1. Clone the Repository

git clone https://github.com/yourusername/classrep.git
cd classrep

2. Install Dependencies

npm install

3. Environment Setup

Create a .env.local file in the root directory:

# Appwrite Configuration (Public)
NEXT_PUBLIC_ENDPOINT=https://fra.cloud.appwrite.io/v1
NEXT_PUBLIC_PROJECTID=your_project_id
NEXT_PUBLIC_DATABASE_ID=your_database_id
NEXT_PUBLIC_STUDENTS=students
NEXT_PUBLIC_CLASS_ROOMS=class_rooms
NEXT_PUBLIC_LAB_ROOMS=lab_rooms
NEXT_PUBLIC_MALE_TEACHERS=male_teachers
NEXT_PUBLIC_FEMALE_TEACHERS=female_teachers
NEXT_PUBLIC_MALE_CR=male_cr
NEXT_PUBLIC_FEMALE_CR=female_cr
NEXT_PUBLIC_ROUTINE_TABLE=routine

# Appwrite Server-Side API Key (Secret - NEVER commit)
# Required for API routes: assign-cr-label and leave-channel
# Get this from Appwrite Console: Settings > API Keys
# Ensure the key has Users.read, Users.write, and Databases permissions
APPWRITE_API_KEY=your_appwrite_api_key_here

4. Appwrite Database Setup

Create the following tables in your Appwrite database:

Tables

students - User profile data
- name (string)
- section (string) - Format: 5FM (Semester + Section + Gender)
- dept (string)
- studentID (string)
class_rooms - Classroom data
lab_rooms - Laboratory data
male_teachers & female_teachers - Teacher information
male_cr & female_cr - CR registry for auto-labeling
routine - Class schedule data
channels - Announcement channels
join_request - Channel join requests
joined_channels - User-channel memberships
announcements - Channel announcements

User Labels

Configure the following labels in Appwrite Users:

MCR - Male Class Representative
FCR - Female Class Representative
MACR - Male Assistant Class Representative
FACR - Female Assistant Class Representative

5. Run the Development Server

npm run dev

Visit http://localhost:3000

6. Build for Production

npm run build
npm start

📁 Project Structure

ClassRep/
├── app/                          # Next.js App Router
│   ├── dashboard/                # Main dashboard page
│   ├── login/                    # Login page
│   ├── sign-up/                  # Registration page
│   ├── forgot-password/          # Password reset request
│   ├── reset-password/           # Password reset confirmation
│   ├── verify-email/             # Email verification
│   ├── oauth/callback/           # OAuth callback handler
│   ├── api/                      # API Routes
│   │   ├── assign-cr-label/      # CR label assignment API
│   │   └── leave-channel/        # Leave channel API
│   ├── layout.jsx                # Root layout with providers
│   ├── page.jsx                  # Landing page
│   └── globals.css               # Global styles
│
├── components/
│   ├── Announcement/             # Announcement system
│   │   ├── ChannelChat.jsx       # Channel messaging interface
│   │   ├── ChannelsList.jsx      # Available channels list
│   │   └── JoinRequestManager.jsx # CR join request management
│   ├── Classroom/                # Classroom features
│   │   ├── EmptyRoomFinder.jsx   # Find empty rooms
│   │   ├── MyBookings.jsx        # CR booking management
│   │   ├── routine.jsx           # Class schedule viewer
│   │   ├── TeacherInfo.jsx       # Teacher directory
│   │   └── AddClassForm.jsx      # Add class utility
│   ├── Dashboard/                # Dashboard components
│   │   ├── app-sidebar.jsx       # Main navigation sidebar
│   │   ├── nav-main.jsx          # Primary navigation
│   │   ├── nav-secondary.jsx     # Secondary navigation
│   │   └── nav-user.jsx          # User profile menu
│   ├── auth/                     # Authentication forms
│   │   ├── login.jsx             # Login form component
│   │   └── sign-up.jsx           # Registration form
│   ├── landingPage/              # Marketing site components
│   │   ├── hero.jsx              # Hero section
│   │   ├── features.jsx          # Features showcase
│   │   ├── cta.jsx               # Call-to-action
│   │   └── testimonials.jsx      # User testimonials
│   ├── ui/                       # Reusable UI components (Radix UI)
│   ├── AnimatedComponents/       # Animation components
│   ├── background/               # Background effects
│   ├── AuthWrapper.jsx           # Auth state wrapper
│   └── theme-provider.tsx        # Theme context provider
│
├── appwrite/
│   ├── appwrite.js               # Appwrite client & functions
│   └── appwriteContext.js        # Global auth context
│
├── lib/
│   ├── crLabelUtils.js           # CR label assignment logic
│   ├── utils.ts                  # Utility functions
│   └── fonts.ts                  # Font configurations
│
├── hooks/                        # Custom React hooks
├── public/                       # Static assets
├── styles/                       # Additional styles
├── .env.local.example            # Environment template
├── components.json               # Shadcn UI config
├── next.config.mjs               # Next.js configuration
├── tailwind.config.js            # Tailwind configuration
├── tsconfig.json                 # TypeScript configuration
└── package.json                  # Dependencies & scripts

🔑 Key Features Explained

CR Label Auto-Assignment

When a user signs up or authenticates via OAuth, the system automatically:

Checks if their email matches an entry in the CR database tables
Assigns appropriate CR label (MCR, FCR, MACR, FACR) via Appwrite API
Updates user session to reflect new permissions
Grants access to CR-only features (room booking, join request management)

Implementation: lib/crLabelUtils.js + app/api/assign-cr-label/route.js

Channel System

Students: Browse available channels, request to join, view announcements
CRs: Create channels, approve/reject join requests, post announcements, manage members
Features: Course-based organization, section-specific content, admin controls

Room Booking System

CRs can:

Search for empty rooms by building, time slot, and room type
View real-time availability based on routine data
Book rooms for their section
View and manage their bookings
Gender-specific schedule handling (Male/Female timings)

Authentication Flow

User Sign Up
    ↓
Email Verification Sent
    ↓
User Clicks Verification Link
    ↓
Email Verified → Check CR Status
    ↓
Auto-Assign CR Label (if eligible)
    ↓
Redirect to Dashboard

🔐 Security Features

✅ Secure Password Storage - Handled by Appwrite
✅ Email Verification - Required before dashboard access
✅ Token-Based Password Reset - Secure recovery flow
✅ OAuth 2.0 - Google authentication
✅ API Key Protection - Server-side only API keys
✅ Role-Based Permissions - Appwrite permissions & labels
✅ Session Management - Secure HTTP-only cookies
✅ CSRF Protection - Built into Next.js

🎨 UI Components

All UI components are built using:

Radix UI Primitives - Accessible, unstyled components
Tailwind CSS - Utility-first styling
CVA (Class Variance Authority) - Type-safe component variants
Custom Animations - Framer Motion & GSAP

Component Library includes:

Forms, Inputs, Selects, Textareas
Buttons, Button Groups
Cards, Dialogs, Sheets, Drawers
Tables, Tabs, Accordions
Toast Notifications, Alerts
Dropdowns, Popovers, Tooltips
Navigation Menus, Breadcrumbs
Progress Bars, Spinners, Skeletons
And 40+ more components!

📝 Scripts

# Development
npm run dev          # Start development server

# Production
npm run build        # Build for production
npm start            # Start production server

# Code Quality
npm run lint         # Run ESLint

🌐 Deployment

Appwrite (Recommended)

Push your code to GitHub
Import project to Appwrite
Add environment variables in Appwrite dashboard
Deploy automatically on every push

Other Platforms

Netlify: Configure build command as npm run build
Railway: Add environment variables and deploy
Docker: Create Dockerfile with Node.js 18+ base image

Important: Ensure all environment variables are set in your deployment platform!

🤝 Contributing

Contributions are welcome! Please follow these steps:

Fork the repository
Create a feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

Development Guidelines

Follow the existing code style
Write meaningful commit messages
Test your changes thoroughly
Update documentation as needed

🐛 Known Issues & Roadmap

Current Limitations

File attachment support in announcements (planned)
Mobile app version (future consideration)
Email notifications for announcements (planned)

Upcoming Features

📱 Push notifications
📎 File sharing in announcements
📊 Analytics dashboard for CRs
🔔 Real-time notification system
📅 Calendar integration
🎓 Attendance tracking

📄 License

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

👥 Authors

ClassRep Team

🙏 Acknowledgments

Appwrite - Backend as a Service and Hosting
Radix UI - UI Primitives
Shadcn UI - Component inspiration
All open-source contributors

📞 Support

For support and questions:

📧 Email: support@classrep.edu
🐛 Issues: GitHub Issues
💬 Discussions: GitHub Discussions

🔗 Links

Live Demo: https://classrep.appwrite.network
Documentation: Wiki
Appwrite Console: https://cloud.appwrite.io

Made with ❤️ by the Core3 Devs

⭐ Star this repo if you find it helpful!

Name		Name	Last commit message	Last commit date
Latest commit History 25 Commits
app		app
appwrite		appwrite
assets/fonts		assets/fonts
components		components
hooks		hooks
lib		lib
public		public
styles		styles
.gitignore		.gitignore
README.md		README.md
components.json		components.json
generate-routines.js		generate-routines.js
next-env.d.ts		next-env.d.ts
next.config.mjs		next.config.mjs
package.json		package.json
postcss.config.mjs		postcss.config.mjs
routine-editor.html		routine-editor.html
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation

🎓 ClassRep

🌟 Features

👤 Authentication & User Management

📢 Announcement System

🏫 Classroom Management

📅 Academic Tools

🎨 User Experience

🚀 Tech Stack

Frontend

Backend

Developer Tools

📦 Installation

Prerequisites

1. Clone the Repository

2. Install Dependencies

3. Environment Setup

4. Appwrite Database Setup

Tables

User Labels

5. Run the Development Server

6. Build for Production

📁 Project Structure

🔑 Key Features Explained

CR Label Auto-Assignment

Channel System

Room Booking System

Authentication Flow

🔐 Security Features

🎨 UI Components

📝 Scripts

🌐 Deployment

Appwrite (Recommended)

Other Platforms

🤝 Contributing

Development Guidelines

🐛 Known Issues & Roadmap

Current Limitations

Upcoming Features

📄 License

👥 Authors

🙏 Acknowledgments

📞 Support

🔗 Links

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages