Adding a Feature

A checklist for building a new feature the platform way.

1. Pick the tier

Decide the access boundary: users, public, admin, or landing. Create src/tiers/[tier]/features/[name]/ with the standard structure:

components/ hooks/ services/ pages/ utils/ tests/ index.js

2. Design data access

For each piece of data, apply the decision rule:

• Pure SQL read, no secrets, no external HTTP → RPC in a new migration + a hook.
• Write / secret / external HTTP / webhook / cron → Edge Function + a service.

Never call supabase.from().

3. Reads — one hook per RPC

Follow the RPC hook pattern: module-level CACHE_KEY, hasLoaded ref, return { data, loading, error, refetch }. Mirror Market Mood.

4. Writes — service + mutation

Add a services/{feature}Service.js calling functions.invoke(EDGE_FN.X) (register the EF name in a config map). Consume it via TanStack useMutation. See Adding an Edge Function.

5. UI

• Import UI primitives from your tier's components/ui/.
• Components are pure (no fetching, no supabase.*); props destructured in the signature.
• Theme every element with cn() + isLight. Page title h1 includes a Lucide icon in brand orange.

6. Routing

Add a lazy route object in src/components/routes/AppRoutesConfig.jsx (or AdminRoutesConfig.jsx).

7. Tests (mandatory)

Add a co-located tests/ covering all 4 layers (see Coding Standards). Wire a test:{feature} script if useful.

8. Document it

Copy features/_template → features/<name>.md, fill it, and add a sidebar entry. Re-run npm run docs:gen if you added routes / edge functions / tables.

9. Change Manifest

End your PR/response with the Change Manifest table (every touched file) so production (Hostinger) can be synced.