Chameleon 🦎

A beautiful, modern React application built with Vite and TypeScript, ready for deployment on Vercel.

Features

• ⚡ Fast: Built with Vite for lightning-fast development and builds
• 🎨 Beautiful: Modern design with glassmorphism effects and smooth animations
• 📱 Responsive: Looks great on all devices
• 🎯 TypeScript: Full type safety throughout the application
• 🌈 Interactive: Dynamic color palette that changes the app's theme

Getting Started

Prerequisites

• Node.js (version 16 or higher)
• npm or yarn

Installation

1. Clone the repository (if using git):

   git clone <your-repo-url>
   cd chameleon

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open your browser and visit http://localhost:5173

Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build locally
• npm run lint - Run ESLint

Deployment on Vercel

Option 1: Deploy from GitHub

1. Push your code to a GitHub repository
2. Go to Vercel
3. Sign in with GitHub
4. Click "New Project"
5. Import your repository
6. Vercel will automatically detect it's a Vite project and configure the build settings
7. Click "Deploy"

Option 2: Deploy using Vercel CLI

1. Install Vercel CLI:

   npm i -g vercel

2. Build the project:

   npm run build

3. Deploy:

   vercel

4. Follow the prompts to deploy your application

Build Configuration

The project includes a vercel.json file with the following configuration:

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "framework": "vite"
}

Project Structure

chameleon/
├── public/
│   └── vite.svg
├── src/
│   ├── App.tsx          # Main application component
│   ├── App.css          # Application styles
│   ├── main.tsx         # Application entry point
│   └── index.css        # Global styles
├── index.html           # HTML template
├── package.json         # Dependencies and scripts
├── tsconfig.json        # TypeScript configuration
├── vite.config.ts       # Vite configuration
├── vercel.json          # Vercel deployment configuration
└── README.md            # This file

Technologies Used

• React 18 - UI library
• TypeScript - Type safety
• Vite - Build tool and dev server
• CSS3 - Styling with modern features like glassmorphism
• ESLint - Code linting

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test your changes
5. Submit a pull request

License

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

---

Built with ❤️ and ready to deploy on Vercel!