Deployed app ======> GroovnMusic.
[
What is GroovnMusic?
GroovnMusic is a re-imagined music app that allows users to create a personalized playlist solely recommended for them, based on songs they like.
- Ability for the user to generate a recommended playlist based by "Liked" songs
- Personalized playlists
- User-friendly, ease of navigation
- Millions of songs to explore
Why did you choose this framework?
- We decided to utilize React and React Hooks library because of the power it can provide to our product. Utilizing the Hooks concpt by neglecting the use of writing a class was time-saving.
- Deviding to use React Context was a simple and smart decision by our team mainly because of it being a big part of the React library. It gave us the ability to pass data through a component with ease. A great way to stream line writing code.
Back end built using:
- Apollo GraphQL - writing queries, combining APIs and databases
- Node.js - JS runtime environent
- Express - web framework for Node.js
- MongoDB - database
- Mongoose - query building and schema
We decided to use the Spotify API mainly for build time and production. We wanted our users to have the ability to create a playlist and play their music. By using Spotify's API, it's based on REST principles and the endpoints return JSON metadata about music artists, albums, and tracks, directly from the Spotify Data Catalogue. It also provides access to user related data, like playlists and music that the user saves in their music library.
class SpotifyAPI extends RESTDataSource { constructor() { super(); this.baseURL = 'https://api.spotify.com/v1/me'; }
async getSavedTracks(token) { return await this.get('tracks', null, { headers: { Authorization: 'Bearer ' + token, }, }); } }
export default SpotifyAPI;
We used the Context API solely-based on using the React library. Utilizing Context, it creates an object for us. Once React renders a componentk that subscribes to a Context object, it will read the context value closest to the matching Provider above in the tree.
export default function App() { return (
DEV_DATABASE_URL=‘mongodb://localhost:27017/groovn’ - app database SPOTIFY_CLIENT_ID=‘abe6bf42ad914ede9a28b1c8db260cb8’ - Spotify user ID SPOTIFY_CLIENT_SECRET=‘891af5d42954449f9c9660b6f11dfa3b’ - key used for Spotify users logging in and out SESSION_SECRET=‘d%wP3p&uQ&8&%TzZh@uzf!y#J%*!WR4X’ - key used for signing and/or encrypting cookies set by our app PORT=‘4000’ - port used for our app NODE_ENV = ‘Development’ - development environment
| Image/License(s) Filename | Source / Creator | License |
|---|---|---|
| Spotify API | Team | Spotify API |
Testing of this application was very important and crucial for the overall success of the app and its functionality.
Each developer did a series of tests on both front-end and back-end to ensure the overall functionality was working. The following tests were completed throughout the build:
- user authentication
- routes
- database
- queries created
- playlist creation
- recommendation engine
- recommended playlist
- component functionality
In addition, all pull requests were reviewed by one or more team members, and merges were supervised by our project manager.
The application for the most part was set up to continuously deploy to Netlify and Heroku.
Environment Variables
DEV_DATABASE_URL=‘mongodb://localhost:27017/groovn’ - app database SPOTIFY_CLIENT_ID=‘abe6bf42ad914ede9a28b1c8db260cb8’ - Spotify user ID SPOTIFY_CLIENT_SECRET=‘891af5d42954449f9c9660b6f11dfa3b’ - key used for Spotify users logging in and out SESSION_SECRET=‘d%wP3p&uQ&8&%TzZh@uzf!y#J%*!WR4X’ - key used for signing and/or encrypting cookies set by our app PORT=‘4000’ - port used for our app NODE_ENV = ‘Development’ - development environment
- Please see Passport.js Spotify strategy for additional variable http://www.passportjs.org/packages/passport-spotify/
[build] base = "groovin-music/" publish = "build/" command = "yarn build" [[redirects]] from = "/*" to = "/index.html" status = 200
Using the application
Requirements:
- Node
- Package Manager (such as Yarn or npm)
- Yarn was used to build this project. Have Node? Have Yarn or npm? Follow these steps:
Fork and clone repo
Add an .env file to both client and server sides at the root of the folder (same level as the package.json file).
Add environmental variables for both the frontend and the backend.
Open terminal and cd into the server folder and run yarn install to install the necessary node_modules on the backend.
cd into the client folder and run yarn install to install the necessary node_modules on the frontend.
Run yarn start on the client folder to run the frontend on localhost:3000
Run yarn start on the server folder to run the backend on localhost:4000
Your application is now running and can be tested locally.
Spotify Account creation
In order to use the application, the user needs to have a Spotify account (free or premium). If the user does not have an account, follow these steps:
- Go to www.spotify.com
- Click on "Sign In" from top-right corner of website
- Fill out all required fields
- Click "Sign Up"
When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owners of this repository before making a change.
Please note we have a code of conduct. Please follow it in all your interactions with the project.
If you are having an issue with the existing project code, please submit a bug report under the following guidelines:
- Check first to see if your issue has already been reported.
- Check to see if the issue has recently been fixed by attempting to reproduce the issue using the latest master branch in the repository.
- Create a live example of the problem.
- Submit a detailed bug report including your environment & browser, steps to reproduce the issue, actual and expected outcomes, where you believe the issue is originating from, and any potential solutions you have considered.
We would love to hear from you about new features which would improve this app and further the aims of our project. Please provide as much detail and information as possible to show us why you think your new feature should be implemented.
If you have developed a patch, bug fix, or new feature that would improve this app, please submit a pull request. It is best to communicate your ideas with the developers first before investing a great deal of time into a pull request to ensure that it will mesh smoothly with the project.
Remember that this project is licensed under the MIT license, and by submitting a pull request, you agree that your work will be, too.
- Ensure any install or build dependencies are removed before the end of the layer when doing a build.
- Update the README.md with details of changes to the interface, including new plist variables, exposed ports, useful file locations and container parameters.
- Ensure that your code conforms to our existing code conventions and test coverage.
- Include the relevant issue number, if applicable.
- You may merge the Pull Request in once you have the sign-off of two other developers, or if you do not have permission to do that, you may request the second reviewer to merge it for you.
These contribution guidelines have been adapted from this good-Contributing.md-template.
See [Backend Documentation](🚫_link to your backend readme here_) for details on the backend of our project.