{"id":20397440,"url":"https://github.com/ajeetchaulagain/react-clean-code-pattern","last_synced_at":"2025-04-12T13:09:24.938Z","repository":{"id":37676265,"uuid":"286003670","full_name":"ajeetchaulagain/react-clean-code-pattern","owner":"ajeetchaulagain","description":":bulb: A project that demonstrates the possibility of managing data in your React project that talks to external REST API through Context API and custom Hooks, increasing your code quality and maintainability. ","archived":false,"fork":false,"pushed_at":"2023-12-27T16:12:47.000Z","size":2448,"stargazers_count":19,"open_issues_count":0,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-12T13:09:13.892Z","etag":null,"topics":["code-maintance","context-api-react","custom-hooks","data-abstraction","json-server","nextjs","quality-code","react","rest-api"],"latest_commit_sha":null,"homepage":"react-clean-code-pattern.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/ajeetchaulagain.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":"ajeetchaulagain","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2020-08-08T08:25:02.000Z","updated_at":"2024-12-22T16:00:24.000Z","dependencies_parsed_at":"2022-08-30T22:41:27.645Z","dependency_job_id":null,"html_url":"https://github.com/ajeetchaulagain/react-clean-code-pattern","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajeetchaulagain%2Freact-clean-code-pattern","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajeetchaulagain%2Freact-clean-code-pattern/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajeetchaulagain%2Freact-clean-code-pattern/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajeetchaulagain%2Freact-clean-code-pattern/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ajeetchaulagain","download_url":"https://codeload.github.com/ajeetchaulagain/react-clean-code-pattern/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248571886,"owners_count":21126522,"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":["code-maintance","context-api-react","custom-hooks","data-abstraction","json-server","nextjs","quality-code","react","rest-api"],"created_at":"2024-11-15T04:14:13.374Z","updated_at":"2025-04-12T13:09:24.918Z","avatar_url":"https://github.com/ajeetchaulagain.png","language":"JavaScript","funding_links":["https://ko-fi.com/ajeetchaulagain"],"categories":[],"sub_categories":[],"readme":"[![Maintainability](https://api.codeclimate.com/v1/badges/a6d60674d4ba845424cb/maintainability)](https://codeclimate.com/github/ajeetchaulagain/react-clean-code-pattern/maintainability)\n\n# react-clean-code-pattern\n\nI have created this project to demonstrate how a data/state in react components can be managed in a clean, maintainable way using the React Context API combined with custom hooks.\n\n## Instructions on Running Project\n\nThis project uses Next.js as a React framework as it is simple to use and comes with a lot of features. To simulate the REST server for API calls, [json-server](https://github.com/typicode/json-server) is used.\n\n## Running a Project\n\n1. Clone this repo and cd to project root directory\n2. Install required npm packages - `npm i`\n3. Run the Next.js dev server - `npm run dev`\n4. Run the json-server - `npm run json-server`\n\nThis will lunch your next.js application at port 3000 and json-server at port 4000 in your local machine. Browse [http://localhost:3000]([http://localhost:3000]) to view the application.\n\n**Note**: The dummy data required to simulate REST server through json-server is extracted from https://randomuser.me/ and stored at `/data/db.json`\n\n## Resources\n\n- [Setting up Next.js Project](https://nextjs.org/docs/getting-started)\n- [Configuring Tailwind CSS on NextJS project](https://statickit.com/guides/next-js-tailwind)\n- [React Context API](https://reactjs.org/docs/context.html)\n- [randomuser.me - free opensource api for generating random user](https://randomuser.me/)\n- [json-server : Fake REST API simulator](https://github.com/typicode/json-server)\n\n## Contribution\n\nIf you find any issues or improvement regarding the code please consider submitting the pull request.\n\n## License\n\nThis project is open source and available under [MIT License](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fajeetchaulagain%2Freact-clean-code-pattern","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fajeetchaulagain%2Freact-clean-code-pattern","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fajeetchaulagain%2Freact-clean-code-pattern/lists"}