https://github.com/addreeh/astrotrackerfy
🎵 Trackerfy - A modern web app built with Astro.build that analyzes your Spotify playlists and visualizes artist distribution using smooth view transitions.
https://github.com/addreeh/astrotrackerfy
astro javascript spotify spotify-api tailwindcss typescript view-transitions
Last synced: 3 months ago
JSON representation
🎵 Trackerfy - A modern web app built with Astro.build that analyzes your Spotify playlists and visualizes artist distribution using smooth view transitions.
- Host: GitHub
- URL: https://github.com/addreeh/astrotrackerfy
- Owner: addreeh
- Created: 2024-10-16T10:54:13.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-11-25T11:36:49.000Z (6 months ago)
- Last Synced: 2024-11-25T12:29:23.827Z (6 months ago)
- Topics: astro, javascript, spotify, spotify-api, tailwindcss, typescript, view-transitions
- Language: Astro
- Homepage: https://trackerfy.vercel.app
- Size: 979 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🎵 Trackerfy
A web application that connects with Spotify's API to analyze your playlists and show the percentage distribution of songs by artist. Built with modern web technologies for a smooth user experience.
## Features
- Spotify API integration to fetch playlist data
- Percentage breakdown of artists in your playlists
- Beautiful transitions between views using View Transitions API
- Modern and responsive design
- Built with Astro.build for optimal performance
## Tech Stack
- Astro.build
- Spotify Web API
- View Transitions API
- TypeScript
- Tailwind CSS
## Installation
1. Clone this repository
```bash
git clone https://github.com/addreeh/ASTROtrackerfy
```
2. Install dependencies
```bash
npm install
```
3. Create a `.env` file with your Spotify API credentials:
```env
SPOTIFY_CLIENT_ID=your_client_id
SPOTIFY_CLIENT_SECRET=your_client_secret
```
4. Run the development server
```bash
npm run dev
```
## Usage
1. Log in with your Spotify account
2. Select a playlist from your library
3. View the detailed breakdown of artists in your playlist
4. Enjoy the smooth transitions between views!
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## License
This project is licensed under the MIT License - see the LICENSE file for details.