3. Folder Structure

Class-Guard is split into two major layers: frontend (React) and backend (Node.js + Express). Permit.io controls role-based access throughout the system.

---

Root Directory

Class-Guard/
├── backend/              # Node.js server & Permit.io integration
├── frontend/             # React frontend (admin, student, teacher dashboards)
├── .gitignore
├── README.md
└── LICENSE

---

Backend (/backend)

Handles API routing, access control logic (via Permit.io), and connects frontend requests to the PDP.

backend/
├── server.js             # Main Express server (runs on port 5000)
├── package.json
└── .env                  # Permit API keys (optional, recommended)

Key Logic: server.js

• Integrates with Permit.io

• Validates access via POST /api/check-permission

• Example:

  const permitted = await permit.check(userId, 'view', 'admin-dashboard');

---

Frontend (/frontend)

Built with React. Renders dynamic pages for Admins, Teachers, and Students — access is conditionally gated using Permit.io checks from the backend.

frontend/
├── src/
│   ├── pages/
│   │   ├── AdminDashboard.jsx
│   │   ├── StudentDashboard.jsx
│   │   ├── TeacherDashboard.jsx
│   │   └── Login.jsx
│   ├── components/
│   │   ├── Navbar.jsx
│   │   └── index.js
│   ├── App.jsx
│   └── index.js
├── public/
│   ├── _redirects        # Required for Netlify routing
│   └── index.html
├── package.json
└── vite.config.js        # or react-scripts config depending on setup

Pages (/pages/)

Each page component conditionally fetches the user’s permission level via:

const res = await fetch('/api/check-permission', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ resource: 'admin-dashboard' }), // dynamic based on role
});

If not permitted, a message like Not authorized or a redirect is triggered.

---

Public Folder (/frontend/public)

Required for Netlify to support React Router:

/*    /index.html   200

Put this in a _redirects file to prevent 404 errors on refresh.

---