ACADIGO

A powerful, comprehensive web-based system for managing access to presentations and assignments with role-based permissions.

Features

• Multiple User Roles: Admin, Trainer, and Student with appropriate permissions
• Intuitive Dashboard: Role-specific dashboards with quick access to all features
• PPT Management: Upload, organize, view, and track presentations
• Assignment System: Create assignments, set deadlines, submit solutions, and grade with feedback
• Batch Management: Organize students into batches for streamlined content delivery
• Access Control: Fine-grained control over who can access which materials
• Activity Tracking: Comprehensive tracking of student access and engagement
• Email Notifications: Automatic alerts for deadlines, new uploads, and grading events
• Dark Mode: Built with modern UI and dark theme for reduced eye strain
• Responsive Design: Works seamlessly on desktop, tablet, and mobile devices

Getting Started

Prerequisites

• Node.js (v14+)
• MongoDB (local or Atlas cloud)
• Supabase account (for Storage)
• Email service credentials (for notifications)

User Roles and Permissions

Admin

• Manage all users (create, edit, delete)
• Configure system settings
• Access all trainer and student features
• View system-wide analytics

Trainer

• Create and manage batches
• Upload and manage PPTs
• Create assignments and set deadlines
• Grade student submissions
• View student progress and engagement metrics

Student

• View assigned PPTs
• Download learning materials
• Submit assignments before deadlines
• Receive grades and feedback
• Track personal progress

User Flow Diagram

graph TD
    %% Login Flow
    A[User] -->|Navigate to Login| B[Login Page]
    B -->|Submit Credentials| C{Authentication}
    C -->|Invalid| B
    C -->|Valid Admin| D[Admin Dashboard]
    C -->|Valid Trainer| E[Trainer Dashboard]
    C -->|Valid Student| F[Student Dashboard]
    
    %% Admin Flow
    D -->|Manage Users| D1[User Management]
    D -->|Access Trainer Features| E
    D1 -->|Create/Edit/Delete| D1a[User Form]
    D1a -->|Save| D1
    
    %% Trainer Flow
    E -->|Manage Batches| E1[Batch Management]
    E -->|Manage PPTs| E2[PPT Management]
    E -->|Manage Assignments| E3[Assignment Management]
    
    E1 -->|Create/Edit| E1a[Batch Form]
    E1 -->|Assign Students| E1b[Student Assignment]
    E1a -->|Save| E1
    E1b -->|Save| E1
    
    E2 -->|Upload| E2a[PPT Upload Form]
    E2 -->|Edit/Delete| E2b[PPT Actions]
    E2a -->|Save| E2
    E2b -->|Save/Confirm| E2
    
    E3 -->|Create| E3a[Assignment Form]
    E3 -->|View Submissions| E3b[Submission List]
    E3 -->|Grade| E3c[Grading Form]
    E3a -->|Save| E3
    E3b -->|View Details| E3c
    E3c -->|Submit Grade| E3b
    
    %% Student Flow
    F -->|View PPTs| F1[PPT Library]
    F -->|View Assignments| F2[Assignment List]
    F1 -->|Access PPT| F1a[View/Download PPT]
    F2 -->|Submit Work| F2a[Submission Form]
    F2 -->|View Grades| F2b[Submission Details]
    F2a -->|Upload Files| F2
    
    %% Notifications
    E2a -.->|Email| G[Email Notification]
    E3a -.->|Email| G
    E3c -.->|Email| G
    G -.->|Notify| F

Loading

System Architecture

The application is built with a modern tech stack following a client-server architecture:

1. Frontend (Client)

   • React for UI components and state management
   • React Router for navigation
   • Tailwind CSS for styling
   • Headless UI for accessible components
   • Axios for API communication

2. Backend (Server)

   • Express.js RESTful API
   • JWT authentication
   • Role-based access control
   • Rate limiting for API protection

3. Database

   • MongoDB for data storage
   • Mongoose for data modeling

4. External Services

   • Supabase Storage for file storage
   • Nodemailer for email notifications

🛠️ Tech Stack

• Frontend: React, Vite, Tailwind CSS, Headless UI, React Router
• Backend: Node.js, Express, JWT Authentication
• Database: MongoDB with Mongoose
• Storage: Supabase Storage for files
• Email: Nodemailer for notifications
• Deployment: Ready for Vercel, Railway, or any modern hosting platform

Project Structure

ppt-access-control/
├── frontend/               # React frontend application
│   ├── src/                # Source files
│   │   ├── components/     # Reusable components
│   │   ├── context/        # React context (auth, etc.)
│   │   ├── hooks/          # Custom React hooks
│   │   ├── pages/          # Page components
│   │   └── services/       # API service calls
│   └── public/             # Static files
│
└── backend/                # Node.js backend API
    ├── controllers/        # Request handlers
    ├── middleware/         # Express middleware
    ├── models/             # Mongoose models
    ├── routes/             # API routes
    └── utils/              # Utility functions