logo

Core FeaturesPre-built features

Pre-built features are your speed multiplier.

Instead of rebuilding profile/settings, ai features and detail screens from scratch, you start from pre-built feature modules and customize them.

Where they live

Feature modules live in:

  • src/features/

Routes (Expo Router) live in:

  • src/app/

Rule: keep feature code inside src/features/<feature>/... and only “mount” it from src/app/....

Feature folder shape (the pattern)

Most features follow this structure:

  • components/: feature UI building blocks
  • hooks/: feature-level hooks (React only)
  • services/: side-effecting logic (APIs, SDK calls)
  • store/: Zustand state (persisted with AsyncStorage when needed)
  • types/: TS types for the feature
  • utils/: pure helpers

Feature catalog

Tasks (local tasks + completion by day)

What it is

A lightweight tasks system using Zustand + AsyncStorage, with:

  • A “Today” tab list + completion toggles
  • A task editor screen
  • Day-based completion tracking

Where it lives

  • Feature: src/features/tasks/
  • Store: src/features/tasks/store/task.store.ts
  • Hook: src/features/tasks/hooks/use-tasks.ts
  • Mounted from:
    • Today tab: src/app/(tabs)/(home)/index.tsx
    • Task editor route: src/app/(tabs)/(home)/task.tsx

How to use

Render the list in a screen:

tsx

Use the feature hook if you’re building custom UI:

tsx

AI (chat + image analysis via Supabase Edge Functions)

What it is

A basic “AI conversations” feature:

  • Conversation list in the AI tab
  • Chat screen at /chat
  • Optional image upload + analysis

Where it lives

  • Feature: src/features/ai/
  • Hook: src/features/ai/hook/use-ai.tsx
  • Store: src/features/ai/store/ai.store.ts (persisted)
  • Service: src/features/ai/services/ai.service.ts (calls Supabase Edge Function)
  • Mounted from:
    • AI tab: src/app/(tabs)/ai/index.tsx
    • Chat route: src/app/chat.tsx

How to use

Mount the chat UI with the feature hook:

tsx

Configuration

Defaults come from src/shared/config/general.config.ts:

  • ai.defaultModel (default: gpt-5-mini)
  • ai.defaultMaxTokens
  • ai.systemMessage

Requirements

This feature expects Supabase to be configured (see supabase/OPENAI_SETUP.md and SUPABASE_OPENAI_INTEGRATION.md):

  • EXPO_PUBLIC_SUPABASE_URL
  • EXPO_PUBLIC_SUPABASE_ANON_KEY

Profile (settings + support + paywall entrypoints)

What it is

A configurable profile/settings screen that can:

  • Navigate to profile sub-screens
  • Open external links (privacy/terms/contact)
  • Trigger paywall placements
  • Show “dev tools” status when __DEV__ is true

Where it lives

  • Feature: src/features/profile/
  • Main component: src/features/profile/index.tsx
  • Mounted from: src/app/(tabs)/profile/index.tsx

How to use

Build a config and mount the feature:

tsx

Content / Explore (horizontal content feed template)

What it is

A starter “explore” screen that demonstrates:

  • Sections with horizontally scrollable cards
  • Navigation to a detail screen with serialized params

Where it lives

  • Explore tab screen: src/app/(tabs)/explore/index.tsx
  • Types: src/features/content/types/content.types.ts
  • Detail route: src/app/details.tsx

How to use

Use it as a template:

  • Replace the sample data with your own source (local JSON, Supabase, etc.)
  • Keep the Item type as a minimal “card payload”

Overview (detail screen layout with parallax header)

What it is

A reusable detail layout:

  • Parallax header image
  • Scrollable body
  • Optional gradient footer (CTA)

Where it lives

  • Feature: src/features/overview/
  • Used by: src/app/details.tsx

How to use

tsx

Adding a new feature (recommended workflow)

  • Create src/features/<feature>/... (components/hooks/services/store/types/utils)
  • Mount it from a route in src/app/...
  • Reuse src/shared/ui/ primitives instead of inventing new ones
  • If a feature needs configuration, add it to src/shared/config/