vibing/frontend/README.md

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:

git clone <repository-url>
cd vibing

2. Install dependencies:

npm install

3. Start the development server:

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

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

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

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

// Header with navigation
<Header />

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

🔧 Custom Hooks

useLocalStorage

import useLocalStorage from './hooks/useLocalStorage';

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

🌐 API Utilities

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:

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

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:

npm i -g vercel

2. Deploy:

vercel

Deploy to Netlify

1. Build the project:

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 file for details.

🙏 Acknowledgments

• Vite for the fast build tool
• React for the UI library
• Unsplash for the beautiful images