# brianharoldbernardo-lang/song-recommendation-system architecture

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

- Interactive diagram: https://gitdiagram.com/brianharoldbernardo-lang/song-recommendation-system
- Repository: https://github.com/brianharoldbernardo-lang/song-recommendation-system

## Overview

This repository is a music-sharing social application: users can register and log in, browse a feed, search songs, users, and playlists, and view profiles. The sampled frontend establishes routing and authentication state; the backend tree separates accounts, posts, songs, playlists, feed, and search into Django apps. Search currently displays in-component sample data. Backend wiring and the implementations of most pages and services were not sampled, so uncertain API relationships are omitted.

Main entry points: [`frontend/src/App.jsx`](https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/frontend/src/App.jsx) (App router), [`frontend/src/pages/SearchPage.jsx`](https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/frontend/src/pages/SearchPage.jsx) (Search page), [`frontend/src/context/AuthContext.jsx`](https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/frontend/src/context/AuthContext.jsx) (Auth state), [`frontend/src/services/api.js`](https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/frontend/src/services/api.js) (API client)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Frontend"]
  node_app["App router<br/>[App.jsx]"]
  node_auth_context["Auth state<br/>[AuthContext.jsx]"]
  node_api_client["API client<br/>[api.js]"]
  node_auth_service["Auth requests<br/>[auth.js]"]
  node_feed_page["Feed page<br/>[FeedPage.jsx]"]
  node_search_page["Search page<br/>[SearchPage.jsx]"]
  node_profile_page["Profile page<br/>[ProfilePage.jsx]"]
  node_login_page["Login page<br/>[LoginPage.jsx]"]
  node_register_page["Register page<br/>[RegisterPage.jsx]"]
  node_song_card["Song card<br/>[SongCard.jsx]"]
  node_post_form["Post form<br/>[PostForm.jsx]"]
  node_navbar["Navigation<br/>[Navbar.jsx]"]
end

subgraph group_identity["Accounts"]
  node_accounts_views["Account endpoints<br/>[views.py]"]
  node_accounts_data[("Account data<br/>[models.py]")]
end

subgraph group_sharing["Music sharing"]
  node_posts_views["Post endpoints<br/>[views.py]"]
  node_posts_data[("Post data<br/>[models.py]")]
  node_songs_views["Song endpoints<br/>[views.py]"]
  node_songs_data[("Song data<br/>[models.py]")]
  node_playlists_views["Playlist endpoints<br/>[views.py]"]
  node_playlists_data[("Playlist data<br/>[models.py]")]
end

subgraph group_discovery["Discovery"]
  node_feed_views["Feed endpoints<br/>[views.py]"]
  node_feed_data[("Feed data<br/>[models.py]")]
  node_search_views["Search endpoints<br/>[views.py]"]
  node_search_data[("Search data<br/>[models.py]")]
end

node_browser(("User browser"))

node_browser -->|"opens"| node_app
node_app -->|"routes to"| node_feed_page
node_app -->|"routes to"| node_search_page
node_app -->|"routes to"| node_profile_page
node_app -->|"routes to"| node_login_page
node_app -->|"routes to"| node_register_page
node_app -->|"renders"| node_navbar
node_search_page -->|"renders"| node_song_card
node_auth_context -->|"requests profile"| node_api_client

click node_app "https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/frontend/src/App.jsx"
click node_auth_context "https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/frontend/src/context/AuthContext.jsx"
click node_api_client "https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/frontend/src/services/api.js"
click node_auth_service "https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/frontend/src/services/auth.js"
click node_feed_page "https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/frontend/src/pages/FeedPage.jsx"
click node_search_page "https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/frontend/src/pages/SearchPage.jsx"
click node_profile_page "https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/frontend/src/pages/ProfilePage.jsx"
click node_login_page "https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/frontend/src/pages/LoginPage.jsx"
click node_register_page "https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/frontend/src/pages/RegisterPage.jsx"
click node_song_card "https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/frontend/src/components/SongCard.jsx"
click node_post_form "https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/frontend/src/components/PostForm.jsx"
click node_navbar "https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/frontend/src/components/Navbar.jsx"
click node_accounts_views "https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/backend/apps/accounts/views.py"
click node_accounts_data "https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/backend/apps/accounts/models.py"
click node_posts_views "https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/backend/apps/posts/views.py"
click node_posts_data "https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/backend/apps/posts/models.py"
click node_songs_views "https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/backend/apps/songs/views.py"
click node_songs_data "https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/backend/apps/songs/models.py"
click node_playlists_views "https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/backend/apps/playlists/views.py"
click node_playlists_data "https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/backend/apps/playlists/models.py"
click node_feed_views "https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/backend/apps/feed/views.py"
click node_feed_data "https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/backend/apps/feed/models.py"
click node_search_views "https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/backend/apps/search/views.py"
click node_search_data "https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/backend/apps/search/models.py"

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_auth_context,node_api_client,node_auth_service,node_feed_page,node_search_page,node_profile_page,node_login_page,node_register_page,node_song_card,node_post_form,node_navbar,node_browser toneBlue
class node_accounts_views,node_accounts_data toneAmber
class node_posts_views,node_posts_data,node_songs_views,node_songs_data,node_playlists_views,node_playlists_data toneMint
class node_feed_views,node_feed_data,node_search_views,node_search_data toneRose
```

## Components

### Frontend

- [App router](https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Auth state](https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/frontend/src/context/AuthContext.jsx): `frontend/src/context/AuthContext.jsx`
- [API client](https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/frontend/src/services/api.js): `frontend/src/services/api.js`
- [Auth requests](https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/frontend/src/services/auth.js): `frontend/src/services/auth.js`
- [Feed page](https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/frontend/src/pages/FeedPage.jsx): `frontend/src/pages/FeedPage.jsx`
- [Search page](https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/frontend/src/pages/SearchPage.jsx): `frontend/src/pages/SearchPage.jsx`
- [Profile page](https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/frontend/src/pages/ProfilePage.jsx): `frontend/src/pages/ProfilePage.jsx`
- [Login page](https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/frontend/src/pages/LoginPage.jsx): `frontend/src/pages/LoginPage.jsx`
- [Register page](https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/frontend/src/pages/RegisterPage.jsx): `frontend/src/pages/RegisterPage.jsx`
- [Song card](https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/frontend/src/components/SongCard.jsx): `frontend/src/components/SongCard.jsx`
- [Post form](https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/frontend/src/components/PostForm.jsx): `frontend/src/components/PostForm.jsx`
- [Navigation](https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/frontend/src/components/Navbar.jsx): `frontend/src/components/Navbar.jsx`

### Accounts

- [Account endpoints](https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/backend/apps/accounts/views.py): `backend/apps/accounts/views.py`
- [Account data](https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/backend/apps/accounts/models.py): `backend/apps/accounts/models.py`

### Music sharing

- [Post endpoints](https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/backend/apps/posts/views.py): `backend/apps/posts/views.py`
- [Post data](https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/backend/apps/posts/models.py): `backend/apps/posts/models.py`
- [Song endpoints](https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/backend/apps/songs/views.py): `backend/apps/songs/views.py`
- [Song data](https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/backend/apps/songs/models.py): `backend/apps/songs/models.py`
- [Playlist endpoints](https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/backend/apps/playlists/views.py): `backend/apps/playlists/views.py`
- [Playlist data](https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/backend/apps/playlists/models.py): `backend/apps/playlists/models.py`

### Discovery

- [Feed endpoints](https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/backend/apps/feed/views.py): `backend/apps/feed/views.py`
- [Feed data](https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/backend/apps/feed/models.py): `backend/apps/feed/models.py`
- [Search endpoints](https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/backend/apps/search/views.py): `backend/apps/search/views.py`
- [Search data](https://github.com/brianharoldbernardo-lang/song-recommendation-system/blob/master/backend/apps/search/models.py): `backend/apps/search/models.py`

### Other components

- **User browser**

## Connections

- User browser → App router: opens
- App router → Feed page: routes to
- App router → Search page: routes to
- App router → Profile page: routes to
- App router → Login page: routes to
- App router → Register page: routes to
- App router → Navigation: renders
- Search page → Song card: renders
- Auth state → API client: requests profile