https://github.com/amulyamachhan/user-management
This project is a user management web application. The application consists of two main pages: a Dashboard page and a People Directory page.
https://github.com/amulyamachhan/user-management
filtering luxon pagination react-hook-form react-tanstack-table redux tanstack-table zod
Last synced: 4 months ago
JSON representation
This project is a user management web application. The application consists of two main pages: a Dashboard page and a People Directory page.
- Host: GitHub
- URL: https://github.com/amulyamachhan/user-management
- Owner: AmulyaMachhan
- Created: 2024-08-17T17:31:01.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-11T16:43:26.000Z (over 1 year ago)
- Last Synced: 2025-06-20T00:07:48.291Z (11 months ago)
- Topics: filtering, luxon, pagination, react-hook-form, react-tanstack-table, redux, tanstack-table, zod
- Language: JavaScript
- Homepage: https://user-management-ten-gamma.vercel.app
- Size: 190 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# User Management
This project is a user management web application. The application consists of two main pages: a Dashboard page and a People Directory page.
## Screenshots
## Features
### 1. Dashboard Page
- **Navigation**: Includes a navbar and a sidebar for easy access.
- **Welcome Message**: Displays a welcome message for the user.
### 2. People Directory Page
- **Fully Featured Table**:
- **Sortable Columns**: Columns can be sorted in three states: Initial, Ascending, and Descending order.
- **Row Details**: Each row is clickable, and clicking on it opens a side pane with more details about that person.
- **Edit Functionality**: Each row has an edit button that opens a form. The form uses `react-hook-form` along with `zod` for form controls and validation.
- **Filtering**: The table can be filtered based on Role or Team.
- **Search Bar**: Implements a global search filter with substring matching on any of the fields present in the table.
- **Add Member**: A form to add a new entry to the table.
- **Delete Functionality**: The delete button removes the entry from the table.
- **State Management**:
- The state is reflected in the URL for search, filter, and row selection. For example, when searching for a name like 'Olivia', the URL reflects it as `app.people.com/people?query=Olivia`.
## Tech Stack
- **Frontend**:
- React
- TanStack Table for table interactions
- Tailwind CSS for styling
- react-hook-form and zod for form handling and validation
- **Backend**:
- Fake data generation using Faker.js
## Installation
1. Clone the repository:
```bash
git clone https://github.com/your-username/user-management.git
```
2. Navigate to the project directory:
```bash
cd user-management
```
3. Install the dependencies:
```bash
npm install
```
4. Start the development server:
```bash
npm run dev
```
## Usage
- Visit the Dashboard page upon opening the web app.
- Navigate to the People Directory to view, edit, add, and delete user entries.
-
## Contributing
If you wish to contribute, please fork the repository and submit a pull request. For major changes, please open an issue first to discuss what you would like to change.
## Contact
For any inquiries or feedback, feel free to contact me at [here](mailto:machhanamulya@gmail.com).