{"id":26776807,"url":"https://github.com/priyoraven/user-management-assignment","last_synced_at":"2025-03-29T04:24:17.264Z","repository":{"id":284881131,"uuid":"956038291","full_name":"PriyoRaven/user-management-assignment","owner":"PriyoRaven","description":"A modern React-based user management system featuring authentication, user listing, search, sorting, pagination, and CRUD operations. Built with Vite for fast development, Tailwind CSS for a sleek UI, and ReqRes API for backend integration.","archived":false,"fork":false,"pushed_at":"2025-03-28T07:06:19.000Z","size":75,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-28T07:23:06.148Z","etag":null,"topics":["front-end-development","react","vite"],"latest_commit_sha":null,"homepage":"https://user-management-assignment-reqres.vercel.app/","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/PriyoRaven.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":"2025-03-27T15:44:24.000Z","updated_at":"2025-03-28T07:06:22.000Z","dependencies_parsed_at":"2025-03-28T07:23:07.828Z","dependency_job_id":"a3c011d0-d26b-4fc8-b973-dcc60d5f6aab","html_url":"https://github.com/PriyoRaven/user-management-assignment","commit_stats":null,"previous_names":["priyoraven/user-management-assignment"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PriyoRaven%2Fuser-management-assignment","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PriyoRaven%2Fuser-management-assignment/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PriyoRaven%2Fuser-management-assignment/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PriyoRaven%2Fuser-management-assignment/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PriyoRaven","download_url":"https://codeload.github.com/PriyoRaven/user-management-assignment/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246137389,"owners_count":20729352,"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","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":["front-end-development","react","vite"],"created_at":"2025-03-29T04:24:13.572Z","updated_at":"2025-03-29T04:24:17.254Z","avatar_url":"https://github.com/PriyoRaven.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# User Management Application\n\nA modern React application for user management with authentication, display, filtering, and CRUD operations.\n\n![User Management Application](https://i.pinimg.com/736x/f1/c7/52/f1c752ae6448d5b2546f0034a723366e.jpg)\n\n## Table of Contents\n\n- [Features](#features)\n- [Live Demo](#live-demo)\n- [Prerequisites](#prerequisites)\n- [Installation](#installation)\n- [Configuration](#configuration)\n- [Usage](#usage)\n- [Project Structure](#project-structure)\n- [API Integration](#api-integration)\n- [Components](#components)\n- [State Management](#state-management)\n- [Authentication](#authentication)\n- [Contributing](#contributing)\n- [Troubleshooting](#troubleshooting)\n- [FAQ](#faq)\n- [License](#license)\n- [Extra Detail](#extra-detail)\n\n## Features\n\n- **Authentication** - Secure login system\n- **User Management** - View, edit, and delete users\n- **Search Functionality** - Filter users by name or email\n- **Sorting** - Sort users by name or email in ascending or descending order\n- **Pagination** - Navigate through pages of user data\n- **Responsive Design** - Works on desktop and mobile devices\n- **Session Management** - Maintains user session with token expiration\n- **Data Persistence** - Stores user data in session storage\n- **Modern UI** - Clean, glass-morphism design with Tailwind CSS\n\n## Live Demo\n\n[Live Link](https://user-management-assignment-reqres.vercel.app/)\n\n## Prerequisites\n\n- Node.js (v18 or higher)\n- npm (v9 or higher)\n\n## Installation\n\n1. Clone the repository:\n\n```bash\ngit clone https://github.com/yourusername/user-management-assignment.git\ncd user-management-assignment\n```\n\n2. Install dependencies:\n\n```bash\nnpm install\n```\n\n3. Start the development server:\n\n```bash\nnpm run dev\n```\n\n4. Open your browser and visit `http://localhost:3000`\n\n## Configuration\n\nThe application uses several configuration files:\n\n- **vite.config.js** - Vite configuration for the project\n- **eslint.config.js** - ESLint rules for code quality\n- **package.json** - Project dependencies and scripts\n\n## Usage\n\n### Login\n\nUse the following credentials to log in:\n\n- **Email**: eve.holt@reqres.in\n- **Password**: cityslicka\n\nThese credentials are pre-filled in the login form for demonstration purposes.\n\n### User Management\n\nOnce logged in, you can:\n\n1. **View Users** - The homepage displays all users in a grid layout\n2. **Search** - Use the search bar to filter users by name or email\n3. **Sort** - Click the Sort button to arrange users by name or email\n4. **Edit** - Click the Edit button on a user card to update their details\n5. **Delete** - Click the Delete button on a user card to remove them\n6. **Pagination** - Navigate between pages using the pagination controls\n7. **Reset Data** - Click the Reset Data button to restore the original dataset\n8. **Logout** - Click the Logout button to end your session\n\n## Project Structure\n\n```\nuser-management-assignment/\n├── public/                # Static files\n├── src/                   # Source files\n│   ├── components/        # React components\n│   │   ├── ui/            # Reusable UI components\n│   ├── context/           # React context providers\n│   ├── services/          # API services\n│   ├── utils/             # Utility functions\n│   ├── App.jsx            # Main App component\n│   └── main.jsx           # Application entry point\n├── index.html             # HTML template\n├── vite.config.js         # Vite configuration\n├── eslint.config.js       # ESLint configuration\n├── package.json           # Project metadata and dependencies\n└── LICENSE                # MIT License\n```\n\n## API Integration\n\nThis application integrates with the [ReqRes API](https://reqres.in/) for user management operations. The API endpoints used are:\n\n- `POST /api/login` - For user authentication\n- `GET /api/users` - To fetch users data\n- `PUT /api/users/:id` - To update user data\n- `DELETE /api/users/:id` - To delete a user\n\nAPI service functions are located in `src/services/api.jsx`.\n\n## Components\n\n### Main Components\n\n- **Login** - Handles user authentication\n- **UserList** - Displays and manages the list of users\n- **EditUser** - Provides a form to edit user details\n\n### UI Components\n\n- **Button** - Customizable button with various styles and states\n- **ConfirmSelect** - Modal dialog for confirming user actions\n- **SortMenu** - Dropdown menu for sorting options\n\n## State Management\n\nThis application uses React Context API for state management:\n\n- **UserContext** - Manages user data, search, sorting, and pagination state\n- The context providers are located in `src/context/UserContext.jsx`\n\n## Authentication\n\nAuthentication is handled by the following:\n\n- **auth.jsx** - Utilities for token management and authentication status\n- **Login.jsx** - Component for the login form and authentication flow\n\nAuthentication flow:\n\n1. User enters credentials on the login page\n2. Credentials are validated against the ReqRes API\n3. On successful login, a token is stored in localStorage with an expiration time\n4. Protected routes check for valid token before rendering\n\n## Contributing\n\n1. Fork the repository\n2. Create your feature branch: `git checkout -b feature/your-feature-name`\n3. Commit your changes: `git commit -m 'Add some amazing feature'`\n4. Push to the branch: `git push origin feature/your-feature-name`\n5. Open a Pull Request\n\n### Coding Standards\n\n- Follow the ESLint configuration provided in the project\n- Write meaningful commit messages\n- Update documentation when necessary\n\n## Troubleshooting\n\n### Login Issues\n\n- **Invalid Login**: Ensure you're using the credentials: email `eve.holt@reqres.in` and password `cityslicka`\n- **Session Expired**: Your token expires after 24 hours. Simply log in again.\n\n### Data Reset\n\nIf the application behaves unexpectedly:\n\n1. Click the \"Reset Data\" button in the header\n2. If issues persist, clear your browser cache and localStorage\n3. Refresh the application\n\n## FAQ\n\n### Q: How do I change the API endpoint?\n\nA: Update the BASE_URL constant in `src/services/api.jsx`\n\n### Q: Why have you not hidden the api in .env?\n\nA: First of all there is no key that needs to be hidden and the api is a hosted REST-API on the website: https://reqres.in/\n\n### Q: Can I add new users?\n\nA: The current version only supports viewing, editing, and deleting users as per the ReqRes API limitations.\n\n### Q: How is user data persisted between sessions?\n\nA: User data is stored in sessionStorage for persistence between page refreshes.\n\n### Q: How secure is the authentication?\n\nA: The authentication is implemented for demonstration purposes. In a production environment where the password would be stored in the datatbase hasing would be required, short token expiration time than now (24 hour), rate limiting, CAPTCHA, Account Lockout, OTP, and verification or authenticator app would be required. Also for more security audit logging could be used too.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## Extra Detail\n\nThis project is done on React by using Vite tooling only for the reason of slow server start in react. Vite improves the dev server start time by first dividing the modules in an application into two categories: dependencies and source code.\n\u003e Dependencies are mostly plain JavaScript that do not change often during development.\n\u003e Source code often contains non-plain JavaScript that needs transforming, and will be edited very often. Also, not all source code needs to be loaded at the same time (e.g. with route-based code-splitting).\n\u003e For more information on vite please refer to https://vite.dev/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpriyoraven%2Fuser-management-assignment","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpriyoraven%2Fuser-management-assignment","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpriyoraven%2Fuser-management-assignment/lists"}