EduFlow — Professional Tuition & Academy Management Platform

EduFlow is an enterprise-grade, full-stack tuition and academy management portal designed to streamline administration, class scheduling, performance tracking, fee management, and student engagement.

Designed for scalability, it features role-based access control (RBAC), robust security measures, rich interactive dashboards, automated attendance, dynamic calendars, custom test creators, digital study material sharing, and advanced analytics.

---

Visual Showcase & Screenshots

Administrator Dashboard Overview

A premium dashboard with interactive visualizations outlining student distribution, total revenue flow, test performance analytics, and recent class notifications.

Student Directory & Profile Management

Comprehensive management listing active, pending, and inactive students with rich profile details and dynamic actions.

Masters Schedule & Timetable Grid

An interactive multi-slot calendar grid highlighting academic classes, mock tests, and faculty schedules.

Transaction & Fee Ledger

Open transaction ledger with instant filter options, payment recording modal, and digital receipt reference generation.

---

Technical Architecture & Stack

Frontend Architecture

• Framework: React 19 with Vite for ultra-fast Hot Module Replacement (HMR).
• Language: TypeScript (Strict Type-Safety) ensuring reliable components.
• Styling & UI: Tailwind CSS v4 and Lucide React (modern iconography).
• Animations: Motion (formerly Framer Motion) for smooth premium transitions, modal entries, and micro-interactions.
• Data Visualization: Recharts providing responsive, interactive SVGs for fee collection & test performance.
• HTTP Client: Axios featuring interceptors to inject JWT bearer tokens on requests and global 401 response handling.

Backend Architecture

• Runtime & Framework: Node.js with Express.js handling high-performance RESTful APIs.
• Database: MongoDB Atlas with Mongoose ODM leveraging schemas, validation rules, and population fields.
• Authentication: JWT (JSON Web Tokens) & bcryptjs for secure password hashing.
• Asset Upload: Multer & Cloudinary for scalable, cloud-based PDF and image assets storage.
• Security Middleware:
  • Helmet: Configured security headers (including custom Cross-Origin Resource Policy for cloud assets).
  • Express Rate Limit: Rate limiters applied globally (200 requests/15m) and specialized login limits (10 attempts/15m) to prevent brute-force attacks.
  • CORS: Domain whitelisting with dynamic origin validation.

---

Features Checklist

Administrator Panel

• Live Student Registry: Quick Add Modal, status tracking (active/pending/withdrawn), and batch assignments.
• Batch Scheduler: Manage multiple batches, set timelines, and allocate class topics.
• Digital Attendance Ledger: Mark & view daily student logs (Present, Absent, Late) with automated summaries.
• Test & Result Planner: Design mock tests, input scores, and render analytics charts.
• Fee Collection Hub: Complete payment log, record transaction modal (cash/UPI/Bank), track pending/overdue fees.
• Assignment & Resources Portal: Upload files/notes directly to batches using Cloudinary.
• Interactive Timetable: Dynamic scheduling and visual calendar management.

Student Dashboard

• My Schedule: Custom calendar displaying active classes, mock tests, and holiday notifications.
• Academic Analytics: View personal test score trends over time against class averages.
• Doubt Box: Dedicated direct-channel forum to submit academic doubts and receive feedback/replies from teachers.
• Digital Classroom: Download classroom notes, handwritten guides, and upload assignments.
• Fee Status: Instant summary of paid, pending, and upcoming fee structures.

---

Key Contributions (Amol)

As a primary Full-Stack Developer in this team project, I took end-to-end ownership of several core interactive, visual, and architectural systems:

• Interactive Frontend UI & Reusable Component Engineering:

  • Developed reusable, strictly type-safe React components (such as FeeModal, QuickAddStudentModal, Card, and Button) utilizing React 19 and TypeScript.
  • Crafted fluid animations, layout changes, and interactive slide-overs using Framer Motion (Motion) and Tailwind CSS v4, ensuring standard responsiveness across mobile and desktop displays.
  • Implemented data visualization graphs on the Admin Dashboard using Recharts, giving administrators visual, real-time metrics on revenue flows, test averages, and student enrollment trends.

• Secure API Orchestration & Middleware Setup:

  • Configured custom Axios interceptors to globally handle auth token injection, automatic token removal, and seamless redirection on session expirations (401 errors).
  • Integrated JSON Web Tokens (JWT) and bcryptjs to secure the registration and login lifecycles with state-of-the-art password hashing.
  • Set up critical backend security defenses using Helmet (handling COR policies for dynamic assets) and Express Rate Limit (preventing brute-force attacks on auth endpoints).

• Full-Stack Business Logic & Seeding Scripts:

  • Programmed backend controllers and REST routes managing student registries, batch allocations, attendance status logs, and fee transaction ledgers.
  • Created a robust custom seeding script (amol_seed.js) that automatically clears active collections, configures an admin, creates batches, and generates 50+ students with 3 months of mock history (attendance, test scores, fee receipts, doubts) for full local environment testability.

---

Local Setup & Installation

Prerequisites

• Node.js Version 18.x or higher
• MongoDB Atlas connection string (or local MongoDB running)
• Cloudinary credentials (optional, for custom note/assignment PDF uploads)

1. Clone & Install Dependencies

Run the command below in your root terminal to install all frontend & backend dependencies:

# Clone the repository
git clone https://github.com/Devamol10/EduFlow.git
cd EduFlow

# Install Root and Frontend dependencies
npm install

# Install Backend dependencies
cd backend && npm install && cd ..

2. Configure Environment Variables

Create a file named .env in the root folder and configure your variables:

# Server Port & Mode
PORT=5000
NODE_ENV=development

# Database Connection (MongoDB)
MONGODB_URI=your_mongodb_connection_string

# JWT Authentication Config
JWT_SECRET=your_super_secure_jwt_secret_key
JWT_EXPIRES_IN=7d

# CORS Allowed Origins
CLIENT_URL=http://localhost:5173

# Cloudinary Integration (Required for Study Notes & PDF Uploads)
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

# Gemini AI (Optional - for auto-resolving doubts / smart summaries)
GEMINI_API_KEY=your_gemini_api_key

3. Seed Database with Rich Mock Data

Populate your database instantly with 50 students, batches, grades, announcements, and timetables:

npm run seed

Note

The seeder generates pre-configured credentials so you can start testing immediately!

• Admin Login: amol@eduflow.com / Password@123
• Student Login: Check your console outputs during seeding for a generated student email, or log in with any seeded student (Password: Password@123).

4. Run Development Servers

Launch both backend and frontend servers:

# Terminal 1: Launch the Backend Server
npm run server

# Terminal 2: Launch the Frontend App (Vite Dev Server)
npm run dev

Once running, navigate to http://localhost:5173 in your web browser.

---

API Endpoint Reference

Method	Endpoint	Description	Auth Required
POST	/api/auth/login	Login user (admin/student) & return JWT	No
GET	/api/dashboard/admin	Fetch comprehensive overview metrics	Yes (Admin)
GET	/api/students	Get all students with pagination & filters	Yes (Admin)
POST	/api/students/quick-add	Insert a new student record into database	Yes (Admin)
POST	/api/attendance	Mark batch attendance	Yes (Admin)
GET	/api/fees	Fetch entire payment/fee transaction ledger	Yes (Admin)
POST	/api/fees/record	Record a new fee payment	Yes (Admin)
POST	/api/doubts	Submit an academic doubt	Yes (Student)
POST	/api/doubts/:id/reply	Reply to student doubts	Yes (Admin)
GET	/api/ai/resolve-doubt	Analyze doubt text with Gemini AI	Yes (Student)

---

Production Deployment

Frontend (Vercel)

1. Link your repo to Vercel.
2. Select root directory.
3. Configure the Build Command: npm run build and Output Directory: dist.
4. Set the Environment Variable: VITE_API_URL to your live backend Render URL.

Backend (Render)

1. Add a Web Service on Render and link the repository.
2. Select Root Directory as backend.
3. Set the Build Command: npm install and Start Command: node src/server.js.
4. Add all environment variables (MONGODB_URI, JWT_SECRET, CLOUDINARY_CLOUD_NAME, CLIENT_URL, etc.).

---

License

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

Developed by Amol.