Boilerplate Complete and updated with Next.js, Typescript, Tests and more

📝 About the Project

This application is a boilerplate for complex and large systems, especially those that need to scale with security and code quality.

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

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

In addition to being constantly updated, this project was configured in the smallest details to serve as a basis for professional projects that require standardized and easy-to-maintain 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 BiomeJS
  • Check for Available Updates for Dependencies
• Guides
• Important Considerations
• References
• Author

---

🌐 Technologies

⚛ Next.js

🔥 TypeScript

💅 CSS Modules

🚩 Lints: Lefthook, BiomeJS and Commitlint

✅ Vitest

🐙 React Testing Library

---

🚩 Features

• Responsive design;

• Atomic Design;

• 100% coverage;

• Detection prefers-reduced-motion;

---

✅ Prerequisites

• node 24.x (see package.json engines and .nvmrc).

• pnpm 10.x via Corepack (see package.json packageManager).

---

❓ How to install and run the project

Clone Repository

git clone https://github.com/everton-dgn/boilerplate_nextjs_app.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

Runs in watch mode in the terminal.

Run Lints

pnpm lint

pnpm typecheck

Format code with BiomeJS

pnpm format

Check for Available Updates for Dependencies

pnpm check:update

---

📚 Guides

• Quick start
• Quality constraints
• Architecture
• Workflows
• FAQ
• Troubleshooting by platform

---

🚨 Important Considerations

• This boilerplate enforces a strict quality bar. Read docs/quality-constraints.md before starting.
• Commits must follow Conventional Commits for the automated release flow.
• Use Node and pnpm versions defined in package.json.
• Keep Node versions aligned across package.json, .node-version, .nvmrc, and GitHub Actions.

---

🔗 References

• Next.js: https://nextjs.org/docs
• React: https://react.dev
• Biome: https://biomejs.dev
• Commitlint: https://commitlint.js.org
• Lefthook: https://github.com/evilmartians/lefthook
• Semantic-release: https://semantic-release.gitbook.io
• Vitest: https://vitest.dev
• Playwright: https://playwright.dev
• TypeScript: https://www.typescriptlang.org/docs

---

🧑‍💻 Author

By Éverton Toffanetto.

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

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