implement frontend skeleton with tab navigation and service layer

- Add tab-based navigation (Chat, Calendar) using Expo-Router
- Create auth screens (login, register) as skeletons
- Add dynamic routes for event detail and note editing
- Implement service layer (ApiClient, AuthService, EventService, ChatService)
- Add Zustand stores (AuthStore, EventsStore) for state management
- Create EventCard and EventConfirmDialog components
- Update CLAUDE.md with new frontend architecture documentation
- Add Zustand and FlashList to technology stack
This commit is contained in:
2026-01-03 10:47:12 +01:00
parent 5cc1ce7f1c
commit 9cc6d17607
24 changed files with 537 additions and 75 deletions

View File

@@ -39,6 +39,8 @@ npm run start -w @caldav/server # Run compiled server (port 3000)
| | Expo | Development platform |
| | Expo-Router | File-based routing |
| | NativeWind | Tailwind CSS for React Native |
| | Zustand | State management |
| | FlashList | High-performance lists |
| Backend | Express.js | Web framework |
| | MongoDB | Database |
| | Mongoose | ODM |
@@ -57,13 +59,39 @@ packages/shared - @caldav/shared - Shared TypeScript types and models
### Frontend Architecture (apps/client)
**Screens** (`src/app/`): Login, Register, Calendar, Chat, Event Detail, Notes - file-based routing via Expo-Router
```
src/
├── app/ # Expo-Router file-based routing
│ ├── _layout.tsx # Root Stack layout
│ ├── index.tsx # Entry redirect
│ ├── login.tsx # Login screen
│ ├── register.tsx # Registration screen
│ ├── (tabs)/ # Tab navigation group
│ │ ├── _layout.tsx # Tab bar configuration
│ │ ├── chat.tsx # Chat screen (AI conversation)
│ │ └── calendar.tsx # Calendar overview
│ ├── event/
│ │ └── [id].tsx # Event detail screen (dynamic route)
│ └── note/
│ └── [id].tsx # Note editor for event (dynamic route)
├── components/
│ ├── BaseBackground.tsx # Common screen wrapper
│ ├── Header.tsx # Header component
│ ├── EventCard.tsx # Event card for calendar display
│ └── EventConfirmDialog.tsx # AI-proposed event confirmation modal
├── services/
│ ├── index.ts # Re-exports all services
│ ├── ApiClient.ts # HTTP client (get, post, put, delete)
│ ├── AuthService.ts # login(), register(), logout(), refresh()
│ ├── EventService.ts # getAll(), getById(), getByDateRange(), create(), update(), delete()
│ └── ChatService.ts # sendMessage(), confirmEvent(), rejectEvent(), getConversations(), getConversation()
└── stores/ # Zustand state management
├── index.ts # Re-exports all stores
├── AuthStore.ts # user, token, isAuthenticated, login(), logout(), setToken()
└── EventsStore.ts # events[], setEvents(), addEvent(), updateEvent(), deleteEvent()
```
**Services**: API Client for HTTP requests, plus AuthService, EventService, ChatService for domain logic
**Components**: Reusable UI (EventCard, ChatBubble, EventConfirmDialog, MonthSelector)
**Stores**: AuthStore (user + token), EventsStore (calendar events)
**Routing:** Tab-based navigation with Chat and Calendar as main screens. Auth screens (login, register) outside tabs. Dynamic routes for event detail and note editing.
### Backend Architecture (apps/server)
@@ -176,7 +204,14 @@ The repository pattern allows swapping databases:
**Shared:** Types and DTOs defined and exported.
**Frontend:** Calendar screen partially implemented, Chat screen exists but not connected to backend.
**Frontend:** Skeleton complete with file-based routing structure:
- Tab navigation (Chat, Calendar) implemented with basic UI
- Calendar screen has month navigation and grid display (partially functional)
- Chat screen has message list UI with FlashList (mock data only)
- Auth screens (Login, Register), Event Detail, and Note screens exist as skeletons
- Services (ApiClient, AuthService, EventService, ChatService) defined with `throw new Error('Not implemented')`
- Zustand stores (AuthStore, EventsStore) defined with `throw new Error('Not implemented')`
- Components (EventCard, EventConfirmDialog) exist as skeletons
## Documentation