: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.
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 is used.
Running a Project
- Clone this repo and cd to project root directory
- Install required npm packages -
npm i - Run the Next.js dev server -
npm run dev - 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 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
- Configuring Tailwind CSS on NextJS project
- React Context API
- randomuser.me - free opensource api for generating random user
- json-server : Fake REST API simulator
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