Setlift - view deployed site

Voyage into a band's history and get updated as they grow using this setlist-generating app that consumes the phantasy tour API. You may take a look at a tour and choose a show and have a setlist generated. If you see a song you like, explore it further for details and performances. You keep an active tab of your favorite songs so you can stay in the loop with your favorite artist's performances or reminisce about a past musical and friendship experience.

Installation:

In your terminal:

1. git clone this repository's http, then cd into the project directory.
2. run: npm install
3. run: npm start
4. Open http://localhost:3000 to view it in the browser.

Operation:

You will be directed to a song category window for a band. You may choose your band at any time in the footer. This navigation window also features a list updating search bar. If you enter a song not included in the catalog, the list will refresh. Search by:

1. Song - Dashboard main display. Options for cover songs, originals, all, or just your favorite songs.
2. Tour - Footer link that shows every time a band hit the road! Link to shows and songs played on that tour
3. Specific Show - Jump right into the shows to see all shows in order. (currently Limited to 100, try tours for older shows)
4. Press the Setlift icon at the upper left to get back to your song category choice window

Tech utilized:

• Node
• React Router and hooks
• Cypress for testing
• Express

Future Extensions:

1. Image Component for dynamic image rendering for top twenty bands.
2. Setlist submission to group for sharing / user comparison and collection

Learning goals and project evolution:

   I was committed to learning express at some point and this project gave me the initiative to build an express module based on my learnings. Reading through the materials and documents regarding services was eye-opening and got me excited about joining the backend for my next two projects. The goal was to use Express and bypass CORS authorization before any work could be done to build out a framework to utilize the API. It is evident that the more practice I can get in this area will greatly improve my understanding of networking.

   During the project, utilizing the many new skills I learned in mod3 was the impetus and I got some great practice in , as was revealed to myself by my comfort level in coding in React. The goal in this project was making a dashboard that looked inviting and operated simply but elegantly, unlike the API's host webUrl I took a deeper dive into Sass styling to control scrolling correctly and utilize svg's by destructuring a React Component created from the file.

Contributor Links

Chuck Morris Github

SilkyShots Artwork by Sam Silkworth

Music & Merch