# ericklimas/anime-website architecture

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

- Interactive diagram: https://gitdiagram.com/ericklimas/anime-website
- Repository: https://github.com/ericklimas/anime-website

## Overview

AniProject is an anime and manga discovery and consumption website backed by a Next.js frontend and an Express API. Users discover and filter titles, open media details, then watch episodes or read chapters; accounts also support lists, progress, and notifications. The backend aggregates AniList, Consumet, Aniwatch, and an offline anime catalog, with Redis caching. README-documented account and notification capabilities are included, though their full runtime wiring was not sampled; those links are shown as unverified where appropriate.

Main entry points: [`backend/server.js`](https://github.com/ericklimas/anime-website/blob/master/backend/server.js) (Express API server), [`frontend/app/components/UserLoginModal/index.tsx`](https://github.com/ericklimas/anime-website/blob/master/frontend/app/components/UserLoginModal/index.tsx) (Login and settings), [`backend/controllers/redisUtils.js`](https://github.com/ericklimas/anime-website/blob/master/backend/controllers/redisUtils.js) (Redis cache), [`backend/controllers/medias/anilist/mediasByParamsController.js`](https://github.com/ericklimas/anime-website/blob/master/backend/controllers/medias/anilist/mediasByParamsController.js) (Media catalog queries)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_discovery["Discovery and news"]
  node_home["Home feed<br/>[page.tsx]"]
  node_search["Search and filters<br/>[page.tsx]"]
  node_news["News feed<br/>[page.tsx]"]
end

subgraph group_consumption["Media consumption"]
  node_media["Media details<br/>[page.tsx]"]
  node_watch["Episode playback<br/>[page.tsx]"]
  node_read["Chapter reader<br/>[page.tsx]"]
end

subgraph group_accounts["Accounts and progress"]
  node_login["Login and settings<br/>[index.tsx]"]
  node_lists["Favourites and lists<br/>[page.tsx]"]
  node_progress["Viewing progress<br/>[index.tsx]"]
  node_notifications["Episode notifications<br/>[index.tsx]"]
end

subgraph group_api["Backend API"]
  node_server["Express API server<br/>[server.js]"]
  node_searchroutes["Search routes<br/>[searchRoute.js]"]
  node_searchctl["Search providers"]
  node_mediactl["Media catalog queries"]
  node_infocontrol["Media information"]
  node_episodectl["Episode sources"]
  node_chapterctl["Chapter sources"]
  node_newsroutes["News routes<br/>[newsRoute.js]"]
  node_imdbctl["IMDb metadata<br/>[imdbController.js]"]
  node_querydefs["AniList query definitions<br/>[queryConstants.js]"]
  node_querysnippets["Query snippets"]
end

subgraph group_integrations["External data and state"]
  node_cache[("Redis cache<br/>[redisUtils.js]")]
  node_anilist["AniList API"]
  node_consumet["Consumet API"]
  node_aniwatch["Aniwatch API"]
  node_firebase[("Firebase services<br/>[firebaseApp.ts]")]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_home
node_visitor -->|"searches"| node_search
node_visitor -->|"browses"| node_news
node_visitor -->|"selects title"| node_media
node_media -->|"opens episodes"| node_watch
node_media -->|"opens chapters"| node_read
node_visitor -->|"signs in"| node_login
node_login -->|"manages titles"| node_lists
node_login -->|"tracks episodes"| node_progress
node_login -->|"opts into"| node_notifications
node_home -->|"requests media"| node_anilist
node_home -.->|"uses API"| node_server
node_search -.->|"uses API"| node_server
node_watch -.->|"uses API"| node_server
node_read -.->|"uses API"| node_server
node_server -->|"mounts"| node_searchroutes
node_server -->|"mounts"| node_newsroutes
node_searchroutes -->|"dispatches"| node_searchctl
node_searchctl -->|"queries"| node_anilist
node_searchctl -->|"reads and writes"| node_cache
node_mediactl -->|"builds query"| node_querydefs
node_mediactl -->|"reads and writes"| node_cache
node_mediactl -->|"queries"| node_anilist
node_infocontrol -->|"builds query"| node_querydefs
node_infocontrol -->|"reads and writes"| node_cache
node_infocontrol -->|"queries"| node_anilist
node_episodectl -->|"fetches episodes"| node_aniwatch
node_episodectl -->|"reads and writes"| node_cache
node_chapterctl -.->|"fetches chapters"| node_consumet
node_imdbctl -->|"fetches metadata"| node_consumet
node_login -->|"authenticates"| node_firebase
node_lists -->|"stores lists"| node_firebase
node_notifications -->|"stores subscriptions"| node_firebase
node_querydefs -->|"references"| node_querysnippets

click node_home "https://github.com/ericklimas/anime-website/blob/master/frontend/app/page.tsx"
click node_search "https://github.com/ericklimas/anime-website/blob/master/frontend/app/search/page.tsx"
click node_news "https://github.com/ericklimas/anime-website/blob/master/frontend/app/news/page.tsx"
click node_media "https://github.com/ericklimas/anime-website/blob/master/frontend/app/media/%5Bid%5D/page.tsx"
click node_watch "https://github.com/ericklimas/anime-website/blob/master/frontend/app/watch/%5Bid%5D/page.tsx"
click node_read "https://github.com/ericklimas/anime-website/blob/master/frontend/app/read/%5Bid%5D/page.tsx"
click node_login "https://github.com/ericklimas/anime-website/blob/master/frontend/app/components/UserLoginModal/index.tsx"
click node_lists "https://github.com/ericklimas/anime-website/blob/master/frontend/app/my-lists/page.tsx"
click node_progress "https://github.com/ericklimas/anime-website/blob/master/frontend/app/components/Buttons/MarkEpisodeAsWatched/index.tsx"
click node_notifications "https://github.com/ericklimas/anime-website/blob/master/frontend/app/components/Buttons/AddToNotification/index.tsx"
click node_server "https://github.com/ericklimas/anime-website/blob/master/backend/server.js"
click node_searchroutes "https://github.com/ericklimas/anime-website/blob/master/backend/routes/searchRoute.js"
click node_searchctl "https://github.com/ericklimas/anime-website/blob/master/backend/controllers/search/anilist/searchController.js"
click node_mediactl "https://github.com/ericklimas/anime-website/blob/master/backend/controllers/medias/anilist/mediasByParamsController.js"
click node_infocontrol "https://github.com/ericklimas/anime-website/blob/master/backend/controllers/mediaInfo/anilist/mediaInfoController.js"
click node_episodectl "https://github.com/ericklimas/anime-website/blob/master/backend/controllers/episodes/aniwatch/episodesController.js"
click node_chapterctl "https://github.com/ericklimas/anime-website/blob/master/backend/controllers/chapters/consumet/mangadex/chaptersController.js"
click node_newsroutes "https://github.com/ericklimas/anime-website/blob/master/backend/routes/newsRoute.js"
click node_imdbctl "https://github.com/ericklimas/anime-website/blob/master/backend/controllers/imdb/consumet/imdbController.js"
click node_querydefs "https://github.com/ericklimas/anime-website/blob/master/backend/controllers/anilistUtils/queryConstants.js"
click node_querysnippets "https://github.com/ericklimas/anime-website/blob/master/backend/controllers/anilistUtils/querySnippetsByCategory.js"
click node_cache "https://github.com/ericklimas/anime-website/blob/master/backend/controllers/redisUtils.js"
click node_firebase "https://github.com/ericklimas/anime-website/blob/master/frontend/app/firebaseApp.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_search,node_news toneBlue
class node_media,node_watch,node_read toneAmber
class node_login,node_lists,node_progress,node_notifications toneMint
class node_server,node_searchroutes,node_searchctl,node_mediactl,node_infocontrol,node_episodectl,node_chapterctl,node_newsroutes,node_imdbctl,node_querydefs,node_querysnippets toneRose
class node_cache,node_anilist,node_consumet,node_aniwatch,node_firebase,node_visitor toneIndigo
```

## Components

### Discovery and news

- [Home feed](https://github.com/ericklimas/anime-website/blob/master/frontend/app/page.tsx): `frontend/app/page.tsx`
- [Search and filters](https://github.com/ericklimas/anime-website/blob/master/frontend/app/search/page.tsx): `frontend/app/search/page.tsx`
- [News feed](https://github.com/ericklimas/anime-website/blob/master/frontend/app/news/page.tsx): `frontend/app/news/page.tsx`

### Media consumption

- [Media details](https://github.com/ericklimas/anime-website/blob/master/frontend/app/media/%5Bid%5D/page.tsx): `frontend/app/media/[id]/page.tsx`
- [Episode playback](https://github.com/ericklimas/anime-website/blob/master/frontend/app/watch/%5Bid%5D/page.tsx): `frontend/app/watch/[id]/page.tsx`
- [Chapter reader](https://github.com/ericklimas/anime-website/blob/master/frontend/app/read/%5Bid%5D/page.tsx): `frontend/app/read/[id]/page.tsx`

### Accounts and progress

- [Login and settings](https://github.com/ericklimas/anime-website/blob/master/frontend/app/components/UserLoginModal/index.tsx): `frontend/app/components/UserLoginModal/index.tsx`
- [Favourites and lists](https://github.com/ericklimas/anime-website/blob/master/frontend/app/my-lists/page.tsx): `frontend/app/my-lists/page.tsx`
- [Viewing progress](https://github.com/ericklimas/anime-website/blob/master/frontend/app/components/Buttons/MarkEpisodeAsWatched/index.tsx): `frontend/app/components/Buttons/MarkEpisodeAsWatched/index.tsx`
- [Episode notifications](https://github.com/ericklimas/anime-website/blob/master/frontend/app/components/Buttons/AddToNotification/index.tsx): `frontend/app/components/Buttons/AddToNotification/index.tsx`

### Backend API

- [Express API server](https://github.com/ericklimas/anime-website/blob/master/backend/server.js): `backend/server.js`
- [Search routes](https://github.com/ericklimas/anime-website/blob/master/backend/routes/searchRoute.js): `backend/routes/searchRoute.js`
- [Search providers](https://github.com/ericklimas/anime-website/blob/master/backend/controllers/search/anilist/searchController.js): `backend/controllers/search/anilist/searchController.js`
- [Media catalog queries](https://github.com/ericklimas/anime-website/blob/master/backend/controllers/medias/anilist/mediasByParamsController.js): `backend/controllers/medias/anilist/mediasByParamsController.js`
- [Media information](https://github.com/ericklimas/anime-website/blob/master/backend/controllers/mediaInfo/anilist/mediaInfoController.js): `backend/controllers/mediaInfo/anilist/mediaInfoController.js`
- [Episode sources](https://github.com/ericklimas/anime-website/blob/master/backend/controllers/episodes/aniwatch/episodesController.js): `backend/controllers/episodes/aniwatch/episodesController.js`
- [Chapter sources](https://github.com/ericklimas/anime-website/blob/master/backend/controllers/chapters/consumet/mangadex/chaptersController.js): `backend/controllers/chapters/consumet/mangadex/chaptersController.js`
- [News routes](https://github.com/ericklimas/anime-website/blob/master/backend/routes/newsRoute.js): `backend/routes/newsRoute.js`
- [IMDb metadata](https://github.com/ericklimas/anime-website/blob/master/backend/controllers/imdb/consumet/imdbController.js): `backend/controllers/imdb/consumet/imdbController.js`
- [AniList query definitions](https://github.com/ericklimas/anime-website/blob/master/backend/controllers/anilistUtils/queryConstants.js): `backend/controllers/anilistUtils/queryConstants.js`
- [Query snippets](https://github.com/ericklimas/anime-website/blob/master/backend/controllers/anilistUtils/querySnippetsByCategory.js): `backend/controllers/anilistUtils/querySnippetsByCategory.js`

### External data and state

- [Redis cache](https://github.com/ericklimas/anime-website/blob/master/backend/controllers/redisUtils.js): `backend/controllers/redisUtils.js`
- **AniList API**
- **Consumet API**
- **Aniwatch API**
- [Firebase services](https://github.com/ericklimas/anime-website/blob/master/frontend/app/firebaseApp.ts): `frontend/app/firebaseApp.ts`

### Other components

- **Visitor**

## Connections

- Visitor → Home feed: opens (evidence: `README.md`)
- Visitor → Search and filters: searches (evidence: `README.md`)
- Visitor → News feed: browses (evidence: `README.md`)
- Visitor → Media details: selects title (evidence: `README.md`)
- Media details → Episode playback: opens episodes (evidence: `README.md`)
- Media details → Chapter reader: opens chapters (evidence: `README.md`)
- Visitor → Login and settings: signs in (evidence: `README.md`)
- Login and settings → Favourites and lists: manages titles (evidence: `README.md`)
- Login and settings → Viewing progress: tracks episodes (evidence: `README.md`)
- Login and settings → Episode notifications: opts into (evidence: `README.md`)
- Home feed → AniList API: requests media (evidence: `frontend/app/page.tsx`)
- Home feed → Express API server: uses API
- Search and filters → Express API server: uses API
- Episode playback → Express API server: uses API
- Chapter reader → Express API server: uses API
- Express API server → Search routes: mounts (evidence: `backend/server.js`)
- Express API server → News routes: mounts (evidence: `backend/server.js`)
- Search routes → Search providers: dispatches (evidence: `backend/routes/searchRoute.js`)
- Search providers → AniList API: queries (evidence: `backend/controllers/search/anilist/searchController.js`)
- Search providers → Redis cache: reads and writes (evidence: `backend/controllers/search/anilist/searchController.js`)
- Media catalog queries → AniList query definitions: builds query (evidence: `backend/controllers/medias/anilist/mediasByParamsController.js`)
- Media catalog queries → Redis cache: reads and writes (evidence: `backend/controllers/medias/anilist/mediasByParamsController.js`)
- Media catalog queries → AniList API: queries (evidence: `backend/controllers/medias/anilist/mediasByParamsController.js`)
- Media information → AniList query definitions: builds query (evidence: `backend/controllers/mediaInfo/anilist/mediaInfoController.js`)
- Media information → Redis cache: reads and writes (evidence: `backend/controllers/mediaInfo/anilist/mediaInfoController.js`)
- Media information → AniList API: queries (evidence: `backend/controllers/mediaInfo/anilist/mediaInfoController.js`)
- Episode sources → Aniwatch API: fetches episodes (evidence: `backend/controllers/episodes/aniwatch/episodesController.js`)
- Episode sources → Redis cache: reads and writes (evidence: `backend/controllers/episodes/aniwatch/episodesController.js`)
- Chapter sources → Consumet API: fetches chapters
- IMDb metadata → Consumet API: fetches metadata (evidence: `backend/controllers/imdb/consumet/imdbController.js`)
- Login and settings → Firebase services: authenticates (evidence: `README.md`)
- Favourites and lists → Firebase services: stores lists (evidence: `README.md`)
- Episode notifications → Firebase services: stores subscriptions (evidence: `README.md`)
- AniList query definitions → Query snippets: references (evidence: `backend/controllers/anilistUtils/queryConstants.js`)