RBAC UI - Role-Based Access Control User Interface

This project is a React-based user interface for managing Role-Based Access Control (RBAC) in a web application. It provides a comprehensive set of features for user and role management, along with activity logging and authentication.

Demo

You can view a live demo of this project at: https://bala-rbac-ui.netlify.app/

Username : [email protected] Password : password

Tech Stack

• React.js
• Tailwind CSS for styling
• Lucide React for icons
• React Router for navigation
• React Query for data fetching and caching

Prerequisites

Before you begin, ensure you have met the following requirements:

• Node.js (v14.0.0 or later)
• npm (v6.0.0 or later)

Features

Authentication

• Secure login system
• JWT-based authentication
• Protected routes for authenticated users

Dashboard

• Overview of key metrics (total users, roles, and recent activities)
• Responsive design for various screen sizes
• Collapsible sidebar for better space utilization on smaller screens

User Management

• List all users with pagination
• Search functionality to find users quickly
• Filter users by role and status
• Sort users by various fields (name, email, role, status)
• Add new users with a modal form
• Edit existing user details
• Delete users (individual or bulk delete)
• Export user data to CSV
• Import user data from CSV

Role Management

• List all roles
• Search functionality to find roles quickly
• Add new roles with customizable permissions
• Edit existing role details and permissions
• Delete roles (individual or bulk delete)
• Export role data to CSV
• Import role data from CSV

Activity Log

• Track and display user activities
• Filter activities by type or date range

Profile Management

• View and edit user profile information
• Change password functionality

Settings

• Customizable application settings
• Profile settings management
• Notification preferences
• Security settings (including two-factor authentication setup)
• Help and support section

UI Components

• Reusable Popup component for modals
• Custom Sidebar component with collapsible functionality
• Responsive Header component
• Custom form components (Input, Select, Checkbox)

Accessibility

• ARIA attributes for improved screen reader support
• Keyboard navigation support
• High contrast mode for better visibility

Performance Optimizations

• Lazy loading of components
• Memoization of expensive computations
• Efficient list rendering with virtualization

Error Handling

• Global error boundary to catch and display errors
• Form validation with error messages

State Management

• Context API for global state management
• Local state management with React hooks

Code Quality

• ESLint for code linting
• Prettier for code formatting
• PropTypes for type checking

Build and Deployment

• Optimized production build
• Environment-based configuration

Small but Notable Features

• Tooltips for action buttons
• Confirmation dialogs for destructive actions
• Auto-save functionality for forms
• Breadcrumb navigation
• Dark mode toggle
• Custom scrollbars for better UX
• Skeleton loaders for better perceived performance
• Infinite scrolling for long lists
• Drag and drop functionality for reordering items
• Rich text editor for description fields
• Password strength meter
• Auto-logout on inactivity
• Session timeout warnings
• Custom 404 page
• Animated transitions between routes
• Responsive data tables
• Collapsible sections in forms
• Multi-step forms for complex data entry
• Keyboard shortcuts for common actions
• Customizable themes
• Localization support

Getting Started

1. Clone the repository
2. Install dependencies with npm install
3. Start the development server with npm start
4. Build for production with npm run build

or

use serve -s build to view the deploy

License

This project is licensed under the MIT License - see the LICENSE.md file for details.