How coral0723/loglife works
1. Overall shape
LogLife is a Next.js App Router application deployed serverlessly on Vercel. There is no separate backend service; page rendering, authentication callbacks, API routes, and write operations all live inside the same Next.js runtime.
2. Primary product areas
The app is organized around a few user-facing domains: bucket lists on a globe, friends/social features, user profile settings, onboarding, and a landing/login flow. These are reflected directly in src/components/*, src/app/(afterLogin)/*, and src/app/(auth)/*.
3. Navigation and route boundaries
The app uses route groups to separate public auth pages from the authenticated app. After login, the main experience is split into main, friends, profile, and onboarding. Public-facing pages also exist for shared bucket pages (/b/[token]) and public user profiles (/u/[username]).
4. Modal-driven UX architecture
A major architectural choice is the use of parallel and intercepting routes under src/app/(afterLogin)/@modal. This lets bucket details, friend dialogs, profile dialogs, and user profile dialogs open as URL-addressable overlays without leaving the current screen.
5. Server-side data mutation
Domain mutations are handled by src/actions/* as Server Actions. These are split by domain (bucketList, friend, user, onboarding) and are the main path for creating/updating bucket items, friendships, avatars, and onboarding state.
6. Read and proxy layer
Read operations and external-service mediation live in src/app/api/* and are consumed by client fetch helpers in src/api/*. This includes dashboard metrics, friend widgets, bucket list queries, and proxies to Google Places endpoints such as autocomplete, details, and photo retrieval.
7. Persistence layer
Data is stored in Supabase PostgreSQL and accessed through Prisma. The schema centers on User, Account, Session, BucketList, and Friendship, with migrations tracked in prisma/migrations. Authentication state and app data share the same database.
8. Authentication and session flow
Authentication is implemented with NextAuth v5 in src/auth.ts and the callback route at src/app/api/auth/[...nextauth]/route.ts. OAuth providers include Google and Kakao. Session state then gates protected routes and powers user-specific data access.
9. Domain logic and pure helpers
Business rules are centralized in src/lib/*. This layer contains pure logic for bucket status, visibility, achievement stats, difficulty/excitement matrices, friend relationships, hot-place calculations, username rules, rate limiting, and geospatial helpers such as country centroids and pin generation.
10. UI composition and state
Reusable feature components are grouped by domain in src/components/* rather than by technical type. Client-side state is split between TanStack Query for server data, Zustand stores for local interaction state, and small feature stores such as the globe and bucket form stores. The globe view is a distinct visualization subsystem backed by country geo assets in public/geo.
11. Platform-specific experience
The app includes PWA support through a service worker (src/app/sw.ts) and manifest assets in public/manifest.json. It also has an offline overlay, preset avatars, and mobile-oriented navigation, which makes the application feel like an installable product rather than a standard website.
12. Testing and quality boundaries
The repo is heavily testable across layers: Vitest for unit/component tests, Playwright for end-to-end flows, MSW for API mocking, Storybook for isolated UI development, and Chromatic for visual regression. There are even dedicated E2E-only routes under src/app/(e2e) to make browser testing deterministic.
13. Operational and workflow tooling
The .claude, .agents, and .dev directories are not product runtime code, but they materially shape development: they encode coding rules, review/test commands, session logging, and accumulated learnings. This suggests a workflow that treats engineering process as part of the repo’s architecture, especially for repeatable QA and AI-assisted maintenance.
Main entry points: layout.tsx App routes · route.ts Read APIs · actions.ts Server actions · GlobeView.tsx Globe view
Components 23
Next.js App
Route groups, pages, API routes, and server actions in the main runtime.
- App shell · Global app layout, error handling, PWA service worker, and route-wide providers.
src/app/layout.tsx - Auth routes · Public login flow separated from the authenticated app.
src/app/(auth)/login/page.tsx - App routes · Authenticated experience with main, friends, profile, onboarding, and modal overlays.
src/app/(afterLogin)/layout.tsx - Modal routes · Intercepting overlays for bucket details, friends, profile settings, and public profile dialogs.
src/app/(afterLogin)/@modal/default.tsx - E2E routes · Deterministic pages used to stabilize browser automation flows.
src/app/(e2e)/e2e-login/page.tsx
UI Components
Reusable feature UIs composed by domain.
- Client stores · Local interaction state for globe and bucket form flows.
src/store/globeStore.ts - Globe view · Country globe, pin rendering, and slide-over country interactions.
src/components/globe/GlobeView.tsx - Bucket tools · Bucket detail, creation, autocomplete, and matrix interactions.
src/components/bucket/BucketDetailView.tsx - Friends UI · Friend lists, requests, search, and social widgets.
src/components/friends/FriendsView.tsx - Dashboard UI · Achievement, counts, matrix, and upcoming deadline widgets.
src/components/dashboard/DashboardPanel.tsx - Profile UI · Nickname and avatar settings for the authenticated user.
src/components/profile/ProfileSettingsView.tsx - Public profile UI · Shared user profile pages and profile sharing actions.
src/components/user/PublicProfileView.tsx - Landing UI · Home page hero, feature mocks, and landing globe experience.
src/components/landing/HeroContent.tsx - Shared UI · Cross-cutting primitives such as nav, buttons, loading, offline, and image fallback.
src/components/ui/Button.tsx
Domain Logic
Pure helpers and shared business rules.
- Domain helpers · Bucket status, visibility, achievements, friend relations, rate limiting, username rules, and geospatial helpers.
src/lib/bucketList/bucketStatus.ts
Data Layer
Authentication, persistence, and external-service mediation.
- Auth callback · NextAuth callback endpoint for OAuth sign-in and session management.
src/app/api/auth/[...nextauth]/route.ts - Read APIs · Domain read endpoints for bucket lists, dashboard metrics, friends, users, and place proxies.
src/app/api/bucketlists/[id]/route.ts - Server actions · Domain mutations for bucket lists, friends, onboarding, and user profile updates.
src/actions/user/actions.ts - NextAuth setup · Auth.js/NextAuth v5 configuration and provider wiring.
src/auth.ts - Prisma access · Shared Prisma client for Supabase Postgres persistence.
src/lib/prisma.ts - DB schema · Core tables for users, accounts, sessions, bucket lists, and friendships.
prisma/schema.prisma
Workflow
Testing, Storybook, and repo-specific development tooling.
- Tests · Vitest, Playwright, MSW, Storybook, and Chromatic coverage across the repo.
vitest.config.ts - Dev workflow · Claude/agent instructions, memories, commands, and repo-specific development guidance.
CLAUDE.md
Connections 25
- App shell → Auth routes: routes to · Public login is separated from the app shell.
- App shell → App routes: hosts · Authenticated route group runs under the shared shell.
- App routes → Modal routes: overlays · Main app can open route-addressable modals without leaving the screen.
- App routes → Globe view: renders · Main experience centers on the globe visualization.
- App routes → Dashboard UI: renders · Dashboard route composes analytics widgets.
- App routes → Friends UI: renders · Friends route composes social views and widgets.
- App routes → Profile UI: renders · Profile route exposes user settings.
- App routes → Bucket tools: renders · Bucket routes use detail and creation UI.
- Auth routes → NextAuth setup: uses · Login flow depends on NextAuth configuration.
- Auth callback → NextAuth setup: calls · Callback route delegates to auth setup.
- Read APIs → Prisma access: reads/writes · API routes access the shared database client.
- Server actions → Prisma access: mutates · Server actions persist domain changes through Prisma.
- Prisma access → DB schema: implements · Client is shaped by the Prisma schema.
- Read APIs → Domain helpers: computes · API endpoints rely on shared business rules and helpers.
- Server actions → Domain helpers: validates · Mutations use shared rules for bucket, friend, and profile state.
- Globe view → Client stores: uses · Globe UI is backed by local interaction stores.
- Bucket tools → Read APIs: fetches · Bucket UI consumes bucket and places endpoints.
- Friends UI → Read APIs: fetches · Friends UI consumes social and search endpoints.
- Dashboard UI → Read APIs: fetches · Dashboard widgets are driven by read APIs.
- Profile UI → Server actions: submits · Profile edits are written through server actions.
- Public profile UI → Read APIs: fetches · Public profile pages load user data through API routes.
- Landing UI → Globe view: reuses · Landing page shares globe presentation patterns.
- Tests → Shared UI: covers · Testing spans component, API, and end-to-end layers.
- Tests → E2E routes: stabilizes · Dedicated E2E routes support deterministic browser tests.
- Dev workflow → Server actions: guides · Repo rules shape mutation, review, and QA practices.