Modern React Stack

A comprehensive React template project built with modern tools and best practices.

Using This Template

Option 1: Use as a GitHub Template (Recommended)

1. Click the "Use this template" button at the top of this repository
2. Name your new repository
3. Clone your new repository locally
4. Navigate to the project directory
5. Install dependencies: pnpm install
6. Run the rename script to customize the project: pnpm rename

Option 2: Manual Clone

1. Clone this repository:

   git clone https://github.com/yourusername/react-modern-stack.git my-project

2. Navigate to the project directory:

   cd my-project

3. Remove the existing git history:

   rm -rf .git

4. Initialize a new git repository:

   git init

5. Install dependencies:

   pnpm install

6. Run the rename script to customize the project:

   pnpm rename

Technology Stack

📦 Package Manager

• pnpm

🚀 Build Tool / Bundler

• Vite

⚛️ Core Libraries

• React (18+)
• Redux Toolkit (RTK)
• React Router (v6+)

🎨 Styling & UI

• Tailwind CSS - Primary styling system for rapid development
• Shadcn/ui - Unstyled component library

🔄 Async & Data Fetching

• TanStack Query (React Query)

🔌 API Client

• Axios - Feature-rich HTTP client

📝 Form Management

• React Hook Form - Performant, flexible forms with easy validation

🌐 Internationalization

• react-i18next - Powerful localization framework

🎭 Animation

• Framer Motion - Production-ready animation library

🛡️ Type Safety

• TypeScript

🧪 Testing

• Vitest
• Testing Library
• Cypress (optional E2E)

📊 Monitoring & Error Tracking

• Sentry - Error tracking and performance monitoring

Getting Started

Prerequisites

• Node.js (v18+ recommended)
• pnpm (v8+ recommended)

Installation

# Clone the repository
git clone <repository-url>

# Navigate to the project directory
cd react-modern-stack

# Install dependencies
pnpm install

Development

# Start the development server
pnpm dev

Testing

# Run unit tests
pnpm test

# Run tests in watch mode
pnpm test:watch

# Run with coverage
pnpm test:coverage

# Run E2E tests with Cypress
pnpm cypress

Building for Production

# Create a production build
pnpm build

# Preview the production build
pnpm preview

Project Structure

react-modern-stack/
├── public/             # Static assets
├── src/
│   ├── api/            # API clients and services
│   ├── assets/         # Assets (images, fonts, etc.)
│   ├── components/     # Reusable components
│   ├── context/        # React context providers
│   ├── hooks/          # Custom React hooks
│   ├── lib/            # Utility libraries
│   ├── pages/          # Page components
│   ├── store/          # Redux store configuration
│   ├── styles/         # Global styles and SCSS files
│   ├── test/           # Test utilities and setup
│   ├── utils/          # Utility functions
│   ├── App.tsx         # Main App component
│   ├── main.tsx        # Entry point
│   └── ...
├── .eslintrc.json      # ESLint configuration
├── .prettierrc.json    # Prettier configuration
├── index.html          # HTML template
├── package.json        # Dependencies and scripts
├── README.md           # Project documentation
├── tailwind.config.js  # Tailwind CSS configuration
├── tsconfig.json       # TypeScript configuration
└── vite.config.ts      # Vite configuration

License

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