# sameerasherr/snackflix architecture

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

- Interactive diagram: https://gitdiagram.com/sameerasherr/snackflix
- Repository: https://github.com/sameerasherr/snackflix

## Overview

SnackFlix is a social film-discovery and tracking web app. Users browse or search TMDB films, inspect details, save films to a profile with statuses, and share and discuss community publications. The React router exposes the main user-facing pages; the Express server mounts dedicated API routes, which access MySQL for accounts and film associations and MongoDB for publications and comments. The README documents the broader capabilities; sampled sources confirm key server dispatch and storage behavior, but not every page’s API calls.

Main entry points: [`server/server.ts`](https://github.com/sameerasherr/snackflix/blob/main/server/server.ts) (Express API), [`src/main.tsx`](https://github.com/sameerasherr/snackflix/blob/main/src/main.tsx) (Page router), [`server/db.ts`](https://github.com/sameerasherr/snackflix/blob/main/server/db.ts) (MySQL), [`server/route/authRoutes.ts`](https://github.com/sameerasherr/snackflix/blob/main/server/route/authRoutes.ts) (Authentication)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["React application"]
  node_home["Film home<br/>[PageAccueil.tsx]"]
  node_filmsearch["Film search<br/>[PageVoirTout.tsx]"]
  node_filmdetail["Film details"]
  node_signup["Sign up"]
  node_login["Sign in<br/>[Login.tsx]"]
  node_profile["User profile<br/>[PageProfil.tsx]"]
  node_communityui["Community feed<br/>[PageCommu.tsx]"]
  node_router["Page router<br/>[main.tsx]"]
end

subgraph group_identity["Accounts and library"]
  node_authroutes["Authentication<br/>[authRoutes.ts]"]
  node_userroutes["User accounts"]
  node_filmroutes["Film library"]
  node_statusroutes["Film statuses<br/>[statusRoutes.ts]"]
end

subgraph group_community["Community features"]
  node_publicationroutes["Publications"]
  node_commentroutes["Comments"]
  node_communityroutes["Community insights"]
end

subgraph group_infra["Backend and data"]
  node_server["Express API<br/>[server.ts]"]
  node_tmdbroute["Film catalog API<br/>[tmdbRoutes.ts]"]
  node_mysqldb[("MySQL<br/>[db.ts]")]
  node_mongodb[("MongoDB<br/>[db.ts]")]
end

node_visitor(("User"))
node_tmdb["TMDB"]
node_google["Google identity"]

node_visitor -->|"opens app"| node_router
node_router -->|"routes to"| node_home
node_router -->|"routes to"| node_filmsearch
node_router -->|"routes to"| node_filmdetail
node_router -->|"routes to"| node_signup
node_router -->|"routes to"| node_login
node_router -->|"routes to"| node_profile
node_router -->|"routes to"| node_communityui
node_home -->|"requests data"| node_server
node_filmsearch -->|"requests data"| node_server
node_filmdetail -->|"requests data"| node_server
node_signup -->|"submits account"| node_server
node_login -->|"submits credentials"| node_server
node_profile -->|"requests profile"| node_server
node_communityui -->|"requests feed"| node_server
node_server -->|"mounts /login"| node_authroutes
node_server -->|"mounts /utilisateur"| node_userroutes
node_server -->|"mounts /utilisateur_film"| node_filmroutes
node_server -->|"mounts /status"| node_statusroutes
node_server -->|"mounts /tmdb"| node_tmdbroute
node_server -->|"mounts /publication"| node_publicationroutes
node_server -->|"mounts /commentaire"| node_commentroutes
node_server -->|"mounts /communaute"| node_communityroutes
node_authroutes -->|"reads and writes"| node_mysqldb
node_userroutes -->|"reads and writes"| node_mysqldb
node_filmroutes -->|"reads and writes"| node_mysqldb
node_filmroutes -->|"reads and deletes"| node_mongodb
node_statusroutes -->|"reads"| node_mysqldb
node_publicationroutes -->|"reads and writes"| node_mongodb
node_publicationroutes -->|"reads users"| node_mysqldb
node_commentroutes -->|"reads and writes"| node_mongodb
node_commentroutes -->|"reads user"| node_mysqldb
node_communityroutes -->|"aggregates posts"| node_mongodb
node_communityroutes -->|"reads users"| node_mysqldb
node_tmdbroute -->|"fetches catalog"| node_tmdb
node_authroutes -.->|"verifies identity"| node_google

click node_home "https://github.com/sameerasherr/snackflix/blob/main/src/PageAccueil.tsx"
click node_filmsearch "https://github.com/sameerasherr/snackflix/blob/main/src/PageVoirTout.tsx"
click node_filmdetail "https://github.com/sameerasherr/snackflix/blob/main/src/PageInformationProduit.tsx"
click node_signup "https://github.com/sameerasherr/snackflix/blob/main/src/PageInscription.tsx"
click node_login "https://github.com/sameerasherr/snackflix/blob/main/src/Login.tsx"
click node_profile "https://github.com/sameerasherr/snackflix/blob/main/src/PageProfil.tsx"
click node_communityui "https://github.com/sameerasherr/snackflix/blob/main/src/PageCommu.tsx"
click node_router "https://github.com/sameerasherr/snackflix/blob/main/src/main.tsx"
click node_server "https://github.com/sameerasherr/snackflix/blob/main/server/server.ts"
click node_authroutes "https://github.com/sameerasherr/snackflix/blob/main/server/route/authRoutes.ts"
click node_userroutes "https://github.com/sameerasherr/snackflix/blob/main/server/route/utilisateurRoutes.ts"
click node_filmroutes "https://github.com/sameerasherr/snackflix/blob/main/server/route/utilisateurFilmRoutes.ts"
click node_statusroutes "https://github.com/sameerasherr/snackflix/blob/main/server/route/statusRoutes.ts"
click node_tmdbroute "https://github.com/sameerasherr/snackflix/blob/main/server/route/tmdbRoutes.ts"
click node_publicationroutes "https://github.com/sameerasherr/snackflix/blob/main/server/route/publicationRoutes.ts"
click node_commentroutes "https://github.com/sameerasherr/snackflix/blob/main/server/route/commentaireRoutes.ts"
click node_communityroutes "https://github.com/sameerasherr/snackflix/blob/main/server/route/communauteRoutes.ts"
click node_mysqldb "https://github.com/sameerasherr/snackflix/blob/main/server/db.ts"
click node_mongodb "https://github.com/sameerasherr/snackflix/blob/main/server/db.ts"

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_filmsearch,node_filmdetail,node_signup,node_login,node_profile,node_communityui,node_router,node_visitor toneBlue
class node_authroutes,node_userroutes,node_filmroutes,node_statusroutes toneAmber
class node_publicationroutes,node_commentroutes,node_communityroutes toneMint
class node_server,node_tmdbroute,node_mysqldb,node_mongodb toneRose
class node_tmdb,node_google toneIndigo
```

## Components

### React application

- [Film home](https://github.com/sameerasherr/snackflix/blob/main/src/PageAccueil.tsx): `src/PageAccueil.tsx`
- [Film search](https://github.com/sameerasherr/snackflix/blob/main/src/PageVoirTout.tsx): `src/PageVoirTout.tsx`
- [Film details](https://github.com/sameerasherr/snackflix/blob/main/src/PageInformationProduit.tsx): `src/PageInformationProduit.tsx`
- [Sign up](https://github.com/sameerasherr/snackflix/blob/main/src/PageInscription.tsx): `src/PageInscription.tsx`
- [Sign in](https://github.com/sameerasherr/snackflix/blob/main/src/Login.tsx): `src/Login.tsx`
- [User profile](https://github.com/sameerasherr/snackflix/blob/main/src/PageProfil.tsx): `src/PageProfil.tsx`
- [Community feed](https://github.com/sameerasherr/snackflix/blob/main/src/PageCommu.tsx): `src/PageCommu.tsx`
- [Page router](https://github.com/sameerasherr/snackflix/blob/main/src/main.tsx): `src/main.tsx`

### Accounts and library

- [Authentication](https://github.com/sameerasherr/snackflix/blob/main/server/route/authRoutes.ts): `server/route/authRoutes.ts`
- [User accounts](https://github.com/sameerasherr/snackflix/blob/main/server/route/utilisateurRoutes.ts): `server/route/utilisateurRoutes.ts`
- [Film library](https://github.com/sameerasherr/snackflix/blob/main/server/route/utilisateurFilmRoutes.ts): `server/route/utilisateurFilmRoutes.ts`
- [Film statuses](https://github.com/sameerasherr/snackflix/blob/main/server/route/statusRoutes.ts): `server/route/statusRoutes.ts`

### Community features

- [Publications](https://github.com/sameerasherr/snackflix/blob/main/server/route/publicationRoutes.ts): `server/route/publicationRoutes.ts`
- [Comments](https://github.com/sameerasherr/snackflix/blob/main/server/route/commentaireRoutes.ts): `server/route/commentaireRoutes.ts`
- [Community insights](https://github.com/sameerasherr/snackflix/blob/main/server/route/communauteRoutes.ts): `server/route/communauteRoutes.ts`

### Backend and data

- [Express API](https://github.com/sameerasherr/snackflix/blob/main/server/server.ts): `server/server.ts`
- [Film catalog API](https://github.com/sameerasherr/snackflix/blob/main/server/route/tmdbRoutes.ts): `server/route/tmdbRoutes.ts`
- [MySQL](https://github.com/sameerasherr/snackflix/blob/main/server/db.ts): `server/db.ts`
- [MongoDB](https://github.com/sameerasherr/snackflix/blob/main/server/db.ts): `server/db.ts`

### Other components

- **User**
- **TMDB**
- **Google identity**

## Connections

- User → Page router: opens app
- Page router → Film home: routes to
- Page router → Film search: routes to
- Page router → Film details: routes to
- Page router → Sign up: routes to
- Page router → Sign in: routes to
- Page router → User profile: routes to
- Page router → Community feed: routes to
- Film home → Express API: requests data
- Film search → Express API: requests data
- Film details → Express API: requests data
- Sign up → Express API: submits account
- Sign in → Express API: submits credentials
- User profile → Express API: requests profile
- Community feed → Express API: requests feed
- Express API → Authentication: mounts /login
- Express API → User accounts: mounts /utilisateur
- Express API → Film library: mounts /utilisateur_film
- Express API → Film statuses: mounts /status
- Express API → Film catalog API: mounts /tmdb
- Express API → Publications: mounts /publication
- Express API → Comments: mounts /commentaire
- Express API → Community insights: mounts /communaute
- Authentication → MySQL: reads and writes
- User accounts → MySQL: reads and writes
- Film library → MySQL: reads and writes
- Film library → MongoDB: reads and deletes
- Film statuses → MySQL: reads
- Publications → MongoDB: reads and writes
- Publications → MySQL: reads users
- Comments → MongoDB: reads and writes
- Comments → MySQL: reads user
- Community insights → MongoDB: aggregates posts
- Community insights → MySQL: reads users
- Film catalog API → TMDB: fetches catalog
- Authentication → Google identity: verifies identity