cosmo/frontend

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:

yarn install --ignore-engines

2. Start development server:

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