{"id":24839786,"url":"https://github.com/tenal/my-spotify-profile","last_synced_at":"2026-04-13T20:02:17.904Z","repository":{"id":272791724,"uuid":"917731170","full_name":"Tenal/my-spotify-profile","owner":"Tenal","description":"A web app modeled after Spotify's profile interface for viewing your Spotify data. Built using Next.js 15, TypeScript, Tailwind CSS, shadcn/ui, OAuth \u0026 the Spotify API.","archived":false,"fork":false,"pushed_at":"2025-03-12T17:26:21.000Z","size":510,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-26T05:13:24.428Z","etag":null,"topics":["nextjs15","oauth","shadcn-ui","spotify-api","tailwind-css","typescript","vercel"],"latest_commit_sha":null,"homepage":"https://myspotifyprofile.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Tenal.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-16T14:44:56.000Z","updated_at":"2025-03-12T17:26:25.000Z","dependencies_parsed_at":null,"dependency_job_id":"770d9abb-d343-4a00-adf4-b7b6242a3c76","html_url":"https://github.com/Tenal/my-spotify-profile","commit_stats":null,"previous_names":["tenal/my-spotify-profile"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Tenal/my-spotify-profile","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tenal%2Fmy-spotify-profile","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tenal%2Fmy-spotify-profile/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tenal%2Fmy-spotify-profile/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tenal%2Fmy-spotify-profile/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Tenal","download_url":"https://codeload.github.com/Tenal/my-spotify-profile/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tenal%2Fmy-spotify-profile/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31768649,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T15:25:13.801Z","status":"ssl_error","status_checked_at":"2026-04-13T15:25:09.162Z","response_time":93,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nextjs15","oauth","shadcn-ui","spotify-api","tailwind-css","typescript","vercel"],"created_at":"2025-01-31T06:49:11.697Z","updated_at":"2026-04-13T20:02:17.889Z","avatar_url":"https://github.com/Tenal.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# My Spotify Profile\n\nA web application, modeled after Spotify's profile interface, for visualizing your spotify data. It uses Next.js v15+ (App Router), TypeScript, Tailwind CSS, and shadcn/ui. OAuth and data fetching are handled through the Spotify Web API.\n\n\nDesktop View                                                                              | Mobile View\n:----------------------------------------------------------------------------------------:|:-----------------------------------------------------------------------------------------:\n![image](https://github.com/user-attachments/assets/d0c4714a-6d02-4407-9e1e-a60a1761d70c) | ![image](https://github.com/user-attachments/assets/45756e41-7d45-45e9-b299-09d28c42d87d)\n![image](https://github.com/user-attachments/assets/cbf8bcb3-ac5f-4934-b33d-239bac8e0534) | ![image](https://github.com/user-attachments/assets/c2f91603-a823-4534-8fba-0849143dfcab)\n![image](https://github.com/user-attachments/assets/12a2ddce-9f74-41b0-8a28-e8d505fb0dec) | ![image](https://github.com/user-attachments/assets/4248c4db-9f68-4850-960e-86d270aa8cc2)\n![image](https://github.com/user-attachments/assets/addeb6dd-3c27-4e24-8b4f-0d1c88c6be2a) | ![image](https://github.com/user-attachments/assets/4067f4b1-9674-478a-93eb-583165fae3df)\n\n\n\n## Table of Contents\n\n-   [Overview](#overview)\n-   [Project Structure](#project-structure)\n-   [Architecture](#architecture)\n    -   [Application Structure](#application-structure)\n    -   [Auth/Fetching Flow](#authfetching-flow)\n    -   [Styling Strategy](#styling-strategy)\n-   [Environment Variables](#environment-variables)\n-   [Installation \u0026 Setup](#installation--setup)\n-   [Scripts](#scripts)\n-   [Dependencies](#dependencies)\n-   [Future Plans](#future-plans)\n-   [License](#license)\n\n## Overview\n\nMy Spotify Profile is a Next.js application that displays a user’s top artists, top tracks, recently played tracks, playlists, and other profile-related data using the Spotify Web API. It authenticates via OAuth, stores tokens in HTTP-only cookies, and renders user data via React Server/Client Components.\n\nFeatures currently include:\n\n-   Login / Logout via Spotify OAuth\n-   Top artists with time-range filtering (e.g., All Time, 6 Months, 4 Weeks) \u0026 drill-down artist info (followers, popularity score, etc)\n-   Top tracks with time-range filtering (e.g., All Time, 6 Months, 4 Weeks) \u0026 drill-down track info (artists, popularity score, etc)\n-   Recently played tracks\n-   Public playlists followed \u0026 drill-down playlist info (individual tracks, owner, etc)\n-   Minimal theming with Tailwind + shadcn/ui components\n\n## Project Structure\n\n```\nmy-spotify-profile\n├── app/\n│   ├── api/\n│   │   └── auth/\n│   │       ├── login/route.ts       # auth login route\n│   │       ├── callback/route.ts    # OAuth callback route\n│   │       ├── refresh/route.ts     # refresh token route (in development)\n│   │       └── logout/route.ts      # logout route\n│   ├── (various pages)              # home (root page.tsx), artists, tracks, recent \u0026 playlists\n│   ├── layout.tsx                   # root layout\n│   ├── globals.css                  # global Tailwind styles\n│   ├── components/                  # icons, shadcn/ui components, reusable UI components\n│   └── lib/                         # constants, spotify fetch \u0026 token functions, utility functions, TS interfaces\n├── public/                          # static files, fonts, \u0026 favicons\n├── .env files                       # environment variables (.local \u0026 .production)\n├── (various configs)                # config files for tailwind, TS, next, eslint, etc\n└── README.md\n```\n\n## Architecture\n\n#### Application Structure\n\n-   Next.js (App Router) for server + client rendering\n-   TypeScript for type-safe development\n-   Spotify OAuth flow via custom /api/auth/login and /api/auth/callback routes\n-   Server Components for SSR data loading, Client Components for interactive parts (modals, user click handlers, etc)\n-   Cookies (HTTP-only) for storing tokens\n-   Tailwind CSS + shadcn/ui for styling and UI components\n\n#### Auth/Fetching Flow\n\n-   user clicks login \u0026 is redirected to Spotify OAuth page\n-   on success, Spotify calls /api/auth/callback?code={x}\n-   access + refresh tokens are stored in HTTP-only cookies\n-   root layout \u0026 pages read cookies\n    -   if none, show login\n    -   if exists, call various endpoints\n-   on logout (via token expiry or logout click), cookies removed via /api/auth/logout\n-   root layout sees no token → skips data calls \u0026 shows login page\n\n#### Styling Strategy\n\n-   shadcn/ui for prebuilt UI components (cards, tooltips, etc)\n-   tailwind CSS for body/component/utility classes and quick custom styles\n\n## Environment Variables\n\nTo run this app, you'll need .env.local \u0026 .env.production files with the following values:\n\n```\nSPOTIFY_CLIENT_ID=\u003cYOUR_SPOTIFY_CLIENT_ID\u003e\nSPOTIFY_CLIENT_SECRET=\u003cYOUR_SPOTIFY_CLIENT_SECRET\u003e\nSPOTIFY_REDIRECT_URI=\u003cYOUR_APP_URL\u003e/api/auth/callback\nNEXT_PUBLIC_SITE_URL=\u003cYOUR_APP_URL\u003e\n```\n\nRequired:\n\n-   SPOTIFY_CLIENT_ID: Found in your Spotify Developer Dashboard\n-   SPOTIFY_CLIENT_SECRET: Secret key for your Spotify app\n-   SPOTIFY_REDIRECT_URI: Must match the callback route (e.g., http://localhost:3000/api/auth/callback)\n-   NEXT_PUBLIC_SITE_URL: Base URL for your Next.js site (local or production)\n\n## Installation \u0026 Setup\n\n1. Clone the repository:\n\n```\ngit clone https://github.com/YourUser/spotify-profile.git\ncd spotify-profile\n```\n\n2. Install dependencies:\n\n```\nnpm install\n```\n\n3. Configure environment variables:\n\n```\nSPOTIFY_CLIENT_ID=xxxxx\nSPOTIFY_CLIENT_SECRET=xxxxx\nSPOTIFY_REDIRECT_URI=xxxxx/api/auth/callback\nNEXT_PUBLIC_SITE_URL=xxxxx\n```\n\n4. Start the development server (local site usually runs at http://localhost:3000):\n\n```\nnpm run dev\n```\n\n## Scripts\n\n| Script | Description                                            |\n| ------ | ------------------------------------------------------ |\n| dev    | runs the dev server with hot reloading `(npm run dev)` |\n| build  | builds the production-ready Next.js app                |\n| start  | starts the production server after building            |\n| lint   | runs ESLint over the codebase                          |\n\n## Dependencies\n\nCore\n\n-   Next.js (App Router)\n-   TypeScript\n-   Tailwind CSS\n-   shadcn/ui\n-   Spotify Web API (via custom fetch logic)\n\nAdditional\n\n-   ESLint for code linting\n-   Prettier (optional formatting)\n\n## Future Plans\n\n-   add testing coverage\n-   refine token management and add token refresh flow\n-   add expansions for user follow lists, user’s saved albums, etc\n-   add ability to play songs in-app\n\n## License\n\nThis project is public\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftenal%2Fmy-spotify-profile","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftenal%2Fmy-spotify-profile","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftenal%2Fmy-spotify-profile/lists"}