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.
A live version of our application can be found here.
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, Vanilla JS and Vanilla CSS.
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
.png)
Listenup's register and login forms have input validations to enforce clean data submission and protect the integrity of the data submitted.
.gif)
When a user trys to access a page that they are not authorized to access
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
.gif)
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 user id is used to retrive the podcast rating. If the user has not submitted a rating then the rating 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
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 podcasts associated with it. Users are only able to update their playlists from both the playlist page and the listen status button on individual podcast pages.
.gif)
When a user logs in they are immediately taken 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 functions working together to render the playlist. Each respective function makes one of the playlists active and loops to make all of the other playlists 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
Users are able to leave reviews for each podcasts! Each review is able to be deleted and edited. Each review has a podcast Id and user Id asscociated with it and can be viewed by other users. CHECK IT OUT
.gif)
When a user chooses to edit a review they are taken to a new page to complete the process. Once satisfied with their review they save the review and the content is replaced on the podcast page.
A POST route is used to update an edited review based on the review Id. Once the review has been saved users are redirected back to the podcast page they are reviewing.
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
.gif)
When a user is logged in, they will see the currently listen status of each podcast on that podcast's page. When they change the status, the state is saved.
Selecting the 'Add to playlist' option removes the podcasts from all associated playlists. Each podcast, can only be added to one playlist at a time. AJAX is used to so that the page does not refresh when the listen status is changed.
