# Vibing - React + Vite Application

A modern React application built with Vite, featuring beautiful components and a responsive design that adapts to any device.

## 🚀 Features

- **Fast Development**: Built with Vite for lightning-fast development and hot module replacement
- **Modern React**: Using React 19 with modern hooks and patterns
- **Responsive Design**: Fully responsive design that looks great on all devices
- **Component Library**: Reusable components with consistent styling
- **Custom Hooks**: Useful custom hooks for common functionality
- **API Utilities**: Built-in API utilities with error handling
- **Modern Styling**: Beautiful gradients and modern CSS design

## 📦 Project Structure

```
src/
├── components/          # Reusable UI components
│   ├── Header.jsx      # Navigation header
│   ├── Footer.jsx      # Site footer
│   ├── Button.jsx      # Reusable button component
│   ├── Card.jsx        # Card component for content
│   └── index.js        # Component exports
├── hooks/              # Custom React hooks
│   └── useLocalStorage.js
├── pages/              # Page components
│   ├── Home.jsx        # Home page
│   └── Home.css
├── utils/              # Utility functions
│   └── api.js          # API utilities
├── styles/             # Global styles (future use)
├── assets/             # Static assets
├── App.jsx             # Main app component
├── App.css             # Global styles
├── main.jsx            # App entry point
└── index.css           # Base styles
```

## 🛠️ Getting Started

### Prerequisites

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

### Installation

1. Clone the repository:
```bash
git clone <repository-url>
cd vibing
```

2. Install dependencies:
```bash
npm install
```

3. Start the development server:
```bash
npm run dev
```

4. Open your browser and navigate to `http://localhost:5173`

## 📜 Available Scripts

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

## 🎨 Components

### Button Component

```jsx
import { Button } from './components';

// Different variants
<Button variant="primary">Primary Button</Button>
<Button variant="secondary">Secondary Button</Button>
<Button variant="outline">Outline Button</Button>
<Button variant="ghost">Ghost Button</Button>

// Different sizes
<Button size="small">Small</Button>
<Button size="medium">Medium</Button>
<Button size="large">Large</Button>
```

### Card Component

```jsx
import { Card } from './components';

<Card 
  title="Card Title"
  subtitle="Card subtitle"
  image="https://example.com/image.jpg"
>
  <p>Card content goes here...</p>
</Card>
```

### Header & Footer

```jsx
import { Header, Footer } from './components';

// Header with navigation
<Header />

// Footer with links and social media
<Footer />
```

## 🔧 Custom Hooks

### useLocalStorage

```jsx
import useLocalStorage from './hooks/useLocalStorage';

const [value, setValue] = useLocalStorage('key', initialValue);
```

## 🌐 API Utilities

```jsx
import { api } from './utils/api';

// GET request
const data = await api.get('/users');

// POST request
const newUser = await api.post('/users', { name: 'John', email: 'john@example.com' });

// PUT request
const updatedUser = await api.put('/users/1', { name: 'Jane' });

// DELETE request
await api.delete('/users/1');
```

## 🎯 Environment Variables

Create a `.env` file in the root directory:

```env
VITE_API_BASE_URL=http://localhost:3000/api
```

## 📱 Responsive Design

The application is fully responsive and includes:

- Mobile-first design approach
- Flexible grid layouts
- Responsive typography
- Touch-friendly interactions
- Optimized for all screen sizes

## 🎨 Styling

The project uses:

- CSS modules for component-specific styles
- CSS custom properties for theming
- Flexbox and Grid for layouts
- Modern CSS features like gradients and animations
- Responsive design patterns

## 🚀 Deployment

### Build for Production

```bash
npm run build
```

The build output will be in the `dist` directory, ready for deployment to any static hosting service.

### Deploy to Vercel

1. Install Vercel CLI:
```bash
npm i -g vercel
```

2. Deploy:
```bash
vercel
```

### Deploy to Netlify

1. Build the project:
```bash
npm run build
```

2. Upload the `dist` folder to Netlify

## 🤝 Contributing

1. Fork the repository
2. Create a feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request

## 📄 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## 🙏 Acknowledgments

- [Vite](https://vitejs.dev/) for the fast build tool
- [React](https://reactjs.org/) for the UI library
- [Unsplash](https://unsplash.com/) for the beautiful images