https://github.com/ajeetchaulagain/react-clean-code-pattern

: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.
https://github.com/ajeetchaulagain/react-clean-code-pattern

code-maintance context-api-react custom-hooks data-abstraction json-server nextjs quality-code react rest-api

Last synced: about 1 month ago
JSON representation

: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.

• Host: GitHub
• URL: https://github.com/ajeetchaulagain/react-clean-code-pattern
• Owner: ajeetchaulagain
• License: mit
• Created: 2020-08-08T08:25:02.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-12-27T16:12:47.000Z (about 1 year ago)
• Last Synced: 2024-05-21T03:21:52.376Z (7 months ago)
• Topics: code-maintance, context-api-react, custom-hooks, data-abstraction, json-server, nextjs, quality-code, react, rest-api
• Language: JavaScript
• Homepage: react-clean-code-pattern.vercel.app
• Size: 2.33 MB
• Stars: 17
• Watchers: 3
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE.md

Awesome Lists containing this project

README

        
[![Maintainability](https://api.codeclimate.com/v1/badges/a6d60674d4ba845424cb/maintainability)](https://codeclimate.com/github/ajeetchaulagain/react-clean-code-pattern/maintainability)

# react-clean-code-pattern

I 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.

## Instructions on Running Project

This 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.

## Running a Project

1. Clone this repo and cd to project root directory

2. Install required npm packages - `npm i`

3. Run the Next.js dev server - `npm run dev`

4. Run the json-server - `npm run json-server`

This 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.

**Note**: The dummy data required to simulate REST server through json-server is extracted from https://randomuser.me/ and stored at `/data/db.json`

## Resources

- [Setting up Next.js Project](https://nextjs.org/docs/getting-started)

- [Configuring Tailwind CSS on NextJS project](https://statickit.com/guides/next-js-tailwind)

- [React Context API](https://reactjs.org/docs/context.html)

- [randomuser.me - free opensource api for generating random user](https://randomuser.me/)

- [json-server : Fake REST API simulator](https://github.com/typicode/json-server)

## Contribution

If you find any issues or improvement regarding the code please consider submitting the pull request.

## License

This project is open source and available under [MIT License](LICENSE)