Boilerplate Complete and Updated with Next.js, TypeScript, Tests, Clean Architecture and DDD

📝 About the Project

This application is a boilerplate for complex and large systems, especially those that need to scale with security and code quality, following the principles of Clean Architecture and of DDD.

We sought to achieve three pillars: readability, reusability, and refactorability.

For the UI construction, the Atomic Design structure was chosen, organizing global components into atoms, molecules, organisms, and templates.

In addition to being constantly updated, this project was meticulously configured to serve as a foundation for professional projects that require a standardized, maintainable, and scalable code architecture and design.

---

📌 Contents

• Technologies
• Features
• Prerequisites
• How to install and run the project
  • Clone Repository
  • Install Dependencies
  • Start Development Environment
  • Generate Production Build
  • Start Production Environment
  • Run Tests
  • Run Tests in Watch Mode
  • Run Lints
  • Format code with prettier
  • Check for Available Updates for Dependencies
• Important Considerations
• Author

---

🌐 Technologies

⚛ Next.js

🔥 TypeScript

💅 CSS Modules

🏛 Clean Architecture + DDD

🚩 Lints: Lefthook, BiomeJS and Commitlint

✅ Vitest

🐙 React Testing Library

---

🚩 Features

• Responsive design;

• Atomic Design;

• 100% coverage;

• Detection prefers-reduced-motion;

• Clean Architecture structure + DDD;

---

✅ Prerequisites

• node (latest version lts).

• pnpm (latest version lts).

---

❓ How to install and run the project

Clone Repository

git clone https://github.com/everton-dgn/clean_arch_nextjs.git

Install Dependencies

pnpm i

Start Development Environment

pnpm dev

Available in http://localhost:3000

Generate Production Build

pnpm build

Start Production Environment

pnpm start

Available in http://localhost:3000

Run Tests

pnpm test

Run Tests in Watch Mode

pnpm test:w

Available in http://localhost:6006

Run Lints

pnpm lint

pnpm typecheck

Format code with BiomeJS

pnpm format

Check for Available Updates for Dependencies

pnpm check:update

---

🧑‍💻 Author

By Éverton Toffanetto.

🔗 LinkedIn: https://www.linkedin.com/in/everton-toffanetto

🔗 YouTube: https://youtube.com/@toffanettodev

---

🌐 Portuguese / Português

Boilerplate Completo e Atualizado com Next.js, TypeScript, Testes, Clean Architecture e DDD

📝 Sobre o Projeto

Esta aplicação é um boilerplate para sistemas complexos e de grande porte, especialmente aqueles que precisam escalar com segurança e qualidade de código, seguindo os princípios da Clean Architecture e do DDD.

Buscou-se alcançar três pilares: legibilidade, reusabilidade e refatorabilidade.

Para a construção da UI, foi escolhida a estrutura Atomic Design, organizando componentes globais em átomos, moléculas, organismos e templates.

Além de estar constantemente atualizado, este projeto foi meticulosamente configurado para servir como base para projetos profissionais que exigem uma arquitetura e design de código padronizado, manutenível e escalável.

---

📌 Conteúdos

• Tecnologias
• Funcionalidades
• Pré-requisitos
• Como instalar e executar o projeto
  • Clonar Repositório
  • Instalar Dependências
  • Iniciar Ambiente de Desenvolvimento
  • Gerar Build de Produção
  • Iniciar Ambiente de Produção
  • Executar Testes
  • Executar Testes em Modo Watch
  • Executar Lints
  • Formatar código com BiomeJS
  • Verificar Atualizações Disponíveis para Dependências
• Considerações Importantes
• Autor

---

🌐 Tecnologias

⚛ Next.js

🔥 TypeScript

💅 CSS Modules

🏛 Clean Architecture + DDD

🚩 Lints: Lefthook, BiomeJS e Commitlint

✅ Vitest

🐙 React Testing Library

---

🚩 Funcionalidades

• Design responsivo;

• Atomic Design;

• 100% de cobertura;

• Detecção prefers-reduced-motion;

• Estrutura Clean Architecture + DDD;

---

✅ Pré-requisitos

• node (última versão lts).

• pnpm (última versão lts).

---

❓ Como instalar e executar o projeto

Clonar Repositório

git clone https://github.com/everton-dgn/clean_arch_nextjs.git

Instalar Dependências

pnpm i

Iniciar Ambiente de Desenvolvimento

pnpm dev

Disponível em http://localhost:3000

Gerar Build de Produção

pnpm build

Iniciar Ambiente de Produção

pnpm start

Disponível em http://localhost:3000

Executar Testes

pnpm test

Executar Testes em Modo Watch

pnpm test:w

Disponível em http://localhost:6006

Executar Lints

pnpm lint

pnpm typecheck

Formatar código com BiomeJS

pnpm format

Verificar Atualizações Disponíveis para Dependências

pnpm check:update

---

🧑‍💻 Autor

Por Éverton Toffanetto.

🔗 LinkedIn: https://www.linkedin.com/in/everton-toffanetto

🔗 YouTube: https://youtube.com/@toffanettodev