Clone the create-reodor-app repository to your local machine and navigate to the project directory.

Run bun install to install all project dependencies. This includes Next.js, React, Supabase SDK, and other dependencies. Take a look in package.json.

Start here! Run bun run onboarding right after installing dependencies to get an instant overview of your environment, see what's working, and discover what needs setup. This smart script checks your Docker status, database connection, development server, and points you to the right docs. It's like having a personal guide for your first steps—highly recommended!

Open the app/ directory and familiarize yourself with Next.js App Router structure. This is where all your pages, layouts, and route handlers live. The folder structure directly maps to URL routes.

Check out app/auth/ to see sign-up, sign-in, email confirmation, and account deletion pages. These demonstrate how Supabase Auth integrates with Next.js App Router and server actions.

Explore app/api/ for route handlers. These are serverless functions that handle backend logic like webhooks, cron jobs, and external service integrations. Each route exports HTTP method handlers.

Review app/oppgaver/ (todos) and app/profiler/ (profiles) to see complete CRUD implementations. These demonstrate TanStack Query, server actions, form validation, and Row Level Security patterns.

Browse static pages like app/faq/, app/privacy/, and app/terms/. Every production app needs these legal and informational pages for compliance and user trust.

Check out app/robots.ts and app/sitemap.ts. These files dynamically generate robots.txt and sitemap.xml to help search engines crawl your site effectively and respect your privacy preferences.

Browse components/ to see how components are organized by feature (auth, todos, admin, nav) and by UI library (ui/ for shadcn/ui, kibo-ui/ for Kibo UI). Shared components like navbar, footer, and forms live at the root level. This structure makes finding and reusing components intuitive.

Check out docs/ to see how project documentation is organized. The business/ folder contains feature specs and user workflows, while technical/ holds implementation details and architecture decisions. This documentation makes working with AI assistants much easier—drag in a doc file to provide full context!

Explore .claude/skills/ to understand how Claude skills work. Think of skills like instant knowledge downloads— Claude loads these specialized instruction files to follow your codebase patterns perfectly. Each skill contains battle-tested patterns for specific tasks: client-server-data-flow for CRUD operations, database-schema-extension for adding tables, ui-patterns for components, and more. When working with AI, these skills ensure consistent, production-ready code that follows your established conventions. Learn more at anthropic.com/news/skills.

Browse hooks/ for custom React hooks like useAuth and file upload utilities. Note that this project uses client-side file uploads with browser-based image compression before uploading to Supabase Storage—this reduces bandwidth by 70-90% and provides instant user feedback.

Check out lib/ for external service configurations and utility functions. Key files include supabase/ for database config, brand.ts for company branding, and utils.ts for runtime-agnostic utility functions.

Take a quick look at providers/ to see how React context providers are organized. These wrap your app in app/layout.tsx and are rarely modified after initial setup. Currently includes TanStack Query provider—future additions might include PostHog analytics or feature flag providers.

Examine supabase/schemas/ for declarative SQL schemas, seed/ for test data generation, and schemas/database.schema.ts for autogenerated Zod schemas. Learn how database changes flow from SQL → TypeScript types → Zod schemas, and how seed scripts help test edge cases before production.

Dive into server/ to see how Next.js App Router Server Actions work. This directory is your entire backend—think of it as your Flask server or Express API endpoints. Each .actions.ts file contains server-side functions for data mutations, authentication, and business logic. The naming convention (.actions.ts) makes fuzzy search easy and helps AI agents follow patterns. Check out server/todo.actions.ts to see complete CRUD patterns with authentication, authorization, and type-safe database queries.

Study server/todo.actions.ts and server/profile.actions.ts to understand server action best practices: (1) Always start with "use server" directive, (2) Check authentication and authorization, (3) Use type-safe database types from @/types, (4) Return { error, data } objects for consistent error handling, (5) Only export async functions (no utility functions). See CLAUDE.md for complete patterns. This structure creates tight TypeScript contracts from database → backend → frontend, making AI-assisted development much faster with excellent type diagnostics.

Explore how this template provides a production-ready AI agent that can safely perform database operations through natural language. Check out lib/chat-agent/ for the agent configuration, lib/chat-agent/tools/todo-crud.ts for CRUD operations with confirmation flows, and components/chat/ for the chat interface. This system demonstrates agentic CRUD—the AI agent uses tools to list, create, update, and delete todos, but always asks for user confirmation before making changes. It includes planning mode for complex requests, bulk operations, and auto-accept mode for power users. This is a game-changer for rapid prototyping: imagine building a ticket management system—simply rename todos to tickets, add fields like assignee_id, reporter_id, status, and labels, and your AI agent can immediately handle requests like "Assign all P1 tickets to John", "Show tickets I reported this week", or "Create tickets from this bug list". The confirmation flow, planning mode, and security patterns are already production-ready. See docs/technical/ai-agent-crud-tools.md for implementation details and docs/business/ai-agent-todo-management.md for the value proposition.

Create a new Supabase project at supabase.com. Copy your project URL and anon key for environment configuration.

Copy .env.example to .env.local and fill in all required variables including Supabase and other service credentials.

Execute Supabase migrations to set up your database schema, RLS policies, and functions using bun db:reset or supabase migration up. Learn more in the local development guide.

While you can develop entirely locally, linking your local environment to a remote Supabase project enables database schema synchronization. Run supabase login, then supabase link --project-ref <your-ref>. See the CLI guide for details.

Learn the critical database workflow: modify schema files (supabase/schemas/*.sql), generate migrations (bun db:diff), review generated SQL, apply locally (supabase migration up), regenerate types (bun gen:types), test, and deploy. This declarative approach keeps your schema files as the single source of truth. Read the full workflow in docs/getting-started.md.

Generate professional favicons for all platforms using RealFaviconGenerator (realfavicongenerator.net). Upload your logo, customize platform-specific settings, download the package, and install files to app/ and public/directories. See detailed guide in docs/technical/favicon-setup.md for complete installation and customization instructions.

Create a Resend account at resend.com and get your API key from the dashboard. Resend provides transactional email delivery with excellent developer experience and React Email integration.

Add Resend configuration to .env.local: RESEND_API_KEY (from Resend dashboard), DEV_EMAIL_FROM (test sender), DEV_EMAIL_TO (test recipient), PROD_EMAIL_FROM (production sender), and optionally ADMIN_EMAIL (for admin copies). The lib/resend-utils.ts wrapper automatically routes emails to test addresses in development to prevent accidental emails to real users.

Set up your sending domain in the Resend dashboard (Settings → Domains → Add Domain). Add the required DNS records (SPF, DKIM, DMARC) to verify domain ownership and ensure high email deliverability. Use this verified domain in your DEV_EMAIL_FROM and PROD_EMAIL_FROM environment variables.

Configure Supabase to use Resend as the SMTP server for authentication emails (OTP codes, magic links, password resets). In the Resend dashboard, go to Settings → Integrations → Supabase and follow the setup instructions. This ensures all Supabase Auth emails are sent through Resend with your branding and better deliverability.

Browse the transactional/emails/ directory to see branded email templates built with React Email. Check out emails/utils/styles.ts for the shared design system that ensures consistent branding across all emails. You can preview templates locally by running bun email:dev to start the React Email preview server.

Use AI agents to quickly generate new branded email templates. Describe the email content, CTAs, and required information in plain English, and the AI will generate a complete React Email template following the existing branded style patterns from emails/utils/styles.ts. See docs/getting-started.md for detailed examples and prompts.

Only if you want Google Sign-In: Enable Google OAuth for seamless one-click authentication. Create OAuth credentials in Google Cloud Console, configure Supabase with your credentials, and link your local and remote Supabase projects. Run bun run auth:google for automated setup. See the complete guide in docs/technical/google-auth-setup.md. If you don't need Google OAuth, check this off to mark it complete.

Only if you need payments: If your application requires payment processing, subscription billing, or marketplace functionality, set up Stripe. AI assistants excel at integrating Stripe webhooks and payment flows. MCP servers are available to accelerate development. If you don't need payments, check this off to mark it complete.

Only if you need analytics: If you need user behavior tracking, feature flags, or A/B testing, create a PostHog project. AI is excellent at integrating PostHog, and MCP servers are available to help. If you don't need analytics, check this off to mark it complete.

Only if you need maps: If you need map integration, address search, geocoding, or custom routes, get a Mapbox access token. AI is very capable at implementing Mapbox integrations. If you don't need maps, check this off to mark it complete.

Only if you need calendar/booking functionality: If you're building an event management system or booking service, consider Mina Scheduler. It provides day/week/month views, event management, Zod validation, Shadcn UI integration, and mobile-responsive design. AI can help integrate and customize it for your needs. If you don't need a scheduler, check this off to mark it complete.

Only if Next.js Server Actions don't meet your requirements: While Server Actions are excellent for most use cases, you might need a dedicated backend framework if you're:

• Building a Public API - Server Actions are designed for internal use. Dedicated frameworks like Hono or FastAPI offer robust routing, versioning, and auto-generated documentation for third-party consumers.
• Complex Backend Architecture - Frameworks like Flask or FastAPI enforce clean separation of concerns, making microservices and domain-driven design easier to implement.
• Background Processing & Queues - Server Actions run as short-lived serverless functions. For long-running jobs (video encoding, mass emails), use a dedicated backend with worker processes (Celery, BullMQ).
• Language-Specific Libraries & Tools - Access specialized libraries not available in JavaScript, such as Pandas/NumPy (data science), scikit-learn/PyTorch (ML/AI), OpenCV (computer vision), or Go/Rust libraries for high-performance computing.

Critical: Maintain type-safe client-server communication using Hono RPC (TypeScript end-to-end type inference) or openapi-react-query-codegen (auto-generate TanStack Query hooks from OpenAPI specs). See docs/technical/dedicated-backend-frameworks.md for complete implementation guides, framework comparisons, and type-safety patterns. If you don't need a dedicated backend for any of the reasons above, then chances are server actions will be fine for you, so check this off to mark it complete.

Only if you need complex workflow automation or AI pipelines: While Next.js Server Actions are perfect for most backend logic, n8n excels at specific use cases:

• Complex Multi-Step Workflows - Orchestrating 5+ steps with branching logic, error handling, and retries. Visual workflow designer makes debugging easier than nested server action code.
• AI Agent Pipelines - Building AI workflows with multiple tool uses and decision trees. Pre-built AI nodes (OpenAI, Anthropic) with visual prompt iteration.
• External Service Orchestration - Coordinating 3+ external APIs (Notion → AI → Slack → Database). 400+ pre-built integrations with authentication handling.
• Long-Running Tasks - Batch processing, video encoding, or data transformations that exceed serverless timeouts. No timeout restrictions in n8n.
• Scheduled Automation - Complex cron schedules, periodic syncs, or automated reports with built-in monitoring and failure notifications.

The organization maintains an n8n instance with MCP integration for AI-assisted workflow development. You can call n8n workflows from server actions via webhooks for hybrid approaches. See docs/technical/n8n-integration.md for complete decision framework, integration patterns, and examples. If your app doesn't need complex automation, AI pipelines, or multi-service orchestration, server actions will handle everything you need—check this off to mark it complete.

Start the development server with bun run dev and verify everything works at localhost:3000. Test authentication, database queries, and all features work correctly.

Enable automatic database deployments by connecting your Supabase project to GitHub. This allows migrations to deploy automatically when you push to main, creates Preview Branches for PRs, and provides full audit trail. Go to Supabase Dashboard → Settings → Integrations → Connect to GitHub. See GitHub integration docs.

Learn why automated deployments are critical: they provide safety through PR reviews, consistency with no human error, full audit trail in git, Preview Branches for testing, and easy rollback. Manual deployments are error-prone and risky in production. Read the detailed explanation in docs/getting-started.md about why automation matters and how it works.

Deploy your Next.js application to Railway for production hosting. Run bun run railway:setup to configure the Railway CLI, then bun run railway:push-env to push environment variables. Push to main branch for automatic deployments or use railway up for manual deployment. See docs/technical/railway-deployment.md for complete setup instructions.

If deploying to Railway: Set up a custom domain for your Railway-deployed application. Navigate to your service settings, find Networking → Public Networking, and click + Custom Domain. Add the provided CNAME record to your DNS provider (Cloudflare, Namecheap, etc.). Railway automatically issues SSL certificates. For root domains, ensure your DNS provider supports CNAME flattening or ALIAS records. See docs/technical/railway-custom-domain.md for detailed setup instructions including Cloudflare-specific configuration. If not using Railway or custom domains, check this off to mark it complete.