You are an expert AI application developer tasked with building a single-page responsive web application using React, Tailwind CSS, and TypeScript. The application, named 'Sahne Kurdu' (Stage Master), is designed to help musicians and bands manage their setlists, song notes, gig plans, and collaborate effectively.
PROJECT OVERVIEW:
The core problem Sahne Kurdu addresses is the disorganization and inefficiency musicians face when managing live performance logistics. Traditional methods like spreadsheets, scattered notes, or chat groups often fail to provide a unified, frictionless experience for tracking setlists, song details, and gig information. Sahne Kurdu aims to be the central hub for all performance-related data, streamlining planning, rehearsals, and live shows. Its value proposition lies in providing a centralized, collaborative, and easy-to-use platform that empowers musicians to focus more on their performance and less on logistical overhead.
TECH STACK:
- Frontend Framework: React (using Vite for fast development)
- Language: TypeScript
- Styling: Tailwind CSS (with Headless UI for accessible components)
- State Management: Zustand (lightweight and efficient for global state)
- Routing: React Router DOM
- Form Handling: React Hook Form with Zod for validation
- Icons: React Icons
- Utilities: Lodash or similar for utility functions
- Local Storage: For persisting draft data and user preferences
- Potential Future Integrations: Cloud storage (e.g., Firebase Storage), collaborative real-time editing (e.g., WebSockets, Yjs).
CORE FEATURES (MVP):
1. **Setlist Management**:
* User Flow: Users can create a new setlist by clicking a 'New Setlist' button. They can name the setlist (e.g., 'Friday Gig', 'Acoustic Set'). Within the setlist view, users can add songs from their song library or input new song titles directly. Songs can be reordered via drag-and-drop. Each song entry will display its title and duration. Users can save the setlist. Existing setlists can be viewed in a list, opened for editing, duplicated, or deleted.
* Details: Each setlist should have a title, an optional date, an optional venue, and a list of songs.
2. **Song Library & Notes**:
* User Flow: A dedicated 'Song Library' section allows users to add, view, edit, and delete songs. When adding a song, users can input the title, artist (optional), genre (optional), lyrics (optional), and specific notes. Notes could include details like 'start with acoustic guitar', 'repeat chorus twice', 'bridge variation', 'reject this song for gig X'. Users can also tag songs (e.g., 'slow', 'energetic', 'encore'). When a song is added to a setlist, it pulls data from the library.
* Details: Each song has a title, artist, genre, lyrics, a rich text notes field, and tags.
3. **Gig Planner**:
* User Flow: Users can add a new 'Gig' event. They input the gig title, date, time, venue name, and venue address. They can then select a previously created setlist to associate with this gig. Multiple setlists could potentially be assigned for different sets within a single gig (e.g., Set 1, Set 2).
* Details: A gig has a title, date, time, venue details, and associated setlists.
4. **Collaboration (Basic)**:
* User Flow: Users can create a 'Band' profile. They can invite other users via email or username to join their band. Once in a band, members can view and potentially edit shared setlists and song library entries (permissions TBD in future versions, MVP assumes shared editing). A simple notification system could alert members to changes.
* Details: Band entity with members list. Shared access to band's setlists and songs.
UI/UX DESIGN:
- Layout: Single Page Application (SPA) structure. A persistent sidebar navigation will provide access to 'Dashboard', 'Setlists', 'Song Library', 'Gigs', and 'Band Settings'. The main content area will display the selected section's content. A clean, modern, and intuitive interface is crucial. Use a modal for creating/editing setlists, songs, and gigs.
- Color Palette: Primary: Deep Blue (#1e3a8a), Secondary: Teal (#14b8a6), Accent: Amber (#f59e0b), Neutrals: Dark Gray (#1f2937), Light Gray (#e5e7eb), White (#ffffff). This provides a professional yet vibrant feel suitable for creative professionals.
- Typography: Use a sans-serif font family like Inter or Poppins for readability. Clear hierarchy using font sizes and weights.
- Responsive Design: Mobile-first approach. The sidebar should collapse into a hamburger menu on smaller screens. Content should reflow gracefully. Ensure all interactive elements are easily tappable on touch devices.
COMPONENT BREAKDOWN:
- `App.tsx`: Main application component, sets up routing and global layout.
- `Layout.tsx`: Contains the persistent sidebar navigation and the main content area.
- `Sidebar.tsx`: Navigation menu component. Props: `isOpen` (boolean), `onClose` (function).
- `Header.tsx`: Top bar, potentially showing app title, user profile, search bar.
- `Dashboard.tsx`: Overview page (future, for MVP might show recent gigs/setlists).
- `SetlistList.tsx`: Displays a list of all user-created setlists. Props: `setlists` (array).
- `SetlistItem.tsx`: Represents a single setlist in the list. Props: `setlist` (object), `onSelect` (function), `onEdit` (function), `onDelete` (function).
- `SetlistBuilder.tsx`: The main interface for creating/editing a setlist. Includes song adding, reordering, saving. Props: `initialSetlist` (object, optional), `availableSongs` (array).
- `SongPicker.tsx`: Component within `SetlistBuilder` to search and add songs.
- `SongLibrary.tsx`: Displays the list of all songs. Props: `songs` (array).
- `SongForm.tsx`: Modal or form for adding/editing song details. Props: `initialSong` (object, optional), `onSubmit` (function).
- `GigList.tsx`: Displays a list of upcoming and past gigs. Props: `gigs` (array).
- `GigForm.tsx`: Modal or form for adding/editing gig details. Props: `initialGig` (object, optional), `onSubmit` (function), `setlistOptions` (array).
- `BandSettings.tsx`: For managing band members and invitations.
- `Button.tsx`: Reusable custom button component. Props: `onClick`, `children`, `variant`, `isLoading`.
- `Input.tsx`: Reusable text input. Props: `label`, `value`, `onChange`, `type`.
- `Modal.tsx`: Reusable modal component. Props: `isOpen`, `onClose`, `title`, `children`.
- `DragDropList.tsx`: Custom component for reordering items (songs in setlist). Utilizes libraries like `react-beautiful-dnd`.
DATA MODEL (using Zustand stores & TypeScript interfaces):
```typescript
interface Song {
id: string;
title: string;
artist?: string;
genre?: string;
lyrics?: string;
notes: string;
tags: string[];
durationMinutes?: number; // Optional, for display
}
interface SetlistItem {
songId: string;
order: number; // For sorting within the setlist
notes?: string; // Specific notes for this song in this setlist
}
interface Setlist {
id: string;
title: string;
date?: string;
venue?: string;
items: SetlistItem[];
}
interface Gig {
id: string;
title: string;
dateTime: string;
venueName: string;
venueAddress?: string;
setlistIds: string[]; // IDs of assigned setlists
}
interface Band {
id: string;
name: string;
members: string[]; // Array of user IDs
// Permissions could be added here later
}
interface User {
id: string;
username: string;
email: string;
bands: string[]; // IDs of bands the user belongs to
}
// Zustand Store Example
interface SongStore {
songs: Song[];
addSong: (song: Omit<Song, 'id'>) => void;
updateSong: (id: string, updatedSong: Partial<Song>) => void;
deleteSong: (id: string) => void;
fetchSongs: () => Promise<void>; // Mock implementation
}
interface SetlistStore {
setlists: Setlist[];
addSetlist: (setlist: Omit<Setlist, 'id'>) => void;
updateSetlist: (id: string, updatedSetlist: Partial<Setlist>) => void;
deleteSetlist: (id: string) => void;
fetchSetlists: () => Promise<void>;
}
// Similar stores for GigStore, BandStore, AuthStore etc.
// Initial state will be empty arrays or default values.
```
ANIMATIONS & INTERACTIONS:
- **Hover Effects**: Subtle background color changes or slight scaling on buttons and list items on hover.
- **Transitions**: Smooth transitions for modal opening/closing, sidebar expansion/collapse, and row expansion in lists. Use Tailwind CSS transitions (`transition-all`, `duration-300`).
- **Loading States**: Display skeleton loaders or spinners while data is being fetched. Buttons should show a loading state when an action is in progress (e.g., saving).
- **Micro-interactions**: Visual feedback when an item is added to a setlist (e.g., a small animation), drag-and-drop reordering should feel responsive.
EDGE CASES:
- **Empty States**: When lists (Setlists, Songs, Gigs) are empty, display informative messages and clear calls to action (e.g., 'No setlists yet. Create your first one!').
- **Error Handling**: Implement robust error handling for API calls (mocked initially) and form submissions. Display user-friendly error messages. Use React Error Boundaries.
- **Validation**: Client-side validation using React Hook Form and Zod for all forms (song title, setlist title, gig date, etc.). Ensure required fields are filled and data formats are correct.
- **Accessibility (a11y)**: Use semantic HTML. Ensure all interactive elements are focusable and have clear focus indicators. Use ARIA attributes where necessary. Leverage Headless UI components for accessibility.
- **Offline/Draft Mode**: Utilize `localStorage` to save draft setlists or song notes locally, allowing users to continue working even if their connection drops temporarily.
SAMPLE DATA (for Mocking and initial development):
```json
[
{
"id": "song-001",
"title": "Bohemian Rhapsody",
"artist": "Queen",
"genre": "Rock",
"lyrics": "Is this the real life? Is this just fantasy? ...",
"notes": "Start with piano intro. Complex vocal harmonies in section 3. Guitar solo needs careful timing.",
"tags": ["classic", "complex", "rock"],
"durationMinutes": 6
},
{
"id": "song-002",
"title": "Stairway to Heaven",
"artist": "Led Zeppelin",
"genre": "Rock",
"lyrics": "There's a lady who's sure all that glitters is gold...",
"notes": "Acoustic intro, build up tempo. Final section is high energy.",
"tags": ["classic", "rock", "long"],
"durationMinutes": 8
},
{
"id": "song-003",
"title": "Hallelujah",
"artist": "Leonard Cohen",
"genre": "Folk",
"lyrics": "I heard there was a secret chord...",
"notes": "Simple arrangement, focus on vocals. Consider different keys for chorus.",
"tags": ["ballad", "folk", "cover"],
"durationMinutes": 4
},
{
"id": "setlist-a1b2",
"title": "Opening Night Set",
"date": "2024-09-15",
"venue": "The Grand Theatre",
"items": [
{ "songId": "song-001", "order": 1, "notes": "Ensure mics are checked beforehand" },
{ "songId": "song-003", "order": 2 },
{ "songId": "song-002", "order": 3, "notes": "Long fade out at the end" }
]
},
{
"id": "gig-xyz789",
"title": "Summer Festival Gig",
"dateTime": "2024-08-20T20:00:00Z",
"venueName": "City Park Amphitheater",
"venueAddress": "123 Park Ave, Cityville",
"setlistIds": ["setlist-a1b2"]
}
]
```
DEPLOYMENT NOTES:
- **Build Tool**: Vite is recommended for its speed. Use `npm run build` or `yarn build`.
- **Environment Variables**: Use `.env` files for configuration (e.g., API endpoints if external services are integrated later). `VITE_` prefix for client-side variables.
- **Performance Optimizations**: Code splitting with React.lazy for route-based or component-based loading. Image optimization (if applicable). Memoization with `React.memo` and `useMemo`/`useCallback` where necessary.
- **Static Site Generation (Optional)**: For improved SEO and initial load times, consider Next.js if the project were to scale beyond a simple SPA, but for this prompt, Vite SPA is sufficient.
- **Deployment Target**: Platform like Vercel, Netlify, or GitHub Pages for easy static hosting.