dalerasrorov / componofy

A web app that allows Spotify users combine personal and public playlists together to either create a new one or merge selected playlist songs with an existing playlist. Also, you can reorder your personal playlist tracks with drag and drop and update playlist cover images..

componofy

A web app that allows a Spotify user to merge multiple (personal, private, and public) playlists into a new awesome playlist.

Demo

• Website: https://componofy.herokuapp.com/
• Video tutorial: Watch video
• ⭐ Give the project a star if you use or like the app - it helps a lot! ⭐

Features

• Reorder the tracks in your playlists just with drag and drop!

• Select all or specific tracks from the playlist to add to the queue

• Search and add public playlist tracks created by Spotify users around the world. You can search by genre, artist, song, mood, and other categories.

• Create a new playlist out of added personal and public playlist tracks. You can add a custom playlist cover image and set it as either private or public.

• Or... you can combine the added playlist tracks with one of your existing playlists. Now your playlist is updated with the brand new songs! This is the idea of merging different types of playlists into another playlist you own.

New Feature Details

• Each release has its own set of new features. You can find the details in the releases section
• You can also track the board of features I am working on in this project board

Contributions

PRs are always welcome! If there is a bug or a new feature that you can add to this app, I would appreciate it a lot! Read the contribution guide to have you up and running. If you find the guide confusing, create an issue or join chat.

Run project locally

To run the project on your local machine:

1. git clone https://github.com/DalerAsrorov/componofy.git
2. cd ./componofy
3. yarn install
4. In /componofy/src/utils/helpers.js replace DEV_SERVER_URL with HOST_URL.
5. Create an .env file with the following information:

APP_CLIENT_URL=http://localhost:3000
SPOTIFY_CLIENT=[your own spotify client key]
SPOTIFY_CLIENT_SECRET=[your own spotify client secret key]
SPOTIFY_REDIRECT_URI=http://localhost:3001/api/callback
YAR_PASS=[any set of characters (without quotes)]
DEV_MODE=true

6. yarn start:api in one terminal (window/tab)
7. yarn start:dev in another terminal (window/tab)
8. Go to localhost:3000 in your favorite browser

Note: you can get spotify client app and secret keys in Developer's website section

License

Apache License 2.0

componofy's Issues

Separate different types of reducers into their own files

Currently all reducers (2 so far) are in src/reducers/index.js file. What we need to do is to create one file for each reducer (such as user.js for the user state or myplaylists.js for user playlists state) in src/reducers directory, import them in reducers/index.js file and export it from that index file. This change should not impact the way reducers are imported from files that need any of the reducers included.

Prevent Settings menu to cause scroll removal

Look here: https://material-ui-next.com/demos/menus/#menulist-composition

Set up Mocha and write first unit tests for the server

Set up Mocha in the app and create first unit test that checks Spotify API authentication for example.

Transfer the getPlaylistTracks API call to redux as "tracks" property to MyPlaylists

Currently the state of the playlist tracks is not in the redux store. It's better if it's stored in the MyPlaylsits's playlist new property tracks.

Move Settings redux actions to the root playlists page

Needs to be done to make Settings component customizable.

Fix proptype bug

PropType bug:
bundle.js:141887 Warning: Failed prop type: The prop `myPlaylists.playlists[15].images[0].height` is marked as required in `MyPlaylists`, but its value is `null`. in MyPlaylists (created by withStyles(MyPlaylists)) in withStyles(MyPlaylists) (created by Route) in Route (created by withRouter(withStyles(MyPlaylists))) in withRouter(withStyles(MyPlaylists)) (created by Connect(withRouter(withStyles(MyPlaylists)))) in Connect(withRouter(withStyles(MyPlaylists))) (created by Route) in Route (at index.js:37) in div (created by Grid) in Grid (created by GridWrapper) in GridWrapper (created by withStyles(GridWrapper)) in withStyles(GridWrapper) (at index.js:36) in div (created by Grid) in Grid (created by GridWrapper) in GridWrapper (created by withStyles(GridWrapper)) in withStyles(GridWrapper) (at index.js:27) in Main (created by withStyles(Main)) in withStyles(Main) (at PrivateRoute.js:25) in Route (at PrivateRoute.js:22) in PrivateRoute (created by Route) in Route (created by withRouter(PrivateRoute)) in withRouter(PrivateRoute) (created by Connect(withRouter(PrivateRoute))) in Connect(withRouter(PrivateRoute)) (at App.js:27) in Switch (at App.js:25) in MuiThemeProvider (created by MuiThemeProviderWrapper) in MuiThemeProviderWrapper (at App.js:24) in App (at index.js:40) in Router (created by ConnectedRouter) in ConnectedRouter (at index.js:39) in Provider (at index.js:38)

Create propType for the redux state "user"

Create a separate PropType element for the global redux store object user.

Create a button that will help user scroll up fast

Create a button and a functionality that is active when the user scrolls below the playlist header. Should be disabled if the user is at the top of the playlist list.

Organize actions

Organize their actions into their own files just like reducers.

Create Track propType

Create propType for the track object structure given from the API.

Move dev stuff to devDependencies

Some of the modules like enzyme and redux-logger are not needed to run the app. Move those to devDependencies

Migrate app to the latest version of React libraries

• React
• Material UI
• React Waypoint

Add Preview Play button to the Track component

Use Material UI Icons and wrap a IconButton around it to create the component in components/Track..

Create shareable Form component

Create a shareable Form component that can be used for merging playlists with an existing playlist or merging playlists into a new one.

Add ability to merge playlists into another playlist

Allow the user to choose between:

• creating a new playlist out of the merged set of selected playlists
• add to the existing playlist the merged playlists set of songs

The option should be given when user clicks on Componofy. Make the Componofy button accept the CustomMenu component.

Set "load more" button to loading state on playlists fetch

To make sure that the user doesn't click "Load more" multiple times and causes multiple requests, we would need to set the status of the button to disabled when the redux store property of public playlists reducer is set to true.

isFetching == true ? disableLoadMore : enableLoadMore

Create a common prop called Playlist

Create a common prop called Playlist with shape of the formatted playlist. The passed object should have a formatted shape which will be done by the util function.

Improve loader and counter UI

Currently the counter is not properly styled. Also, if there is no items to load, then don't show the loader.

Separate session management into its own module

Separate code that deals with Yar session management, such as setting and getting session, into an individual module to make it make code more flexible and Yar module testable (Mocha for testing).

Set up Circle CI automation for tests

This should be done after we will finish setting up Jest and will write tests. This should run all types of tests (integration, unit, functional), and output the status of the build based on the result. We will add more steps on deployment to it once we get there as well.

Created a redux state for application errors

• Redux state that will contain a set of errors
• The set of errors will be passed from the redux state to the application UI as Snackbar components.
• Position: bottom left.
• If there are multiple errors, follow queue data structure.

Create authentication actions for Redux store

• Create new state called isAuthenticated (type: Boolean, defaultValue: False)
• Create new action for that state SET_AS_AUTHENTICATED that will be used in MyPlaylists component's componentDidMount lifecycle method. In this method, make an api call to /auth route in the server that returns back a status whether the user is authenticated.

Create log out route in server

Create a log out route in server.js:

• Path: /logout
• Type: GET
• Clears session
• Gives date the user was last signed in

Add ability to switch themes

Possible solutions:

• Added theme to redux store and change based on user's choice

Set up Jest testing framework

Set up jest for unit testing React components. Here is useful link to get started.

Connect Redux component tree to react redux router

Use this https://github.com/reactjs/react-router-redux react plugin for connecting routes to redux store.

Upgrade dependencies dev and etc

The Material-UI library is currently out of date, so are other important packages. Should be upgraded and new badge that indicates that the libraries are up-to-date should be added to README.

Make application configurable for Heroku app

Add configurations that would allow remote host to be able to render everything properly along with NodeJS server as a SPA.

Add and complete CONTRIBUTING guide

Some stuff was already added in 1c3ce67 CONTRIBUTING.md, needs more information on how to add new actions, reducers, props, and endpoints in the API.

Implement Track component

When a user clicks on a playlist, it should show the list of tracks that belongs to that playlist.

Track component:

• Contains a check mark on the left
  • If checkmark is checked, the track should be added to the final list
  • If checkmark is unchecked, the track should be removed from the final list
• Contains a ButtonContainer component to the right that
  • Contains preview button if preview_url passed from the API has a value
  • Contains view page button that points to the track's page
• Contains an Info component on the left that shows:
  • Image (track/album/artist cover)
  • Track name
  • Artist name
  • Album name

Create end-to-end flow for getting track API data

This is needed when to fetch the tracks when the user clicks on a playlist.

Create a sketch for Track component

Track component is a major component of the app and needs a good planning/design, so will make design before implementing the component.

Create onToggle event that opens up Playlist's tracks

Create a new toggle event that is triggered when the user clicks on a playlist.

Add MIT License

Create a "collapse" feature and add it to Options button in Toolbar

This feature will close the expanded tracks of all playlists in the page where the "Options" is at.

Create getTrack() endpoint

Create an endpoint for a specific track for more information about it /api/track/:id. In the future, the plan is to have set of requests placed in the redux store.

Allow user to upload more than 100 tracks

If user adds more than 100 tracks, recursive calls to Spotify API should be made since it accepts 100 tracks per request to add tracks.

Create cookie isAuthenticated in server

Create isAuthenticated key with boolean added to cookie or session variable.

Change footer to Toolbar component and place existing options there

The footer as a button is not a great idea. Footer needs to be a set of components each of which makes a specific action.

Add an option to the playlist to search same category playlists

In Playlist component, add a new action/reducer/ability to search for playlists of the same category in /public route. The endpoint that will help one achieve this API method would be used:

http://michaelthelin.se/spotify-web-api-node/#getPlaylistsForCategory

Create a PropType object for the Redux global state

Create global state for user, myPlaylists, and router.

Make "load more" button occupy less space in Flex

Currently the button occupies too much space in mobile devices.

Connect Tabs component to Redux routes

Make Tabs component items use Redux push method to point to different routes of the app.

Create scrolling pagination

Create a scroll-like pagination for each playlist.

When user clicks on load more, scroll to bottom

When the user clicks on load more button, scroll to the bottom of the page.

Create Playlist component

Create Playlist component

• Accordion-like component that contains list of Track components
• Should have a check mark to the left.
  • If this check mark is selected, then mark all the Track components inside of it. That means that all tracks should be included in the final merged list of tracks.
• Track component contains control such as add/remove/preview/etc.

Show Chip component if the track is popular

If track is popular (i.e., popularity > 0.90), then show Popular chip tag below the track and artist info.

https://material-ui-next.com/demos/chips/

Add number of remaining playlists within in the list

In the load more button, add a small number tag (surrounded by the circle or something, maybe fab button from Material UI) that displays the number of playlists from the list of playlists has not been shown yet.

Create an endpoint for uploading playlist image cover

The new endpoint for uploading playlist cover images was announced. Create an endpoint and a redux action to upload an image.