calypso/frontend

Calypso Frontend

React + Vite + TypeScript frontend for AtlasOS - Calypso backup appliance.

Prerequisites

• Node.js 18+ and npm
• Backend API running on http://localhost:8080

Setup

1. Install dependencies:

npm install

2. Start development server:

npm run dev

The frontend will be available at http://localhost:3000

Build

npm run build

The production build will be in the dist/ directory.

Project Structure

• src/api/ - API client and queries
• src/components/ - Reusable UI components
• src/pages/ - Page components
• src/store/ - Zustand state management
• src/types/ - TypeScript type definitions
• src/utils/ - Utility functions

Features

• ✅ React 18 with TypeScript
• ✅ Vite for fast development
• ✅ TailwindCSS for styling
• ✅ TanStack Query for data fetching
• ✅ React Router for navigation
• ✅ Zustand for state management
• ✅ Axios for HTTP requests
• ⏳ WebSocket for real-time events (coming soon)
• ⏳ shadcn/ui components (coming soon)

Development

The Vite dev server is configured to proxy API requests to the backend:

• /api/* → http://localhost:8080/api/*
• /ws/* → ws://localhost:8080/ws/*

Next Steps

1. Install shadcn/ui components
2. Implement WebSocket client
3. Build out all page components
4. Add charts and visualizations
5. Implement real-time updates