React Vite Tailwind Template

A modern, production-ready React template built with Vite, TypeScript, and Tailwind CSS. Features a beautiful, responsive UI with multiple pages and components ready to use.

🔗 Live Demo

✨ Features

• ⚡ Vite - Lightning-fast development with Hot Module Replacement
• ⚛️ React 19 - Latest React with TypeScript support
• 🎨 Tailwind CSS - Utility-first CSS framework for rapid UI development
• 📘 TypeScript - Type safety and enhanced developer experience
• 🛣️ React Router - Client-side routing with multiple pages
• 🌓 Dark Mode Support - Built-in dark mode styling
• 📱 Responsive Design - Mobile-first responsive components
• ✅ ESLint - Code quality and consistency checks

🚀 Quick Start

Prerequisites

• Node.js 16+ and npm

Installation

1. Clone the repository
2. Install dependencies:

npm install

3. Start the development server:

npm run dev

The application will be available at http://localhost:5173

📜 Available Scripts

Development

npm run dev          # Start Vite development server
npm run type-check   # Run TypeScript compiler without emitting files
npm run lint         # Run ESLint on TypeScript files

Production

npm run build        # Type check and create production build
npm run preview      # Preview production build locally

📁 Project Structure

src/
├── app/
│   ├── components/
│   │   ├── header/        # Navigation header with mobile menu
│   │   └── footer/        # Footer with links and social icons
│   └── pages/
│       ├── home/          # Landing page with hero and features
│       ├── about/         # About page with team section
│       ├── services/      # Services showcase page
│       └── contact/       # Contact page with form
├── App.tsx                # Main app component with routing
├── App.css                # Global styles
├── index.css              # Tailwind directives
└── main.tsx               # Application entry point

🎨 Pages Included

Home Page

• Hero section with gradient text
• Feature cards with icons
• Statistics section
• Call-to-action sections

About Page

• Company mission and values
• Technology stack showcase
• Team member profiles with images

Services Page

• Service cards with detailed features
• Multiple service categories
• Interactive hover effects

Contact Page

• Contact form with validation
• Contact information cards
• Social media links
• Responsive two-column layout

🎨 Customization

Colors

The template uses a blue-purple gradient theme. To customize colors, update the Tailwind classes in components or modify tailwind.config.js.

Components

All components follow a barrel export pattern with TypeScript:

• Component file: ComponentName.tsx
• Index file: index.ts

Adding New Pages

1. Create a new folder in src/app/pages/your-page/
2. Create YourPage.tsx and index.ts
3. Import and add the route in src/App.tsx

🛠️ Tech Stack

• React 19 - UI library
• TypeScript 5.7 - Type-safe JavaScript
• Vite 6 - Build tool and dev server
• Tailwind CSS 3.4 - Utility-first CSS framework
• React Router 7 - Client-side routing
• ESLint 9 - Code linting

🚀 Deployment

Firebase Hosting (Automatic with GitHub Actions)

This template is configured for automatic deployment to Firebase Hosting via GitHub Actions.

Initial Setup

1. Create a Firebase project at Firebase Console

2. Install Firebase CLI:

   npm install -g firebase-tools

3. Login to Firebase:

   firebase login

4. Generate a service account key:

   • Go to Firebase Console → Project Settings → Service Accounts
   • Click "Generate New Private Key"
   • Save the JSON file securely

5. Add Firebase secret to GitHub:

   • Go to your GitHub repo → Settings → Secrets and variables → Actions
   • Click "New repository secret"
   • Name: FIREBASE_SERVICE_ACCOUNT
   • Value: Paste the entire contents of the service account JSON file
   • Click "Add secret"

6. Push to GitHub:

   git add .
   git commit -m "Setup Firebase deployment"
   git push origin main

Your app will automatically build and deploy to Firebase whenever you push to the main branch!

Manual Deployment

You can also deploy manually:

# Build your app
npm run build

# Deploy to Firebase
firebase deploy

Firebase Configuration:

• Build directory: dist
• Single-page app: Yes (configured in firebase.json)
• Live URL: https://react-vite-tailwind-template.web.app

📚 Documentation

• FIREBASE_SETUP.md - Complete Firebase deployment setup guide
• CLAUDE.md - Architecture and development guide

📝 License

This project is open source and available under the MIT License.