# uyentnm/s42-films-website architecture

> Architecture diagram of the GitHub repository uyentnm/s42-films-website, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/uyentnm/s42-films-website
- Repository: https://github.com/uyentnm/s42-films-website

## Overview

S•42 is a private-facing film-slate website: visitors enter through the home experience, browse a seven-film slate and individual treatments, and must pass an access-code gate to view protected pages. The access workflow is supported by sampled form, API, proxy, and token-helper code. The tree documents seven film routes, but their page implementations and the landing-page composition were not sampled, so those connections are shown only where source evidence supports them. The README is a generic Next.js starter and documents no additional product capabilities.

Main entry points: [`src/app/page.tsx`](https://github.com/uyentnm/s42-films-website/blob/main/src/app/page.tsx) (Home page), [`src/components/landing/SmokeHero.tsx`](https://github.com/uyentnm/s42-films-website/blob/main/src/components/landing/SmokeHero.tsx) (Smoke hero), [`src/app/access/page.tsx`](https://github.com/uyentnm/s42-films-website/blob/main/src/app/access/page.tsx) (Access page), [`src/proxy.ts`](https://github.com/uyentnm/s42-films-website/blob/main/src/proxy.ts) (Access proxy)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_presentation["Slate experience"]
  node_home["Home page<br/>[page.tsx]"]
  node_smokehero["Smoke hero<br/>[SmokeHero.tsx]"]
  node_filmindex["Film index<br/>[FilmIndex.tsx]"]
  node_manifesto["Manifesto<br/>[Manifesto.tsx]"]
  node_smokecanvas["Liquid smoke canvas"]
  node_media["Slate media assets"]
  node_video["Hero video assets"]
end

subgraph group_film["Film treatments"]
  node_filmdata["Film slate data<br/>[films.ts]"]
  node_filmroutes["Film treatment pages"]
end

subgraph group_access["Private access"]
  node_accesspage["Access page<br/>[page.tsx]"]
  node_accessform["Access form"]
  node_accessapi["Access API<br/>[route.ts]"]
  node_proxy["Access proxy<br/>[proxy.ts]"]
  node_siteaccess["Token validation<br/>[siteAccess.ts]"]
end

subgraph group_shared["Shared runtime"]
  node_layout["Root layout<br/>[layout.tsx]"]
  node_header["Site navigation<br/>[Header.tsx]"]
  node_smoothscroll["Smooth scrolling<br/>[SmoothScroll.tsx]"]
  node_lenis["Scroll state hook<br/>[useLenis.ts]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_home
node_visitor -->|"requests access"| node_accesspage
node_smokehero -->|"reads slate"| node_filmdata
node_smokehero -->|"links to"| node_filmroutes
node_home -->|"renders"| node_filmindex
node_home -->|"renders"| node_smokehero
node_home -->|"renders"| node_manifesto
node_accesspage -->|"renders"| node_accessform
node_accessform -->|"posts code"| node_accessapi
node_accessapi -->|"validates code"| node_siteaccess
node_proxy -->|"checks token"| node_siteaccess
node_proxy -->|"redirects to"| node_accesspage
node_layout -->|"renders"| node_header
node_layout -->|"wraps pages"| node_smoothscroll
node_header -->|"reads scroll instance"| node_lenis
node_smokecanvas -->|"loads logo image"| node_media
node_smokehero -->|"uses hero video"| node_video

click node_home "https://github.com/uyentnm/s42-films-website/blob/main/src/app/page.tsx"
click node_smokehero "https://github.com/uyentnm/s42-films-website/blob/main/src/components/landing/SmokeHero.tsx"
click node_filmindex "https://github.com/uyentnm/s42-films-website/blob/main/src/components/landing/FilmIndex.tsx"
click node_manifesto "https://github.com/uyentnm/s42-films-website/blob/main/src/components/landing/Manifesto.tsx"
click node_filmdata "https://github.com/uyentnm/s42-films-website/blob/main/src/data/films.ts"
click node_filmroutes "https://github.com/uyentnm/s42-films-website/tree/main/src/app/films"
click node_accesspage "https://github.com/uyentnm/s42-films-website/blob/main/src/app/access/page.tsx"
click node_accessform "https://github.com/uyentnm/s42-films-website/blob/main/src/components/access/PrivateAccessForm.tsx"
click node_accessapi "https://github.com/uyentnm/s42-films-website/blob/main/src/app/api/access/route.ts"
click node_proxy "https://github.com/uyentnm/s42-films-website/blob/main/src/proxy.ts"
click node_siteaccess "https://github.com/uyentnm/s42-films-website/blob/main/src/lib/siteAccess.ts"
click node_layout "https://github.com/uyentnm/s42-films-website/blob/main/src/app/layout.tsx"
click node_header "https://github.com/uyentnm/s42-films-website/blob/main/src/components/navigation/Header.tsx"
click node_smoothscroll "https://github.com/uyentnm/s42-films-website/blob/main/src/components/motion/SmoothScroll.tsx"
click node_lenis "https://github.com/uyentnm/s42-films-website/blob/main/src/hooks/useLenis.ts"
click node_smokecanvas "https://github.com/uyentnm/s42-films-website/blob/main/src/components/motion/LiquidSmokeCanvas.tsx"
click node_media "https://github.com/uyentnm/s42-films-website/tree/main/public/images"
click node_video "https://github.com/uyentnm/s42-films-website/tree/main/public/video"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_home,node_smokehero,node_filmindex,node_manifesto,node_smokecanvas,node_media,node_video toneBlue
class node_filmdata,node_filmroutes toneAmber
class node_accesspage,node_accessform,node_accessapi,node_proxy,node_siteaccess toneMint
class node_layout,node_header,node_smoothscroll,node_lenis toneRose
class node_visitor toneIndigo
```

## Components

### Slate experience

- [Home page](https://github.com/uyentnm/s42-films-website/blob/main/src/app/page.tsx): `src/app/page.tsx`
- [Smoke hero](https://github.com/uyentnm/s42-films-website/blob/main/src/components/landing/SmokeHero.tsx): `src/components/landing/SmokeHero.tsx`
- [Film index](https://github.com/uyentnm/s42-films-website/blob/main/src/components/landing/FilmIndex.tsx): `src/components/landing/FilmIndex.tsx`
- [Manifesto](https://github.com/uyentnm/s42-films-website/blob/main/src/components/landing/Manifesto.tsx): `src/components/landing/Manifesto.tsx`
- [Liquid smoke canvas](https://github.com/uyentnm/s42-films-website/blob/main/src/components/motion/LiquidSmokeCanvas.tsx): `src/components/motion/LiquidSmokeCanvas.tsx`
- [Slate media assets](https://github.com/uyentnm/s42-films-website/tree/main/public/images): `public/images`
- [Hero video assets](https://github.com/uyentnm/s42-films-website/tree/main/public/video): `public/video`

### Film treatments

- [Film slate data](https://github.com/uyentnm/s42-films-website/blob/main/src/data/films.ts): `src/data/films.ts`
- [Film treatment pages](https://github.com/uyentnm/s42-films-website/tree/main/src/app/films): `src/app/films`

### Private access

- [Access page](https://github.com/uyentnm/s42-films-website/blob/main/src/app/access/page.tsx): `src/app/access/page.tsx`
- [Access form](https://github.com/uyentnm/s42-films-website/blob/main/src/components/access/PrivateAccessForm.tsx): `src/components/access/PrivateAccessForm.tsx`
- [Access API](https://github.com/uyentnm/s42-films-website/blob/main/src/app/api/access/route.ts): `src/app/api/access/route.ts`
- [Access proxy](https://github.com/uyentnm/s42-films-website/blob/main/src/proxy.ts): `src/proxy.ts`
- [Token validation](https://github.com/uyentnm/s42-films-website/blob/main/src/lib/siteAccess.ts): `src/lib/siteAccess.ts`

### Shared runtime

- [Root layout](https://github.com/uyentnm/s42-films-website/blob/main/src/app/layout.tsx): `src/app/layout.tsx`
- [Site navigation](https://github.com/uyentnm/s42-films-website/blob/main/src/components/navigation/Header.tsx): `src/components/navigation/Header.tsx`
- [Smooth scrolling](https://github.com/uyentnm/s42-films-website/blob/main/src/components/motion/SmoothScroll.tsx): `src/components/motion/SmoothScroll.tsx`
- [Scroll state hook](https://github.com/uyentnm/s42-films-website/blob/main/src/hooks/useLenis.ts): `src/hooks/useLenis.ts`

### Other components

- **Visitor**

## Connections

- Visitor → Home page: opens
- Visitor → Access page: requests access
- Smoke hero → Film slate data: reads slate
- Smoke hero → Film treatment pages: links to
- Home page → Film index: renders
- Home page → Smoke hero: renders
- Home page → Manifesto: renders
- Access page → Access form: renders
- Access form → Access API: posts code
- Access API → Token validation: validates code
- Access proxy → Token validation: checks token
- Access proxy → Access page: redirects to
- Root layout → Site navigation: renders
- Root layout → Smooth scrolling: wraps pages
- Site navigation → Scroll state hook: reads scroll instance
- Liquid smoke canvas → Slate media assets: loads logo image
- Smoke hero → Hero video assets: uses hero video