How chrisanger59/abricot works
Abricot is a project-management web app. Users register or log in, then reach account and project views; they can update profile details and browse project teams and task counts. Server actions validate form input, manage the session token, and call the backend API; protected API requests attach that token. The tree also includes dashboard and project-detail routes, but the sampled evidence does not establish their behavior. Edges reflect sampled imports and calls; broader UI composition is supported by the source index, not inspected component bodies.
Main entry points: auth.ts Auth actions · api.ts Protected API client · page.tsx Auth pages · ProjectList.tsx Project list
Components 25
App routes
- Auth pages
app/(auth)/login/page.tsx - Account page
app/(main)/account/page.tsx - Dashboard page
app/(main)/dashboard/page.tsx - Projects page
app/(main)/projects/page.tsx - Project detail
app/(main)/projects/[id]/page.tsx - Main layout
app/(main)/layout.tsx
Interface components
- Auth illustration
components/Atoms/AuthIllustration.tsx - Login form
components/Organisms/LoginForm.tsx - Registration form
components/Organisms/RegisterForm.tsx - Header
components/Organisms/Header.tsx - Footer
components/Organisms/Footer.tsx - Project list
components/Organisms/ProjectList.tsx - Project card
components/Molecules/ProjectCard.tsx - Avatar
components/Atoms/Avatar.tsx - Profile form
components/Organisms/UpdateUserForm.tsx - Account info
components/Organisms/AccountInfo.tsx
Authentication and profile
- Auth actions
lib/actions/auth.ts - Session cookie
lib/session.ts - Session proxy
proxy.ts - Form validation
lib/validation.ts
API and data
- User data
lib/user.ts - Protected API client
lib/api.ts - API data types
types/api.ts
Other components
- Visitor
- Backend API
Connections 29
- Visitor → Auth pages: opens
- Auth pages → Login form: renders
app/(auth)/login/page.tsx - Auth pages → Registration form: renders
- Auth pages → Auth illustration: renders
- Login form → Auth actions: submits to
components/Organisms/LoginForm.tsx - Registration form → Auth actions: submits to
components/Organisms/RegisterForm.tsx - Auth actions → Form validation: validates with
lib/actions/auth.ts - Auth actions → Session cookie: creates or deletes
lib/actions/auth.ts - Auth actions → Backend API: calls auth routes
lib/actions/auth.ts - Auth actions → Protected API client: uses for protected updates
lib/actions/auth.ts - Auth actions → Account page: redirects to
lib/actions/auth.ts - Account page → Account info: renders
app/(main)/account/page.tsx - Account info → User data: reads
components/Organisms/AccountInfo.tsx - Account info → Profile form: renders
components/Organisms/AccountInfo.tsx - Profile form → Auth actions: submits to
components/Organisms/UpdateUserForm.tsx - Projects page → Project list: renders
app/(main)/projects/page.tsx - Project list → Protected API client: loads projects
components/Organisms/ProjectList.tsx - Project list → Project card: renders
components/Organisms/ProjectList.tsx - Project card → Avatar: renders team avatars
components/Molecules/ProjectCard.tsx - Protected API client → Session cookie: reads token
lib/api.ts - Protected API client → Backend API: sends authenticated requests
lib/api.ts - User data → Protected API client: requests user data
lib/user.ts - Session proxy → Session cookie: uses session helpers
proxy.ts - Main layout → Header: renders
app/(main)/layout.tsx - Main layout → Footer: renders
app/(main)/layout.tsx - Header → User data: uses user data
components/Organisms/Header.tsx - Auth actions → API data types: uses response types
lib/actions/auth.ts - Protected API client → API data types: types responses
lib/api.ts - Project card → API data types: uses project type
components/Molecules/ProjectCard.tsx