Listenup Documentation

Listenup is a cataloging website that allows users to interact with a database of podcasts. Users can sign up and register to create and edit playlists.

_{Built with ❤︎ by Julia Richards, Carlos Molero, James Lee and Miguel Coria.}

A live version of our application can be found here.

Overview

Listenup is podcast cataloging web application inspired by Goodreads. As a logged out user, you only have the ability to browse the front page. As a logged in user you have the ability to rate and review podcasts. As a logged in user you also have the ability to create, update and edit playlist. Listenup is built with Express JS, The Pug Template Engine, and Vanilla CSS.

Features

User Authenication

Users can securely create an account using our login and logout feature. Listenup uses bcrypt to securely hash passwords so that no plain text passwords are ever stored in the database. listenup also uses various middleware functions when processing request and responses so that we know a user is who they say they are. Certain routes also require user authenication for pages to be accessed. CHECK IT OUT

Listenup's register and login forms have input validations to enforce clean data submission and protect the integrity of the data submitted.

When a user trys to access a page that they are not authorized to access

Podcasts

Listenup's entire purpose is to allow users to catalog and organize podcasts. Each podcast has a title, hostname, publisher, cover image, and description attached to it. Users are able to add/remove these podcasts to premade playlist, leave a rating and leave a review. Each podcast page also has a link that takes them directly to spotify or apple. CHECK IT OUT

Each route to a podcast uses a regex expression to make sure a valid string is being pased into the url. The req.param is used to retrieve the podcast Id from the database. The Id is also used to retrive the podcast rating. If the user has not submitted a review then the review is set to 0.

There are several components working together to get the rating feature to work. Many helper functions are being imported to help with the POST, PUT, DELETE functionality. An event listener is set up to listen for user input when a star is clicked. Each star is being compared to an array of five elements. The index of the star is used to set the rating in the database. That index is then being used to render the number of stars to be colored in. CHECK IT OUT

Playlists

Goodreads has bookshelves, Listenup has playlists. There are 4 premade playlists (My First Playlist, Currently Listening, Want to Listen, Listened). Each playlist has a title, datecreated, and a link to all of the podcast associated with it. Users are only able to update there playlist from the podcast page right now.

When a user logs in they are immediately taking to the playlists page. There is an event listener set up on the sidebar container listening for user input. When a user clicks the name of a playlist the page is not refreshed there are several function working together to render the playlist. One of the functions makes one of the playlist active and loops to make all of the other playlist inactive. Another funciton is then used to populate the main container with playlist data. Because some of the podcasts have large descriptions there is a function to shorten the description and let the user know to click the podcast to read the full description. CHECK IT OUT

Reviews

Users are able to leave reviews for each podcasts! Each review is able to be deleted and edited. Each review has a podcast Id asscociated with it and can be viewed by other users. CHECK IT OUT

Listen Status

Users are able to to update the status of a podcast via a drop down menu on the selected podcast name. When a user updates the status on a podcast a request is made in the background to update the playlist associated with the users selection. CHECK IT OUT