neural.fy

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 ©