Selector (Front-End)

1. Overview
2. Team
3. Planning Resources
4. Set Up
5. Learning Goals
6. Technologies
7. Features
8. Challenges
9. Wins
10. Future Additions

Site Link

https://turing-selector.herokuapp.com/

Overview:

Selector is a web application that seamlessly connects your Discogs vinyl purchasing experience with the convenient streaming capabilities of Spotify. Users can discover, browse, save, and sample their (soon-to-be) favorite music. This Cypress-tested, multi-page user-interface was built using React, React Router, JavaScript, HTML, CSS, and ApolloClient; integrated using Travis CI and depolyed on Heroku.

Created by:

FE Team:

• Marika Shanahan | LinkedIn
• Max Bregman | LinkedIn
• Reggie Thompson | LinkedIn

BE Team: View the BE repo here

• Megan Gonzales | LinkedIn
• Adam J. Bowers | LinkedIn
• Jordan Beck | LinkedIn

Planning Resources

• GitHub Project Board
• wireframe

Setup Instructions

Clone down this repository to your local machine:

git clone git@github.com:selector-turing/front_end.git

Then npm install the following dependencies:

@material-ui/core

@material-ui/icons

@material-ui/lab

To start application, run:

npm start

After a successful compilation, the application is running and the app can be veiwed at http://localhost:3000/ in your browser.

Learning Goals

• Demonstrate knowledge you’ve gained throughout Turing
• Use an agile process to turn well defined requirements into deployed and production ready software
• Gain experience dividing applications into components and domains of responsibilities to facilitate multi-developer teams. Service oriented architecture concepts and patterns are highly encouraged.
• Explore and implement new concepts, patterns, or libraries that have not been explicitly taught while at Turing
• Practice an advanced, professional git workflow using Git Rebase
• Gain experience using continuous integration tools to build and automate the deployment of features
• Build applications that execute in development, test, CI, and production environments
• Focus on communication between front-end and back-end teams in order to complete and deploy features that have been outlined by the project spec

Technologies

With GraphQL & ApolloClient

---

Features

Application Demo

Search By Album and Favorites

Search By Artist

Link To Discogs

---

Challenges

• Familiarizing ourselves with the relationship between GraphQL and ApolloClient
• Failed builds with Travis CI caused by API request delimiting
• Adapting to the Git Rebase workflow
• State and UI synchronization with regards to the application's favoriting feature
• Disrupted flow of work caused by network request limitations from the source Discogs API
• Album objects without unique title matches yields unexpected results

---

Wins

• Successfully submitting requests to ApolloClient
• Overcoming failing Travis CI builds

---

Future Iterations

• A user can add favorite albums to a non-local database.
• A user can display all of their favorite albums in alignment with the non-local database.
• Utilizing the non-local database to keep GSM throughout the cache
• Additional media types to consume music (YouTube, Shazam, SoundCloud, a ticket selling API for live concerts)

How to Contribute

In the spirit of collaboration, things done together are better than done on our own. If you have any amazing ideas or contributions on how we can improve this API they are greatly appreciated. To contribute:

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Roadmap

See the open issues for a list of proposed features (and known issues). Please open an issue ticket if you see an existing error or bug.