Project structure

The repository separates routes (pages/, Vike file-based routing) from shared code (src/), with build/runtime glue in scripts/ and the Worker entry in src/worker.ts.

swapps-client/
├── pages/                    # Vike file-based routes (page components)
│   ├── +config.ts            # Global Vike configuration
│   ├── +Layout.tsx           # Root layout (Header, Footer, LanguageProvider)
│   ├── +onBeforeRoute.ts     # Global route preprocessing (i18n URL rewriting)
│   ├── +onRenderHtml.tsx     # Server-side HTML rendering (SSR)
│   ├── +onRenderClient.tsx   # Client-side hydration
│   ├── +Page.tsx             # Home page
│   ├── about-us/             # About Us section
│   ├── blog/                 # Blog: listing, posts (@slug), tag, category, author
│   ├── case-studies/         # Case studies listing and individual studies
│   ├── get-swapps/           # Lead generation surveys and contact forms
│   ├── services/             # Service detail pages
│   ├── plans/                # Subscription plans
│   ├── support-center/       # FAQ and support portal
│   ├── style-guide/          # Internal design system documentation
│   └── _error/               # 404 error page
├── src/
│   ├── api/                  # Typed clients (ai.ts, subscriptions/)
│   ├── components/           # Shared React components
│   ├── contexts/             # React Context providers (LanguageContext)
│   ├── hooks/                # Custom hooks (useTranslation)
│   ├── locales/              # en.json, es.json, routes.json
│   ├── services/             # Service clients (chat/)
│   ├── styles/               # SCSS (BEM): abstracts, base, components, layout, pages
│   ├── types/                # TypeScript type definitions
│   ├── utils/                # Utilities (api.ts, routeUtils.ts, redirects.ts, …)
│   ├── sentry.js             # Sentry initialization
│   ├── server-entry.ts       # Vike/Worker server entry glue
│   └── worker.ts             # Cloudflare Worker entry point
├── data/                     # Static JSON data (e.g. case-studies.json)
├── public/                   # Static assets served directly
├── scripts/                  # Build, watch, and optimization scripts
├── tests/                    # Vitest tests (unit/, integration/, routes)
├── cypress/                  # Cypress E2E tests
├── docs/                     # This project's MkDocs source
├── dist/                     # Build output (client/ assets + worker.js)
├── wrangler.toml             # Cloudflare Workers configuration
├── vite.config.ts            # Vite + Vike build configuration
└── package.json              # Scripts and dependencies

Note

pages/ also contains additional sections beyond those listed above (for example marketing, platform, and resource areas). The directories shown here are the core ones referenced throughout this documentation; explore pages/ directly for the complete, current set.

pages/ — routes

File-based routing. Each leaf directory is a route; @param directories are dynamic segments (e.g. blog/@slug/, blog/tag/@slug/). Special + files configure Vike per directory. See SSR with Vike.

Path Route
pages/+Page.tsx / (and /es/)
pages/blog/+Page.tsx /blog/ listing
pages/blog/@slug/+Page.tsx /blog/<slug>/ post
pages/blog/tag/@slug/ /blog/tag/<slug>/
pages/blog/category/@slug/ /blog/category/<slug>/
pages/blog/author/@authorSlug/ /blog/author/<slug>/
pages/case-studies/@filterType/@filterValue/ filtered case studies
pages/get-swapps/ lead-generation surveys and contact

src/ — shared code

Directory Contents
src/api/ Typed API clients: ai.ts (/api/ai/*), subscriptions/ (App plans/checkout)
src/components/ Reusable React components (Header, Footer, Navigation, blog/case-study widgets, forms)
src/contexts/ LanguageContext (provides language, __(), switchLanguage(), getLocalizedPath())
src/hooks/ Custom hooks, notably useTranslation
src/locales/ en.json, es.json, and routes.json (EN/ES route map)
src/services/ chat/ (chat client, SSE parser)
src/styles/ SCSS organized by BEM layer — see Build and styling
src/utils/ api.ts (fetch + binding), routeUtils.ts, redirects.ts, hreflang.ts, pageSitemap.ts, image/route helpers
src/types/ Shared TypeScript types (Locale, VikePageContext, route config, …)
src/worker.ts Worker fetch handler (routing, redirects, caching, SSR)

Path aliases

vite.config.ts (mirrored in vitest.config.ts) defines import aliases so code avoids deep relative paths:

Alias Resolves to
@/ src/
@/components src/components
@/utils src/utils
@/styles src/styles
@/assets src/assets
@/hooks src/hooks
@/contexts src/contexts
@/locales src/locales
@/services src/services
@/api src/api
@/data data/

Next steps