React Zustand Vite TypeScript Template

✨ Features

• ⚡️ Vite - Lightning fast build tool and dev server
• ⚛️ React 18 - Latest React features
• 📘 TypeScript - Type safety and better DX
• 🗃️ Zustand - Simple state management
• 🎨 Tailwind CSS - Utility-first CSS
• 📝 React Hook Form - Form handling
• 🧪 Testing Setup - Vitest and React Testing Library
• 🔧 Code Quality - ESLint, Prettier, and Husky
• 📦 Docker Ready - Basic containerization
• 🚀 CI/CD - GitHub Actions setup
• 📄 Documentation - Comprehensive docs

🚀 Quick Start

Prerequisites

• Node.js 16.x or later
• npm or yarn
• Git

Installation

1. Clone the repository:

git clone https://github.com/AmirHaytham/React-Zustand-Vite-TS-temp.git
cd React-Zustand-Vite-TS-temp

2. Install dependencies:

npm install

3. Set up environment variables:

cp .env.example .env

4. Start development server:

npm run dev

Visit http://localhost:3000 to see your app!

🛠️ Available Scripts

# Development
npm run dev         # Start development server
npm run build      # Build for production
npm run preview    # Preview production build

# Testing
npm run test       # Run tests
npm run test:coverage # Run tests with coverage

# Code Quality
npm run lint       # Run ESLint
npm run format     # Format with Prettier

# Git Hooks
npm run prepare    # Install husky hooks

Tech Stack

• React
• TypeScript
• Vite
• Zustand
• Tailwind CSS
• React Hook Form
• Vitest
• React Testing Library
• Docker
• Vercel

📁 Project Structure

├── src/
│   ├── components/
│   │   ├── common/       # Shared components
│   │   ├── layout/       # Layout components
│   │   │   └── AppLayout.tsx
│   │   └── leads/        # Lead management
│   │       ├── LeadForm.tsx
│   │       └── LeadForm.test.tsx
│   ├── store/
│   │   └── useStore.ts   # Zustand store
│   ├── assets/          # Static assets
│   ├── App.tsx          # Root component
│   ├── App.css          # Root styles
│   ├── main.tsx         # Entry point
│   ├── index.css        # Global styles
│   └── setupTests.ts    # Test configuration
├── public/              # Public assets
├── docs/               # Documentation
│   └── TECHNICAL.md
├── config/             # Configuration files
│   ├── .env.example
│   ├── .env
│   ├── tsconfig.json
│   ├── vite.config.ts
│   ├── tailwind.config.js
│   └── eslint.config.js
├── .github/            # GitHub workflows
├── .husky/             # Git hooks
│   ├── pre-commit
│   └── commit-msg
└── docker/             # Docker configuration
    ├── Dockerfile
    └── docker-compose.yml

🐳 Docker

Using Docker Compose (Recommended)

# Start the app
docker-compose up

# Stop the app
docker-compose down

Manual Docker Commands

# Build the image
docker build -t react-app .

# Run the container
docker run -p 3000:3000 react-app

🧪 Testing

This template uses Vitest and React Testing Library. Example tests are included in the src/components directory.

# Run tests in watch mode
npm run test

# Run tests with coverage
npm run test:coverage

⚙️ Environment Variables

Create a .env file in the root directory:

# App Configuration
VITE_APP_NAME=React Startup
VITE_APP_VERSION=1.0.0

# Development
VITE_DEV_PORT=3000
VITE_DEV_HOST=localhost

# API Configuration
VITE_API_URL=https://api.example.com

# Production
VITE_PROD_URL=https://your-app.com

# Analytics
VITE_ANALYTICS_ID=UA-XXXXX-Y

Note: All environment variables must be prefixed with VITE_ to be accessible in the app.

🚀 Deployment

Vercel Deployment

1. Connect your GitHub repository to Vercel
2. Configure build settings:
   • Build Command: npm run build
   • Output Directory: dist
   • Install Command: npm install
3. Add environment variables from .env
4. Deploy!

Manual Deployment

1. Build the project:

npm run build

2. Test the production build:

npm run preview

3. Deploy the dist folder to your hosting provider

🔒 Security

Our template includes basic security practices:

• ✅ Environment variables protection through .env
• ✅ TypeScript type safety
• ✅ Dependency management with npm/yarn
• ✅ ESLint security rules
• ✅ Secure development practices

📊 Analytics

The template is prepared for analytics integration through environment variables (VITE_ANALYTICS_ID). You can easily add your preferred analytics solution.

🌐 Browser Support

• ✅ Chrome (latest)
• ✅ Firefox (latest)
• ✅ Safari (latest)
• ✅ Edge (latest)
• ✅ Opera (latest)

📄 License

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

🤝 Contributing

We love your input! We want to make contributing as easy and transparent as possible. Please read our Contributing Guide for details on:

• Code of Conduct
• Development process
• Bug reports
• Feature requests
• Pull requests
• Code review process