https://github.com/aydenjahola/spotify-stats
Spotify Stats is a privacy-focused web app that lets users explore their Spotify listening habits, including top artists, tracks, and genres. Built with Next.js, and Tailwind CSS, it offers secure authentication via NextAuth.js and integrates Plausible analytics for privacy-conscious tracking.
https://github.com/aydenjahola/spotify-stats
music-analytics nextauth nextjs privacy spotify spotify-stats web-app
Last synced: 2 months ago
JSON representation
Spotify Stats is a privacy-focused web app that lets users explore their Spotify listening habits, including top artists, tracks, and genres. Built with Next.js, and Tailwind CSS, it offers secure authentication via NextAuth.js and integrates Plausible analytics for privacy-conscious tracking.
- Host: GitHub
- URL: https://github.com/aydenjahola/spotify-stats
- Owner: aydenjahola
- License: agpl-3.0
- Created: 2024-12-14T04:19:58.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-25T10:05:58.000Z (over 1 year ago)
- Last Synced: 2025-04-08T12:48:18.646Z (about 1 year ago)
- Topics: music-analytics, nextauth, nextjs, privacy, spotify, spotify-stats, web-app
- Language: TypeScript
- Homepage: https://spotify-stats.aydenjahola.com
- Size: 746 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Spotify Stats Web App
## Overview
Spotify Stats is a modern web application that lets users explore their Spotify listening habits, including top artists, tracks, and genres, as well as recent tracks. The application prioritizes user privacy and provides comprehensive insights without subscriptions or hidden fees.
## Features
- **User Authentication:** Secure Spotify login using NextAuth.js.
- **Dashboard Insights:** View top artists, tracks, genres, and recent plays.
- **Time Range Filter:** Choose data ranges from 4 weeks, 6 months, or all-time.
- **Responsive Design:** Seamlessly works on all devices.
- **Analytics Integration:** Self-hosted Plausible analytics for privacy-focused tracking.
## Tech Stack
- **Frontend:** React.js, Next.js
- **Authentication:** NextAuth.js
- **Analytics:** Plausible
- **Styling:** Tailwind CSS
- **Fonts:** Google Fonts (Geist, Geist Mono)
## Project Structure
```
├── app
│ ├── page.tsx # Home Page (Hero and Features sections)
│ ├── layout.tsx # Global layout with metadata, fonts, navbar, and footer
│ ├── dashboard.tsx # User dashboard showing Spotify stats
│ └── globals.css # Global styles
├── components
│ ├── Auth
│ │ └── SessionProviderWrapper.tsx
│ ├── Dashboard
│ │ ├── UserInfo.tsx
│ │ ├── SpotifyInfo.tsx
│ │ ├── SignOutButton.tsx
│ │ └── SpotifyError.tsx
│ ├── Home
│ │ ├── HeroSection.tsx
│ │ └── FeaturesSection.tsx
│ ├── Navbar.tsx
│ └── Footer.tsx
```
## Getting Started
### Prerequisites
- Node.js (version 14 or later)
- Spotify Developer Account
### Installation
1. **Clone the Repository:**
```bash
git clone git@github.com:aydenjahola/spotify-stats.git
cd spotify-stats
```
2. **Install Dependencies:**
```bash
npm install
```
3. **Set Environment Variables:**
Create a `.env.local` file and add:
```env
SPOTIFY_CLIENT_ID=your_spotify_client_id
SPOTIFY_CLIENT_SECRET=your_spotify_client_secret
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your_secret
```
4. **Run the Development Server:**
```bash
npm run dev
```
Visit `http://localhost:3000` in your browser.
## License
This project is licensed under the AGPL-3.0 License.
## Contributing
Contributions are welcome! Please open issues and pull requests to collaborate.
## Acknowledgements
- Spotify API
- Next.js
- Tailwind CSS
- Plausible Analytics
---
Made with ❤️ by [Ayden](https://github.com/aydenjahola/spotify-stats)