# Web Roadmap

## Product Boundary

- The Web client is a pure client-side rendered single-page application.
- Vite produces static assets only. The project does not use SSR, React Server Components, a Node API server, or a browser-specific business backend.
- The Web client consumes the same versioned REST API as future Android and other native clients.
- Production may serve `web/dist` from MyGO or a reverse proxy.
- Shared API contracts should remain client-neutral and eventually be described by OpenAPI.

## Current Milestone

The browser client now provides the first authenticated file workflow:

- Email/password login through the shared REST API
- Session-scoped access and refresh tokens with one automatic refresh retry
- Protected application shell and root file list
- Single-file upload to the root directory and authenticated download
- Server-side pagination with 50 items per page

Directory navigation and management, multi-file queues, transfer progress,
resumable or chunked transfers, account/profile/settings screens, and admin
screens remain deferred.

## Foundation

The project foundation contains:

- Node.js 24 and npm
- Vite
- React
- TypeScript in strict mode
- TanStack Query provider
- Tailwind CSS 4 through its Vite plugin
- Ant Design provider and components
- Ant Design icons for application and file actions
- Oxlint from the Vite template
- Vitest for framework-independent client and session tests

Ant Design owns reusable UI components and theme tokens. Tailwind CSS is initially limited to application layout, spacing, and responsive utilities.

## Planned Structure

```text
web/src/
├── app/          # Router, providers, and application composition
├── api/          # API client and generated contracts
├── components/   # Shared presentation components
├── features/     # Auth, files, account, and admin features
├── pages/        # Route entry points
├── lib/          # Framework-independent utilities
└── test/         # Shared test setup and fixtures
```

## Deferred Dependencies

Some dependencies are suggested for future implementation. Refer these only when the corresponding feature is implemented and propose better choices if any:

- `openapi-typescript`: Generate TypeScript API types from the shared OpenAPI document.
- `openapi-fetch`: Provide a small type-safe Fetch client based on generated OpenAPI types.
- `openapi-react-query`: Connect generated OpenAPI operations to TanStack Query if handwritten query adapters become repetitive.
- `zustand`: Manage a cross-route upload queue, bulk selection, or other complex client-only state if React state is insufficient.
- `pdfjs-dist`: Preview PDF files in the browser when document preview is implemented.