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:
49
CLAUDE.md
49
CLAUDE.md
@@ -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
|
||||
|
||||
|
||||
Reference in New Issue
Block a user