You are a seasoned full-stack developer tasked with creating a single-page application (SPA) for 'RetroScene Hub'. This platform aims to be the central online gathering place for the demoscene and retro computing community. Users can discover and announce events like demoparties, share their digital creations (demos, music, graphics), and connect with fellow enthusiasts.
PROJECT OVERVIEW:
RetroScene Hub will serve as a vibrant online community for demoscene aficionados and retro computing enthusiasts. It addresses the fragmentation of online presence for these niche communities by providing a unified platform. The core value proposition is to foster connection, content sharing, and event awareness within a historically significant and passionate subculture. It bridges the gap between a nostalgic past and a connected present for users who appreciate the creativity and technical prowess of early computing eras.
TECH STACK:
- Frontend Framework: React (using Vite for fast development)
- Styling: Tailwind CSS for rapid and utility-first styling
- State Management: Zustand for efficient global and local state management
- Routing: React Router DOM for navigation within the SPA
- API Interaction: Axios for making HTTP requests (if a backend is added later, otherwise mock data/localStorage)
- Forms: React Hook Form for efficient form handling
- Icons: React Icons for a variety of icon options
- Deployment: Vercel or Netlify for easy deployment.
CORE FEATURES:
1. **Event Calendar & Announcements:**
* **User Flow:** Users can navigate to the 'Events' section. They see a calendar view highlighting dates with events and a list view of upcoming events. Clicking an event shows its details (name, date, location, description, organizer, link). Authorized users (admins initially, potentially community mods later) can add new events via a form. Edit/delete functionality for own events (if applicable).
* **Details:** Each event card should display the event name, date, and a short snippet. The detail view includes a larger description, organizer info, relevant links (website, map, streaming), and potentially a poster image.
2. **Content Gallery:**
* **User Flow:** Users navigate to the 'Gallery' section. They see a grid of content items (demos, music, graphics). Filtering and sorting options are available (by type, platform, year, popularity). Clicking an item opens a modal or dedicated view with details and the content itself (embedded player, download link, description, uploader info). Authorized users can upload new content via a form, specifying type, platform, year, and uploading files/links.
* **Details:** Content items are displayed with a thumbnail, title, and uploader. The detail view provides more information and the means to experience the content.
3. **User Profiles & Forum:**
* **User Flow:** Users can create accounts (initially mock login, later auth). They can access their profile page to edit details (username, avatar, bio, retro platforms owned, links). They can browse the 'Forum' section, see different topics (threads), and click to view posts within a topic. Users can create new topics and reply to existing posts. Basic moderation tools for admins (delete posts/topics).
* **Details:** Profiles showcase user contributions (uploaded content, events organized). The forum supports threaded discussions, allowing users to engage in conversations about demoscene, retro hardware, specific platforms, etc.
4. **Tagging & Search:**
* **User Flow:** A prominent search bar is available globally. Users can type keywords to search across events, content, and forum topics/posts. Filters can be applied (e.g., search for 'Amiga' demos, search for 'demo party' events in 'Europe'). Content and events also have clickable tags that lead to filtered search results.
* **Details:** Robust search functionality is crucial for navigating the platform's growing database.
UI/UX DESIGN:
- **Layout:** A clean, modern, yet slightly retro-inspired single-page layout. A persistent sidebar navigation (collapsible on smaller screens) for main sections (Home, Events, Gallery, Forum, Profile, Upload). A top header might contain the logo and search bar. Content areas will be the main focus.
- **Color Palette:** A blend of nostalgic muted tones (e.g., deep blues, grays, beige) with vibrant accent colors (e.g., electric blue, neon green, magenta) reminiscent of CRT monitors and early computer graphics. Example: `#1a1a2e` (dark background), `#0f3460` (secondary dark), `#e94560` (accent red), `#43aa8b` (accent green), `#f0f0f0` (text).
- **Typography:** Use a clean sans-serif font for body text (e.g., Inter, Roboto) and potentially a monospace or pixelated font for headings or specific UI elements to evoke a retro feel (e.g., Press Start 2P, VT323). Ensure excellent readability.
- **Responsive Design:** Mobile-first approach. Sidebar collapses into a hamburger menu. Grids adapt, content scales appropriately. Ensure usability across all devices (desktops, tablets, smartphones).
- **Interactivity:** Subtle hover effects on buttons and links. Smooth transitions between pages/views (using React Router's transitions or Framer Motion if needed). Loading spinners/skeletons for data fetching.
COMPONENT BREAKDOWN:
- `App.jsx`: Main component, sets up routing and global layout.
- `Header.jsx`: Top navigation bar, logo, search input.
- `Sidebar.jsx`: Collapsible navigation menu.
- `HomePage.jsx`: Dashboard with recent activity, featured events/content.
- `EventsPage.jsx`: Displays event calendar and list.
- `EventCalendar.jsx`: Calendar component (e.g., using `react-big-calendar`).
- `EventList.jsx`: List of event cards.
- `EventCard.jsx`: Displays summary of a single event.
- `EventDetailModal.jsx` or `EventDetailPage.jsx`: Shows full event details.
- `EventForm.jsx`: Form for adding/editing events.
- `GalleryPage.jsx`: Displays content grid.
- `ContentGrid.jsx`: Grid layout for content items.
- `ContentCard.jsx`: Displays summary of a single content item.
- `ContentDetailModal.jsx` or `ContentDetailPage.jsx`: Shows full content details.
- `UploadForm.jsx`: Form for uploading content.
- `ForumPage.jsx`: Displays forum topics.
- `TopicList.jsx`: List of forum topics.
- `TopicCard.jsx`: Displays summary of a single topic.
- `TopicDetailPage.jsx`: Shows posts within a topic.
- `NewTopicForm.jsx`: Form for creating a new topic.
- `ReplyForm.jsx`: Form for replying to posts.
- `ProfilePage.jsx`: Displays user profile.
- `ProfileHeader.jsx`: User avatar, name, stats.
- `ProfileDetails.jsx`: Bio, retro platforms, links.
- `ProfileContentTabs.jsx`: Tabs for user's events, uploads.
- `EditProfileForm.jsx`: Form for editing profile.
- `Auth.jsx` / `Login.jsx` / `Register.jsx`: (Placeholder for future auth features).
- `SearchComponent.jsx`: Input and logic for search functionality.
- `Tag.jsx`: Component for displaying clickable tags.
- `Button.jsx`: Reusable button component.
- `Input.jsx`: Reusable input component.
- `Modal.jsx`: Reusable modal component.
DATA MODEL:
(Using mock data structures and simulating state. For a real backend, these would be API responses.)
- **State Structure (Zustand):**
```javascript
{
events: [], // Array of Event objects
content: [], // Array of Content objects
forumTopics: [], // Array of Topic objects
posts: [], // Array of Post objects (keyed by topicId)
users: [], // Array of User objects
currentUser: null, // Logged-in user object or null
loading: { events: false, content: false, forum: false, ... },
error: { events: null, content: null, ... }
}
```
- **Mock Data Formats:**
* **Event:**
```json
{
"id": "evt_123",
"name": "Revision demoparty 2026",
"date": "2026-03-15T10:00:00Z",
"location": "Herten, Germany",
"description": "The legendary Revision demoparty returns!",
"organizer": "Revision Crew",
"website": "https://revision-party.net/",
"imageUrl": "/images/revision_poster.jpg",
"tags": ["demoparty", "germany", "2026", "amiga", "pc"]
}
```
* **Content:**
```json
{
"id": "cnt_abc",
"title": "Future Crew - Second Reality",
"type": "demo", // 'demo', 'music', 'graphic'
"platform": "Amiga 500",
"year": 1998,
"description": "A classic Amiga demo known for its stunning visuals.",
"uploaderId": "usr_xyz",
"url": "/demos/second_reality.zip",
"thumbnailUrl": "/thumbnails/second_reality.png",
"tags": ["amiga", "1998", "tracker", "classic"]
}
```
* **User:**
```json
{
"id": "usr_xyz",
"username": "DemoFanatic",
"avatarUrl": "/avatars/demofanatic.png",
"bio": "Lover of all things demoscene and retro computing.",
"retroPlatforms": ["Amiga", "C64", "PC DOS"],
"links": {"website": "", "twitter": ""}
}
```
* **ForumTopic:**
```json
{
"id": "top_111",
"title": "Best Demos of the 90s?",
"authorId": "usr_abc",
"createdAt": "2024-01-10T09:30:00Z",
"lastPostAt": "2024-01-11T15:00:00Z",
"replyCount": 15
}
```
* **ForumPost:**
```json
{
"id": "post_222",
"topicId": "top_111",
"authorId": "usr_xyz",
"content": "I think Second Reality by Future Crew is unbeatable!",
"createdAt": "2024-01-10T09:35:00Z"
}
```
ANIMATIONS & INTERACTIONS:
- **Hover Effects:** Subtle background color changes or slight scaling on buttons, cards, and links. Tag elements might get a bolder outline or background on hover.
- **Transitions:** Smooth fade-in/out for modals and content loading. Page transitions can be simple fades or slides using React Router transitions.
- **Loading States:** Use placeholder `div`s styled as skeletons or simple spinners (e.g., `react-spinners`) while data is being fetched. Disable interactive elements during loading.
- **Micro-interactions:** Button click feedback (slight press effect), form submission success/error messages that animate in and out.
EDGE CASES:
- **Empty States:** Display user-friendly messages when sections have no data (e.g., 'No upcoming events found. Check back later!', 'Start the discussion by creating a new topic!'). Provide clear calls to action.
- **Error Handling:** Gracefully handle API errors or network issues. Display informative error messages to the user. Implement retry mechanisms where appropriate.
- **Validation:** Implement client-side validation for all forms (event creation, upload, profile editing, forum posts) using `react-hook-form` and libraries like `yup` or `zod`. Provide clear inline error messages next to invalid fields.
- **Accessibility (a11y):** Use semantic HTML5 elements. Ensure proper ARIA attributes where needed. Keyboard navigability for all interactive elements. Sufficient color contrast. Alt text for images.
- **Authentication:** Mock login/logout initially. Ensure `currentUser` state is managed correctly. Protect routes/actions that require login.
SAMPLE DATA:
(Refer to the Mock Data Formats section above. Ensure sufficient variety for testing: different platforms, years, content types, event locations, etc. Include at least 5-10 diverse entries for each major data type - events, content, users, topics.)
DEPLOMENT NOTES:
- **Build Tool:** Vite is recommended for its speed. Run `npm run build` for production.
- **Environment Variables:** Use `.env` files for configuration (e.g., API base URL if a backend is added later). Prefix variables with `VITE_` for Vite compatibility (e.g., `VITE_API_URL`).
- **Performance Optimizations:** Code splitting (handled automatically by Vite/React Router). Lazy loading components. Image optimization (use appropriate formats like WebP, responsive images). Minimize bundle size.
- **Hosting:** Vercel or Netlify are excellent choices for SPAs. Configure build commands and output directories correctly.