You are an expert AI full-stack developer tasked with creating a single-page responsive web application called 'Hedefli Roket Simülatörü ve Tasarım Aracı' (Targeted Rocket Simulator and Design Tool). This application will allow hobbyists, students, and makers to design, simulate, and analyze low-cost, 3D-printable rockets. The core inspiration comes from projects like the $96 3D-printed rocket with mid-air trajectory recalculation. The application should be built as a Single Page Application (SPA) using React and Tailwind CSS for a modern, performant, and visually appealing user experience.
### PROJECT OVERVIEW:
**Objective:** To provide an accessible, web-based platform for designing, simulating, and analyzing custom 3D-printable rockets, with a focus on low-cost components and guided flight concepts. The application aims to democratize rocket design and simulation for hobbyists and educational purposes.
**Problem Solved:** Traditional rocket simulation software can be complex, expensive, or require significant local setup. This platform offers an intuitive, browser-based solution for rapid prototyping, design iteration, and performance prediction of 3D-printed rockets, incorporating concepts of onboard guidance and sensor integration.
**Value Proposition:** Empower users to bring their 3D-printed rocket ideas to life through a streamlined design-to-simulation workflow, enabling experimentation with guided flight principles at an affordable level. It serves as a powerful educational tool and a creative sandbox for makers.
### TECH STACK:
- **Frontend Framework:** React (using Create React App or Vite for project setup)
- **Styling:** Tailwind CSS (for utility-first styling and rapid UI development)
- **State Management:** React Context API (for global state) and `useState`/`useReducer` (for local component state). Consider Zustand or Jotai for more complex state if needed, but start simple.
- **Routing:** React Router DOM (for navigation within the SPA if multiple views are envisioned, though MVP aims for single-page simplicity).
- **3D Model Handling (Optional for MVP):** Libraries like `react-three-fiber` and `drei` if interactive 3D previews are desired, otherwise focus on parametric input and simulation.
- **Simulation Logic:** This will be the most complex part. For MVP, we can either:
a) Integrate a JavaScript-port of a simplified rocket simulation library (if available and suitable).
b) Simulate key parameters (like drag, thrust curve approximation, basic stability) using custom JavaScript logic based on established physics principles.
c) **(Recommended for MVP)** Focus on inputting parameters and displaying *results* from a backend simulation or a pre-defined simulation engine. For the frontend prompt, we'll mock the simulation results based on user inputs.
- **Form Handling:** `react-hook-form` for efficient form management and validation.
- **Charting:** `chart.js` or `recharts` for visualizing simulation results.
- **Icons:** `react-icons` or similar for UI elements.
### CORE FEATURES (MVP):
1. **Rocket Design Module:**
* **User Flow:** User navigates to the 'Design' section. They can either input key parameters manually (e.g., rocket length, diameter, nose cone type, fin count/shape/size, canard count/size) or potentially upload a simplified 3D model file (e.g., STL, focusing on geometry extraction for simulation inputs).
* **Functionality:** The system takes these inputs and calculates basic geometric properties and potentially mass distribution (approximated). It should provide visual feedback, perhaps a simplified 2D or wireframe representation of the rocket based on inputs.
* **Inputs:** Rocket Length, Body Diameter, Nose Cone Type (e.g., Ogive, Parabolic, Conical), Fin Count, Fin Shape (e.g., Trapezoidal, Delta), Fin Size (chord, span), Canard Count/Size (if applicable).
2. **Component Configuration:**
* **User Flow:** Within the design module or a separate 'Components' section, users select available propulsion (e.g., motor type/class - simulated thrust curve), onboard computer (e.g., ESP32 placeholder), and key sensors (e.g., MPU6050 IMU, GPS, Barometer placeholders).
* **Functionality:** These selections inform the simulation parameters. For MVP, the actual electronics won't be functional, but their *presence* and *type* will influence simulation assumptions (e.g., presence of IMU might allow for simulated stabilization calculations).
3. **Simulation Engine (Frontend Mock):**
* **User Flow:** After designing the rocket and configuring components, the user clicks a 'Simulate' button. The application processes the design and component data.
* **Functionality:** Based on the design parameters, selected motor, and simplified physics (approximated drag, thrust, gravity), the system calculates key flight metrics. For MVP, this will be a mock simulation. It should generate plausible data for:
* Apogee (Max Altitude)
* Max Velocity
* Total Flight Time
* Range (if horizontal component considered)
* Simulated Trajectory Path (a series of X, Y coordinates).
* **(Advanced Mock)** Simulate the effect of the MPU6050 and ESP32 by introducing slight course corrections or stability improvements in the trajectory data compared to a purely ballistic flight.
4. **Results Visualization:**
* **User Flow:** Upon simulation completion, results are displayed clearly. Users can view graphs and a summary of the flight.
* **Functionality:** Display:
* Key metrics (Apogee, Max Velocity, etc.) in a summary card.
* Graphs showing Altitude vs. Time, Velocity vs. Time.
* A simple visual representation of the trajectory path on a 2D plane.
* **(Optional)** A basic cost breakdown based on selected components and estimated 3D printing material.
### UI/UX DESIGN:
- **Layout:** Single page application layout. A main content area displaying the current module (Design, Simulation, Results). A persistent navigation bar (sidebar or top bar) for switching between modules/sections. Clean, modern, and functional.
- **Color Palette:** Primary: Deep Blue (`#0B132B` - Space), Secondary: Electric Blue (`#3A506B` - Tech), Accent: Bright Orange (`#FF6B35` - Energy/Action), Neutrals: Grays and White (`#E0E0E0`, `#FFFFFF`).
- **Typography:** Use a clean, sans-serif font family like 'Inter' or 'Roboto' for readability. Clear hierarchy using font weights and sizes.
- **Responsive Design:** Mobile-first approach. The layout should adapt seamlessly to different screen sizes (smartphones, tablets, desktops). Use Flexbox and Grid extensively with Tailwind's responsive prefixes (e.g., `md:flex-row`, `lg:w-1/2`). Ensure interactive elements are large enough for touch targets on mobile.
- **Key Components:**
* `Navigation`: Sidebar/Top bar with links.
* `DesignForm`: Input fields for rocket parameters.
* `ComponentSelector`: Radio buttons/dropdowns for selecting motors, sensors.
* `SimulationControl`: Button to trigger simulation.
* `ResultsDisplay`: Cards for summary metrics, Chart components, Trajectory visualization.
* `Modal`: For help, tutorials, or complex input guides.
### COMPONENT BREAKDOWN:
- **`App.js`:** Main application component. Sets up routing (if used) and overall layout. Renders `Navigation` and the main content area.
- **`Navigation.js`:** Sidebar or top navigation component. Links to different sections (e.g., 'Design', 'Results'). Uses `react-router-dom` if applicable.
* Props: `activeLink` (string)
- **`DesignModule.js`:** Container for the rocket design interface.
* State: `rocketParameters` (object), `componentSelection` (object).
* Renders: `DesignForm`, `ComponentSelector`, `SimulationControl`.
- **`DesignForm.js`:** Form component for inputting rocket physical parameters.
* Props: `initialValues` (object), `onSubmit` (function).
* Uses: `react-hook-form`.
* Components: `LabeledInput` (custom input field wrapper), `SelectDropdown`.
- **`ComponentSelector.js`:** Component for selecting motor, sensors, flight computer.
* Props: `availableComponents` (object), `onSelect` (function).
* Renders: Radio groups or similar for selection.
- **`SimulationControl.js`:** Button and status indicator for triggering and monitoring simulation.
* Props: `isSimulating` (boolean), `onSimulate` (function).
- **`ResultsModule.js`:** Container for displaying simulation results.
* State: `simulationResults` (object).
* Renders: `SummaryMetrics`, `TrajectoryChart`, `AltitudeChart`, `VelocityChart`.
- **`SummaryMetrics.js`:** Displays key numerical results (Apogee, Time, etc.).
* Props: `results` (object).
- **`TrajectoryChart.js`:** Displays the simulated flight path.
* Props: `trajectoryData` (array of {x, y}).
* Uses: Simple SVG or a charting library.
- **`AltitudeChart.js`:** Displays Altitude vs. Time.
* Props: `chartData` (object compatible with Chart.js).
* Uses: `chart.js`.
- **`VelocityChart.js`:** Displays Velocity vs. Time.
* Props: `chartData` (object compatible with Chart.js).
* Uses: `chart.js`.
- **`LabeledInput.js`:** Reusable input field component with a label.
* Props: `label`, `name`, `control`, `rules` (for `react-hook-form`).
- **`SelectDropdown.js`:** Reusable select input component.
* Props: `label`, `name`, `options`, `control`, `rules`.
### DATA MODEL:
- **`rocketParameters` State (within `DesignModule` or a context):**
```json
{
"length": 1.2, // meters
"bodyDiameter": 0.07, // meters
"noseCone": {
"type": "Ogive", // e.g., "Ogive", "Parabolic", "Conical"
"length": 0.3 // meters
},
"fins": [
{
"count": 3,
"shape": "Trapezoidal", // e.g., "Trapezoidal", "Delta"
"rootChord": 0.08, // meters
"tipChord": 0.04, // meters
"span": 0.05 // meters
}
],
"canards": [
// Similar structure if included
]
}
```
- **`componentSelection` State:**
```json
{
"motor": {
"id": "Estes-A8-3", // Placeholder ID
"name": "Estes A8-3",
"simulatedThrustCurve": [ // Array of [time, thrust] pairs
[0, 10], [0.1, 12], [0.5, 15], [1.5, 8], [2.0, 0]
],
"burnTime": 2.0 // seconds
},
"flightComputer": {
"id": "ESP32",
"name": "ESP32 Dev Board",
"hasImu": true // Mock flag
},
"sensors": [
{"id": "MPU6050", "name": "MPU6050 IMU"},
{"id": "GPS", "name": "Generic GPS Module"},
{"id": "Barometer", "name": "BMP280 Barometer"}
]
}
```
- **`simulationResults` State:**
```json
{
"apogee": 150.5, // meters
"maxVelocity": 55.2, // m/s
"totalFlightTime": 15.8, // seconds
"range": 80.1, // meters (optional)
"trajectory": [ // Array of {time, altitude, velocity, x, y}
{"time": 0, "altitude": 0, "velocity": 0, "x": 0, "y": 0},
{"time": 1, "altitude": 10.2, "velocity": 15.5, "x": 5.1, "y": 10.2},
// ... more points
{"time": 15.8, "altitude": 0.1, "velocity": 2.1, "x": 80.1, "y": 0.1}
],
"stabilityMargin": 1.5, // Calibers (mocked)
"estimatedCost": 98.50 // USD
}
```
- **Mock Data Generation:** The simulation function will generate `simulationResults` based on `rocketParameters` and `componentSelection`. This logic should be kept within the frontend for the MVP, simulating realistic (but not necessarily perfectly accurate) outcomes.
### ANIMATIONS & INTERACTIONS:
- **Page Transitions:** Subtle fade-in/fade-out for module transitions (using CSS transitions or libraries like `Framer Motion` if desired, but keep it simple for MVP).
- **Button Hover Effects:** Slight scale-up or background color change on buttons.
- **Input Focus:** Highlight input fields when focused.
- **Loading States:** Display a spinner or progress indicator when the simulation is running. Use the `isSimulating` state flag.
- **Form Validation Feedback:** Visual cues (e.g., red border, error message) for invalid inputs.
- **Chart Interactions:** Tooltips on hover for data points in charts.
### EDGE CASES:
- **Empty State:** When no rocket is designed or simulated yet, display informative messages and clear calls to action (e.g., "Design your first rocket!", "Run a simulation to see results.").
- **Invalid Inputs:** Implement validation using `react-hook-form` to prevent non-numeric values, negative lengths, impossible configurations, etc. Provide clear error messages next to the relevant fields.
- **Simulation Failures (Mocked):** If simulation logic encounters an impossible scenario (e.g., instant stall), display a user-friendly message instead of crashing.
- **Responsiveness:** Ensure all components reflow and resize gracefully on smaller screens. Navigation might collapse into a hamburger menu. Forms should stack vertically.
- **Accessibility (a11y):** Use semantic HTML5 elements. Ensure proper ARIA attributes where necessary. All interactive elements should be keyboard navigable. Sufficient color contrast.
### SAMPLE DATA (for mocking simulation results):
- **Scenario 1: Basic Rocket (Similar to HN post)**
```json
{
"rocketParameters": {"length": 1.0, "bodyDiameter": 0.06, "noseCone": {"type": "Ogive", "length": 0.25}, "fins": [{"count": 3, "shape": "Trapezoidal", "rootChord": 0.07, "tipChord": 0.03, "span": 0.04}]},
"componentSelection": {"motor": {"name": "Estes C6-5", "burnTime": 1.8}, "flightComputer": {"name": "ESP32", "hasImu": true}, "sensors": [{"id": "MPU6050"}]}
}
// Mocked Results:
{
"apogee": 180.5, "maxVelocity": 60.1, "totalFlightTime": 17.2, "trajectory": [...], "stabilityMargin": 1.8, "estimatedCost": 95.00
}
```
- **Scenario 2: Larger Rocket, High Thrust Motor**
```json
{
"rocketParameters": {"length": 1.5, "bodyDiameter": 0.1, "noseCone": {"type": "Parabolic", "length": 0.4}, "fins": [{"count": 4, "shape": "Delta", "rootChord": 0.12, "tipChord": 0.06, "span": 0.08}]},
"componentSelection": {"motor": {"name": "Aerotech I200", "burnTime": 2.5}, "flightComputer": {"name": "ESP32", "hasImu": true}, "sensors": [{"id": "MPU6050"}, {"id": "GPS"}]}
}
// Mocked Results:
{
"apogee": 450.0, "maxVelocity": 110.5, "totalFlightTime": 25.5, "trajectory": [...], "stabilityMargin": 2.2, "estimatedCost": 150.00
}
```
- **Scenario 3: Simple Rocket, No Guidance Mock**
```json
{
"rocketParameters": {"length": 0.8, "bodyDiameter": 0.05, "noseCone": {"type": "Conical", "length": 0.2}, "fins": [{"count": 3, "shape": "Trapezoidal", "rootChord": 0.05, "tipChord": 0.02, "span": 0.03}]},
"componentSelection": {"motor": {"name": "Estes B4-4", "burnTime": 1.5}, "flightComputer": null, "sensors": []}
}
// Mocked Results (lower stability margin, potentially less stable trajectory):
{
"apogee": 120.0, "maxVelocity": 40.0, "totalFlightTime": 12.0, "trajectory": [...], "stabilityMargin": 1.1, "estimatedCost": 70.00
}
```
- **Scenario 4: Rocket with Canards**
```json
{
"rocketParameters": {"length": 1.1, "bodyDiameter": 0.07, "noseCone": {"type": "Ogive", "length": 0.28}, "fins": [{"count": 3, "shape": "Trapezoidal", "rootChord": 0.07, "tipChord": 0.03, "span": 0.04}], "canards": [{"count": 2, "shape": "Delta", "rootChord": 0.05, "tipChord": 0.01, "span": 0.03}]}
"componentSelection": {"motor": {"name": "Estes D12-5", "burnTime": 2.2}, "flightComputer": {"name": "ESP32", "hasImu": true}, "sensors": [{"id": "MPU6050"}, {"id": "Barometer"}]}
}
// Mocked Results (potentially slightly different stability/trajectory):
{
"apogee": 220.0, "maxVelocity": 75.0, "totalFlightTime": 19.0, "trajectory": [...], "stabilityMargin": 1.7, "estimatedCost": 110.00
}
```
- **Scenario 5: Minimalist Design (Low Cost Focus)**
```json
{
"rocketParameters": {"length": 0.7, "bodyDiameter": 0.04, "noseCone": {"type": "Conical", "length": 0.18}, "fins": [{"count": 3, "shape": "Trapezoidal", "rootChord": 0.04, "tipChord": 0.015, "span": 0.03}]},
"componentSelection": {"motor": {"name": "Estes A6-3", "burnTime": 1.7}, "flightComputer": null, "sensors": []}
}
// Mocked Results:
{
"apogee": 95.0, "maxVelocity": 30.0, "totalFlightTime": 10.5, "trajectory": [...], "stabilityMargin": 1.3, "estimatedCost": 65.00
}
```
### DEPLOYMENT NOTES:
- **Build Process:** Use `npm run build` (or `yarn build`) with Vite/CRA. This generates an optimized static build in the `dist` or `build` folder.
- **Environment Variables:** Use `.env` files for configuration (e.g., API keys if integrating a real backend later). For the frontend-only MVP, minimal env variables are needed, perhaps just a `NODE_ENV`.
- **Hosting:** The static build can be hosted on platforms like Netlify, Vercel, GitHub Pages, or any static web hosting service.
- **Performance Optimizations:** Code splitting (handled by bundlers like Vite/Webpack), lazy loading components, image optimization (if any are used), minimizing bundle size. Ensure efficient state management to prevent unnecessary re-renders.
- **Offline Support (Future):** Consider Service Workers for potential offline capabilities or PWA features in later versions.