docs >react

React

Tech Stack

  • UI Framework: React + Typescript
  • Styling: TailwindCSS, Shadcn UI
  • Data Fetching: Axios, Tanstack Query

Getting Started

  1. Install dependencies: 
    pnpm install
  2. Run the local server: 
    pnpm run

Folder Structure & Key Files

react-*/
├── .gitignore, eslint.config.js, postcss.config.js         # Project configs
├── components.json                                         # Component registry
├── index.html                                              # App entry HTML
├── package.json, pnpm-lock.yaml                            # Package management
├── public/                                                 # Static assets
├── README.md                                               # Template readme
├── src/                                                    # Source code
│   ├── api/                                                # API logic
│   │   ├── index.ts                                        # API entry
│   │   └── products/                                       # Example API modules
│   ├── App.tsx                                             # Root React component
│   ├── assets/                                             # Global styles & images
│   ├── components/                                         # Reusable UI components
│   │   └── ui/                                             # UI primitives (e.g., Wrapper)
│   ├── configs/                                            # App-wide config
│   ├── index.css                                           # Main CSS
│   ├── layouts/                                            # Layout components
│   │   └── DefaultLayout.tsx                               # Main layout
│   ├── lib/                                                # Utility functions
│   ├── locales/                                            # i18n files
│   ├── main.tsx                                            # App entry point
│   ├── modules/                                            # Feature modules
│   │   └── home/
│   │       └── HomeView.tsx                                # Example feature view
│   ├── router/                                             # React Router setup
│   │   └── Router.tsx
│   ├── shared/                                             # Shared logic/types
│   └── vite-env.d.ts                                       # Vite env types
├── tsconfig.*.json                                         # TypeScript configs
└── vite.config.ts                                          # Vite build config

Each folder has a clear responsibility, e.g. modules/ for feature modules, api/ for API logic, shared/ for shared utilities, and layouts/ for layout components.

Architecture Overview

  • Feature-Oriented: Use modules/ for scalable features.
  • Separation of Concerns: API, config, layout, and shared logic are isolated.
  • Reusable Components: Place shared UI in components/ and components/ui/.
  • Configurable: Easily extend with new modules, layouts, or API endpoints.

Best Practices

  • Add new features in modules/.
  • Centralize API logic in api/ and use Axios for requests.
  • Use layouts/ for consistent page structure.
  • Organize shared UI and logic for maintainability.

For more details, see the template's README.md or explore the codebase!