React Clean Code Pattern

Summary

React Clean Code Pattern is a light-weight project that demonstrates the clean, reusable, and maintainable way of managing data/state in React application using Context API and Custom Hooks.

Description

This project uses Next.js to scaffold the React application and to simulate the server for API calls, JSON-server is used which is a fake REST server. To give an app a cool feeling, Tailwind CSS is used in the project.

Concept Demonstrated:

• Use of React hooks such as useState, useEffect, useReducer
• Creation of reusable custom hook by combining the core React Hooks.
• Use of Context API to pass context data down the children components and avoid props drilling

Personal Growth

Through this project, I got to enhance my react skills by learning how different core concepts of React can be implemented as a whole in a project to manage the data & state in the app in a clean and reusable way.

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

The complete source code of the project along with instructions on running it can be found on the Github repo for the project.