main: added inital version of music shop
Signed-off-by: nfel <nfilsaraee@gmail.com>
This commit is contained in:
@@ -0,0 +1,225 @@
|
||||
# Parsa - Progressive Rock Songwriter Website
|
||||
|
||||
A modern, interactive website showcasing a progressive rock composer and producer's work. Built with Next.js, TypeScript, and Tailwind CSS.
|
||||
|
||||
## Features
|
||||
|
||||
- **Artist Biography**: Beautiful introduction page with social media links
|
||||
- **Album Showcase**: Grid display of albums with hover effects and multiple actions
|
||||
- Play preview button
|
||||
- View album details button
|
||||
- Add to cart button
|
||||
- Direct purchase button
|
||||
- **Album Detail Page**: Dedicated page for each album featuring:
|
||||
- Full track list with durations
|
||||
- Album information and description
|
||||
- Total album duration and track count
|
||||
- Play, purchase, and add to cart actions
|
||||
- Dynamic routing (/album/[id])
|
||||
- **Shopping Cart System**:
|
||||
- Add multiple albums to cart
|
||||
- Persistent cart stored in localStorage
|
||||
- Cart sidebar with smooth animations
|
||||
- Item count badge on header cart icon
|
||||
- Remove items from cart
|
||||
- Checkout from cart
|
||||
- **Music Player**: Interactive player with:
|
||||
- 30-second preview mode for non-purchased albums
|
||||
- Full playback for purchased albums
|
||||
- Track list navigation
|
||||
- Play/pause controls
|
||||
- Progress bar (seekable for purchased albums)
|
||||
- **Payment System**:
|
||||
- Card payment form with validation
|
||||
- Transaction receipt generation
|
||||
- Purchase history stored in localStorage
|
||||
- Receipt download functionality
|
||||
- **Sample Album**: Muse - Showbiz album included with all 12 tracks:
|
||||
- Sunburn, Muscle Museum, Fillip, Falling Down, Cave, Showbiz
|
||||
- Unintended, Uno, Sober, Escape, Overdue, Hate This & I'll Love You
|
||||
- **Responsive Design**: Works on all screen sizes
|
||||
- **Bluish Theme**: Custom color palette with cyan and orange accents
|
||||
- **Smooth Animations**: Using Framer Motion for polished interactions
|
||||
|
||||
## Getting Started
|
||||
|
||||
### Prerequisites
|
||||
|
||||
- Node.js 18+
|
||||
- npm or yarn
|
||||
|
||||
### Installation
|
||||
|
||||
1. Clone the repository
|
||||
2. Install dependencies:
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
3. Run the development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
4. Open [http://localhost:3000](http://localhost:3000) in your browser
|
||||
|
||||
## Project Structure
|
||||
|
||||
```
|
||||
parsa/
|
||||
├── app/
|
||||
│ ├── album/
|
||||
│ │ └── [id]/
|
||||
│ │ └── page.tsx # Album detail page (dynamic route)
|
||||
│ ├── layout.tsx # Root layout with CartProvider
|
||||
│ ├── page.tsx # Main page with state management
|
||||
│ └── globals.css # Global styles and Tailwind
|
||||
├── components/
|
||||
│ ├── Header.tsx # Navigation header with cart icon
|
||||
│ ├── Biography.tsx # Artist bio section
|
||||
│ ├── AlbumCard.tsx # Album card with navigation & cart actions
|
||||
│ ├── AlbumShowcase.tsx # Album grid display
|
||||
│ ├── MusicPlayer.tsx # Music player with controls
|
||||
│ ├── PaymentModal.tsx # Payment form modal
|
||||
│ ├── PurchaseSuccessModal.tsx # Receipt display
|
||||
│ └── CartSidebar.tsx # Shopping cart sidebar
|
||||
├── lib/
|
||||
│ ├── types.ts # TypeScript interfaces
|
||||
│ ├── data.ts # Album and artist data (includes Showbiz)
|
||||
│ └── CartContext.tsx # Cart state management context
|
||||
└── public/
|
||||
└── audio/ # Audio files directory
|
||||
```
|
||||
|
||||
## Adding Audio Files
|
||||
|
||||
1. Place your audio files in `/public/audio/`
|
||||
2. Preview files should be 30-second clips
|
||||
3. Update the URLs in `lib/data.ts` to match your file names:
|
||||
|
||||
```typescript
|
||||
previewUrl: "/audio/preview-1.mp3",
|
||||
fullUrl: "/audio/echoes-1-full.mp3"
|
||||
```
|
||||
|
||||
## Adding Album Cover Images
|
||||
|
||||
1. Place album cover images in `/public/albums/`
|
||||
2. Update the `coverImage` path in `lib/data.ts`:
|
||||
|
||||
```typescript
|
||||
coverImage: "/albums/echoes-of-time.jpg"
|
||||
```
|
||||
|
||||
## Customization
|
||||
|
||||
### Color Theme
|
||||
|
||||
Edit `tailwind.config.ts` to customize colors:
|
||||
|
||||
```typescript
|
||||
colors: {
|
||||
primary: { /* bluish palette */ },
|
||||
accent: {
|
||||
orange: '#ff6b35',
|
||||
cyan: '#00d9ff',
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
### Artist Information
|
||||
|
||||
Edit `lib/data.ts`:
|
||||
|
||||
```typescript
|
||||
export const artistBio = {
|
||||
name: "Your Name",
|
||||
title: "Your Title",
|
||||
bio: "Your bio...",
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
### Albums
|
||||
|
||||
Add or modify albums in `lib/data.ts`:
|
||||
|
||||
```typescript
|
||||
export const albums: Album[] = [
|
||||
{
|
||||
id: "album-id",
|
||||
title: "Album Title",
|
||||
// ...
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
## Features in Detail
|
||||
|
||||
### Shopping Cart
|
||||
|
||||
- **Add to Cart**: Click the shopping cart icon on any album card to add it to your cart
|
||||
- **Cart Sidebar**: Click the cart icon in the header to view your cart
|
||||
- **Persistent Storage**: Cart items are saved in localStorage and persist across sessions
|
||||
- **Checkout**: Purchase all items in cart with a single checkout process
|
||||
- **Item Count Badge**: See the number of items in your cart at a glance
|
||||
|
||||
### Album Detail Pages
|
||||
|
||||
- **Direct Links**: Click the info icon on album cards or navigate to `/album/[album-id]`
|
||||
- **Full Track List**: View all songs with their durations
|
||||
- **Album Stats**: See total duration and track count
|
||||
- **Multiple Actions**: Play preview, purchase directly, or add to cart
|
||||
- **Back Navigation**: Easy navigation back to the main albums page
|
||||
|
||||
### Preview vs Full Access
|
||||
|
||||
- **Preview Mode**: Users can listen to 30-second previews of each track
|
||||
- **Full Access**: After purchase, users get unlimited playback with seeking controls
|
||||
|
||||
### Purchase System
|
||||
|
||||
- **Multiple Purchase Options**: Buy directly from album card, detail page, or cart
|
||||
- Mock payment system (no real transactions)
|
||||
- Stores purchase data in browser localStorage
|
||||
- Generates downloadable transaction receipts
|
||||
- Automatically unlocks full album playback
|
||||
- Purchased albums are marked with "Owned" badge
|
||||
|
||||
### Responsive Design
|
||||
|
||||
- Mobile-first approach
|
||||
- Adapts to tablet and desktop screens
|
||||
- Touch-friendly controls
|
||||
|
||||
## Build for Production
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
npm start
|
||||
```
|
||||
|
||||
## Technologies Used
|
||||
|
||||
- **Next.js 15**: React framework with App Router
|
||||
- **TypeScript**: Type-safe development
|
||||
- **Tailwind CSS**: Utility-first CSS framework
|
||||
- **Framer Motion**: Animation library
|
||||
- **React Icons**: Icon components
|
||||
|
||||
## Notes
|
||||
|
||||
- This is a demo payment system - no real charges are processed
|
||||
- Audio files are not included - add your own MP3 files
|
||||
- Album covers are placeholders - replace with actual images
|
||||
- Purchase data is stored locally in the browser
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
|
||||
## Author
|
||||
|
||||
Built for Parsa - Progressive Rock Composer & Producer
|
||||
Reference in New Issue
Block a user