# samalync-ltd/viewesta-frontend architecture

> Architecture diagram of the GitHub repository samalync-ltd/viewesta-frontend, 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/samalync-ltd/viewesta-frontend
- Repository: https://github.com/samalync-ltd/viewesta-frontend

## Overview

Viewesta is a React streaming storefront for viewers and a creator studio for filmmakers, with admin content approval. The main viewer journey is browse/search the catalog, inspect a title, then watch or use wallet and subscription flows; viewers can also maintain watchlists and receive notifications. Filmmakers upload and manage titles, while administrators approve submissions. The graph reflects documented capabilities and sampled service behavior; several page, context, and service implementations were not provided, so uncertain call wiring is omitted.

Main entry points: [`src/layouts/ViewerLayout.js`](https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/layouts/ViewerLayout.js) (Viewer Layout), [`src/App.js`](https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/App.js) (Router and Providers), [`src/services/movieService.js`](https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/services/movieService.js) (Movie API), [`src/api/client.js`](https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/api/client.js) (HTTP Client)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application Shell"]
  node_app["Router and Providers<br/>[App.js]"]
  node_viewer_layout["Viewer Layout<br/>[ViewerLayout.js]"]
  node_studio_layout["Studio Layout"]
end

subgraph group_viewer["Viewer Experience"]
  node_catalog["Catalog Browsing<br/>[Home.js]"]
  node_search_genre["Search and Genres<br/>[Search.js]"]
  node_movie_detail["Movie Details<br/>[MovieDetail.js]"]
  node_series_detail["Series Details<br/>[SeriesDetail.js]"]
  node_playback["Viewing and Playback<br/>[Watch.js]"]
  node_viewer_lists["Watchlist and Favorites<br/>[MovieContext.js]"]
end

subgraph group_creator["Creator Operations"]
  node_filmmaker_upload["Content Upload<br/>[FilmmakerUpload.js]"]
  node_media_upload["Media Transfer<br/>[uploadService.js]"]
  node_filmmaker_catalog["Filmmaker Catalog"]
  node_approval["Content Approval<br/>[AdminApproval.js]"]
end

subgraph group_services["Platform Services"]
  node_auth["Authentication<br/>[AuthContext.js]"]
  node_wallet["Wallet and Purchases<br/>[Wallet.js]"]
  node_subscriptions["Subscriptions<br/>[Subscription.js]"]
  node_notifications["Notifications"]
  node_movie_service["Movie API<br/>[movieService.js]"]
  node_series_service["Series API<br/>[seriesService.js]"]
  node_approval_service["Approval API<br/>[approvalService.js]"]
  node_http["HTTP Client<br/>[client.js]"]
end

subgraph group_external["External Systems"]
  node_backend["Viewesta Backend"]
  node_firebase["Firebase Messaging"]
end

node_viewer_actor(("Viewer"))
node_filmmaker_actor(("Filmmaker"))
node_admin_actor(("Administrator"))

node_viewer_actor -->|"opens app"| node_app
node_filmmaker_actor -->|"opens studio"| node_app
node_admin_actor -->|"reviews content"| node_app
node_app -->|"routes viewer"| node_viewer_layout
node_app -->|"routes studio"| node_studio_layout
node_viewer_layout -->|"shows catalog"| node_catalog
node_viewer_layout -->|"routes search"| node_search_genre
node_viewer_layout -->|"routes titles"| node_movie_detail
node_viewer_layout -->|"routes series"| node_series_detail
node_viewer_layout -->|"routes playback"| node_playback
node_viewer_layout -->|"routes lists"| node_viewer_lists
node_app -->|"provides session"| node_auth
node_viewer_layout -->|"routes wallet"| node_wallet
node_viewer_layout -->|"routes plans"| node_subscriptions
node_studio_layout -->|"routes upload"| node_filmmaker_upload
node_studio_layout -->|"routes titles"| node_filmmaker_catalog
node_app -->|"routes review"| node_approval
node_app -->|"handles messages"| node_notifications
node_catalog -->|"loads titles"| node_movie_service
node_search_genre -->|"searches catalog"| node_movie_service
node_movie_detail -->|"loads details"| node_movie_service
node_filmmaker_catalog -->|"manages titles"| node_movie_service
node_filmmaker_upload -->|"creates title"| node_movie_service
node_filmmaker_upload -->|"uploads assets"| node_media_upload
node_media_upload -->|"transfers media"| node_backend
node_series_detail -->|"loads series"| node_series_service
node_approval -->|"submits decision"| node_approval_service
node_auth -->|"requests identity"| node_http
node_movie_service -->|"requests catalog"| node_http
node_series_service -->|"requests series"| node_http
node_approval_service -->|"requests review"| node_http
node_http -->|"sends API requests"| node_backend
node_notifications -.->|"receives push"| node_firebase
node_notifications -->|"syncs notifications"| node_backend
node_wallet -.->|"performs wallet flows"| node_backend

click node_app "https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/App.js"
click node_viewer_layout "https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/layouts/ViewerLayout.js"
click node_studio_layout "https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/layouts/FilmmakerStudioLayout.js"
click node_catalog "https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/pages/Home.js"
click node_search_genre "https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/pages/Search.js"
click node_movie_detail "https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/pages/MovieDetail.js"
click node_series_detail "https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/pages/SeriesDetail.js"
click node_playback "https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/pages/Watch.js"
click node_viewer_lists "https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/context/MovieContext.js"
click node_auth "https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/context/AuthContext.js"
click node_wallet "https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/pages/Wallet.js"
click node_subscriptions "https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/pages/Subscription.js"
click node_filmmaker_upload "https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/pages/filmmaker/FilmmakerUpload.js"
click node_media_upload "https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/services/uploadService.js"
click node_filmmaker_catalog "https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/pages/filmmaker/FilmmakerMyMovies.js"
click node_approval "https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/pages/admin/AdminApproval.js"
click node_notifications "https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/context/NotificationContext.js"
click node_movie_service "https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/services/movieService.js"
click node_series_service "https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/services/seriesService.js"
click node_approval_service "https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/services/approvalService.js"
click node_http "https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/api/client.js"

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_app,node_viewer_layout,node_studio_layout,node_viewer_actor toneBlue
class node_catalog,node_search_genre,node_movie_detail,node_series_detail,node_playback,node_viewer_lists toneAmber
class node_filmmaker_upload,node_media_upload,node_filmmaker_catalog,node_approval toneMint
class node_auth,node_wallet,node_subscriptions,node_notifications,node_movie_service,node_series_service,node_approval_service,node_http toneRose
class node_backend,node_firebase,node_filmmaker_actor,node_admin_actor toneIndigo
```

## Components

### Application Shell

- [Router and Providers](https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/App.js): `src/App.js`
- [Viewer Layout](https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/layouts/ViewerLayout.js): `src/layouts/ViewerLayout.js`
- [Studio Layout](https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/layouts/FilmmakerStudioLayout.js): `src/layouts/FilmmakerStudioLayout.js`

### Viewer Experience

- [Catalog Browsing](https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/pages/Home.js): `src/pages/Home.js`
- [Search and Genres](https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/pages/Search.js): `src/pages/Search.js`
- [Movie Details](https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/pages/MovieDetail.js): `src/pages/MovieDetail.js`
- [Series Details](https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/pages/SeriesDetail.js): `src/pages/SeriesDetail.js`
- [Viewing and Playback](https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/pages/Watch.js): `src/pages/Watch.js`
- [Watchlist and Favorites](https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/context/MovieContext.js): `src/context/MovieContext.js`

### Creator Operations

- [Content Upload](https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/pages/filmmaker/FilmmakerUpload.js): `src/pages/filmmaker/FilmmakerUpload.js`
- [Media Transfer](https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/services/uploadService.js): `src/services/uploadService.js`
- [Filmmaker Catalog](https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/pages/filmmaker/FilmmakerMyMovies.js): `src/pages/filmmaker/FilmmakerMyMovies.js`
- [Content Approval](https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/pages/admin/AdminApproval.js): `src/pages/admin/AdminApproval.js`

### Platform Services

- [Authentication](https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/context/AuthContext.js): `src/context/AuthContext.js`
- [Wallet and Purchases](https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/pages/Wallet.js): `src/pages/Wallet.js`
- [Subscriptions](https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/pages/Subscription.js): `src/pages/Subscription.js`
- [Notifications](https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/context/NotificationContext.js): `src/context/NotificationContext.js`
- [Movie API](https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/services/movieService.js): `src/services/movieService.js`
- [Series API](https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/services/seriesService.js): `src/services/seriesService.js`
- [Approval API](https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/services/approvalService.js): `src/services/approvalService.js`
- [HTTP Client](https://github.com/samalync-ltd/viewesta-frontend/blob/master/src/api/client.js): `src/api/client.js`

### External Systems

- **Viewesta Backend**
- **Firebase Messaging**

### Other components

- **Viewer**
- **Filmmaker**
- **Administrator**

## Connections

- Viewer → Router and Providers: opens app
- Filmmaker → Router and Providers: opens studio
- Administrator → Router and Providers: reviews content
- Router and Providers → Viewer Layout: routes viewer
- Router and Providers → Studio Layout: routes studio
- Viewer Layout → Catalog Browsing: shows catalog
- Viewer Layout → Search and Genres: routes search
- Viewer Layout → Movie Details: routes titles
- Viewer Layout → Series Details: routes series
- Viewer Layout → Viewing and Playback: routes playback
- Viewer Layout → Watchlist and Favorites: routes lists
- Router and Providers → Authentication: provides session
- Viewer Layout → Wallet and Purchases: routes wallet
- Viewer Layout → Subscriptions: routes plans
- Studio Layout → Content Upload: routes upload
- Studio Layout → Filmmaker Catalog: routes titles
- Router and Providers → Content Approval: routes review
- Router and Providers → Notifications: handles messages
- Catalog Browsing → Movie API: loads titles
- Search and Genres → Movie API: searches catalog
- Movie Details → Movie API: loads details
- Filmmaker Catalog → Movie API: manages titles
- Content Upload → Movie API: creates title
- Content Upload → Media Transfer: uploads assets
- Media Transfer → Viewesta Backend: transfers media
- Series Details → Series API: loads series
- Content Approval → Approval API: submits decision
- Authentication → HTTP Client: requests identity
- Movie API → HTTP Client: requests catalog
- Series API → HTTP Client: requests series
- Approval API → HTTP Client: requests review
- HTTP Client → Viewesta Backend: sends API requests
- Notifications → Firebase Messaging: receives push
- Notifications → Viewesta Backend: syncs notifications
- Wallet and Purchases → Viewesta Backend: performs wallet flows