{"id":21001769,"url":"https://github.com/timoanttila/react-user-management","last_synced_at":"2026-04-29T07:32:46.819Z","repository":{"id":222001441,"uuid":"755987078","full_name":"timoanttila/react-user-management","owner":"timoanttila","description":"A simple example of how users can be managed with React. This UI allows users to be listed, added, edited, and deleted.","archived":false,"fork":false,"pushed_at":"2024-02-11T17:49:24.000Z","size":1255,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-20T09:47:11.778Z","etag":null,"topics":["mui","mui-material","react","react-material-ui","react-template","reactjs","reactjs-template","user-interface","user-management","users"],"latest_commit_sha":null,"homepage":"https://timoanttila.github.io/react-user-management/","language":"TypeScript","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/timoanttila.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}},"created_at":"2024-02-11T17:01:21.000Z","updated_at":"2024-02-11T17:08:20.000Z","dependencies_parsed_at":"2024-02-11T18:25:36.871Z","dependency_job_id":"62be2a3b-1318-46d3-a656-e5b4aca2f147","html_url":"https://github.com/timoanttila/react-user-management","commit_stats":null,"previous_names":["timoanttila/react-user-management"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timoanttila%2Freact-user-management","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timoanttila%2Freact-user-management/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timoanttila%2Freact-user-management/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timoanttila%2Freact-user-management/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/timoanttila","download_url":"https://codeload.github.com/timoanttila/react-user-management/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243419073,"owners_count":20287805,"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":["mui","mui-material","react","react-material-ui","react-template","reactjs","reactjs-template","user-interface","user-management","users"],"created_at":"2024-11-19T08:16:26.387Z","updated_at":"2025-12-29T07:58:53.113Z","avatar_url":"https://github.com/timoanttila.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Simple user management powered by React\n\nA simple example of how users can be managed with [React](https://react.dev/). This UI allows users to be listed, added, edited, and deleted. There is no password or login handling. This is similar to to-do apps.\n\nThis was part of my job search process, but I think this is also a good example for new coders on how to create basic user management for the frontend.\n\nI have used [MUI - Material Design React Framework](https://mui.com/) in previous React projects, so I used its components here as well. As far as I know, it is one of the most popular React component libraries.\n\n[Web App](https://timoanttila.github.io/react-user-management/)\n\n## Features\n\n- A paginated and sortable table of 20 user objects with a random ID and phone number.\n- Form for creating a new user.\n- Modal and form for editing the current user.\n- Both forms' submit buttons are disabled if the length of the fields is not valid.\n- Snackbar + alert for messages.\n- Email validation.\n- TypeScript support.\n\n## Available Scripts\n\nIn the project directory, you can run:\n\n```Shell\nyarn \u0026\u0026 yarn start\n```\n\nRuns the app in the development mode.  \nOpen [http://localhost:3000/react-user-management](http://localhost:3000/react-user-management) to view it in the browser.\n\nThe page will reload if you make edits.  \nYou will also see any `lint` errors in the console.\n\n## Types\n\n```TypeScript\ninterface User {\n  email: string\n  id: number\n  name: string\n  phoneNumber: string\n}\n\ninterface Message {\n  type: 'success' | 'error'\n  value: string\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimoanttila%2Freact-user-management","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftimoanttila%2Freact-user-management","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimoanttila%2Freact-user-management/lists"}