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.
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.
- 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
- 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
If you find any issues or improvement regarding the code please consider submitting the pull request.
This project is open source and available under MIT License
