This project is an Admin Dashboard application built using Angular. It allows administrators to manage users and roles, view data, and perform CRUD operations for both users and roles with associated permissions.
Watch this video to see how the app works: Watch the video
To get started with the project locally, follow the steps below.
Ensure you have the following installed:
- Node.js (version 14 or above)
- Angular CLI
-
Clone this repository:
git clone https://github.com/Bhupendra-Maurya/admin-dashboard.git cd admin-dashboard
-
Install dependencies:
npm install
-
Move to admin-dashboard:
cd admin-dashboard
-
Instal JSON Server
npm install -g json-server
To start a local development server, run:
ng serve
Once the server is running, open your browser and navigate to http://localhost:4200/
. The application will automatically reload whenever you modify any of the source files.
To start json server, run:
json-server --watch db.json
json-server --watch db.json --port 5000
Once the server is running, open your browser and navigate to
Endpoints:
http://localhost:3000/users
,
http://localhost:3000/roles
.
where you can see the data of your server.
Example:
[
{
"id": "e6fa",
"username": "Bhupendra Maurya",
"email": "[email protected]",
"status": "active",
"roles": [
"Web Developer",
"Software Engineer"
],
"permissions": [
"read",
"write",
"delete"
]
}
]
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
ng generate component component-name
For a complete list of available schematics (such as components
, directives
, or pipes
), run:
ng generate --help
To build the project run:
ng build
This will compile your project and store the build artifacts in the dist/
directory. By default, the production build optimizes your application for performance and speed.
To execute unit tests with the Karma test runner, use the following command:
ng test
For end-to-end (e2e) testing, run:
ng e2e
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
The project follows a structured directory layout, organized into various components, services, models, and configurations. Here’s an overview of the project structure:
admin-dashboard/
├── src/
│ ├── app/
│ │ ├── components/
│ │ │ ├── dashboard/
│ │ │ ├── user-list/
│ │ │ ├── user-popup-modal/
│ │ │ ├── role-list/
│ │ │ ├── role-popup-modal/
│ │ │ ├── search-bar/
│ │ │ ├── user-form/
│ │ │ └── pagenotfound/
│ │ ├── models/
│ │ │ └── user.model.ts
│ │ ├── services/
│ │ │ ├── role.service.ts
│ │ │ └── user.service.ts
│ │ └── app.module.ts
│ ├── db.json
└── angular.json
-
src/app/components/
- Contains all UI components such as:
dashboard
: Dashboard overview page.user-list
: Displays list of users.user-popup-modal
: Modal for managing user details.role-list
: Displays list of roles.role-popup-modal
: Modal for managing roles.search-bar
: Search functionality for filtering users/roles.user-form
: Form for adding/editing users.pagenotfound
: 404 page for invalid routes.
- Contains all UI components such as:
-
src/app/models
- Contains TypeScript models, such as
user.model.ts
, for defining data structures.
- Contains TypeScript models, such as
-
src/app/services
- Contains services like
role.service.ts
anduser.service.ts
for API calls and business logic.
- Contains services like
-
src/db.json
- A mock database used to simulate backend operations in this project.
This project is built with Angular and provides an interface for managing users and roles. It allows administrators to:
- View and manage users
- Add, edit, and delete users
- Assign roles to users and manage their status (Active/Inactive)
- Create and edit roles with dynamic permissions
- Assign permissions to roles and edit them as needed
-
View Users: List all users and their associated details (name, roles, status).
-
Add User: Create a new user by filling out a form with the user's name, role, and status.
-
Edit User: Modify user details such as name, role, and status.
-
Delete User: Remove a user from the system.
-
Assign Roles: Select roles for users from a list of available roles.
-
Define Roles: Create new roles with specified permissions.
-
Edit Roles: Modify existing roles, including updating the role name, description, and permissions.
-
Delete Roles: Remove a role from the system.
-
Assign Permissions to Roles: Customize the permissions (Read, Write, Delete) for each role.
- Angular: Framework used for building the frontend.
- Json Server: To store users data.
- Angular Forms Module: Angular’s reactive approach for handling form input and validation.
- TypeScript: Programming language used to write the code.
- HTML: For structuring the application’s interface.
- Tailwind: For styling the application’s interface.
-
Manage Users:
- The user component allows an administrator to manage users in the system. It provides functionalities to view, add, edit, and delete users.
- Roles, Permissions, Status can be assigned to users, can be added or modified and their status can be updated between "Active" and "Inactive."
-
Create New User:
- This is a form to create new users.
- It provides inputs to username, email, status, roles and permissions.
-
Manage Roles:
- The role management allows editing, and deleting roles.
- Each role has an associated set of permissions, which can be assigned and modified.
NOTE :
This page is just to demonstrate what types of permissions can be assign to different roles.
Changes made here will not be reflected in Manage Users
You can change anything from Manage users itself.
- User Service: Manages the user-related operations such as fetching, adding, editing, and deleting users.
- Role Service: Handles the role-related operations such as fetching, adding, editing, and deleting roles.
- Both user and role forms are validated for required fields. The form validations ensure that data is entered correctly before submitting.
- Error handling is implemented in form submission processes, ensuring smooth data interaction.
For more information on using the Angular CLI, including detailed command references, visit the Angular CLI Overview and Command Reference page.
- Bhupendra Maurya: LinkedIn
- Email: [email protected]