Patterns

Nice pattern structure of code

Project Structure

This project follows a combination of Atomic Design principles and feature-based organization to maintain a scalable and maintainable codebase.

Next.js Implementation Guide

To implement this structure in Next.js, we need to adapt it to Next.js conventions while maintaining Atomic Design principles:

project-root/
├── src/
│   ├── app/              # Next.js App Router
│   │   ├── (auth)/      # Auth route group
│   │   │   ├── login/   # Login route
│   │   │   └── signup/  # Signup route
│   │   ├── dashboard/   # Dashboard route
│   │   ├── reports/     # Reports route
│   │   ├── profile/     # Profile route
│   │   ├── layout.tsx   # Root layout
│   │   └── page.tsx     # Home page
│   ├── components/      # Atomic Design components
│   │   ├── atoms/      # Basic UI elements
│   │   ├── molecules/  # Composite components
│   │   ├── organisms/  # Complex components
│   │   ├── templates/  # Page layouts and templates
│   │   └── layouts/    # General layouts
│   ├── features/       # Feature-based logic
│   │   ├── dashboard/
│   │   │   ├── api/    # Dashboard API handlers
│   │   │   ├── hooks/  # Custom hooks
│   │   │   └── utils/  # Utility functions
│   │   ├── reports/
│   │   └── profile/
│   ├── lib/           # Shared utilities
│   │   ├── api/       # API utilities
│   │   └── db/        # Database utilities
│   ├── styles/        # Global styles
│   └── themes/        # Theme configuration
├── public/           # Static assets
└── next.config.js    # Next.js configuration

Key Implementation Details

  1. App Router Structure

    // src/app/layout.tsx
import { ThemeProvider } from '@/themes'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <ThemeProvider>
        <body>{children}</body>
      </ThemeProvider>
    </html>
  )
}

  2. Component Organization

    // src/components/atoms/Button/index.tsx
export const Button = ({ children, ...props }) => {
  return <button {...props}>{children}</button>
}

// src/components/molecules/SearchForm/index.tsx
import { Button } from '@/components/atoms/Button'
import { Input } from '@/components/atoms/Input'

export const SearchForm = () => {
  return (
    <form>
      <Input />
      <Button>Search</Button>
    </form>
  )
}

  3. Feature Implementation

    // src/features/dashboard/api/getData.ts
export async function getDashboardData() {
  // API logic
}

// src/app/dashboard/page.tsx
import { DashboardTemplate } from '@/components/templates/Dashboard'
import { getDashboardData } from '@/features/dashboard/api/getData'

export default async function DashboardPage() {
  const data = await getDashboardData()
  return <DashboardTemplate data={data} />
}

  4. Theme Implementation

    // src/themes/baseTheme.ts
export const baseTheme = {
  colors: {
    primary: '#007AFF',
    // ...
  },
}

// src/themes/index.ts
'use client'
import { ThemeProvider as NextThemeProvider } from 'next-themes'

Next.js-Specific Best Practices

  1. Route Organization

    • Use route groups (folderName) for logical grouping
    • Implement layouts per section using layout.tsx
    • Keep page components thin, delegate to templates

  2. Data Fetching

    • Use Server Components by default
    • Place API calls in feature directories
    • Implement loading UI with loading.tsx
    • Handle errors with error.tsx

  3. State Management

    • Use React Server Components where possible
    • Implement client-side state in features/[feature]/hooks
    • Keep global state minimal

  4. Performance Optimization

    • Implement proper component boundaries
    • Use Image component for images
    • Leverage Next.js built-in optimizations

Directory Structure Overview

project-root/
├── src/                    # Source code
│   ├── components/         # Atomic Design components
│   │   ├── atoms/         # Basic UI elements (buttons, inputs, labels, etc.)
│   │   ├── molecules/     # Composite components (search form)
│   │   ├── organisms/     # Complex components (header, footer)
│   │   ├── templates/     # Page layouts and templates (home, login, etc.)
│   │   └── layouts/       # General layouts (main, auth, etc.)
│   ├── features/          # Feature-based organization
│   │   ├── dashboard/     # Dashboard feature
│   │   ├── reports/       # Reports feature
│   │   └── profile/       # Profile feature
│   ├── themes/            # Theme configuration
│   │   ├── baseTheme.ts
│   │   ├── customer1Theme.ts
│   │   ├── customer2Theme.ts
│   │   └── index.ts
│   ├── pages/            # Main application pages
│   │   ├── HomePage.tsx
│   │   ├── LoginPage.tsx
│   │   └── ErrorPage.tsx
│   └── App.tsx           # Main application entry point
└── public/               # Static assets
    └── assets/          # Images, icons, etc.

Detailed Structure Explanation

Components (Atomic Design)

The components directory follows Atomic Design methodology:

  • Atoms: Basic building blocks like buttons, inputs, labels
  • Molecules: Simple combinations of atoms (e.g., search form with input and button)
  • Organisms: Complex UI components (e.g., header, footer, navigation)
  • Templates: Page-level component layouts
  • Layouts: Reusable layout structures

Feature-based Organization

The features directory contains feature-specific modules:

  • Dashboard: Dashboard-related components and logic
  • Reports: Reporting functionality
  • Profile: User profile management

Theming System

The themes directory manages application styling:

  • baseTheme.ts: Default theme configuration
  • customer1Theme.ts & customer2Theme.ts: Customer-specific themes
  • index.ts: Theme selection and management

Pages

The pages directory contains main application views:

  • HomePage.tsx: Landing page
  • LoginPage.tsx: Authentication page
  • ErrorPage.tsx: Error handling page

Static Assets

The public/assets directory stores static resources:

  • Images
  • Icons
  • Logos
  • Other static files

Best Practices

  1. Keep components atomic and reusable
  2. Maintain feature isolation
  3. Follow consistent naming conventions
  4. Use proper type definitions
  5. Keep theme configurations separate
  6. Centralize routing in pages directory

This structure promotes:

  • Code reusability
  • Maintainability
  • Scalability
  • Clear separation of concerns
  • Easy theme customization
  • Feature isolation