You are an expert full-stack developer tasked with creating a single-page application (SPA) for archiving and exploring historical Bulletin Board System (BBS) imagery. This application aims to preserve and make accessible a significant part of digital cultural heritage.
PROJECT OVERVIEW:
The application, tentatively named 'BBS Mirası: Dijital Arşiv Platformu' (BBS Legacy: Digital Archive Platform), will serve as a central repository for images and related information from various BBS platforms. The core problem it solves is the fragmentation and potential loss of digital artifacts from the early days of online communities. Users can upload photos of BBS interfaces, share historical context, and explore a growing archive. The value proposition lies in creating a searchable, browsable, and community-driven database of this unique digital history.
TECH STACK:
- Frontend Framework: React.js (using Create React App for simplicity or Vite for speed)
- Styling: Tailwind CSS for rapid UI development and consistent styling.
- State Management: Zustand for efficient and simple global state management.
- Routing: React Router DOM for handling navigation within the SPA.
- Image Handling: 'react-image-file-resizer' for client-side image resizing before upload (optional, for performance).
- Icons: Heroicons or Font Awesome for UI icons.
- Utility Functions: Lodash (optional, for common utility functions).
CORE FEATURES:
1. **Image Upload:**
* **User Flow:** User clicks an 'Upload' button, is prompted to select image files (JPG, PNG, GIF). They can add a title, description (detailing the BBS, year, notable features), and relevant tags (e.g., 'retro', 'modem', 'ANSI art', '1990s'). Upon submission, the image and metadata are processed.
* **Details:** Supports multi-file upload. Client-side validation for file types and sizes. Image previews before final upload. Asynchronous upload with progress indicators.
2. **Archive Browsing & Search:**
* **User Flow:** The main page displays a grid or list of uploaded BBS images. Users can scroll infinitely or paginate through the archive. A prominent search bar allows filtering by title, description keywords, and tags. Filter options (e.g., by year, region, BBS name) can be applied.
* **Details:** Infinite scrolling implementation using Intersection Observer API. Search queries update results dynamically. Tag-based filtering.
3. **Image Detail View:**
* **User Flow:** Clicking an image from the archive navigates to its dedicated detail page. This page shows the image in a larger view (with zoom capabilities), displays its title, full description, uploader information (username, upload date), tags, and a comments section.
* **Details:** Image zoom functionality (e.g., using 'react-image-lightbox' or a custom implementation). Comment submission and display. Related images section based on tags.
4. **User Collections (Favorites):**
* **User Flow:** Authenticated users can 'favorite' images they like. A dedicated 'My Collection' or 'Favorites' section in their user profile displays all favorited images.
* **Details:** Requires basic user authentication (e.g., email/password or OAuth). Local storage can be used for non-authenticated 'favorites' if desired for MVP, but persistent collections require backend/auth.
UI/UX DESIGN:
- **Layout:** Single-page application structure. A persistent header with the app logo/name, navigation links (Archive, Upload, Login/Profile), and search bar. The main content area will dynamically change based on the route. A footer with copyright and basic links.
- **Color Palette:** A blend of retro and modern aesthetics. Primary colors: Deep navy blue or charcoal (#1a202c), accented with a vibrant retro color like electric blue (#007bff) or magenta (#e83e8c) for interactive elements and highlights. Secondary colors: Light gray (#f7fafc) for backgrounds, white (#ffffff) for text and cards.
- **Typography:** Use a clean, readable sans-serif font like Inter or Poppins for body text and UI elements. Consider a monospace font (like 'Fira Code' or 'Source Code Pro') for displaying BBS-related text or code snippets within descriptions for an authentic feel.
- **Responsiveness:** Mobile-first approach. Layouts should adapt fluidly to different screen sizes (mobile, tablet, desktop). Use Tailwind's responsive prefixes (sm:, md:, lg:, xl:). Ensure touch targets are adequately sized on mobile.
- **Components:** Card-based design for image previews in the archive. Modal for image upload and zoom. Clear form elements with visual feedback.
COMPONENT BREAKDOWN:
- `App.js`: Main application component, sets up routing.
- `Header.js`: Contains logo, navigation links, search bar. Manages active link state.
- Props: `currentPath`, `onSearch`.
- `HomePage.js`: Main archive view. Fetches and displays image cards. Implements infinite scroll.
- State: `images`, `isLoading`, `nextCursor`.
- `ImageCard.js`: Displays a single BBS image preview (thumbnail, title). Handles click to navigate to detail view.
- Props: `image` (object containing id, thumbnailUrl, title).
- `ImageDetailPage.js`: Displays full image, details, uploader info, and comments.
- Props: `imageId` (from URL params).
- State: `imageDetails`, `comments`, `isLoading`, `commentInput`.
- `UploadPage.js`: Form for uploading new BBS images and metadata.
- State: `title`, `description`, `tags`, `selectedFiles`, `uploadProgress`.
- `CommentSection.js`: Displays comments and handles new comment submission.
- Props: `comments`, `onAddComment`.
- `SearchBar.js`: Input component for searching the archive.
- Props: `onSearch`.
- `FilterPanel.js`: Optional component for advanced filtering.
- `ProtectedRoute.js`: Wrapper for routes requiring authentication.
DATA MODEL:
- **Image Object:**
```json
{
"id": "uuid-string-1",
"title": "Example BBS Terminal Screen",
"description": "A screenshot of the main menu from the 'Digital Frontier' BBS, circa 1995. Featured ANSI art and a text-based adventure game.",
"imageUrl": "/images/bbs_example_1.jpg", // URL to the hosted image
"thumbnailUrl": "/images/thumbs/bbs_example_1.jpg", // URL to a smaller thumbnail
"tags": ["ANSI", "1990s", "Adventure Game", "Retro Tech"],
"uploadDate": "2023-10-27T10:30:00Z",
"uploader": {
"userId": "user-123",
"username": "RetroGamer"
},
"comments": [ // Array of comment objects (can be fetched separately for detail page)
{
"commentId": "comment-abc",
"text": "I remember this BBS! Great times.",
"commenter": {
"userId": "user-456",
"username": "BBSEnthusiast"
},
"commentDate": "2023-10-27T11:00:00Z"
}
]
}
```
- **State Management (Zustand):**
* `imageStore`: manages fetching images, search results, current page/cursor, loading states.
* `uploadStore`: manages upload progress, form data, errors.
* `authStore`: manages user authentication status, user info.
- **Mock Data:** Will be defined within components or a separate mock data file for initial rendering and testing.
ANIMATIONS & INTERACTIONS:
- **Hover Effects:** Subtle scale-up or shadow lift effect on `ImageCard` components when hovered.
- **Transitions:** Smooth transitions for route changes (fade-in/fade-out). Fade-in animation for newly loaded images in the archive.
- **Loading States:** Skeleton loaders or spinners displayed while images or data are being fetched. Subtle pulsing animation on loading indicators.
- **Micro-interactions:** Button click feedback (slight scale change). Input field focus highlighting. Smooth transitions for filter selections.
EDGE CASES:
- **Empty States:** Display user-friendly messages and potentially illustrative graphics when the archive is empty, search yields no results, or a user has no favorited items.
- **Error Handling:** Graceful handling of network errors during fetch or upload. Display clear error messages to the user. Implement retry mechanisms for uploads where appropriate.
- **Validation:** Client-side and server-side validation for all form inputs (title length, description limits, valid image types). Provide inline validation feedback.
- **Accessibility (a11y):** Use semantic HTML elements. Ensure proper ARIA attributes where necessary. Keyboard navigability for all interactive elements. Sufficient color contrast. Alt text for images (from the description/title).
SAMPLE DATA:
1. **Image 1 (HomePage Grid/List):**
```json
{
"id": "bbs001",
"title": "Cyberia BBS Main Menu",
"description": "Early 90s BBS with a distinctive cyberpunk theme. Featured file libraries and forums.",
"imageUrl": "/images/cyberia_main.jpg",
"thumbnailUrl": "/images/thumbs/cyberia_main.jpg",
"tags": ["1990s", "Cyberpunk", "ANSI", "Menu"],
"uploadDate": "2023-01-15T08:00:00Z",
"uploader": {"userId": "user01", "username": "AnonUser"}
}
```
2. **Image 2 (HomePage Grid/List):**
```json
{
"id": "bbs002",
"title": "The Digital Oasis - Login Screen",
"description": "A popular BBS known for its friendly community and robust message boards. Login screen with custom ASCII art.",
"imageUrl": "/images/digital_oasis.png",
"thumbnailUrl": "/images/thumbs/digital_oasis.png",
"tags": ["1990s", "Community", "ASCII Art", "Login"],
"uploadDate": "2023-03-22T14:20:00Z",
"uploader": {"userId": "user02", "username": "OldTimer"}
}
```
3. **Image 3 (Detail View Data):**
```json
{
"id": "bbs003",
"title": "Galactic Adventures BBS - Command Prompt",
"description": "Screenshot of the command prompt interface for Galactic Adventures BBS, a text-based MUD/RPG focused system. Year: 1997.",
"imageUrl": "/images/galactic_cmd.gif",
"thumbnailUrl": "/images/thumbs/galactic_cmd.gif",
"tags": ["1990s", "RPG", "MUD", "Command Line", "Text-based"],
"uploadDate": "2023-07-01T11:05:00Z",
"uploader": {"userId": "user03", "username": "SpaceCadet"},
"comments": [
{
"commentId": "c001",
"text": "Wow, blast from the past! This reminds me of games I used to play.",
"commenter": {"userId": "user01", "username": "AnonUser"},
"commentDate": "2023-07-01T12:00:00Z"
},
{
"commentId": "c002",
"text": "I miss the creativity of these old interfaces.",
"commenter": {"userId": "user02", "username": "OldTimer"},
"commentDate": "2023-07-01T12:15:00Z"
}
]
}
```
4. **Image 4 (Upload Page Initial State):** Form fields are empty, no files selected.
5. **Image 5 (Search Results - Empty):** `images array is empty `[]`.
DEPLOYMENT NOTES:
- **Build:** Standard `npm run build` or `yarn build`. The output will be a static set of files.
- **Environment Variables:** Use `.env` files for API endpoints (if a backend is added later), image storage URLs, etc. Example: `REACT_APP_API_URL=https://api.bbsmirasi.com`. For CRA, prefix with `REACT_APP_`. For Vite, use `VITE_` prefix.
- **Image Hosting:** Initially, images can be hosted on a simple static hosting service (like Netlify, Vercel, S3). The URLs in the data model should point to these hosted images.
- **Performance Optimizations:** Implement code splitting for routes. Optimize image loading using lazy loading (`React.lazy` and `Suspense`) and potentially image CDNs. Bundle analysis to identify large dependencies.
- **Service Worker:** Consider adding a service worker for offline viewing capabilities or caching frequently accessed assets (Progressive Web App features).