Vinyl Viewer

Deployed Project

Abstract

Vinyl Viewer is a TypeScript/React application designed to emulate the record-collecting experience. A user can search for an artist, browse an artist's albums, and view information on each album. Users can then select an album to see more details and choose to save it to their virtual "collection." From the user's collection view, albums can be viewed, filtered by artist or album name, or removed from the collection. The project also includes a Cypress acceptance test suite.

For this project, our fully-remote team of four was tasked with self-teaching and using TypeScript to collaborate on a React application in one week. After coming up with a concept and finding Last.fm's Music Discovery API, we designed the component architecture and UI wireframe by implementing user stories. One of the main experiences we focused on was virtually recreating the feeling of flipping through records at a record store.

Project Goals and Objectives

• To create a polished React application that is intuitive and professional.
• To learn and implement TypeScript, React-Router v6, and React Hooks.
• Link to full project spec here

Wins & Challenges

• Self-taught and implemented TypeScript into a modern React web application—from planning to deployment—in one week
• Self-taught and implemented React Hooks and React Router v6
• Leveraged SCSS to implement a cohesive application UI

Contributors

• Josh Pierce
• Sam Rice
• Brett Kuhn
• Zac Walters

Preview

Tech Used

• TypeScript
• React
• React Router
• HTML6
• Sass/SCSS
• Cypress
• RESTful API
• Postman

Project Install

• Clone this repo to your machine.
• In the root directory of the project, run npm install on the command line.
• To start the server, run npm start.
• To run the test suite, run npm run cypress on the command line, and select e2e in Google Chrome when prompted by Cypress.