🚀 React + Vite Template Project

A modern, production-ready React template featuring a stunning indigo gradient design system. Perfect for portfolios, agency websites, and project showcases.

View Demo • Documentation • Professional Services

📋 Table of Contents

• ✨ Features
• 🚀 Quick Start
• 🛠️ Tech Stack
• 📦 Core Components
• 🎨 Design System
• 📱 Responsive Design
• 🔧 Customization
• 🤝 Contributing
• ❓ FAQ
• 📫 Support & Contact

✨ Features

Design & UX

• 🎨 Beautiful purple-pink gradient design system
• 🌟 Modern glassmorphism effects
• 📱 Fully responsive design for all devices
• ⚡ Optimized performance with 90+ Lighthouse score

Components & Functionality

• 🖼️ Project showcase component with live previews
• 🔥 Interactive preview embedder with fallback handling
• 🛠️ Pre-configured tech stack cards
• 🔒 Secure iframe handling for external content

Developer Experience

• 📦 Zero configuration needed
• 🎯 ESLint + Prettier setup
• 📝 Comprehensive documentation
• ⚡ Fast refresh in development

🚀 Quick Start

1. Clone the repository

git clone https://github.com/AliKelDev/ReactViteTemplate.git
cd ReactViteTemplate

2. Install dependencies

npm install
# or
pnpm install
# or
yarn install

3. Start development server

npm run dev

4. Open browser Navigate to http://localhost:5173

5. Build for production

npm run build

🛠️ Tech Stack

Technology	Purpose
React 18	UI Framework
Vite	Build Tool
Tailwind CSS	Styling
Lucide Icons	Icons
ESLint	Code Quality
Prettier	Code Formatting

📦 Core Components

PreviewEmbed

Securely embed external content with loading states and error handling:

<PreviewEmbed 
  url="https://your-url.com" 
  title="Project Preview"
  fallback={<LoadingSpinner />}
/>

TechCard

Showcase technologies with animated cards:

<TechCard
  title="React + Vite"
  description="Modern build tooling"
  icon={ReactIcon}
  animate={true}
/>

InstallGuide

Terminal-style installation instructions:

<InstallGuide
  steps={['npm install', 'npm run dev']}
  language="bash"
  copyable={true}
/>

🎨 Design System

Glassmorphism Effects

/* Base glass effect */
.glass-card {
  @apply backdrop-blur-lg bg-white/10 border border-white/20 rounded-xl shadow-lg;
}

/* Interactive glass effect */
.glass-card-interactive {
  @apply glass-card hover:bg-white/20 transition-all duration-300;
}

Gradient System

/* Primary gradient */
.gradient-primary {
  @apply bg-gradient-to-r from-purple-600 to-pink-500;
}

/* Secondary gradient */
.gradient-secondary {
  @apply bg-gradient-to-r from-blue-500 to-purple-600;
}

📱 Responsive Design

Our template uses a mobile-first approach with intuitive breakpoints:

Breakpoint	Size	Usage
sm:	640px	Mobile devices
md:	768px	Tablets
lg:	1024px	Laptops
xl:	1280px	Desktops
2xl:	1536px	Large screens

🔧 Customization

1. Theme Configuration

Modify tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#f5f3ff',
          // Add your color palette
          900: '#4c1d95',
        }
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
        // Add custom fonts
      }
    }
  }
}

2. Component Creation

Create new components in src/components/:

export const CustomCard = ({ title, children }) => {
  return (
    <div className="glass-card p-6">
      <h2 className="text-xl font-bold mb-4">{title}</h2>
      {children}
    </div>
  );
};

3. Navigation Setup

Update src/config/navigation.js:

export const navigation = {
  main: [
    { name: 'Home', href: '/' },
    { name: 'Projects', href: '/projects' },
    // Add your routes
  ],
  social: [
    { name: 'GitHub', href: 'https://github.com/AliKelDev' },
    // Add social links
  ]
};

❓ FAQ

Can I use this template for commercial projects?

Yes!

How do I deploy this template?

We recommend using Netlify or Vercel. Both platforms offer easy deployment from Git:

1. Connect your repository
2. Set build command to npm run build
3. Set publish directory to dist

How do I add custom fonts?

1. Add fonts to public/fonts/
2. Update tailwind.config.js with font family
3. Add @font-face rules in src/styles/fonts.css

📫 Support & Contact

• 🌟 Star this repo if you find it helpful!
• 🐞 Report bugs via GitHub Issues
• 🤝 Follow me on Twitter for updates
• 💼 Check out my professional services

📄 License

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

---

Made with ❤️ by Alice Leiser