Stacks

A comprehensive vinyl record marketplace application built with React (React Router, Swiper) and Auth0 authentication, supported by an Express/Knex/PostgreSQL backend and deployed with Vercel.

Table of Contents

• Introduction
• Preview
• Features
• Installation
• Usage
• Wins
• Challenges
• Contributing
• License
• Contact

Introduction

Welcome to Stacks! This application allows users to browse, listen to, add to, and keep a digital collection of vinyl records. It provides a user-friendly interface and a robust back-end to ensure a seamless experience. Authentication is handled by Auth0 — users sign in with an email/password account or with Google.

Preview

Click here to check it out for yourself.

Features

• User authentication and profile management via Auth0.
• Add records to personal stack, which persists beyond user's session.
• Filter records by genre, or search for a specific record or artist.
• Post, edit, and delete album records (gated by user role/ownership permissions).
• Role-based access control, including an admin user-management page.
• Responsive design for various devices.
• Cypress E2E specs under cypress/e2e/ (currently disabled — see commit 1b1bde1).

Installation

1. Clone the repository: git clone git@github.com:Stacks-Records/stacks-fe.git

2. Install dependencies: cd stacks && npm i

3. Create a .env file in the project root with the following variables:

   REACT_APP_API_URL=http://localhost:3001   # base URL of the backend API
   REACT_APP_DOMAIN=your-auth0-domain
   REACT_APP_CLIENT_ID=your-auth0-client-id
   REACT_APP_AUDIENCE=your-auth0-api-audience
   

4. Start the backend API. This frontend requires the Stacks API to be running — by default it expects it at http://localhost:3001. Clone and run it from Stacks-Records/stacks-be.

5. Start the frontend with npm start. This runs the app on http://localhost:3000 via react-scripts. If you hit MODULE_NOT_FOUND errors, confirm all dependencies installed (inspect package.json).

Usage

• Peruse the records available, including a feature that enables users to listen to them from the single record page once a record is clicked.
• Users may create My Stack, their own collection of records, either from the Landing Page or Single Record Page. Toss one out if you don't like it anymore.
• Users may post their own albums, provided they do their homework for all the input fields, and add it to My Stack. Data uniformity is paramount to application integrity at this time.

Deployment

The production app is deployed on Vercel: stacks-records.vercel.app. (Note: the predeploy/deploy gh-pages scripts in package.json are legacy and no longer used.)

Wins

• Built the application from scratch, front end and back end.
• Deepened of Auth0, and seeding user interactions with the application in the back end based on authentication.
• Experienced first PATCH route that updates the My Stack column for each user in the back end.

Challenges

• Implementing Cypress testing for POST functionality
• Adding YouTube functionality for various video types
• Implementing Auth0, deepening experience with PostgreSQL, Knex, and Express.

Contributing

Kyle Boomer

Email LinkedIn

Peter Kim

Email LinkedIn

Adam Konber

Email LinkedIn