Clone of the popular audio streaming site (Frontend only).
Live Project
·
Page about project
Table of Contents
The goal of this project was to create Spotify web player, with all the key views, working both on mobile and desktop devices. Although this application does not use any API, it was designed to be able to handle them. All data fetched to the application comes from JSON files, which simulates the API response.
Before writing the React code, ten reference images were taken, each with diffrent view. All the colors used were taken from official Spotify app. I tried to create this app with Pixel-Perfect precision, based only on reference images. There may be a few diffrences here and there, esspecially on mobile view, mainly due to the font type. Spotify uses a paid font, so this app uses a simillar one.
One of the biggest diffrence is that official web app does not have seamless transition to mobile view, but instead detects what type of device user is using and renders a diffrent views and components accordingly, so for example if user is on desktop device and changes the browser width to less than 768px, the page will no longer shrink anymore and overflow-x will be shown. My version has this seamless transition, but the drawback is that it looks diffrent on mobile devices than the official app, the only components that my app renders conditionally depending on device type are Playbar and Navbar. A final diffrence is that the mobile version of Spotify's web player does not allow user to visit their library page, my implementation does not have that limitation.
This project contains only frontend side of Spotify's web player, and was build with React.js, Styled Components and TypeScript. It also uses two libraries - Fast-Average-Color and React-Icons.
Before running this application node and npm is needed.
- npm
npm install npm@latest -g
To run this application you need to clone the repo, install npm packages and install TypeScript.
- Clone the repo
git clone https://github.com/LeCarteloo/SpotifyClone.git
- Install NPM packages
npm install
- If you do not have TypeScript installed, do it by running
npm install -g typescript
- Application can be run by typing
npm start
- LinkedIn - @filip-papiernik
- Email - [email protected]