Skip to content

README.md

Latest commit

 

History

History
85 lines (70 loc) · 2.9 KB

README.md

File metadata and controls

85 lines (70 loc) · 2.9 KB

Ultimate React Project

A production-ready React application with modern tooling and best practices following a comprehensive feature-based architecture.

🛠️ Tech Stack

  • React 18 + TypeScript
  • Vite - Fast build tool
  • React Router DOM - Client-side routing
  • Redux Toolkit - State management
  • TanStack Query - Server state management
  • React Hook Form + Zod - Form handling and validation
  • shadcn/ui - Beautiful, accessible components
  • Framer Motion - Smooth animations
  • Tailwind CSS - Utility-first styling
  • Axios - HTTP client
  • Vitest - Testing framework

🏗️ Project Structure

src/
├── app/                     # App-level configuration
│   ├── store/              # Redux store setup
│   ├── providers/          # React providers
│   ├── router/             # Routing configuration
│   └── config/             # App constants and configuration
├── shared/                  # Shared across modules
│   ├── components/         # Reusable UI components
│   ├── hooks/              # Custom React hooks
│   ├── services/           # API and external services
│   ├── utils/              # Utility functions
│   └── types/              # TypeScript type definitions
├── features/               # Feature modules
│   ├── auth/               # Authentication feature
│   ├── dashboard/          # Dashboard feature
│   └── users/              # User management feature
├── assets/                 # Static assets
├── styles/                 # Global styles and themes
├── lib/                    # External library configurations
├── test/                   # Testing utilities and setup
└── docs/                   # Documentation

🚀 Getting Started

# Install dependencies
npm install

# Copy environment variables
cp .env.example .env

# Start development server
npm run dev

📝 Available Scripts

  • npm run dev - Start development server
  • npm run build - Build for production
  • npm run preview - Preview production build
  • npm run lint - Run ESLint
  • npm run test - Run tests
  • npm run test:ui - Run tests with UI
  • npm run test:coverage - Run tests with coverage
  • npm run type-check - Run TypeScript type checking

🎯 Features

  • ✅ Feature-based architecture for scalability
  • ✅ Type-safe routing with React Router
  • ✅ Redux Toolkit for predictable state management
  • ✅ TanStack Query for server state and caching
  • ✅ Form validation with React Hook Form + Zod
  • ✅ Beautiful, accessible UI components with shadcn/ui
  • ✅ Smooth animations with Framer Motion
  • ✅ Dark/Light theme support
  • ✅ Comprehensive testing setup with Vitest
  • ✅ TypeScript path aliases for clean imports
  • ✅ Production-ready build configuration

🔧 Architecture Principles

Feature-Based Structure