https://github.com/rida-lad/e-bookstore
📚 Modern e-book store featuring a responsive bestsellers carousel with seamless mobile/desktop experience. Built with React, Tailwind CSS, and Lucide icons.
https://github.com/rida-lad/e-bookstore
bookstore carousel e-books e-commerce frontend lucide-react react responsive-design tailwindcss
Last synced: 6 months ago
JSON representation
📚 Modern e-book store featuring a responsive bestsellers carousel with seamless mobile/desktop experience. Built with React, Tailwind CSS, and Lucide icons.
- Host: GitHub
- URL: https://github.com/rida-lad/e-bookstore
- Owner: Rida-Lad
- Created: 2025-03-21T16:18:48.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-03-28T23:04:26.000Z (6 months ago)
- Last Synced: 2025-03-29T00:20:03.038Z (6 months ago)
- Topics: bookstore, carousel, e-books, e-commerce, frontend, lucide-react, react, responsive-design, tailwindcss
- Language: JavaScript
- Homepage:
- Size: 34.9 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📚 BookHaven - Modern E-Book Store
## 📖 Project Overview
BookHaven is a modern e-commerce platform designed for digital book enthusiasts. This project showcases a sleek, responsive interface with optimized user experience across all devices.
## 🏆 Bestsellers Carousel Component
Our featured component provides an elegant browsing experience for discovering top-selling e-books.
### ✨ Key Features
- **Responsive Design**: Seamlessly transforms between mobile carousel and desktop grid layouts
- **Intuitive Navigation**: User-friendly controls with previous/next buttons and pagination indicators
- **Visual Elegance**: Carefully crafted with decorative elements and subtle shadows
- **Performance Optimized**: Engineered for efficiency using React hooks and modern rendering techniques
### 🛠️ Technology Stack
```javascript
// Core dependencies
{
"react": "^18.2.0",
"tailwindcss": "^3.3.0",
"lucide-react": "^0.264.0" // For navigation icons
}
```
### 📱 Responsive Implementation
| Device | Display Layout | Items Visible | Navigation Methods |
|--------|---------------|---------------|-------------------|
| Mobile | Horizontal Carousel | 1 | Touch swipe + directional buttons |
| Tablet | Horizontal Carousel | 2 | Touch swipe + directional buttons |
| Desktop | Grid Display | 4 | Pagination controls + directional buttons |
### 🎨 Design Specifications
```css
/* Signature shadow effect */
.book-card {
box-shadow: 0 8px 6px -1px rgba(255, 182, 193, 0.4);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.book-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 8px -1px rgba(255, 182, 193, 0.5);
}
/* Decorative corner elements */
.decorative-shape {
background: theme('colors.pink.100');
opacity: 0.6;
border-radius: 100% 0 0 0;
position: absolute;
width: 150px;
height: 150px;
z-index: -1;
}
```
## 🚀 Getting Started
### Installation
1. Clone the repository
```bash
git clone https://github.com/yourusername/bookhaven.git
cd bookhaven
```
2. Install dependencies
```bash
npm install
npm install lucide-react
```
3. Start development server
```bash
npm run dev
```
### Component Usage
```jsx
import BestsellersCarousel from './components/BestsellersCarousel';
function App() {
return (
Bestselling E-Books
);
}
```
### Customization Options
```jsx
// Custom configuration example
```
## 📦 Project Structure
```
src/
├── components/
│ ├── BestsellersCarousel/
│ │ ├── index.jsx // Main component
│ │ ├── BookCard.jsx // Individual book display
│ │ ├── NavigationControls.jsx // Prev/next buttons
│ │ └── Pagination.jsx // Page indicators
│ ├── assets/
│ │ ├── book-covers/
│ │ │ ├── book1.jpg
│ │ │ ├── book2.jpg
│ │ │ └── ...
│ │ └── icons/
└── hooks/
└── useCarousel.js // Custom carousel logic
```
## 🌐 Deployment
### Build for Production
```bash
npm run build
```
### Recommended Hosting Platforms
- Vercel
- Netlify
- AWS Amplify
## 🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
---
Made with ❤️ using React and Tailwind CSS