Skip to content

franciscocoya/spotify_clone

Repository files navigation

License: MIT Quality Gate Status Security Rating Vulnerabilities Maintainability Rating

banner_spotify_clone

Spotify web player currently developed under React Framework. This streamming platform allows you to listen all music in the world and it also has lots of engineering behind it.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

External libraries using for this project

  • Recoil JS: For state management. Very simple to use.
  • Heroicons. An icon library compatible with NextJS. By creators of Tailwind CSS framework.
  • Firebase. To store the songs with their Cloud storage functionallity
  • Prisma. An NodeJS ORM.

Features

Song player

One of the most important parts of the application. It has implemented as aesthetic and identical as posible.

image

Autocomplete text input for music genres

This component reads all music genres from a JSON file using the getStaticProps (NextJS) function. To increase usability, a suggestion counter and a delete button have been created. The design is our own.

Autocomplete music genres text input

image

Responsive Design

To improve user experience, player and volume control are fully responsive. The next snapshot shows the artist page on tablet devices.

App on tablet devices


The original design and logo are the property of Spotify. The project is for personal and academic purposes only. © 2023 Spotify AB