{"id":28411941,"url":"https://github.com/contractor-x/class-guard","last_synced_at":"2025-10-11T07:40:06.557Z","repository":{"id":291298414,"uuid":"977122333","full_name":"Contractor-x/Class-Guard","owner":"Contractor-x","description":"Class Guard is a role-based classroom management system purpose-built for educational environments across Africa.","archived":false,"fork":false,"pushed_at":"2025-05-09T20:10:45.000Z","size":5923,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-24T07:37:45.236Z","etag":null,"topics":["africa","permito","webapp"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Contractor-x.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-03T13:27:40.000Z","updated_at":"2025-06-10T20:14:07.000Z","dependencies_parsed_at":"2025-06-24T07:43:00.397Z","dependency_job_id":null,"html_url":"https://github.com/Contractor-x/Class-Guard","commit_stats":null,"previous_names":["contractor-x/class-guard"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Contractor-x/Class-Guard","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Contractor-x%2FClass-Guard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Contractor-x%2FClass-Guard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Contractor-x%2FClass-Guard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Contractor-x%2FClass-Guard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Contractor-x","download_url":"https://codeload.github.com/Contractor-x/Class-Guard/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Contractor-x%2FClass-Guard/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279006626,"owners_count":26084131,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-11T02:00:06.511Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["africa","permito","webapp"],"created_at":"2025-06-02T19:18:08.934Z","updated_at":"2025-10-11T07:40:06.543Z","avatar_url":"https://github.com/Contractor-x.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Class-Guard: Secure Role-Based Dashboard Access with Permit.io\n\n\u003e A secure, role-based access control (RBAC) React + Node.js app using [Permit.io](https://www.permit.io/), built for the Permit.io RBAC Challenge.\n\n---\n\n## About Class-Guard\n\n**Class-Guard** is a role-based dashboard application with the following features:\n\n- **Integration with Permit.io for access control (RBAC)**\n- **A simple Node.js/Express backend to handle permission checks**\n- **A dynamic React frontend with three dashboards:**\n  - `AdminDashboard.jsx`\n  - `TeacherDashboard.jsx`\n  - `StudentDashboard.jsx`\n- **Deployed to Netlify (Frontend) and localhost/Render (Backend)**\n- **Compatible with JWT-authenticated workflows**\n- **Ready for production, demo-ready**\n\n---\n\n## Folder Structure\n\n```\nClass-Guard/\n├── backend/\n│   └── server.js                 # Node.js server with Permit.io integration\n├── frontend/\n│   ├── public/\n│   │   └── _redirects            # Netlify redirects for SPA\n│   ├── src/\n│   │   ├── pages/\n│   │   │   ├── AdminDashboard.jsx\n│   │   │   ├── StudentDashboard.jsx\n│   │   │   └── TeacherDashboard.jsx\n│   │   ├── components/\n│   │   │   └── Navbar.jsx\n│   │   ├── App.jsx\n│   │   └── index.js\n├── .gitignore\n└── README.md\n```\n\n---\n\n## Installation \u0026 Setup\n\n### 1. Clone the Repository\n\n```sh\ngit clone https://github.com/your-username/Class-Guard.git\ncd Class-Guard\n```\n\n### 2. Backend Setup (Node.js + Permit.io)\n\n#### Install Dependencies\n\n```sh\ncd backend\nnpm install\n```\n\n#### Start the Server\n\n```sh\nnode server.js\n```\n\n\u003e **Server runs at:** `http://localhost:5000`\n\n#### Update Permit.io Credentials\n\nYou must update your Permit.io API key and PDP URL inside `server.js`.\n\n```js\nconst permit = new Permit({\n  pdp: 'https://cloudpdp.api.permit.io',\n  token: 'your-permit-api-key',\n});\n```\n\n### 3. Frontend Setup (React)\n\n#### Install Dependencies\n\n```sh\ncd frontend\nnpm install\n```\n\n#### Start the Application\n\n```sh\nnpm start\n```\n\n\u003e **Frontend runs at:** `http://localhost:3000`\n\n---\n\n## Deployment\n\n### Frontend on Netlify\n\n1. **Push Your Code to GitHub:**\n\n   ```sh\n   git add .\n   git commit -m \"Initial commit\"\n   git push origin main\n   ```\n\n2. **Connect Your GitHub Repo to Netlify:**\n   - Log in to your Netlify account.\n   - Click on \"New site from Git\" and connect your GitHub repository.\n\n3. **Set the Build Settings:**\n   - **Build command:** `npm run build`\n   - **Publish directory:** `build/`\n\n4. **Add `_redirects` Inside `public/` Folder:**\n\n   ```plaintext\n   /*    /index.html   200\n   ```\n\n5. **Netlify will automatically handle routing for your React SPA.**\n\n---\n\n## Role-Based Access Flow\n\n1. **User Logs In or Accesses a Dashboard:**\n   - The user attempts to log in or access a specific dashboard.\n\n2. **Frontend Makes a POST Request to `/api/check-permission` on the Backend:**\n   - The frontend sends a POST request to the backend to check if the user has the necessary permissions.\n\n3. **Backend Checks Permission Using Permit.io SDK:**\n   - The backend uses the Permit.io SDK to verify the user's permissions.\n\n4. **If Allowed, the Frontend Renders the Dashboard:**\n   - If the user is permitted, the frontend renders the requested dashboard.\n\n5. **If Not, the User is Shown an \"Access Denied\" Message:**\n   - If the user is not permitted, an \"Access Denied\" message is displayed.\n\n---\n\n## Sample Code: `/api/check-permission`\n\n### `server.js` (Backend)\n\n```js\napp.post('/api/check-permission', async (req, res) =\u003e {\n  const resource = req.body.resource;\n  const action = req.body.action;\n  const user = req.body.user;\n\n  const permitted = await permit.check(user, action, resource);\n\n  if (permitted) {\n    res.json({ permitted: true });\n  } else {\n    res.json({ permitted: false });\n  }\n});\n```\n\n### `AdminDashboard.jsx` (Frontend Sample)\n\n```jsx\nimport React, { useEffect, useState } from 'react';\n\nfunction AdminDashboard() {\n  const [accessDenied, setAccessDenied] = useState(false);\n\n  useEffect(() =\u003e {\n    fetch('http://localhost:5000/api/check-permission', {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify({ resource: 'admin-dashboard', action: 'view', user: 'user2345' }),\n    })\n      .then(res =\u003e res.json())\n      .then(data =\u003e {\n        if (!data.permitted) {\n          setAccessDenied(true);\n        }\n      });\n  }, []);\n\n  if (accessDenied) {\n    return \u003cdiv\u003eAccess Denied\u003c/div\u003e;\n  }\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eAdmin Dashboard\u003c/h1\u003e\n      \u003cp\u003eWelcome, Admin!\u003c/p\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default AdminDashboard;\n```\n\n\u003e Similar code is used in `StudentDashboard.jsx` and `TeacherDashboard.jsx`.\n\n---\n\n## Tech Stack\n\n- **Frontend:** React, JSX, Netlify\n- **Backend:** Node.js, Express\n- **RBAC:** [Permit.io](https://www.permit.io/)\n- **Deployment:** GitHub + Netlify\n- **Development OS:** Kali Linux\n\n---\n\n## How to Contribute\n\n1. **Fork the Repository:**\n\n   ```sh\n   git fork https://github.com/your-username/Class-Guard.git\n   ```\n\n2. **Clone Your Fork:**\n\n   ```sh\n   git clone https://github.com/your-username/Class-Guard.git\n   cd Class-Guard\n   ```\n\n3. **Create a New Branch:**\n\n   ```sh\n   git checkout -b feat/featureName\n   ```\n\n4. **Make Your Changes:**\n\n   Commit your changes and push to your branch:\n\n   ```sh\n   git add .\n   git commit -m \"feat: add new feature\"\n   git push origin feat/featureName\n   ```\n\n5. **Submit a Pull Request:**\n   - Go to the original repository and submit a pull request.\n\n---\n\n## Challenge Team Credentials\n\n-Admin\n**Username:** `admin`\n**User ID:** `2025DEVChallenge`\n\n-Teacher\n**Username:** `teacher`\n**User ID:** `2025DEVChallenge`\n\n-Student\n**Username:** `Student`\n**User ID:** `2025DEVChallenge`\n\nThese credentials are preconfigured in the backend for the RBAC challenge demo.\n\n---\n\n## License\n\nMIT License © Collins Joel\n\n---\n\n## Acknowledgements\n\n- Big thanks to [Permit.io](https://www.permit.io/) for providing the RBAC SDK and challenge.\n- Built with ❤️ on Kali Linux using Node.js, React, and Netlify.\n\n---\n\n## Contact\n\n- **GitHub:** [@Collins](https://github.com/Contractor-x)\n- **Email:** `dada4ash@gmail.com`\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcontractor-x%2Fclass-guard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcontractor-x%2Fclass-guard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcontractor-x%2Fclass-guard/lists"}