learning-dashboard.md

Learning Dashboard 📚

Learning Dashboard for managing course content and assignments.

Features 🌟

• Auth0 authentication
• Lecture recordings library
• Assignment submissions (GitHub/Video links)
• Teacher grading interface
• Student leaderboard

Tech Stack 🛠

• Frontend: React + Vite
• Styling: Tailwind CSS
• Backend: Node.js + Express
• Database: MongoDB
• Authentication: Auth0

Project Structure 📁

/client
  /src
    /components
      Auth0Provider.jsx
      PrivateRoute.jsx
      LectureList.jsx
      AssignmentSubmit.jsx
      GradingInterface.jsx
      Leaderboard.jsx
    /hooks
      useAuth0.js
    /pages
      Dashboard.jsx
      Teacher.jsx
      Student.jsx
    /styles
      globals.css
    App.jsx
    main.jsx
  tailwind.config.js
  postcss.config.js

/server
  /controllers
    lectures.js
    assignments.js
    grades.js
  /models
    User.js
    Assignment.js
    Submission.js
  /middleware
    auth0.js
  /routes
    api.js
  server.js

/config
  .env.example

Setup 🚀

1. Clone repository
2. Setup Auth0:
   • Create Auth0 application
   • Set callback URLs
   • Get domain and client ID
3. Copy .env.example to .env and fill:
   • MongoDB URI
   • Auth0 credentials
4. Install & run:

cd client && npm install
cd ../server && npm install

# Install Tailwind dependencies
cd client && npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# Terminal 1
cd client && npm run dev

# Terminal 2
cd server && npm run dev

Tailwind Configuration

// tailwind.config.js
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,jsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

API Routes 🛣

GET    /lectures
POST   /submissions
GET    /submissions/:id
PUT    /submissions/:id/grade
GET    /leaderboard

Authentication handled via Auth0's SDK - no custom auth endpoints needed.