https://github.com/sanyamjain04/topify

Topify built with NextJS and TypeScript
https://github.com/sanyamjain04/topify

music-player nextjs player react spotify spotify-clone tailwindcss typescript

Last synced: about 1 year ago
JSON representation

Topify built with NextJS and TypeScript

• Host: GitHub
• URL: https://github.com/sanyamjain04/topify
• Owner: sanyamjain04
• Created: 2022-10-30T10:45:36.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-02-10T08:34:18.000Z (over 3 years ago)
• Last Synced: 2025-04-15T19:48:12.981Z (about 1 year ago)
• Topics: music-player, nextjs, player, react, spotify, spotify-clone, tailwindcss, typescript
• Language: TypeScript
• Homepage: https://sanyamtopify.vercel.app/
• Size: 832 KB
• Stars: 37
• Watchers: 1
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
Contents 

1. [Features](#features)

1. [TechStack](#techstack)

1. [ScreenShots](#screenshots)

## Features

1. LRU cache : Implemented LRU cache, which will cache the last 25 played tracks and save it in new recently played playlist.

1. Drag and Drop Playlist : User can change the tracks order in the playlist.

1. Have liked functionality, it will create a new playlist called liked playlist and saved it there. 

1. Audio Player: Can play/pause, mute, control seekbar, next play , previous play , shuffle playlist and repeat playlist.

1. Search Songs : Search songs 

1. Shortcut keys : Functionlities like play (space), mute (m), next song (l), previous song(j) can be accessible by keyboard keys also.

## TechStack

- NextJs, TypeScript, Tailwind, Shazam Core Api 

## ScreenShots 

#### Mobile 

|HomePage| Explore | Player | Liked |  History    |

|--------|-------------|-----------|-----------|---------|

|![sanyam-spotify netlify app_](https://user-images.githubusercontent.com/107163858/201981124-d153d50c-664d-403b-95c7-cf059183082d.png)|![sanyam-spotify netlify app_ (1)](https://user-images.githubusercontent.com/107163858/201979826-8a372816-5bec-4c65-a13a-d057a7a7b824.png)|![sanyam-spotify netlify app_ (2)](https://user-images.githubusercontent.com/107163858/201979841-6b1836e4-4baf-4af9-a87c-107b0ea86d83.png)|![sanyam-spotify netlify app_ (3)](https://user-images.githubusercontent.com/107163858/201979849-f285c209-fc52-412d-a330-6ccc56471afe.png)|![sanyam-spotify netlify app_ (4)](https://user-images.githubusercontent.com/107163858/201979853-d6adac26-940e-4eb0-9ee7-e5365e894ac9.png)|

#### Desktop

##### HomePage

![image](https://user-images.githubusercontent.com/107163858/201981632-5326604a-bd15-4dd7-8dbd-0dff83df83f2.png)

##### Explore Page

![image](https://user-images.githubusercontent.com/107163858/201981777-a15a7cd1-c65a-43ae-b1b9-a930210db4c3.png)

##### Player page (with Drag and Drop feature to reorder playlist)

![image](https://user-images.githubusercontent.com/107163858/201981954-34f75959-632e-4b56-a5be-2f0babed368a.png)

##### Liked Playlist

![image](https://user-images.githubusercontent.com/107163858/201982040-d4e38a6f-4db1-40fd-9ddc-e80f362edf5b.png)

##### History Page

![image](https://user-images.githubusercontent.com/107163858/201982121-5b2238f4-b936-47e9-8d74-a8354cc78852.png)