Skip to content

Spotify Clone UI + Functionalities - Based in React and mostly in Class Components with Redux to manage Store and avoid prop drilling.

Notifications You must be signed in to change notification settings

reisblucas/neural.fy

Repository files navigation

neural.fy

Demonstration of my application working!

Project Overview:

  • Use Chrome browser to open the project!
  • SonarCloud

Getting started:

  1. Access neural.fy;
  2. Type your name or at least three characters in Login and Password;
  3. Type the artist name in Search field;
  4. Discover my application.

VS Code environment in your browser:

 - Press . in your keyboard.

If you want to clone and test locally:

  1. Clone the repository using SSH;
  2. Via CLI Terminal, access the folder where you cloned the repository and type npm i in the terminal;
  3. npm start.
  4. Open your browser with localhost:3000 as URL!

Built with:

 - ReactJS;
 - React Redux;
 - react-icons;
 - Pure CSS and Globally.

Main features:

Spotify® logo or Search button in leftside bar:

  1. By clicking in logo, you'll be redirected to the search page(/search) with the last search.

Search bar:

  1. Search albums using the artist name;
  2. Artist exists?
       Yes → Return results in page.
       No → Return 'No results found for "your input search".'
  3. Result will be rendered in the screen.

Albums/Favorites:

  1. Play and stop songs;
  2. Favorite and disfavor songs;
  3. Filter by title name, album name, duration time and reset filter(#);
  4. User profile picture beside of Album picture.

Menu bar:

  1. Search;
  2. Favorites;
  3. Profile;
  4. Favorites songs in place of playlists;
  5. Pause favorite song if it is playing.

Interactive Friends Activity:

  1. Play/pause in friends picture;
  2. Songs name: redirect to the album song;
  3. Artist name: show albums of the artist.

Interactive Player:

Leftside:

  1. Album picture redirects to the album page;
  2. Artist name too;
  3. Song name: redirect to the album song;
  4. Favorite/unfavorite songs.

Center:

  1. Shuffle/unshuffle;
  2. Prev/next songs;
  3. Play/pause songs;
  4. Repeat current song;
  5. Set the time on progress bar.

Rightside:

  1. Github icon: redirects to my Github;
  2. Linkedin icon: redirects to my Linkedin;
  3. Paper icon: redirects to this current documentation.
   Volume:
  1. Mute/unmute;
  2. Set the sound volume.

Profile:

  1. Edit:
       - Name;
       - E-mail;
       - Picture(based in picture URL);
       - Description.
  2. After changing the profile info, it will be modified globally.

App demonstration

iPhone:
iPad Air and Pro:

Known Bugs:

  • Delay when favorite button is clicked inside Album(promise in usersAPI is a main cause);
  • When is on the last song in that collection and 30s is fullfiled, next song is the second in that collection.

Project story:

In the beginning of the project, I want to make a Spotify clone and the required project was to make only some functionalities like favorite/unfavorite, with some restrictions about apresentation to the client, consume data from api and show in the page using React Life-Cycle. So talking about the aesthetic side, it's a free choice and I want to go beyond and recreate the same design and functionalities of the Spotify app with Friends Activity and Player.

Goals:
  • [20/20] - Remove the max of code smells until date 05/18. (Fullfilled 05/19)
Skills:

  - Make requisitions and consume data provided by iTunes API;
  - Use React Component Life-Cycle;
  - Control states;
  - Use route control with BrowserRouter;
  - Create routes and map the correct path;
  - Make persistent components to be showed in screen with Switch;
  - React-Redux to store in global storage;
  - Integration between app without Redux and implement Redux.

Challenges:

  - Make persistent components in Desktop, optimize for Mobile and Tablet Screens;
  - Begin integration with Redux, because when I started the project I hadn't the knowledge about Redux or Context API;
  - UI Alignment in Album filters with listed songs in Album and Favorite routes, because they use the same component;
  - Progress bar/volume bar, very difficult and it's not 100% optmized(CSS Optimization for Chrome only);
  - Remove keyboard from screen;
  - I didn't found a way to make a function to Zoom Out after trigger Input in mobile screens, so I used minimum requirements for some Browsers to not trigger;
  - CORS errors and was the last thing I solved.

Files provided by Trybe:

  src/services/
      ↳ favoriteSongsAPI.js
      ↳ getSongsAPI.js
      ↳ userAPI.js

Change logs:

  - Redirects to folder: ./changelogs in this repo.


Project started on the day 14/02/2022 while student at Trybe and optimized in my spare time!

🚀💚

reisblucas ©