---
applyTo: "{apps/scandic-web/**/*,apps/partner-sas/**/*,apps/scandic-redirect/**/*,packages/**/*}"
---

# Monorepo and Project Overview

**OVERVIEW:** This is a monorepository managed by **[Turborepo]** containing Next.js applications and several shared internal packages.

**PROJECT STRUCTURE:**

- `/apps/*`: Where public-facing applications live.
    - `/apps/scandic-web`: The public-facing site for Scandic Hotels. Displaing cms content from Contentstack, a hotel room booking flow, and user profile management. Hosted on Netlify.
    - `/apps/partner-sas`: A whitelabel version of the Scandic site for SAS customers that mostly relates to booking a hotel room. Hosted on Netlify
    - `/apps/scandic-redirect`: A service for handling redirects when a url doesn'
      t match any static content or a page in Contentstack. Hosted on Netlify
    - `/apps/redis-api`: An api that acts as a http front to Redis due to serveless constraints. Hosted as a container app in Azure.
- `/packages/*`: Where shared code and utilities are stored. They are built with `transpilePackages` so they do not have their own build pipeline
    - `/packages/design-system`: Shared React/UI components hosted as a Storybook.
    - `/packages/trpc`: Shared trpc routers and logic.
    - `/packages/tracking`: Shared tracking utilities and analytics.
    - `/packages/booking-flow`: The main revenue-generating part where you find booking flow logic and related components.

**INSTRUCTIONS FOR GENERATION:**

1.  **Shared Code:** When generating code that could be reusable (components, hooks, utility functions, types), check the `/packages` directory for existing files. If a new, shared piece of logic is needed, generate it within the appropriate `/packages` subdirectory.
2.  **Imports:** All imports from shared packages must use the configured package name (e.g., `import { Button } from '@repo/ui'`). **Do not use relative paths** to import code between apps and packages.
3.  **Dependency Manager:** All package installations, script commands, and documentation examples must use **Yarn**.
4.  **Testing:** All unit testing must use **Vitest**.

## Next.js & React Best Practices

**FRAMEWORK:** Next.js (Use **App Router**) and React.
**LANGUAGE:** TypeScript with strict mode enabled.

**COMPONENTS:**

1.  **Default to Server Components:** All components in the `/app` directory are **Server Components** by default. Only use `'use client'` when necessary for interactivity (hooks, event handlers, etc.).
2.  **Styling:** Use **Css Modules**.
3.  **Immutability:** Never mutate props or state directly. Always return new objects or arrays for updates.
4.  **Data Fetching** All client-side and server-side data fetching logic should use types and procedures defined in the shared /packages/trpc

**FILE NAMING:**

- Components: `PascalCase` (`ProductCard.tsx`).
- Hooks: `camelCase` and start with `use` (`useUser.ts`).