Frontend Architecture

LaunchFast uses Remix for its frontend with file-based routing, nested layouts, and full-stack data loading. The routing convention is powered by remix-flat-routes, which extends Remix's built-in convention with additional features.

File-based routing

Routes live in app/routes/ and use the remix-flat-routes hybrid convention, configured in vite.config.js. This convention converts +/ to . in route paths, giving you both colocation and organized folder structures. See the Routing page for full details on the convention, route groups, and adding new routes.

To inspect the generated routes at any time:

npx remix routes

Route groups

Routes are organized by concern using prefixed folders:

  • _auth+/ — authentication flows (login, signup, onboarding, password reset)
  • _marketing+/ — public pages (home, about, privacy, terms)
  • _seo+/ — SEO resource routes (robots.txt, sitemap.xml)
  • admin+/ — admin-only pages (cache management)
  • resources+/ — resource routes (no UI, backend only)
  • settings+/ — user settings (profile, password, 2FA, connections)

Layouts

The underscore prefix (_) creates pathless layout routes. For example, _auth+/ shares a layout without adding /auth to the URL. Nested routes inherit parent layouts automatically.

Resource routes

Routes that export only a loader or action (no default component) are resource routes. They handle backend logic without rendering UI — used for things like image serving, health checks, and theme switching.

UI components

Components live in app/ui/components/ and are organized into:

  • custom/ — app-specific components (including the Icon component)
  • shadcnui/ — shadcn/ui components
  • verveui/ — LaunchFast UI library components

Styling

LaunchFast uses Tailwind CSS with a custom theme configuration. The global stylesheet is at app/styles/tailwind.css. The theming system supports light and dark modes with CSS custom properties.

Related