2. Getting Started

Requirements

Before you begin, ensure you have the following installed:

• [Node.js](https://nodejs.org/en/download) (v18+ recommended)
• [npm](https://www.npmjs.com/)
• [Git](https://git-scm.com/)
• [Permit.io Account](https://www.permit.io/)
• [Netlify Account](https://www.netlify.com/) (for frontend deployment)
• Basic understanding of React and Express

---

Clone the Repo

git clone https://github.com/YOUR_USERNAME/Class-Guard.git
cd Class-Guard

---

Install Dependencies

Backend

cd backend
npm install

Frontend

cd ../frontend
npm install

---

Permit.io Setup

1. Log into Permit.io
2. Go to Projects → Your Project
3. Grab your API Key and Cloud PDP URL (usually https://cloudpdp.api.permit.io)
4. In backend/server.js, update:

const permit = new Permit({
  pdp: 'https://cloudpdp.api.permit.io',
  token: 'YOUR_PERMIT_API_KEY',
});

Use the test username/password combo from Permit.io challenge if specified.

5. Optional: Sync users and roles using the Permit.io dashboard.

---

Run Locally

Backend

cd backend
node server.js
# Runs on http://localhost:5000

Frontend

cd frontend
npm run dev
# Runs on http://localhost:3000 (or specified port)

---

Connect Frontend with Backend

The frontend sends a POST request to the backend to validate user permissions using Permit.io:

const response = await fetch('http://localhost:5000/api/check-permission', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ resource: 'admin-dashboard' }), // or teacher/student
});

Make sure the endpoint is live and your backend is running when testing.

---

Deploying to Netlify

1. Push the frontend to GitHub

2. Log into Netlify

3. Click "New site from Git"

4. Connect your GitHub repo

5. For build settings:

   • Build command: npm run build
   • Publish directory: dist/ or build/ depending on your setup

6. Hit Deploy

Note: If you're using client-side routing, add a _redirects file in /public:

/*    /index.html   200

---