SODU

Opinionated React project and module wiring CLI.

SODU is a powerful CLI tool designed to scaffold and manage modern React applications with a focus on modular architecture. It simplifies the setup process for scalable front-end projects by handling configuration, dependency wiring, and enforcing structural best practices.

Features

• 🚀 Rapid Scaffolding: Spin up new React or Next.js projects in seconds with interactive prompts.
• 🏗️ Modular Architecture: Built-in support for a feature-based module structure.
• 🛠️ Tech Stack Agnostic: Supports Vite, Webpack, esbuild, and Next.js.
• 📘 TypeScript First: Defaults to TypeScript for robust type safety.
• 🎨 Styling Freedom: Native support for Tailwind CSS v4, CSS Modules, or Styled Components.
• 🧩 State Management: Pre-configured setups for Zustand, Redux Toolkit, or React Query.
• 🔍 Dependency Graph: Built-in tools to detect circular dependencies and visualize module relationships.
• 🩺 Project Doctor: Automated checks to ensure project health and configuration validity.

Installation

Install SODU globally via npm:

npm install -g sodu

Or run it directly with npx:

npx sodu init

Quick Start

Initialize a new project:

sodu init

Follow the interactive prompts to choose your stack:

1. Project Name: e.g., my-app
2. Language: TypeScript (Recommended) / JavaScript
3. Framework: React / Next.js
4. Bundler: Vite (Recommended) / Webpack / Esbuild (for React)
5. Styling: Tailwind CSS / CSS Modules / Styled Components
6. State: Zustand / Redux / React Query

Once completed, navigation into your project:

cd my-app
npm install
npm run dev

CLI Commands

sodu init

Initializes a new project with the selected configuration. Creates the folder structure, config files, and installs dependencies.

sodu module <name>

Creates a new feature module in the modules/ directory with standard structure.

sodu module auth
# Creates:
# modules/auth/
# ├── index.ts
# ├── components/
# ├── hooks/
# ├── store/
# └── utils/

sodu doctor

Scans the project for common issues:

• Circular dependencies between modules.
• Missing or invalid configuration.
• Version mismatches.
• Broken file paths.

sodu config view

Displays the current resolved configuration from sodu.config.ts.

sodu help

Displays help information for all commands.

Configuration

SODU projects are configured via a sodu.config.ts file in the project root.

// sodu.config.ts
export const soduConfig = {
  projectName: "my-app",
  language: "typescript",
  bundler: "vite",
  cssFramework: "tailwind",
  clientState: "zustand",
  serverState: "react-query",
  port: 5173,
  version: "0.1.0"
};

Project Structure

SODU encourages a domain-driven design approach where features are encapsulated in modules.

React (Vite/Webpack)

my-app/
├── modules/              # Feature modules
│   ├── auth/             # Example module
│   │   ├── components/
│   │   ├── hooks/
│   │   └── index.ts      # Public API
│   └── users/
├── src/
│   ├── app/              # App-wide setup (Providers)
│   ├── core/             # Shared core utilities & UI kit
│   ├── main.tsx          # Entry point
│   └── App.tsx           # Root component
├── sodu.config.ts        # CLI configuration
├── package.json
└── tsconfig.json

Next.js (App Router)

my-app/
├── modules/              # Feature modules
├── src/
│   ├── app/              # App Router
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   └── providers.tsx
│   └── core/
├── next.config.mjs
├── sodu.config.ts
└── package.json

Contributing

Contributions are welcome!

1. Fork the repository.
2. Create your feature branch (git checkout -b feature/amazing-feature).
3. Commit your changes (git commit -m 'Add some amazing feature').
4. Push to the branch (git push origin feature/amazing-feature).
5. Open a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author: Obasi Michael