CLEAN React Architecture ⚛️ ⚙️

⚠️ Please note: This is a work in progress, and I am still learning about this pattern. Feel free to submit a PR if you have anything to add!

Introduction

This is a boilerplate repository demonstrating CLEAN architecture in a Next.JS app. This is my attempt at making a future-proof todo app that is easily extensible and loosely follows CLEAN principles.

The main goal for this application is to make a modular application where you can easily swap out dependencies without much friction. Take a look around the repo and check out how I have structured it.

Disclaimer:

This is not supposed to be a template, boilerplate or a framework. It is an opinionated guide that shows how to do some things in a certain way. You are not forced to do everything exactly as it is shown here, decide what works best for you and your team and stay consistent with your style.

Table of Contents

• 💻 Application Overview
• 🗄 Project Structure
  • 🎨 Presentation Layer
  • ⚙️ Application Layer
  • 📡 Infrastructure Layer
• 📚 Useful Reading

Contributing

Contributions are always welcome! If you have any ideas, suggestions, fixes, feel free to contribute. You can do that by going through the following steps:

1. Clone this repo
2. Create a branch: git checkout -b your-feature
3. Make some changes
4. Test your changes
5. Push your branch and open a Pull Request