neural.fy

Demonstration of my application working!

Project Overview:

Use Chrome browser to open the project!
SonarCloud

Getting started:

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

VS Code environment in your browser:

- Press . in your keyboard.

If you want to clone and test locally:

Clone the repository using SSH;
Via CLI Terminal, access the folder where you cloned the repository and type npm i in the terminal;
npm start.
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:

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

Search bar:

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

Albums/Favorites:

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

Menu bar:

Search;
Favorites;
Profile;
Favorites songs in place of playlists;
Pause favorite song if it is playing.

Interactive Friends Activity:

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

Interactive Player:

Leftside:

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

Center:

Shuffle/unshuffle;
Prev/next songs;
Play/pause songs;
Repeat current song;
Set the time on progress bar.

Rightside:

Github icon: redirects to my Github;
Linkedin icon: redirects to my Linkedin;
Paper icon: redirects to this current documentation.

Volume:

Mute/unmute;
Set the sound volume.

Profile:

Edit:
   - Name;
   - E-mail;
   - Picture(based in picture URL);
   - Description.
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 / neural.fy Goto Github PK

neural.fy's Introduction