screaming-architecture-nextjs

KO | EN

gitlite — search

#python #typescript #react #machine-learning #hacktoberfest #rust #reactjs #llm #nextjs #javascript #docker #postgresql

screaming-architecture-nextjs

★ 43 Open GitHub ↗

This project is a highly scalable architecture for NextJS 13, built and configured to easily achieve quality and consistency of code among the team of developers.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

## 📔 Overview

This project is a highly scalable architecture for NextJS 13, built and configured to easily achieve quality and consistency of code among the team of developers.

### 📜 Table of Contents

- [Introduction to Screaming Architecture](#-introduction-to-screaming-architecture)
- [Getting Started](#-getting-started)
  - [Three ways to use this project](#-three-ways-to-use-this-project)
  - [Run the App](#-run-the-app)
- [Code Generator](#-code-generator)
  - [Base Path](#-base-path)
  - [Generate Component](#-generate-component)
  - [Generate Context-Reducer](#-generate-context-reducer)
  - [Generate Context](#-generate-context)
  - [Generate Custom-Hook](#-generate-custom-hook)
  - [Generate Utils](#-generate-utils)
  - [Shorthand Command](#-shorthand-command)
- [Project Architecture Rules](#-project-architecture-rules)
  - [Group by feature](#%EF%B8%8F-rule-1-group-by-feature)
  - [Create a separate file for each module](#%EF%B8%8F-rule-2-create-a-separate-file-for-each-module)
  - [Avoid nesting of feature files inside feature file](#%EF%B8%8F-rule-3-avoid-nesting-of-feature-files-inside-feature-file)
  - [Create barrel file then name the component file by its name, not index.tsx](#%EF%B8%8F-rule-4-create-barrel-file-then-name-the-component-file-by-its-name-not-indextsx)
  - [Create a type-only barrel file for types](#%EF%B8%8F-rule-5-create-a-type-only-barrel-file-for-types)
  - [Place UI components inside features/ui directory](#%EF%B8%8F-rule-6-place-ui-components-inside-featuresui-directory)
  - [Place utility functions inside features/utils directory](#%EF%B8%8F-rule-7-place-utility-functions-inside-featuresutils-directory)
  - [Create separate directory for section components](#%EF%B8%8F-rule-8-create-separate-directory-for-section-components)
  - [Use kebab-case for file/folder names](#%EF%B8%8F-rule-9-use-kebab-case-for-filefolder-names)
  - [Use relative import when importing from the same module](#%EF%B8%8F-rule-10-use-relative-import-when-importing-from-the-same-module)
  - [Reference](#-reference)
  - [Notes](#-notes)
- [Feature File Structure](#-feature-file-structure)
  - [Component](#-component)
  - [Section Component](#-section-component)
  - [Context-Reducer](#-context-reducer)
  - [Context](#-context)
  - [Hooks](#-hooks)
  - [Utils](#-utils)
- [Project Configurations & Setup](#%EF%B8%8F-project-configurations--setup)
  - [Package Manager](#-package-manager)
  - [Continuous Integration (CI)](#-continuous-integration-ci)
  - [Husky Pre-Commit](#-husky-pre-commit)
  - [TypeScript](#-typescript)
  - [ESLint](#-eslint)
  - [VSCode Settings](#-vscode-settings)
  - [NextJS Config](#-nextjs-config)
  - [Testing Environment](#-testing-environment)
  - [SCSS Modules](#-scss-modules)
- [Resources About Screaming Architecture](#-resources-about-screaming-architecture)

## 🎉 Introduction to Screaming Architecture

**Screaming Architecture** is a concept introduced by Uncle Bob (Robert C. Martin) as a metaphor for software architecture that emphasizes the clarity and intent of the system's architecture through its structure and organization. The idea behind Screaming Architecture is to make the architecture of a software system so evident and expressive that it "screams" its purpose and design, making it easy for developers and stakeholders to understand and work with.

## 🚀 Getting Started

### 💡 Three ways to use this project

1. **Forking the Project**

- For users who want to collaborate and contribute to this project, forking this repository is the way to go.

2. **Download the Files**

- For users who simply want to integrate the project into their next project, downloading the project files is the straightforward approach.

3. **Referencing for Project Structure**
   - Maybe you already have an existing project, or perhaps the tech stack you're using is different. In such cases, you can use this project as a valuable reference for structuring your own. Extract insights, learnings, or even download essential files like code templates to enhance your project structure.

### ✨ Run the App

If you decided to either fork or do the same setup by downloading the files, you can get started by running the following command:

```
pnpm install
pnpm dev
```

This will install the necessary dependencies and launch the app in development mode.

## 🔄 Code Generator

One of the core features of this project is code generation, providing built-in templates for the [structures outlined here](#-feature-file-structure). Maintaining code consistency in a codebase can be challenging, especially when working with a team of junior, mid, and senior developers. This feature aims to establish code consistency in your codebase and will save you a lot of time by avoiding the need to set up boilerplates every time.

### 💡 Base Path

The base path of every generated code is `src/features`, so when you input `todos` in `File path` prompt, the generated code will be placed in `src/features/todos`.

### ⭐ Generate Component

Generate component by running this command:

```
pnpm plop component
```