feat: removed generated readme
This commit is contained in:
jarno
@@ -1,222 +0,0 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user