## AI Master Prompt: Gökyüzü Mirası - Stellar Legacy
### 1. PROJECT OVERVIEW:
The 'Gökyüzü Mirası' (Stellar Legacy) application aims to create a dedicated online space for astrophotography enthusiasts. The core problem it addresses is the lack of a centralized, user-friendly platform where individuals can showcase, discover, and archive their celestial photography work. Inspired by the shared passion seen in communities like Hacker News, this platform will empower astrophotographers to digitally preserve and share their visual interpretations of the cosmos. The value proposition is to provide a visually engaging and community-driven environment that celebrates the art and science of capturing the night sky, moving beyond general photo-sharing sites to offer features tailored specifically for astrophotography.
### 2. TECH STACK:
- **Frontend Framework:** React.js (using Vite for fast development)
- **Styling:** Tailwind CSS (for rapid, utility-first UI development)
- **State Management:** Zustand (lightweight and efficient for global state)
- **Routing:** React Router DOM
- **Image Handling:** Cloudinary or a similar CDN for efficient image uploading, storage, and delivery.
- **Form Handling:** React Hook Form with Zod for validation.
- **Icons:** Heroicons or Font Awesome.
- **Deployment:** Vercel or Netlify.
### 3. CORE FEATURES & USER FLOWS:
**A. User Authentication & Profile Management:**
* **Flow:** Users can sign up using email/password or OAuth (Google/GitHub). After signup, they are redirected to their profile page. Profile editing includes uploading a profile picture, adding a bio, linking social media/portfolio, and specifying their astrophotography interests.
* **Details:** Secure authentication, password reset functionality. Profile page displays user's photos, basic stats (total photos, likes received), and bio.
**B. Photo Upload & Management:**
* **Flow:** Authenticated users click an 'Upload' button, which opens a modal or dedicated page. They select image files (supporting common formats like JPG, PNG, TIFF), add a title, description, capture details (telescope, camera, exposure settings, location), and tags. Upon successful upload, the photo appears in their personal gallery and potentially on the 'Discover' page.
* **Details:** Drag-and-drop support for file uploads. Input validation for required fields. Image preview before final submission. Users can edit or delete their uploaded photos from their profile.
**C. Photo Discovery & Exploration:**
* **Flow:** Users navigate to the 'Discover' page. They see a grid of recently uploaded or popular astrophotographs. Filters available: sort by (Newest, Most Liked, Most Commented), filter by celestial object (e.g., Nebula, Galaxy, Planet), filter by equipment type (e.g., Telescope, DSLR).
* **Details:** Infinite scrolling for seamless browsing. Each photo in the grid shows a thumbnail, title, and uploader's username. Clicking a photo leads to its detail page.
**D. Photo Detail View & Interaction:**
* **Flow:** On a photo's detail page, users see the full-size image (with zoom functionality), title, description, capture details, uploader's profile link, and a comments section. Users can 'Like' the photo and leave comments.
* **Details:** Optimized image loading. Interactive zoom/pan for high-resolution images. Like button provides visual feedback. Comments are displayed chronologically.
**E. Personal Gallery:**
* **Flow:** Accessible from the user's profile or a dedicated 'My Photos' link. Displays all photos uploaded by the logged-in user in a grid or list format. Options to edit, delete, or view individual photos.
* **Details:** Clear presentation of the user's collection. Ability to re-order photos might be a future enhancement.
### 4. UI/UX DESIGN:
- **Layout:** Single Page Application (SPA) structure. Main navigation includes 'Discover', 'Upload', 'Profile'. Responsive design using a mobile-first approach.
- **Color Palette:** Deep blues, purples, and blacks associated with the night sky, accented with whites and subtle starlight yellows for contrast and clarity. Dark mode primary, with an optional light mode.
- **Typography:** Clean, modern sans-serif fonts (e.g., Inter, Poppins) for readability. Hierarchical structure with clear headings and body text.
- **Component Structure:** Header, Footer, Navigation Sidebar/Menu, Photo Card, Upload Modal, Profile Card, Comment Section, Filter/Sort controls.
- **Responsiveness:** Utilizes Tailwind CSS's responsive modifiers (`sm:`, `md:`, `lg:`) to adapt layout, font sizes, and spacing across devices (mobile, tablet, desktop).
### 5. DATA MODEL (using Zustand for State & Local Storage/Mock API for MVP):
```javascript
// Zustand Store Example
interface UserState {
user: User | null;
setUser: (user: User | null) => void;
}
interface PhotoState {
photos: Photo[];
setPhotos: (photos: Photo[]) => void;
uploadPhoto: (photoData: Photo) => void;
likePhoto: (photoId: string) => void;
}
interface AppState extends UserState, PhotoState {}
// Mock Data Structures
interface User {
id: string;
username: string;
profilePictureUrl: string;
bio: string;
socialLinks: { [key: string]: string };
}
interface Photo {
id: string;
userId: string;
title: string;
description: string;
imageUrl: string;
captureDetails: {
timestamp: string;
location: string;
telescope: string;
camera: string;
exposure: string;
iso: string;
};
tags: string[];
likes: string[]; // Array of user IDs who liked
comments: Comment[];
createdAt: string;
}
interface Comment {
id: string;
userId: string;
text: string;
createdAt: string;
}
```
* **State Management:** Zustand will manage global states like logged-in user information, and the list of photos for discovery and user galleries. Local state will be used for form inputs and UI toggles.
* **Persistence:** For MVP, data can be simulated with mock data or potentially stored in `localStorage`. A real backend/database would replace this in later stages.
### 6. COMPONENT BREAKDOWN:
- **`App.jsx`:** Main application component, sets up routing.
- **`Header.jsx`:** Displays logo, navigation links, user avatar/login button. Handles responsiveness of navigation.
* `props`: `user` (object or null)
- **`Navigation.jsx`:** Renders navigation links (Discover, Upload, Profile). Conditionally renders 'Upload' based on auth status.
* `props`: `isAuthenticated` (boolean)
- **`DiscoverPage.jsx`:** Fetches and displays photos in a grid. Includes filtering and sorting controls.
* `props`: None (fetches data internally or from store)
- **`PhotoGrid.jsx`:** Renders a grid of `PhotoCard` components.
* `props`: `photos` (array of Photo objects)
- **`PhotoCard.jsx`:** Displays a single photo thumbnail, title, and uploader info.
* `props`: `photo` (Photo object)
- **`PhotoDetailPage.jsx`:** Displays full photo details, comments, and interaction buttons.
* `props`: `photoId` (string - from URL param)
- **`UploadPage.jsx`:** Contains the form for uploading new photos.
* `props`: None
- **`UploadForm.jsx`:** Form component for photo details, including file input and capture settings.
* `props`: `onSubmit` (function), `initialData` (object, for editing)
- **`ProfilePage.jsx`:** Displays user profile information and their uploaded photos (`MyPhotoGrid`).
* `props`: `userId` (string)
- **`MyPhotoGrid.jsx`:** Similar to `PhotoGrid` but displays only the current user's photos.
* `props`: `photos` (array of Photo objects)
- **`CommentSection.jsx`:** Displays comments and an input for adding new comments.
* `props`: `comments` (array), `photoId` (string)
- **`CommentInput.jsx`:** Input field for submitting new comments.
* `props`: `photoId`, `onSubmit` (function)
- **`AuthButtons.jsx`:** Renders Login/Signup or Logout buttons.
* `props`: None
### 7. ANIMATIONS & INTERACTIONS:
- **Hover Effects:** Subtle scaling or shadow lift on `PhotoCard` elements in the grid.
- **Transitions:** Smooth fade-in/out transitions for modals (upload, login) and page changes (using `react-transition-group` or similar).
- **Loading States:** Skeleton loaders or spinners for photo grids and detail pages while data is being fetched. Button states (loading indicator) during submission actions.
- **Micro-interactions:** Visual feedback on 'Like' button click (e.g., heart icon fills). Subtle animation on successful upload confirmation.
- **Image Zoom:** Smooth zooming and panning animation on the `PhotoDetailPage`.
### 8. EDGE CASES:
- **Empty States:** Display user-friendly messages and visuals when no photos are found (e.g., on a user's empty gallery, or when search yields no results).
- **Error Handling:** Graceful handling of API errors (upload failures, network issues) with informative messages to the user. Form validation errors clearly displayed next to the relevant fields.
- **Validation:** Client-side and (eventually) server-side validation for all form inputs (required fields, valid file types/sizes for uploads).
- **Accessibility (a11y):** Use semantic HTML, ARIA attributes where necessary, ensure sufficient color contrast, keyboard navigability for all interactive elements, and provide alt text for images (potentially derived from title/description).
- **Authentication:** Handling of expired tokens, logout redirection.
- **Image Formats:** Explicitly state supported image formats and sizes.
### 9. SAMPLE DATA:
```json
// User Mock Data
{
"id": "user-123",
"username": "AstroNerd",
"profilePictureUrl": "https://example.com/avatars/astronerd.jpg",
"bio": "Capturing the cosmos, one photon at a time. Sharing my journey through astrophotography.",
"socialLinks": {
"twitter": "@astro_nerd",
"portfolio": "https://astronerd.com"
}
}
// Photo Mock Data (Example 1)
{
"id": "photo-abc",
"userId": "user-123",
"title": "Andromeda Galaxy M31",
"description": "A detailed shot of the Andromeda Galaxy, taken during a clear night.",
"imageUrl": "https://example.com/photos/m31_andromeda.jpg",
"captureDetails": {
"timestamp": "2023-10-27T22:30:00Z",
"location": "My Backyard Observatory",
"telescope": "Celestron EdgeHD 800",
"camera": "ZWO ASI294MC Pro",
"exposure": "5 hours total",
"iso": "800"
},
"tags": ["galaxy", "andromeda", "m31", "deep sky"],
"likes": ["user-456", "user-789"],
"comments": [
{
"id": "comment-001",
"userId": "user-456",
"text": "Incredible detail!",
"createdAt": "2023-10-27T23:00:00Z"
}
],
"createdAt": "2023-10-28T09:15:00Z"
}
// Photo Mock Data (Example 2 - Project Hail Mary inspired)
{
"id": "photo-xyz",
"userId": "user-456",
"title": "Orion Nebula Widefield",
"description": "Widefield view of the Orion Nebula region, hinting at distant star systems. Inspired by the wonders described in 'Project Hail Mary'.",
"imageUrl": "https://example.com/photos/orion_wide.jpg",
"captureDetails": {
"timestamp": "2023-11-01T21:00:00Z",
"location": "Dark Sky Site - Anza Borrego",
"telescope": "William Optics RedCat 51",
"camera": "Canon EOS Ra",
"exposure": "2 hours",
"iso": "1600"
},
"tags": ["nebula", "orion", "m42", "widefield", "space", "science fiction"],
"likes": ["user-123"],
"comments": [],
"createdAt": "2023-11-02T10:00:00Z"
}
// Additional Mock Photos (3-5 more with varying details and tags)
```
### 10. DEPLOYMENT NOTES:
- **Build:** Configure Vite for production build (`npm run build`). Ensure environment variables are correctly set.
- **Environment Variables:** Use `.env` files (e.g., `.env.local`, `.env.production`). Key variables include API endpoints (if using a backend), Cloudinary credentials, OAuth client IDs.
- **Performance Optimizations:** Implement code splitting with React Router. Optimize image loading using lazy loading and appropriate formats/sizes. Minimize bundle size.
- **CI/CD:** Set up Vercel/Netlify for automated deployments on Git pushes to the main branch.
- **HTTPS:** Ensure the application is served over HTTPS.
- **CORS:** If a separate backend is used, configure CORS appropriately.
- **Base URL:** Set the correct base URL for routing in production if necessary.