{"id":24782220,"url":"https://github.com/rajeshkumarruppa/userdashboard_app","last_synced_at":"2026-04-09T09:39:14.115Z","repository":{"id":274476169,"uuid":"922985545","full_name":"rajeshkumarruppa/UserDashboard_App","owner":"rajeshkumarruppa","description":"Developed a simple web application where users can view, add, edit, and delete user details from a mock backend API.","archived":false,"fork":false,"pushed_at":"2025-01-27T15:34:37.000Z","size":57,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-27T15:38:09.164Z","etag":null,"topics":["axios","bootstrap5","crud-operation","css","javascript","mockapi","react"],"latest_commit_sha":null,"homepage":"https://userdashboard-raj.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rajeshkumarruppa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-01-27T12:56:14.000Z","updated_at":"2025-01-27T15:34:40.000Z","dependencies_parsed_at":"2025-01-27T15:48:25.309Z","dependency_job_id":null,"html_url":"https://github.com/rajeshkumarruppa/UserDashboard_App","commit_stats":null,"previous_names":["rajeshkumarruppa/userdashboard_app"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajeshkumarruppa%2FUserDashboard_App","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajeshkumarruppa%2FUserDashboard_App/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajeshkumarruppa%2FUserDashboard_App/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajeshkumarruppa%2FUserDashboard_App/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rajeshkumarruppa","download_url":"https://codeload.github.com/rajeshkumarruppa/UserDashboard_App/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245214739,"owners_count":20578844,"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":["axios","bootstrap5","crud-operation","css","javascript","mockapi","react"],"created_at":"2025-01-29T11:16:33.620Z","updated_at":"2025-12-30T23:28:03.679Z","avatar_url":"https://github.com/rajeshkumarruppa.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"a# React + Vite\n\nThis template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.\n\nCurrently, two official plugins are available:\n\n- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh\n- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh\n\n\n\n Dashboard with CRUD Operations\n\n App videodemo:\nhttps://drive.google.com/file/d/1bQWFDHXVJh5ntpGh2qOsnoa_qQMqPoiC/view?usp=sharing\n\n\n  \n\nDescription\n\nThis project is a user dashboard application that performs CRUD (Create, Read, Update, Delete) operations using React and Axios. Instead of using a test API like JSONPlaceholder, we have set up a local JSON server using the json-server package. The server simulates a REST API to manage user data. All the CRUD operations interact with this local server.\n\nFeatures\n\nCreate: Add new users to the database.\n\nRead: Fetch and display the list of users from the server.\n\nUpdate: Edit and update existing user details.\n\nDelete: Remove users from the database.\n\nValidation: Ensures that all user inputs are valid before submission.\n\nPagination: Displays a paginated list of users for better navigation.\n\nResponsive Design: Optimized for all screen sizes using Bootstrap.\n\n\n1. Clone the Repository\n\ngit clone \u003crepository-url\u003e\ncd user_crud-app\n\n2. Install Dependencies\n\nRun the following command to install all required packages:\n\nnpm install\n\n3. Installed Packages\n\nBootstrap: For styling and responsive design.\n\nAxios: For handling HTTP requests.\n\nReact Router DOM: For routing between pages.\n\nJSON Server: To simulate a backend API.\n\n6. Start the React App\n\n\nIn a separate terminal, start the React development server:\n\nnpm run dev\n\n\n\n\nUsage\n\nHomepage: Displays the list of users with pagination.\n\nAdd User: Navigate to the Add User page to create new users with validation.\n\nEdit User: Click the edit button to modify user details.\n\nDelete User: Use the delete button to remove a user from the list.\n\nTechnologies Used\n\nReact: For building the user interface.\n\nAxios: For making HTTP requests.\n\nJSON Server: For simulating a backend REST API.\n\nBootstrap: For styling and responsive design.\n\nReact Router DOM: For routing and navigation.\n\nExample Endpoints\n\nThe JSONPlaceHolder i used this mockapi =https://67977c52c2c861de0c6ce6a8.mockapi.io/users/users\n\nFetch all users:\n\nGET (https://67977c52c2c861de0c6ce6a8.mockapi.io/users/users)\n\n-Implemented pagination or infinite scrolling for the user list.\n\n![Screenshot 2025-01-27 191556](https://github.com/user-attachments/assets/58bfc55d-467c-4504-85ed-e0bda67c9d72)\n\n\nAdd a user:\n\nPOST (https://67977c52c2c861de0c6ce6a8.mockapi.io/users/users)\n\n-Added client-side validation for the user input form.\n\n![Screenshot 2025-01-27 191708](https://github.com/user-attachments/assets/a69186a2-5a7a-40ec-b2c5-04cf12f9e3c6)\n\n\nUpdate a user:\n\nPUT https://67977c52c2c861de0c6ce6a8.mockapi.io/users/users/:id\n\n![image](https://github.com/user-attachments/assets/653d4268-8a01-45ee-ab80-abbe555111a7)\n\n\nDelete a user:\n\nDELETE https://67977c52c2c861de0c6ce6a8.mockapi.io/users/users/:id\n\n\n\n#Challenges Faced\n\n\nDuring the development process, a key challenge I encountered was creating and customizing mock APIs for CRUD operations. This often consumed a significant amount of time, particularly when ensuring the mock data aligned with the expected structure and behavior of real API endpoints. Managing data consistency and customizing the response to match various use cases added complexity to this part of the development.\n\n\nAuthor\n\nDeveloped by Rajesh Kumar Ruppa.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frajeshkumarruppa%2Fuserdashboard_app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frajeshkumarruppa%2Fuserdashboard_app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frajeshkumarruppa%2Fuserdashboard_app/lists"}