{"id":18584092,"url":"https://github.com/e-candeloro/react-crud-client-app","last_synced_at":"2026-04-14T15:32:26.350Z","repository":{"id":114095351,"uuid":"585266191","full_name":"e-candeloro/React-CRUD-Client-APP","owner":"e-candeloro","description":"A simple React App for C.R.U.D. operations on data from an external REST API","archived":false,"fork":false,"pushed_at":"2023-01-07T09:55:23.000Z","size":334,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-16T05:37:02.348Z","etag":null,"topics":["bulma-css","create-react-app","crud","crud-application","javascript","react","react-router","reacthookform","reactjs","rest-client","template","yup-validation"],"latest_commit_sha":null,"homepage":"","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/e-candeloro.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":"2023-01-04T18:30:17.000Z","updated_at":"2024-10-04T01:27:19.000Z","dependencies_parsed_at":"2023-06-12T17:43:34.018Z","dependency_job_id":null,"html_url":"https://github.com/e-candeloro/React-CRUD-Client-APP","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/e-candeloro/React-CRUD-Client-APP","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/e-candeloro%2FReact-CRUD-Client-APP","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/e-candeloro%2FReact-CRUD-Client-APP/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/e-candeloro%2FReact-CRUD-Client-APP/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/e-candeloro%2FReact-CRUD-Client-APP/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/e-candeloro","download_url":"https://codeload.github.com/e-candeloro/React-CRUD-Client-APP/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/e-candeloro%2FReact-CRUD-Client-APP/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31803275,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-14T11:13:53.975Z","status":"ssl_error","status_checked_at":"2026-04-14T11:13:53.299Z","response_time":153,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["bulma-css","create-react-app","crud","crud-application","javascript","react","react-router","reacthookform","reactjs","rest-client","template","yup-validation"],"created_at":"2024-11-07T00:26:08.130Z","updated_at":"2026-04-14T15:32:26.332Z","avatar_url":"https://github.com/e-candeloro.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React CRUD API Client App\n\n![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge\u0026logo=javascript\u0026logoColor=%23F7DF1E) ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge\u0026logo=react\u0026logoColor=%2361DAFB) ![React Router](https://img.shields.io/badge/React_Router-CA4245?style=for-the-badge\u0026logo=react-router\u0026logoColor=white) ![React Hook Form](https://img.shields.io/badge/React%20Hook%20Form-%23EC5990.svg?style=for-the-badge\u0026logo=reacthookform\u0026logoColor=white) ![Bulma](https://img.shields.io/badge/bulma-00D0B1?style=for-the-badge\u0026logo=bulma\u0026logoColor=white)\n\nA simple React App for C.R.U.D. operations on data from an external REST API.\n\n## Preview\n\n\u003cimg src=\"https://user-images.githubusercontent.com/67196406/210624907-57ab5337-ab01-4238-bd0d-a67306907949.png\" width=\"500\"\u003e\n\n\u003cimg src=\"https://user-images.githubusercontent.com/67196406/210624999-846e2b24-686f-4adc-aa84-6961d6cbe64d.png\" width=\"500\"\u003e\n\n\u003cimg src=\"https://user-images.githubusercontent.com/67196406/210625070-e20bd03a-60d9-4993-8935-bc442bca076d.png\" width=\"500\"\u003e\n\n## Packages Used\n\nThis project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).\n\nThis App uses mainly the following npm packages:\n\n- React DOM Router\n- React Hook Form\n- Yup validator\n- Bulma CSS\n\n## Setup\n\nNode.js and Node Package Manager (NPM) are required to run and build this project.\nTo setup the app, while inside the project folder, execute the following commands:\n\n```Shell\n  npm install\n  npm start\n```\n\nThis will install all the dependencies and run a server in development mode on [http://localhost:3000](http://localhost:3000).\n\n## Usage\n\nIn the `App.jsx` inside the src folder, various arguments are used and passed to the app elements as props.\nIn particular the base url, with the various urls parameters are used to make fetch calls to an API.\n\n## API Endpoints\n\nIn this case the value used are an example and fetch the data to a localhost Django web-server that serves an API with the following endpoints.\n\n### **{base_url}/elements**\n\n- GET: list of elements is returned\n- POST: a new element is added\n\n### **{base_url}/elements/{element_id}**\n\n- PUT: modifies the element data, selecting it by his element_id\n- DELETE: deletes the element with id of element_id\n\n## App Pages\n\nThe default pages for the app are mapped with the following urls:\n\n### **{app_base_url}/**\n\nShows the home page, with the API base url displayed and a link to the element list.\n\n### **{app_base_url}/elements**\n\nShows the element list fetched with a GET API call.\n\n### **{app_base_url}/edit/element_id**\n\nShows a page to edit the element with element_id, via a PUT call to the API.\n\n### **{app_base_url}/add**\n\nShows a page to add a new element via a POST call to the API.\n\n## Customization\n\nAltough the components are made to be flexible enough without editing a lot of code, some of them needs to be fixed/modified, especially the `Form.jsx` that has all the Yup validators and forms element specifically made for the data used for the example API.\n\nAn example of the JSON data fetched by example the API is:\n\n```JSON\n    {\n        \"id\": 56,\n        \"name\": \"Kiwi\",\n        \"description\": \"A beautiful 🥝\",\n        \"element_type\": \"C\"\n    }\n```\n\nAnd the yup validation Schema is the following:\n\n```JavaScript\n  const schema = yup\n    .object({\n      name: yup.string().required(),\n      description: yup.string().required(),\n      element_type: yup.mixed().oneOf([\"A\", \"B\", \"C\", \"D\"]),\n    })\n    .required();\n```\n\nAn example of the form (in this case the element name) is:\n\n```JavaScript\n          \u003cdiv className=\"field\"\u003e\n            \u003cdiv className=\"control\"\u003e\n              \u003cinput\n                className=\"input\"\n                placeholder=\"name\"\n                {...register(\"name\")}\n              /\u003e\n            \u003c/div\u003e\n            \u003cp className=\"help is-danger\"\u003e{errors.name?.message}\u003c/p\u003e\n          \u003c/div\u003e\n  ```\n\nThe register string passed,the placeholder attribute and other small tweaks are necessary to adapt to your data.\n\n## Improvements to Make\n\n- [x] Reduce props passed for urls\n- [ ] Add code comments and improve documentation\n- [ ] Use better React patterns to reduce passed props and reduce written code\n- [ ] Edit Form.jsx to generalize fetched JSON data from the API (avoid hardcoding)\n- [ ] Add a way to setting up the form validation more easily\n- [ ] Add visual feedbacks when editing/adding/deleting data  \n- [ ] Improve app navigation and layout\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fe-candeloro%2Freact-crud-client-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fe-candeloro%2Freact-crud-client-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fe-candeloro%2Freact-crud-client-app/lists"}