Final Submission: Randy Agudelo, René Borner, Caitlin Enright, Elie Hess

.gitignore

@@ -0,0 +1,63 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# next.js build output
+.next
+
+.idea

Proposal.md

@@ -0,0 +1,3 @@
+Randy Agudelo, René Borner, Caitlin Enright, Elie Hess final project proposal:
+
+For our final project, we will create a music-based social media application based on sharing music with others. Our website will have a global “feed” (similar to most social media sites), which will allow users to view songs recommended by others, listen to those songs, and recommend songs to the global community. Additionally, users will be able to rate songs from 1 to 5, and each song will display its average rating along with other information about the song. Finally, we will integrate with Spotify to play songs on the site. While a song is playing, the background of the site will display a simple audio visualization of the currently playing song.

README.md

@@ -1,51 +1,61 @@
-# cs4241-FinalProject
-
-For your final project, you'll implement a course project that exhibits your mastery of the course materials. 
-Similar to A4, this project gives you an opportunity to be creative and to pursue individual research and learning.
-
-## General description
-
-Your project should consist of a complete Web application, exhibiting facets of the three main sections of the course material:
-
-- Static Web page content and design. You should have a project that is accessible, easily navigable, and features significant content.
-- Dynamic behavior implemented with JavaScript.
-- Server-side programming *using Node.js*. Typically this will take the form of some sort of persistent data, authentication, and possibly server-side computation.
-
-Additionally, you should incorporate features that you independently research, design, and implement for your project.
-
-## Project ideation
-
-Excellent projects serve someone/some group; for this assignment you need to define your users and stakeholders. I encourage you to identify projects that will have impact, either artistically, politically, or in terms of productivity. Consider creating something useful for a cause or hobby you care about.
-
-## Logistics
-
-### Team size
-Students are encouraged to work in teams of 2-5 students for the project. This will allow you to build a good project without expending an excessive amount of effort. While I would expect a team of four or five students to produce a project with more features, I expect a every team's work to exhibit all of the required facets described above.
-
-### Deliverables
-
-__Proposal:__ 
-Provide an outline of your project direction and the names of the team members. 
-The outline should have enough detail so that staff can determine if it meets the minimum expectations, or if it goes too far to be reasonable by the deadline.
-This file must be named proposal.md so we can find it.
-Submit a PR to turn it in by Monday, September 30th, before class
-
-There are no other scheduled checkpoints for your project. 
-You must be done in time to present before the final project demo day (October 10th). 
-
-#### Turning in Your Outline / Project
-
-**NOTE: code is due before the project presentation day due to the end of term / grading schedule constraints**
-Submit a second PR on the final project repo to turn in your app and code.
-
-Deploy your app, in the form of a webpage, to Glitch/Heroku/Digital Ocean or some other service.
-Folks on the same team do not need to post the same webpage, but must instead clearly state who is on the team in their proposal.
-(Staff will use the proposal to build the grading sheet.)
-
-## Final Presentation
-
-Presentations will occur during the final day of class.
-
-## FAQs
-
-- **Can I use XYZ framework?** You can use any web-based frameworks or tools available, but for your server programming you need to use node.js.
+# cs4241-FinalProject - Music App
+Team Members: Randy Agudelo, René Borner, Caitlin Enright, Elie Hess
+
+## 1. A brief description of what you created, and a link to the project itself.
+
+Glitch: https://cs4241-best-group-fp-7.glitch.me/ <br>
+Youtube video: https://youtu.be/rDX6Nd-vVTE <br>
+
+We created a song recomendation sharing applications. Each user has their own account. When they sign in they see a feed of all song recomendations made. Song recomendations include the user who made it, the song name and artist, a comment about the song and a rating from 0-5 stars. Users can also add their on rating to the feed by used the bar on the left side of the page. They can search for any song on spotify using the seach bar and add their comment and rating. There is a song player at the top of the feed that allows the currently playing song to be paused or played. It also displays the album cover. When the song is playing there is a 3d vsualization in the background of the app that is in time with the current song. The album cover also spins like a record player. Any of the songs in the feed can be selected and then become the currently playing song. This allows users to hear the songs that they are reading recomentdations about.
+
+## 2. Any additional instructions that might be needed to fully use your project (login information etc.)
+In order to see the animation and hear the songs playing, you need to authorize a spotify premium account. 
+
+
+## 3. An outline of the technologies you used and how you used them.
+- Spotify API’s: we used these API’s to allow the songs to be played through the app. It also let the user search for a certain track using the name. Information given by the api about the track’s beats and tempo helped to create the visualization in the background.
+- Bootstrap: we used this for all of the layout and styling of the page to give the app a more cohesive look
+- Three.js: This was used to create the 3-d background. The visual moves along with the beats of the currently playing song
+- MongoDB: This was used for the database which stores the user login information as well as all of the recommendations (maybe write about password hashing & salting with bcrypt)
+- jQuery: JQuery was used to help with onclick functionality and passing data
+
+## 4. What challenges you faced in completing the project.
+The spotify api does not return an mp3 file so making the 3d visualizations based off of numerical data was difficult
+We had problems working with the spotify Web API because of the authorization process and the many possible routes etc
+Certain bootstrap elements had preset values that were confusing to understand and difficult to work around.
+
+## 5. What each group member was responsible for designing / developing.
+
+Caitlin Enright:
+- Created basic homepage layout
+- Worked on search functionality and interactable table
+- Created recommendation form
+- Made UI changes about color, layout, spacing
+- Helped set spotify player to current track
+- Play/Pause button changes
+
+Elie Hess
+- Created main recommendation feed
+- Made client-side functions to add and retrieve recommendations to/from MongoDB
+- Created the current star rating system
+- Tweaked UI to look cleaner
+- Worked on code cleanup, optimization
+- Managed Git repo
+
+Randy Agudelo:
+- Registered Spotify application to be able to work with the premium Spotify users
+- Initialized the server 
+- Worked on the server and backend to authorize the user through Spotify to gain access to their account
+- Created different paths on the server to get specific Spotify Info
+- Created an audio visualizer in the background 
+- Helped with some of the error handling 
+
+René Borner:
+- MongoDB setup with authentification and recommendation functionality and backend routes
+- Backend and frontend connection for different functionalities like getting the spotify token in the frontend
+- Round and turning song cover image
+- Worked on spotify player with track number
+- Worked on search functionality
+- Worked on star rating
+
+