cappua / cappua-fe

One part crowdsourced songwriting, one part rap battle, Cappua is a monthly hip hop music competition app in which users compete to get their verse included in the given month's featured track. Users upload their verse for a month's track and vote on their favorite uploaded verses as they vie for their place on Olympus, the Cappua Hall of Fame.

Cappua FE

Table of Contents

• What it does
• How to Install
• Dependencies
• Learning Goals
• Project Diagram
• Licenses
• Contact

What it does

The Cappua App

One part crowdsourced songwriting, one part rap battle, Cappua is a monthly hip hop music competition app in which users compete to get their verse included in the given month's featured track. Users upload their verse for a month's track and vote on their favorite uploaded verses as they vie for their place on Olympus, the Cappua Hall of Fame.

The Cappua FE Repo

The Cappua FE repo handles the user-facing responsibilities of the Cappua application. It utilizes GraphQL queries and a ReSTful endpoint to retrieve, upload and display data to & from the BE repo. It allows users to create and log into accounts with Auth0, manages user voting in tandem with the BE repo, and seamlessly streams audio files stored in the Cappua AWS S3 Bucket via the Amazon Cloudfront CDN.

How to Install

For usage on your local machine follow the instructions listed below:

git clone [email protected]:Cappua/cappua-fe.git
npm start

Dependencies

• React Spring
• Apollo Client
• Sass Loader

Learning Goals

• Explore and integrate AWS services

• Gain familiarity and confidence in working with full FE & BE teams

• Incorporate agile processes such as standups and kanban boards

• Utilize GraphQL queries to access the BE database

• Refactor code for better code for improved organization/readability

• Iterate upon collaborative workflow with small commits, descriptive pull requests, and code reviews

• Write thorough and understandable documentation

Project Diagram

Licenses

• React JS

FrontEnd Team

Demaceo Vincent Howard

GitHub Profile

Cooper Terrones

GitHub Profile

Contact

Brian Liu: Email, GitHub

Cooper Terrones: Email, GitHub

Demaceo Vincent Howard: Email, GitHub

Eugene Theriault: Email, GitHub

Nick King: Email, GitHub

Sage Freeman-Gonzales: Email, GitHub

cappua-fe's Issues

Featured tracks pages

create the featured tracks pages that will link to each card in the trio

Genre Month Theme selector

Have a dropdown menu for a user who has uploaded their track to choose from which will contain the three genre themes of the month to tag their track with.

Create track cards

Create verse cards for each of the verse within the track view

Create global state using hooks

Global state should be accessible using useContext hook in app component -- accessible by all components

MP3 upload functionality

User should be able to upload an audio file

Setup Redux

Setup redux for project --
contents will need to be updated and specified

Create delete vote functionality

Users vote should be deleted if the user has already voted on the track

Error conditional rendering

conditional render for error

Login user mutation to backend

Upon user login, there should be a graphQL mutation to the backend

Create competitions page

Should be able to link the competitions page to the nav link within the home view. This should have

• wireframe
• matching comp with sample data

Loading conditional render

Loading conditional render while query occurs

Link trio cards to track pages

When viewing the home screen the trio cards should be clickable and route to the correct track page

Upload request to post audio file to backend

The audio file uploaded from the user should be posted to the backend using axios

Create user global state

User should be set in global state upon login

Create vote functionality

User should be able to vote for a track

Create store with Zustand

User cannot vote if not logged in

A user should not be able to vote if logged in -- display an alert to notify

Register New User form

Create a Registration form component for new users

Add input to form for track / verse title

User should be able to add a title to their verse and get sent with FormData

Add upload button to track pages

User should be able to upload a file (mp3) in the track view page

Load competition track from query

User should be able to see that competition page audioPlayer has the track file from global state

Track cards should be pulled from the backend using apollo and graphQL

MixCloud URL

connect the Redux store.js with the MixCloud url link in SoundBar component

Add functionality to Footer component

Display information for routes to

• /About
• /Developers
• /Contact

Create React App

Install Apollo Client

Connect AWS s3 bucket to the application on the front end

User should be able to upload to the s3 bucket when in the track view page and clicking the upload file button

Bug - Sort track cards

User should see a sorted view of track cards within the competitions page

Create Hall of Fame page

Should be able to link the hall of fame nav button to direct to a comped page

Conditional render for competition hook

Components should not render until competition hook is set for global state

Query backend using apollo / graphQL for verses on competitions page

User should be able to upload a track to s3 bucket and then should reflect that change in the track card pages

Create an input for the upload track form that allows the user to title their tracks