# Cosmo Frontend

Frontend application for the Cosmo deep space explorer visualization system.

## Tech Stack

- React 18
- TypeScript
- Vite (build tool)
- Three.js (3D rendering)
- @react-three/fiber (React Three.js integration)
- @react-three/drei (Three.js helpers)
- Tailwind CSS (styling)
- Axios (HTTP client)

## Setup

1. Install dependencies:
```bash
yarn install --ignore-engines
```

2. Start development server:
```bash
yarn dev
```

The app will be available at http://localhost:5173/

## Project Structure

```
src/
├── components/
│   ├── Scene.tsx           # Main 3D scene
│   ├── CelestialBody.tsx   # Individual celestial body renderer
│   └── Loading.tsx         # Loading screen
├── hooks/
│   └── useSpaceData.ts     # Data fetching hook
├── types/
│   └── index.ts            # TypeScript types
├── utils/
│   └── api.ts              # API utilities
├── App.tsx                 # Main app component
└── main.tsx                # Entry point
```

## Features

### Current
- 3D visualization of the solar system
- Real-time data from NASA JPL Horizons
- Interactive camera controls (orbit, pan, zoom)
- Celestial bodies rendered at their current positions
- Stars background

### Controls
- **Left click + drag**: Rotate camera
- **Right click + drag**: Pan camera
- **Scroll wheel**: Zoom in/out

## Development Notes

- The app requires the backend API to be running at http://localhost:8000
- Uses yarn instead of npm due to dependency compatibility
- Node version 20+ recommended (use `--ignore-engines` flag if needed)

## Next Steps

- Implement orbit line rendering
- Add time selector component
- Implement click-to-focus on celestial bodies
- Add information panels
- Load realistic textures and 3D models