frontend-development

Frontend Development

Stack

Next.js 16 (App Router, Turbopack), React 19, Tailwind CSS v4, Zustand 5, TanStack Query v5, react-hook-form + Zod 4, TypeScript strict mode.

Imports

Use @/ path alias for src/: @/lib/supabase, @/components/Button.

Client vs Server

Mark interactive/stateful components with 'use client'. Default is server component.

Styling

Tailwind CSS v4 with @theme tokens in src/app/globals.css:

@import 'tailwindcss';

@theme {
  --color-cream: #FCFAF7;
  --color-slate-deep: #1B2030;
  --color-emerald-glow: #10B981;
}

Add new design tokens in @theme, not in config files.

Supabase Clients

Three clients for different contexts:

Import	Use for	Context
@/lib/supabase	General public queries	Client, graceful fallback if env missing
@/lib/supabase-browser	Auth flows (login, signup)	Client ('use client')
@/lib/supabase-admin	Admin operations	Server-only, createAdminClient()

// Client component — auth flow
import { supabaseBrowser } from '@/lib/supabase-browser';

// Server component / action — admin
import { createAdminClient } from '@/lib/supabase-admin';
const supabase = createAdminClient();

State Management

Zustand with persist middleware. Use partialize to persist only selected fields:

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

export const useMyStore = create(
  persist(
    (set) => ({
      value: '',
      setValue: (v: string) => set({ value: v }),
    }),
    { name: 'my-store', partialize: (s) => ({ value: s.value }) }
  )
);

Providers

Composed in src/app/layout.tsx. Order: QueryProvider → PostHogProvider → children. Add new providers inside QueryProvider.

Forms

Use react-hook-form + @hookform/resolvers + Zod for validation:

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const schema = z.object({ email: z.string().email() });

const { register, handleSubmit } = useForm({
  resolver: zodResolver(schema),
});