{"id":22168824,"url":"https://github.com/shubhamraj-24/rbac-ui","last_synced_at":"2026-05-01T08:31:09.808Z","repository":{"id":264196869,"uuid":"892663258","full_name":"shubhamraj-24/RBAC-UI","owner":"shubhamraj-24","description":"The RBAC UI is a React-based web application designed to demonstrate a Role-Based Access Control (RBAC) system. It allows administrators to manage users, roles, and permissions dynamically in a secure and user-friendly interface.","archived":false,"fork":false,"pushed_at":"2024-11-25T13:31:09.000Z","size":268,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-02T00:03:43.588Z","etag":null,"topics":["rbac","react","typescript","typescript-react"],"latest_commit_sha":null,"homepage":"https://rbac-ui-alpha.vercel.app","language":"TypeScript","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/shubhamraj-24.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}},"created_at":"2024-11-22T14:38:03.000Z","updated_at":"2024-11-25T13:31:13.000Z","dependencies_parsed_at":"2024-11-22T15:38:23.210Z","dependency_job_id":"09054576-e717-49ee-9926-851cc211daa1","html_url":"https://github.com/shubhamraj-24/RBAC-UI","commit_stats":null,"previous_names":["shubhamraj-24/rbac-ui"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/shubhamraj-24/RBAC-UI","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shubhamraj-24%2FRBAC-UI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shubhamraj-24%2FRBAC-UI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shubhamraj-24%2FRBAC-UI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shubhamraj-24%2FRBAC-UI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shubhamraj-24","download_url":"https://codeload.github.com/shubhamraj-24/RBAC-UI/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shubhamraj-24%2FRBAC-UI/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32490810,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"online","status_checked_at":"2026-05-01T02:00:05.856Z","response_time":64,"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":["rbac","react","typescript","typescript-react"],"created_at":"2024-12-02T06:27:08.928Z","updated_at":"2026-05-01T08:31:09.789Z","avatar_url":"https://github.com/shubhamraj-24.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# **RBAC UI - Role-Based Access Control (RBAC) Interface**\n\n## **Project Overview**\n\nThe **RBAC UI** is a React-based web application designed to demonstrate a Role-Based Access Control (RBAC) system. It allows administrators to manage users, roles, and permissions dynamically in a secure and user-friendly interface. This project includes functionalities for user management, role assignment, and permission management using mock API data, simulated by **JSON Server**.\n\n**Key Features:**\n- **User Management**: View, add, edit, delete, and manage user roles and statuses.\n- **Role Management**: Create and modify roles, and assign permissions to them.\n- **Dynamic Permissions**: Assign or remove specific permissions (Read, Write, Delete etc.) to roles, enabling role-based actions for users.\n- **Mock API**: Utilizes JSON Server to simulate API endpoints for CRUD operations on users, roles and permissions.\n\n---\n\n## **Technologies Used**\n- **Frontend**: React, TypeScript\n- **UI Framework**: Material UI\n- **Mock API**: JSON Server\n- **Routing**: React Router DOM\n\n---\n\n## **Features Explained**\n\n### **1. User Management**\n- **Add User**: Administrators can create new users by providing details such as name, email, role, and status (Active/Inactive).\n- **Edit User**: Admins can modify user details (e.g., role, status) and update them.\n- **Delete User**: Admins can remove users from the system.\n- **User Role Assignment**: Admins can assign roles (Admin, Editor, etc.) to users.\n\n### **2. Role Management**\n- **Create Role**: Admins can define new roles (Admin, Editor, etc.) and specify the permissions associated with each role.\n- **Edit Role**: Admins can modify existing roles, including changing the role name and permissions.\n- **Delete Role**: Admins can delete roles from the system.\n- **Permissions Assignment**: Roles are assigned permissions, which define what actions users with that role can perform (e.g., Read, Write, Delete).\n\n### **3. Dynamic Permissions**\n- **Assign/Remove Permissions**: Admins can toggle permissions (Read, Write, Delete) for each role. Permissions can be added or removed with a simple checkbox interface.\n- **Real-time Updates**: Changes made to permissions are immediately reflected in the role's permissions list.\n\n---\n\n## **Project Setup Instructions**\n\n### **1. Prerequisites**\nBefore you begin, ensure you have met the following requirements:\n- **Node.js**: Make sure you have Node.js and npm installed. You can download it from [Node.js official website](https://nodejs.org/).\n- **Git**: Ensure you have Git installed for version control. You can download it from [Git official website](https://git-scm.com/).\n\n### **2. Clone the Repository**\n\nClone the repository to your local machine using the following command:\n\n```bash\ngit clone https://github.com/shubhamraj-24/RBAC-UI.git\ncd RBAC-UI\n```\n\n### **3. Install Dependencies**\nInstall the required dependencies using npm:\n\n```bash\nnpm install\n```\nThis will install all necessary libraries including React, Material UI, Axios, and JSON Server.\n\n### **4. Set Up JSON Server (Mock API)**\nIn the root directory of the project, there is a file named `db.json` which contains mock data for users, roles and permissions :\n\n```json\n{\n  \"users\": [\n    { \"id\": 1, \"name\": \"Admin\", \"email\": \"admin@vrv.com\", \"role\": \"Admin\", \"status\": \"Active\" },\n    { \"id\": 2, \"name\": \"User1\", \"email\": \"user1@vrv.com\", \"role\": \"Editor\", \"status\": \"Inactive\" }\n  ],\n  \"roles\": [\n    { \"id\": 1, \"name\": \"Admin\", \"permissions\": [\"Read\", \"Write\", \"Delete\"] },\n    { \"id\": 2, \"name\": \"Editor\", \"permissions\": [\"Read\", \"Write\"] }\n  ],\n  \"permissions\": [\n    { \"id\": \"1\", \"name\": \"Read\"},\n    { \"id\": \"2\", \"name\": \"Write\"},\n    { \"id\": \"3\", \"name\": \"Delete\"}\n  ]\n}\n```\n\nOpen a terminal and start the JSON Server to simulate API endpoints:\n\n```bash\nnpx json-server --watch db.json --port 5000\n```\nThis will run the server at `http://localhost:5000` and expose mock API endpoints for managing users, roles and permissions.\n\n\n\nConfiguring API URL:\u003cbr\u003e\n\nTo run the application locally, first **uncomment the following line** in the `api.ts` file:\n\n```bash\n// const API_URL = 'http://localhost:5000';\n```\n\nThen, comment out or remove the line that sets the API URL to the production server:\n\n```bash\nconst API_URL = 'https://database-rbac.onrender.com';\n```\n\n\n### **5. Start the React App**\nOpen a second terminal and start the React application using the following command:\n\n```bash\nnpm start\n```\nThis will run the React application at `http://localhost:3000`. You can now interact with the User Management, Role Management, and Permissions Management interfaces.\n\n---\n\n## **Folder Structure**\nThe project follows a standard React folder structure with some modifications for clarity:\n\n```\nrbac-ui/\n├── db.json                 # Mock API data for JSON Server\n├── node_modules/           # Project dependencies\n├── public/                 # Public assets (index.html, favicon, etc.)\n├── src/                    # Source code\n│   ├── api/                # API helper functions for CRUD operations\n│   │   └── api.ts\n│   ├── components/         # React components\n│   │   ├── UserManagement.tsx\n│   │   ├── RoleManagement.tsx\n│   │   └── Permissions.tsx\n│   ├── App.tsx             # Main App component with routing\n│   └── index.tsx           # React entry point\n├── package.json            # Project dependencies and scripts\n├── tsconfig.json           # TypeScript configuration\n└── README.md               # Project documentation\n```\n\n---\n\n## **API Endpoints Examples (Mocked by JSON Server)**\n- **GET /users** – Get all users.\n- **GET /users/{id}** – Get a specific user by ID.\n- **POST /users** – Create a new user.\n- **PUT /users/{id}** – Update an existing user.\n- **DELETE /users/{id}** – Delete a user.\n- **GET /roles** – Get all roles.\n- **GET /roles/{id}** – Get a specific role by ID.\n- **POST /roles** – Create a new role.\n- **PUT /roles/{id}** – Update an existing role.\n- **DELETE /roles/{id}** – Delete a role.\n\n---\n\n## **How to Contribute**\nIf you'd like to contribute to this project, follow these steps:\n\n1. Fork the repository.\n2. Create a new branch for your feature (`git checkout -b feature-name`).\n3. Make your changes and commit them (`git commit -m 'Add new feature'`).\n4. Push to your forked repository (`git push origin feature-name`).\n5. Create a pull request.\n\n---\n\n## **Conclusion**\nThis RBAC UI project offers a simple yet functional implementation of a Role-Based Access Control system with a clean user interface for managing users, roles, and permissions. The use of React and Material UI ensures that the application is both responsive and user-friendly.\n\n---\n\n## License\nThis project is licensed under the MIT License. See the [LICENSE](./LICENSE) file for more information.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshubhamraj-24%2Frbac-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshubhamraj-24%2Frbac-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshubhamraj-24%2Frbac-ui/lists"}