Spaces:
Running
Running
📦 App Architecture & Integrations Framework & Styling [Next.js (App Router)] for server- and client-rendered components, SSR/SSG, API routes. Tailwind CSS integrated via PostCSS (@tailwindcss/postcss, autoprefixer). Supabase Authentication: email/password, social login, magic links, session management with cookies & middleware using @supabase/ssr supabase.com+12supabase.com+12supabase.com+12 creativedesignsguru.com+1reddit.com+1 Database: PostgreSQL (workouts, bookings, user metadata). Storage: User assets (e.g. profile images). Auth Helpers Two Supabase clients: Client-side via createBrowserClient for UI components Server-side via createServerClient inside Server Actions, middleware, and API routes youtube.com+6supabase.com+6engineering.teknasyon.com+6 🧭 User Flow & Page Breakdown Landing Page (app/page.tsx): Headline: “Fighting Fit Essex – Boxing-inspired fitness platform.” Hero section + CTAs: “Get started,” “View classes.” Highlights: interactive class schedule, user testimonials, trainer profiles. Footer: links to signup/login. Sign-Up / Login Flow (app/sign-up/page.tsx & app/login/page.tsx): Forms (email + password) with “Sign up” or “Log in” buttons. Uses Server Actions to call Supabase's signUp() and signInWithPassword() youtube.com+13supabase.com+13supabase.com+13 medium.com . Middleware (middleware.ts): Runs on each request; uses updateSession() to refresh cookies and maintain session supabase.com+1engineering.teknasyon.com+1 . Protects user areas like /dashboard, /workouts, /bookings. Protected Pages: E.g. /dashboard, /workouts, /bookings. Fetch user session via createServerClient() and getUser() inside Server Components. Client Components (forms, buttons) use useAuth() or onAuthStateChange() to adapt UI youtube.com+14supabase.com+14creativedesignsguru.com+14 permit.io . API Routes: Examples: /api/bookings, /api/workouts. Use createServerClient() to fetch or mutate DB records. Enforce authentication/authorization in each route. 🔐 Signup & Auth Flow (Detailed) Env Setup: .env.local contains: NEXT_PUBLIC_SUPABASE_URL=... NEXT_PUBLIC_SUPABASE_ANON_KEY=... Supabase Client Utilities utils/supabase/client.ts using createBrowserClient(...) utils/supabase/server.ts using createServerClient(...) youtube.com+13supabase.com+13supabase.com+13 Middleware: File middleware.ts with updateSession(request) to manage tokens supabase.com+1engineering.teknasyon.com+1 . Runs on all pages except static assets. Sign-Up Form (Server Action) (app/sign-up/page.tsx): export async function signup(formData: FormData) { const email = formData.get('email') as string; const password = formData.get('password') as string; const supabase = await createServerClient(); const { error } = await supabase.auth.signUp({ email, password }); if (error) throw error; return redirect('/login'); } Same for log-in using signInWithPassword. Client-side Reaction: After login, Supabase sets cookie; page reload via middleware ensures session is recognized. Auth State Awareness: In layout: use useEffect() with supabase.auth.onAuthStateChange() to manage UI (nav links, sign-out button) creativedesignsguru.com+2supabase.com+2supabase.com+2 permit.io . ✅ Summary Table: Integrations & Components Layer File/Component Purpose Env Vars .env.local Supabase URL & key Supabase Clients utils/supabase/client.ts / server.ts Browser/server contexts Middleware middleware.ts Refresh session on each request Sign-up / Login app/sign-up/page.tsx, app/login/page.tsx Forms using Server Actions Protected Pages app/dashboard, /workouts, etc. Uses server Supabase client, guards access API Routes pages/api/bookings.ts, etc. Mutate or fetch with authenticated access Context / Layout layout.tsx / Provider Tracks session & displays auth-dependent UI - Initial Deployment
e584074
verified