223 lines
5.0 KiB
Markdown
223 lines
5.0 KiB
Markdown
# 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
|