## AI Master Prompt for 'Uzay Turu: Sanal Ay Keşfi' Application
### 1. PROJECT OVERVIEW
**Objective:** To create an immersive and educational mobile and web application that allows users to virtually explore the far side of the Moon and experience space exploration, inspired by missions like Artemis II. The application aims to make space discovery accessible, engaging, and interactive for a broad audience.
**Problem Solved:** Current access to space exploration experiences is limited to passive media (documentaries, news) or highly technical simulations. This app bridges the gap by offering an engaging, interactive, and visually rich platform for virtual lunar exploration and learning about space missions.
**Value Proposition:** Experience the wonder of space exploration like never before. Virtually journey to the Moon's far side, follow real space missions, and learn about the cosmos through stunning visuals and interactive content, all from your device.
### 2. TECH STACK
- **Frontend Framework:** React (using Create React App for simplicity or Next.js for potential SSR/SSG benefits if needed later)
- **Styling:** Tailwind CSS (for rapid UI development and utility-first styling)
- **State Management:** Zustand or Redux Toolkit (for managing application state, especially for complex interactions and data fetching)
- **3D Rendering:** Three.js (for creating and displaying interactive 3D models of the Moon and spacecraft)
- **Routing:** React Router DOM (for navigation within the single-page application)
- **Animations:** Framer Motion (for smooth UI animations and transitions)
- **API Interaction:** Axios (or native fetch API) for potential future backend integration
- **Deployment:** Vercel or Netlify (for easy static site deployment)
### 3. CORE FEATURES
**A. Virtual Moon Tour (Interactive 3D Exploration)**
- **User Flow:**
1. User navigates to the 'Virtual Tour' section.
2. A 3D model of the Moon loads.
3. User can rotate, zoom, and pan the Moon model using touch/mouse gestures.
4. Key locations (e.g., Orientale Basin, landing sites) are highlighted with interactive markers.
5. Clicking a marker opens a modal/panel with:
- High-resolution images/videos of the location.
- Text descriptions (e.g., geological information, mission relevance).
- Audio narration (optional, for deeper immersion).
6. Special focus on the 'Far Side': A dedicated view highlighting features visible only from the far side.
- **Technical Details:** Utilizes Three.js to render the Moon. Textures will be applied for realistic appearance. Markers will be placed using 3D coordinates, converting to screen space for interaction. Modal popups will display rich content.
**B. Artemis II Mission Log**
- **User Flow:**
1. User selects the 'Mission Log' section.
2. A timeline view displays key events of the Artemis II mission.
3. Each event card shows:
- Date/Time.
- Brief description.
- Associated media (images, short video clips).
4. Clicking an event expands to show more details, including quotes from the crew (like the "Orientale basin" sighting).
5. Special section for 'First Glimpse of Far Side' with relevant media and quotes.
- **Technical Details:** Data will be managed in state (initially mock data). Timeline component will render event cards. Media will be displayed in lightboxes or embedded players.
**C. Space Knowledge Hub**
- **User Flow:**
1. User accesses the 'Knowledge Hub'.
2. Content is categorized (e.g., Moon Facts, Planets, Spacecraft, Missions).
3. Each category displays a list of articles/topics.
4. Clicking a topic opens a page with text, images, and potentially simple diagrams.
5. Search functionality to quickly find specific information.
- **Technical Details:** Simple content display components. Data could be stored as JSON objects or fetched from a simple CMS/API in the future. Search implemented client-side for MVP.
### 4. UI/UX DESIGN
- **Layout:** Single Page Application (SPA) layout. A persistent navigation bar (top or side) for accessing core sections (Tour, Log, Hub, Settings). Content areas dynamically update based on navigation. Use of cards, modals, and clear visual hierarchy.
- **Color Palette:** Deep space blues and blacks as primary backgrounds. Contrasting whites, silvers, and light grays for text and UI elements. Accent colors (e.g., vibrant orange, electric blue) for interactive elements, markers, and highlights.
- **Typography:** Clean, modern sans-serif fonts (e.g., Inter, Montserrat) for readability. Use varying weights and sizes for headings, subheadings, and body text.
- **Responsive Design:** Mobile-first approach. Utilize Tailwind CSS's responsive utilities (`sm:`, `md:`, `lg:`) to ensure optimal viewing on all devices (smartphones, tablets, desktops). Navigation adapts to screen size (e.g., hamburger menu on mobile).
- **Interactivity:** Smooth transitions between pages/sections. Interactive 3D controls. Hover effects on buttons and markers. Clear visual feedback for user actions.
### 5. DATA MODEL (Mock Data Structure)
```json
// Mock data for Mission Log events
const mockMissionLog = [
{
id: 1,
date: "2023-11-16T13:47:00Z",
title: "Artemis II Launch",
description: "The Artemis II crew successfully launched aboard the Orion spacecraft, beginning their journey around the Moon.",
media: [
{ type: "image", url: "/images/artemis2_launch.jpg", alt: "Artemis II launchpad" },
{ type: "video", url: "/videos/artemis2_launch.mp4" }
],
details: "A historic moment for lunar exploration..."
},
{
id: 2,
date: "2023-11-18T08:00:00Z",
title: "First Glimpse of Moon's Far Side",
description: "Crew members described seeing the far side of the Moon, capturing a stunning view of the Orientale basin.",
media: [
{ type: "image", url: "/images/artemis2_farside.jpg", alt: "View of Orientale Basin from Orion" }
],
quotes: [
"'Something about you senses that is not the Moon that I'm used to seeing,' said Koch.",
"'Absolutely spectacular,' described the crew."
],
details: "Nasa confirmed this was the first time the entire Orientale basin was seen with human eyes..."
}
// ... more events
];
// Mock data for Knowledge Hub articles
const mockKnowledgeHub = {
moonFacts: [
{ id: 'mf1', title: "Lunar Phases", content: "The phases of the Moon are the different ways it appears from Earth...", image: "/images/lunar_phases.jpg" },
{ id: 'mf2', title: "The Dark Side", content: "The 'dark side' of the Moon is not always dark; it's the side that always faces away from Earth...", image: "/images/far_side.jpg" }
],
planets: [
{ id: 'p1', title: "Mars", content: "Mars is the fourth planet from the Sun...", image: "/images/mars.jpg" }
]
// ... other categories
};
// State structure (example using Zustand)
// const useStore = create(set => ({
// missionLog: [],
// knowledgeContent: {},
// currentTourView: 'full_moon',
// isLoading: false,
// fetchMissionLog: async () => {
// set({ isLoading: true });
// // Simulate API call
// setTimeout(() => {
// set({ missionLog: mockMissionLog, isLoading: false });
// }, 1000);
// },
// // ... other actions
// }));
```
### 6. COMPONENT BREAKDOWN
- **`App.js` / `MainLayout.js`:** Main application component, sets up routing and global layout.
- Props: None
- Responsibility: Renders `Navbar`, main content area, and `Footer` (optional).
- **`Navbar.js`:** Persistent navigation bar.
- Props: `navLinks` (array of objects { name: string, path: string })
- Responsibility: Displays navigation links, handles active link styling, responsive menu toggle.
- **`HomePage.js`:** Landing page with a brief intro and calls to action.
- Props: None
- Responsibility: Welcomes users, showcases app highlights, directs to core features.
- **`VirtualTourPage.js`:** Page for the interactive 3D Moon exploration.
- Props: None
- Responsibility: Mounts and manages the `MoonCanvas` component, handles UI controls for rotation/zoom.
- **`MoonCanvas.js`:** The Three.js canvas component.
- Props: `markers` (array of objects), `onMarkerClick` (function)
- Responsibility: Initializes Three.js scene, loads Moon model, renders markers, handles user gestures (orbit, zoom), calls `onMarkerClick` when a marker is interacted with.
- **`InfoModal.js`:** Displays detailed information when a marker or log event is clicked.
- Props: `content` (object with title, description, media), `onClose` (function)
- Responsibility: Renders modal UI, displays rich content, handles closing.
- **`MissionLogPage.js`:** Displays the mission timeline.
- Props: `logEntries` (array of mission log objects)
- Responsibility: Renders the `Timeline` component.
- **`Timeline.js`:** Component to display events chronologically.
- Props: `entries` (array of log objects)
- Responsibility: Renders individual `TimelineEvent` components.
- **`TimelineEvent.js`:** Represents a single event in the mission log.
- Props: `event` (object)
- Responsibility: Displays event title, date, description snippet, and media thumbnails. Handles click to potentially expand or open `InfoModal`.
- **`KnowledgeHubPage.js`:** Page for browsing space information.
- Props: `categories` (object of categorized articles)
- Responsibility: Displays category list and navigates to `ArticlePage`.
- **`ArticlePage.js`:** Displays a single knowledge hub article.
- Props: `article` (object)
- Responsibility: Renders article title, content, and images.
- **`LoadingSpinner.js`:** Visual indicator for loading states.
- Props: None
- Responsibility: Displays a spinning animation.
- **`SearchBar.js`:** (For Knowledge Hub)
- Props: `onSearch` (function)
- Responsibility: Input field for search queries.
### 7. ANIMATIONS & INTERACTIONS
- **Page Transitions:** Smooth fade-in/fade-out or slide animations between sections using Framer Motion.
- **3D Moon Interaction:**
- Smooth orbit controls (rotation) via mouse drag or touch swipe.
- Smooth zoom in/out using mouse wheel or pinch gestures.
- Subtle pulsing or hover effect on interactive markers.
- **UI Elements:**
- Button hover effects (slight scale-up or background color change).
- Smooth expansion/collapse animations for timeline events or expandable sections.
- Modal entrance/exit animations (fade-in/scale-up).
- **Loading States:** Use `LoadingSpinner.js` component. Disable user interactions and display spinner overlay or inline spinner during data fetching (e.g., loading mission log data, initializing 3D scene).
- **Micro-interactions:** Subtle visual feedback on clicks, button presses.
### 8. EDGE CASES & ACCESSIBILITY
- **Empty States:**:
- Mission Log: Display a friendly message like "No mission updates yet. Stay tuned!" if the log is empty.
- Knowledge Hub: "No articles found for this category." or "Search returned no results."
- Virtual Tour: If 3D model fails to load, display a placeholder image and an error message.
- **Error Handling:**:
- Gracefully handle errors during data fetching (e.g., API failures) by displaying user-friendly error messages and potentially offering a retry option.
- Three.js errors: Catch potential WebGL or model loading errors and display fallback content.
- **Validation:**:
- If search or forms are implemented in the future, client-side validation for input fields.
- **Accessibility (a11y):**:
- Use semantic HTML elements (nav, main, article, button).
- Ensure sufficient color contrast for text and UI elements.
- Provide `alt` text for all meaningful images.
- Ensure keyboard navigability for all interactive elements.
- Use ARIA attributes where necessary (e.g., for modal states, dynamic content updates).
- For 3D canvas, consider providing text alternatives or summaries for key visual information.
### 9. SAMPLE DATA
```json
// Sample Data for VirtualTourPage markers
const tourMarkers = [
{
id: "orientale_basin",
position: { x: 50, y: -20, z: 10 }, // Example 3D coordinates
label: "Orientale Basin",
content: {
title: "Orientale Basin",
description: "A spectacular and massive impact crater on the Moon's surface, prominently visible from the far side.",
media: [
{ type: "image", url: "/images/orientale_basin_detail.jpg", alt: "Detailed view of Orientale Basin" },
{ type: "video", url: "/videos/artemis2_farside_view.mp4" } // Clip showing the view from Artemis II
],
details: "Observed by the Artemis II crew, marking a significant visual discovery."
}
},
{
id: "south_pole_aitken",
position: { x: -30, y: 40, z: -5 },
label: "South Pole-Aitken Basin",
content: {
title: "South Pole-Aitken Basin",
description: "One of the largest known impact craters in the Solar System.",
media: [
{ type: "image", url: "/images/sp_aitken.jpg", alt: "Map of South Pole-Aitken Basin" }
]
}
}
// ... more markers
];
// Sample Data for Mission Log (already included in Data Model section)
// Sample Data for Knowledge Hub (already included in Data Model section)
// Sample Initial State
const initialState = {
missionLog: [],
knowledgeContent: mockKnowledgeHub,
currentTourView: 'full_moon',
isLoading: false,
error: null,
markers: tourMarkers // Loaded initially
};
```
### 10. DEPLOYMENT NOTES
- **Build Tool:** Use `create-react-app`'s build command (`npm run build`) or Next.js `next build`.
- **Environment Variables:** Use `.env` files for managing API keys (if any in future), base URLs, etc. Prefix with `REACT_APP_` (for CRA) or `NEXT_PUBLIC_` (for Next.js).
- **Hosting:** Deploy the static build output to platforms like Vercel or Netlify for CDN-based delivery and easy updates.
- **Performance Optimizations:**
- **Code Splitting:** Use `React.lazy` and `Suspense` for `VirtualTourPage` and potentially other large sections to improve initial load time.
- **Image Optimization:** Compress images and use appropriate formats (e.g., WebP). Consider a CDN for image delivery.
- **3D Model Optimization:** Optimize the Three.js model (reduce polygon count, use efficient textures) to ensure smooth performance, especially on mobile devices.
- **Memoization:** Use `React.memo`, `useMemo`, `useCallback` to prevent unnecessary re-renders.
- **Bundle Analysis:** Use tools like `webpack-bundle-analyzer` to identify large dependencies and optimize bundle size.
- **HTTPS:** Ensure deployment uses HTTPS.
- **Caching:** Leverage browser caching and CDN caching strategies.
- **Cross-Origin Issues:** If loading 3D models from a CDN, ensure proper CORS headers are configured on the asset server.