React Clean Code Pattern

March 2020
ReactCustom HooksContext APINext.jsTaiwind CSS


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.


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.


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

← Back to project list

Ajeet Chaulagain © 2020. All rights reserved.

Proudly built with React, Gatsby, GraphQL, Typescript, Styled Components, Netlify and Nodejs