Wax Staxx

Welcome to Wax Staxx! - A React app that provides information about various albums, allowing users to track and showcase their personal collection.

View it Live

Frontend // Backend

Features

• Browse the main Collection of albums.
• Search and filter albums by artist or title.
• Sort albums by artist or title in alphabetical order
• Add new albums to the Collection and your Staxx at the same time using the form.
• An option to remove an album from your Staxx but not from the Collection.
• View album details by clicking on the album itself.

Structure

• App Root component
• AlbumProvider Provides context data to share with child routes
• Library Default view, shows the main Collection
• SearchBar and SortButtons component for searching and filtering albums.
• Form Allows users to add an album
• SingleAlbumDetails Displays a single album along with details by matching to the album's assigned database id /album/:id

Additional

• Nav Navigation component, appears in the header of all pages to allow easy navigation
• ErrorPage and ErrorAlertsProvider Provide context, manages alerts and popups to inform user of successful actions or prompting a different action. Custom hook.
• Footer Links and credits to app authors
• helpers utility file holding different functional helpers
• routes Routing structure defining pairs of routes and the component to display when called

Getting Up and Running

1. Clone this repository
2. Install dependencies: npm install
3. npm run server will start the server on http://localhost:4000/records
4. npm run start stars the frontend on http://localhost:5173/
5. • http://localhost:5173/ is fetching from http://localhost:4000/records which is required to run the application

Tech

• Vite
• React
• React-Router-Dom
• Scss
• Formik
• Yup
• UUID v4

Authors

⚡Waxx Staxx was built with 💖 by 👨‍🎤 Vinny Revard, 👩‍🎤 Xen Contreras, and 👩‍🎤 Peggy Wang for educational purposes as part of Flatiron School's Software Engineering bootcamp.⚡

License

MIT

---

Wax Staxx - MVP

Pages

• Library
  • (MVP 1. Display all albums (Lib) - GET) - pw
  • (MVP 1.5 Click - add to collection ) - pw
• MyStaxx
  • (MVP 2. view My Collection - POST & GET)
  • (MVP 4. Remove from My Collection ONLY (not allowed to remove from Lib) - PATCH) - pw
• Form
  • (MVP 3. Add new album to library & My Collection (Form) - POST) - vr

Components

• Card - called by library and mystaxx, component to hold basic info about each album - pw
• Nav - links to: Home, mystaxx, Form, called in App - xen
• Search - called in LibraryContainer - xen

Other

• LibraryProvider --- figure out how this works
• ErrorPage - vr
• libraryLoader - understand this and use it if appropriate - rm
• load logo and favicon
• Writeup and clean up readme
• finish styling

Stretch / Roadmap

• Search by Artist
• Improve search functionality, include more than just Artist
• individual album view - xen
• make icon clickable '/'
• Edit Album info - PATCH only to Lib (allowing for mutations of albums specific to user)
• Validation on album addition form to check for incoming duplicates
• When editing Album, edits the MyCollection at the same time (lib is always source of truth)
• light mode