As a junior developer, I often join projects where someone else has already designed the architecture.
Just following an existing project does not mean I understand the design.
If I can’t create a new project from zero, then I haven’t truly internalized the concepts.

In this post, I’ll document my own design recipe and lay the foundation to lead projects and design architectures proactively in the future.

Project Initialization

Bundler: Vite (React + TypeScript)

pnpm create vite@latest
# Select React + TypeScript

Package Manager Setup

corepack enable
pnpm i

Basic File Setup

• Add .gitignore, .env, .env.local

• Clearly separate environment variables
  (e.g., /env/.env.local, /env/.env.storybook)

TypeScript Setup

Separate Configuration by Role

TypeScript configuration can be split for different environments:

// tsconfig.json
{
 "files":[],
 "references":[
 	{"path" : "./tsconfig.app.json"},
    {"path" : "./tsconfig.node.json"}
 ]
}

This separates Vite, Node, and App environments clearly.

Code Quality Tools

• prettier.config.mjs
• eslint.config.js
• Pre-commit hooks with husky

Reference: eslint-prettier-setup ↗

This ensures consistent code style, automatic formatting, and maintained code quality.

Project Structure Design

Project structure depends on context and goals.
There is no single “correct” way — understanding trade-offs is key.

Common design patterns include:

1. Atomic Design System — maximize component reusability
2. Feature-Sliced Design (FSD) — separate features by domain
3. Clean Architecture — improve maintainability via dependency inversion

Whatever pattern you choose, consider the team size and collaboration structure for a practical choice.

Style & UI System Setup

• Choose CSS-in-JS, SCSS, or Tailwind
• Optional UI library (e.g., shadcn/ui, Chakra, MUI)

This ensures design system consistency from the start.

Storybook Setup

• Install and initialize Storybook
• Configure main.ts and preview.ts
• Add essential addons (controls, actions, a11y, etc.)

Storybook enables component-level development and documentation.

Bundler (Vite) Configuration

Absolute Path Setup

// tsconfig.app.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

pnpm i -D vite-tsconfig-paths

// vite.config.ts
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  plugins: [react(), tsconfigPaths()]
})

Wrap-Up

This design recipe is not final.
As I work on projects, I’ll continue to add new configurations and structural insights.

Design is not about intuition — it’s about understanding.
This is my record of the journey from a developer who writes code to a developer who understands and leads project architecture.