{"id":21802923,"url":"https://github.com/webmobiledev/react-test","last_synced_at":"2025-03-21T07:15:49.079Z","repository":{"id":94639151,"uuid":"465854412","full_name":"webmobiledev/react-test","owner":"webmobiledev","description":null,"archived":false,"fork":false,"pushed_at":"2022-03-03T21:27:24.000Z","size":1459,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-26T04:09:12.505Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/webmobiledev.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":"2022-03-03T19:18:25.000Z","updated_at":"2022-03-03T19:23:52.000Z","dependencies_parsed_at":"2023-03-30T08:35:08.214Z","dependency_job_id":null,"html_url":"https://github.com/webmobiledev/react-test","commit_stats":null,"previous_names":["webmobiledev/react-test"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webmobiledev%2Freact-test","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webmobiledev%2Freact-test/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webmobiledev%2Freact-test/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webmobiledev%2Freact-test/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webmobiledev","download_url":"https://codeload.github.com/webmobiledev/react-test/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244752362,"owners_count":20504256,"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":[],"created_at":"2024-11-27T11:34:50.557Z","updated_at":"2025-03-21T07:15:49.063Z","avatar_url":"https://github.com/webmobiledev.png","language":"JavaScript","readme":"At Repeat, a lot of our client-side product surface area involves fetching data from an API, presenting a form to modify the data, and sending updated data back to the server.\n\nAs such, for this code exercise, we'd like you to build a React application that:\n\n1. Fetches a `Product` from a mock API (see interface definition below)\n2. Displays a form for editing the properties of that product\n    * Change the product `title`\n    * Add, remove, and edit the product's `tags`\n    * Change the `vendor` of the product\n    * Turn `replenishable` on/off\n    * Change the product `status`\n3. Sends the updated product information back to the mock API when a user submits the form\n\nIn this starter project – scaffolded with [Create React App](https://reactjs.org/docs/create-a-new-react-app.html) [(CRA.md)](./CRA.md), we've built out that mock API with a tool called [Mirage](https://miragejs.com/). What this means is that from your React app, you can `GET` and `PATCH` the following endpoints to retrieve and update product information. For simplicity's sake, you can assume there's only a single product, with an id of `1`. \n\n```\nGET /api/products/1\nPATCH /api/products/1\n```\n\nWhen making API calls from your React app, note that they won't appear as XHR requests in the Network tab of your browser developer tools. Instead, they'll appear in the console as individual log lines that you can inspect.\n\n\u003cimg width=\"504\" alt=\"Screen Shot 2020-12-01 at 1 24 21 PM\" src=\"https://user-images.githubusercontent.com/5148596/100781048-87d88a80-33d8-11eb-931f-75ed6b0e22e5.png\"\u003e\n\nWhile we won't be evaluating you for your visual design skills, you should build a form that's intuitive and accessible. Feel free to leverage whatever libraries you find necessary (be they for UI components, state management, or forms). We're interested in your opinions about building things with React.\n\nWe'd like to see what you can accomplish in 4 hours - if you complete the initial task, you can move on to:\n\n1. Adding tests for the components you write\n2. Adding client-side validation\n3. Support for multiple product forms (instead of the single, hard-coded product)\n\nPlease reach out with any questions!\n\n```tsx\ninterface Product {\n  title: string;\n  tags: string[];\n  vendor: string;\n  replenishable: boolean;\n  status: 'archived' | 'draft' | 'active';\n}\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebmobiledev%2Freact-test","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebmobiledev%2Freact-test","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebmobiledev%2Freact-test/lists"}