# ryannpy/my-anime architecture

> Architecture diagram of the GitHub repository ryannpy/my-anime, 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/ryannpy/my-anime
- Repository: https://github.com/ryannpy/my-anime

## Overview

MyAnime is a personal, authenticated anime collection tracker. Users register or sign in, then add, edit, review, rate, genre-tag and poster animes; protected views present the collection as dashboard, history, analytics and rating leaderboard. The sampled code shows route protection, authentication and collection CRUD/storage ownership; README documents the broader view capabilities. Page-level wiring is not sampled, so links from routes to data and analytics are limited to what source or README supports.

Main entry points: [`src/App.jsx`](https://github.com/ryannpy/my-anime/blob/main/src/App.jsx) (Route App), [`src/services/animeServices.js`](https://github.com/ryannpy/my-anime/blob/main/src/services/animeServices.js) (Anime Service), [`src/services/supabase.js`](https://github.com/ryannpy/my-anime/blob/main/src/services/supabase.js) (Supabase Client), [`src/services/authServices.js`](https://github.com/ryannpy/my-anime/blob/main/src/services/authServices.js) (Auth Service)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_access["Access & Navigation"]
  node_app["Route App<br/>[App.jsx]"]
  node_authpage["Sign In / Register<br/>[Auth.jsx]"]
  node_guard["Route Guard<br/>[ProtectedRoute.jsx]"]
  node_sidebar["Account Navigation<br/>[Sidebar.jsx]"]
end

subgraph group_collection["Collection Management"]
  node_addedit["Add / Edit Anime<br/>[AddAnime.jsx]"]
  node_detail["Anime Detail &amp; Delete<br/>[AnimeModal.jsx]"]
end

subgraph group_insights["Collection Views"]
  node_dashboard["Dashboard<br/>[Dashboard.jsx]"]
  node_animelist["Anime Collection<br/>[AnimeList.jsx]"]
  node_history["Watch History<br/>[History.jsx]"]
  node_analytics["Viewing Analytics<br/>[Analytics.jsx]"]
  node_leaderboard["Rating Leaderboard<br/>[Leaderboard.jsx]"]
  node_statistics["Statistics Helpers<br/>[statistics.js]"]
end

subgraph group_backend["Supabase Services"]
  node_genres["Genre Service<br/>[genreServices.js]"]
  node_animesvc["Anime Service<br/>[animeServices.js]"]
  node_authsvc["Auth Service<br/>[authServices.js]"]
  node_supabase["Supabase Client<br/>[supabase.js]"]
end

node_visitor(("Visitor"))
node_authprovider["Supabase Auth"]
node_db[("Anime &amp; Genre Data")]
node_storage[("Poster Storage")]

node_visitor -->|"opens app"| node_app
node_app -->|"routes to"| node_authpage
node_app -->|"checks access"| node_guard
node_app -->|"routes to"| node_dashboard
node_app -->|"routes to"| node_animelist
node_app -->|"routes to"| node_history
node_app -->|"routes to"| node_analytics
node_app -->|"routes to"| node_leaderboard
node_authpage -->|"signs in/up"| node_authsvc
node_guard -->|"checks user"| node_authsvc
node_sidebar -->|"loads user / signs out"| node_authsvc
node_authsvc -->|"uses client"| node_supabase
node_supabase -->|"auth requests"| node_authprovider
node_addedit -->|"gets current user"| node_authsvc
node_addedit -->|"loads genres"| node_genres
node_addedit -->|"reads / writes entries"| node_animesvc
node_detail -->|"deletes entry"| node_animesvc
node_animesvc -->|"uses client"| node_supabase
node_genres -->|"uses client"| node_supabase
node_supabase -->|"queries records"| node_db
node_supabase -->|"uploads / removes posters"| node_storage
node_analytics -->|"calculates metrics"| node_statistics
node_dashboard -.->|"calculates summaries"| node_statistics
node_dashboard -.->|"loads collection"| node_animesvc
node_history -.->|"loads collection"| node_animesvc
node_leaderboard -.->|"loads ranked entries"| node_animesvc
node_animelist -.->|"loads collection"| node_animesvc

click node_app "https://github.com/ryannpy/my-anime/blob/main/src/App.jsx"
click node_authpage "https://github.com/ryannpy/my-anime/blob/main/src/pages/Auth.jsx"
click node_guard "https://github.com/ryannpy/my-anime/blob/main/src/components/protection/ProtectedRoute.jsx"
click node_sidebar "https://github.com/ryannpy/my-anime/blob/main/src/components/Sidebar.jsx"
click node_dashboard "https://github.com/ryannpy/my-anime/blob/main/src/pages/Dashboard.jsx"
click node_animelist "https://github.com/ryannpy/my-anime/blob/main/src/pages/AnimeList.jsx"
click node_history "https://github.com/ryannpy/my-anime/blob/main/src/pages/History.jsx"
click node_analytics "https://github.com/ryannpy/my-anime/blob/main/src/pages/Analytics.jsx"
click node_leaderboard "https://github.com/ryannpy/my-anime/blob/main/src/pages/Leaderboard.jsx"
click node_statistics "https://github.com/ryannpy/my-anime/blob/main/src/utils/statistics.js"
click node_addedit "https://github.com/ryannpy/my-anime/blob/main/src/features/AddAnime.jsx"
click node_detail "https://github.com/ryannpy/my-anime/blob/main/src/components/element/AnimeModal.jsx"
click node_genres "https://github.com/ryannpy/my-anime/blob/main/src/services/genreServices.js"
click node_animesvc "https://github.com/ryannpy/my-anime/blob/main/src/services/animeServices.js"
click node_authsvc "https://github.com/ryannpy/my-anime/blob/main/src/services/authServices.js"
click node_supabase "https://github.com/ryannpy/my-anime/blob/main/src/services/supabase.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_authpage,node_guard,node_sidebar toneBlue
class node_addedit,node_detail,node_db,node_storage toneAmber
class node_dashboard,node_animelist,node_history,node_analytics,node_leaderboard,node_statistics toneMint
class node_genres,node_animesvc,node_authsvc,node_supabase toneRose
class node_visitor,node_authprovider toneIndigo
```

## Components

### Access & Navigation

- [Route App](https://github.com/ryannpy/my-anime/blob/main/src/App.jsx): `src/App.jsx`
- [Sign In / Register](https://github.com/ryannpy/my-anime/blob/main/src/pages/Auth.jsx): `src/pages/Auth.jsx`
- [Route Guard](https://github.com/ryannpy/my-anime/blob/main/src/components/protection/ProtectedRoute.jsx): `src/components/protection/ProtectedRoute.jsx`
- [Account Navigation](https://github.com/ryannpy/my-anime/blob/main/src/components/Sidebar.jsx): `src/components/Sidebar.jsx`

### Collection Management

- [Add / Edit Anime](https://github.com/ryannpy/my-anime/blob/main/src/features/AddAnime.jsx): `src/features/AddAnime.jsx`
- [Anime Detail & Delete](https://github.com/ryannpy/my-anime/blob/main/src/components/element/AnimeModal.jsx): `src/components/element/AnimeModal.jsx`

### Collection Views

- [Dashboard](https://github.com/ryannpy/my-anime/blob/main/src/pages/Dashboard.jsx): `src/pages/Dashboard.jsx`
- [Anime Collection](https://github.com/ryannpy/my-anime/blob/main/src/pages/AnimeList.jsx): `src/pages/AnimeList.jsx`
- [Watch History](https://github.com/ryannpy/my-anime/blob/main/src/pages/History.jsx): `src/pages/History.jsx`
- [Viewing Analytics](https://github.com/ryannpy/my-anime/blob/main/src/pages/Analytics.jsx): `src/pages/Analytics.jsx`
- [Rating Leaderboard](https://github.com/ryannpy/my-anime/blob/main/src/pages/Leaderboard.jsx): `src/pages/Leaderboard.jsx`
- [Statistics Helpers](https://github.com/ryannpy/my-anime/blob/main/src/utils/statistics.js): `src/utils/statistics.js`

### Supabase Services

- [Genre Service](https://github.com/ryannpy/my-anime/blob/main/src/services/genreServices.js): `src/services/genreServices.js`
- [Anime Service](https://github.com/ryannpy/my-anime/blob/main/src/services/animeServices.js): `src/services/animeServices.js`
- [Auth Service](https://github.com/ryannpy/my-anime/blob/main/src/services/authServices.js): `src/services/authServices.js`
- [Supabase Client](https://github.com/ryannpy/my-anime/blob/main/src/services/supabase.js): `src/services/supabase.js`

### Other components

- **Visitor**
- **Supabase Auth**
- **Anime & Genre Data**
- **Poster Storage**

## Connections

- Visitor → Route App: opens app
- Route App → Sign In / Register: routes to
- Route App → Route Guard: checks access
- Route App → Dashboard: routes to
- Route App → Anime Collection: routes to
- Route App → Watch History: routes to
- Route App → Viewing Analytics: routes to
- Route App → Rating Leaderboard: routes to
- Sign In / Register → Auth Service: signs in/up
- Route Guard → Auth Service: checks user
- Account Navigation → Auth Service: loads user / signs out
- Auth Service → Supabase Client: uses client
- Supabase Client → Supabase Auth: auth requests
- Add / Edit Anime → Auth Service: gets current user
- Add / Edit Anime → Genre Service: loads genres
- Add / Edit Anime → Anime Service: reads / writes entries
- Anime Detail & Delete → Anime Service: deletes entry
- Anime Service → Supabase Client: uses client
- Genre Service → Supabase Client: uses client
- Supabase Client → Anime & Genre Data: queries records
- Supabase Client → Poster Storage: uploads / removes posters
- Viewing Analytics → Statistics Helpers: calculates metrics
- Dashboard → Statistics Helpers: calculates summaries
- Dashboard → Anime Service: loads collection
- Watch History → Anime Service: loads collection
- Rating Leaderboard → Anime Service: loads ranked entries
- Anime Collection → Anime Service: loads collection