Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/blairmcalpine/tracklist
List a Spotify artist's songs in a simple, easy to view order.
https://github.com/blairmcalpine/tracklist
next-auth nextjs react spotify spotify-api spotify-web-api t3-stack tailwind tailwindcss trpc typescript
Last synced: 3 months ago
JSON representation
List a Spotify artist's songs in a simple, easy to view order.
- Host: GitHub
- URL: https://github.com/blairmcalpine/tracklist
- Owner: blairmcalpine
- Created: 2023-07-12T01:45:36.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-08-12T03:34:56.000Z (about 1 year ago)
- Last Synced: 2024-05-23T00:38:12.688Z (6 months ago)
- Topics: next-auth, nextjs, react, spotify, spotify-api, spotify-web-api, t3-stack, tailwind, tailwindcss, trpc, typescript
- Language: TypeScript
- Homepage: https://tracklistbeta.vercel.app
- Size: 296 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- project-awesome - blairmcalpine/tracklist - List a Spotify artist's songs in a simple, easy to view order. (TypeScript)
README
# TrackList
This is a [T3 Stack](https://create.t3.gg/) project that leverages the [Spotify Web API](https://developer.spotify.com/). TrackList aims to provide Spotify users enhanced information about their Spotify profile and various Spotify artists.
## Features
- View your top artists and tracks
- Search for artists
- View a list of all of an artist's songs
- Sort an artist's songs by popularity, name, or release date
- View an album's tracklist
## The Stack
TrackList uses the following technologies:
- [Next.js](https://nextjs.org)
- [NextAuth.js](https://next-auth.js.org)
- [Tailwind CSS](https://tailwindcss.com)
- [tRPC](https://trpc.io)
## Local Deployment
To deploy a version of TrackList for yourself, create a [Spotify application](https://developer.spotify.com/dashboard/create) and add the application client ID and client secret to a `.env` file. You will also need NEXTAUTH_URL AND NEXTAUTH_SECRET environment variables. Your `.env` file should look like this:
```bash
SPOTIFY_CLIENT_ID=your-client-id
SPOTIFY_CLIENT_SECRET=your-client-secret
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-secret
```
Then, run the following commands:
```bash
npm install
npm run dev
```
Visiting [http://localhost:3000](http://localhost:3000) will show you the TrackList homepage.