Skip to content

Latest commit

 

History

History
93 lines (74 loc) · 2.55 KB

File metadata and controls

93 lines (74 loc) · 2.55 KB

EduDesk — College Teacher Dashboard

A modern, full-stack teacher dashboard for managing students, attendance, assignments, grades, and announcements.

Tech Stack

  • Framework: Next.js 16 (App Router)
  • Auth: Clerk v7
  • Database: MongoDB + Mongoose
  • Styling: Tailwind CSS v4
  • Charts: Recharts
  • Forms: React Hook Form + Zod

Setup

1. Environment Variables

Copy .env.local.example to .env.local and fill in your values:

cp .env.local.example .env.local
# Clerk — get from https://dashboard.clerk.com
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...

NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/dashboard
NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/dashboard

# MongoDB — get from https://cloud.mongodb.com
MONGODB_URI=mongodb+srv://<user>:<password>@cluster0.mongodb.net/college-dashboard

2. Install & Run

npm install
npm run dev

Open http://localhost:3000 — it redirects to /sign-in automatically.

Features

Page What you can do
Dashboard Summary cards, attendance trend chart, grade distribution chart, recent activity
Students Add / edit / delete students, search + paginate
Attendance Bulk mark attendance by class & date, view history
Assignments Create / edit / delete assignments with deadlines, active/closed filter
Grades Record marks, auto-calculate letter grades, bar charts per subject
Announcements Post / pin / edit / delete announcements
Profile Edit name, department, subjects, bio synced with Clerk

Project Structure

app/
  (auth)/sign-in, sign-up     # Clerk auth pages
  dashboard/                  # Protected pages (layout wraps all)
    page.tsx                  # Overview with charts
    students/
    attendance/
    assignments/
    grades/
    announcements/
    profile/
  api/                        # Route handlers (REST)
    students/[id]/
    attendance/
    assignments/[id]/
    grades/[id]/
    announcements/[id]/
    profile/
components/
  dashboard/  Sidebar, Navbar, DashboardShell
  ui/         Button, Modal, Badge, Toast, Skeleton
lib/
  mongodb.ts  Connection helper with global cache
models/
  Teacher, Student, Attendance, Assignment, Grade, Announcement

Deployment (Vercel)

  1. Push to GitHub
  2. Import in Vercel
  3. Add all environment variables in the Vercel dashboard
  4. Deploy