Project Description

Build a web app where a community of record enthusiasts can review their favorite albums. The app will be called Vinyl.

The client has provided basic wireframes and user stories.

Wireframes

Use these wireframes to guide your design.

Real images are not required - you can just use placeholders for development.

Sample Data

Use this data to seed the albums table on your database.

Title	Artist
Malibu	Anderson .Paak
A Seat at the Table	Solange Knowles
Melodrama	Lorde
In Rainbows	Radiohead

General

• 10: Solution is in a public repository called phase-4-challenge.
• 10: All dependencies are declared in a package.json file.
• 10: Express is used for the web server.
• 10: PostgreSQL is used for the database.
• 10: Database is seeded with at least 4 albums (check out the sample data).

Site Header

Content in the header varies based on the user's authentication state.

Requirements

Users can:

• 20: See the name of the website in the site-wide header.
• 20: See links to "Sign Up" and "Sign In" when logged out.
• 20: See links to "Profile" and "Sign Out" when logged in.

Layout:

• 20: The layout of the header matches the wireframes.

Home

Displays various album-related information.

Routing:

• 20: Navigating to / loads the home page.

Users can:

• 20: View all albums on the home page (under the "Records" heading).
• 20: View only the 3 most recent reviews on the home page sorted by newest first.
• 20: Click on an album title to go to the album page (e.g. /albums/<ALBUM ID>).

Layout:

• 10: The site-wide header is visible on the home page.
• 20: The layout of the home page matches the wireframes.

Sign Up

Users are able to sign up for a new account.

Requirements

Routing:

• 20: Navigating to /sign-up loads the sign up page.

Users can:

• 20: Sign up for an account with name, email, and password.
• 20: Be redirected to their profile page (e.g. /users/<USER ID>) after signing up.

Users CANNOT:

• 30: Sign up without a name value.
• 30: Sign up without an email address value.
• 30: Sign up with an email that is already in use.

Layout:

• 10: The site-wide header is visible on the sign up page.
• 20: The layout of the sign up page matches the wireframes.

Sign In

Users are able to sign in to an account.

Requirements

Routing:

• 20: Navigating to /sign-in loads the sign in page.

Users can:

• 20: Sign in to an existing account with an email address and password.
• 20: Be redirected to their profile page (e.g. /users/<USER ID>) after signing in.

Users CANNOT:

• 30: Sign in with an invalid email address and password combination.

Layout:

• 10: The site-wide header is visible on the sign in page.
• 20: The layout of the sign in page matches the wireframes.

Sign Out

Users are able to sign out.

Requirements

Users can:

• 20: Be redirected to the home page (e.g. /) after signing out by clicking the Sign Out button.

Users CANNOT:

• 20: Perform any actions that require a user to be signed in after signing out.

User Profile

Displays user details and submitted album reviews.

Requirements

Routing:

• 20: Navigating to /users/<USER ID> loads the user profile page.

Users can:

• 20: View their name, email, and join date.
• 20: View only their submitted reviews sorted by newest first.
• 20: View "trash can" delete icons only next to reviews submitted by users.
• 20: View a pop-up with a Cancel button, a Confirm button, and a message that reads, "Are you sure you want to delete this review?" after clicking the delete icon next to a review.
• 20: Have the pop-up dismissed after clicking Cancel.
• 20: Have the review deleted from the database and removed from the user profile page after clicking Confirm.

Layout:

• 10: The site-wide header is visible on the user profile page.
• 20: The layout of the user profile page matches the wireframes.

Album Details

Displays album details and reviews.

Requirements

Routing:

• 20: Navigating to /albums/<ALBUM ID> loads the album page.

Users can:

• 20: View the name of the album on the album page.
• 20: View all reviews for the album on album page sorted by newest first.
• 20: View "trash can" delete icons next to reviews the user can delete.
• 20: View a pop-up with a Cancel button, a Confirm button, and a message that reads, "Are you sure you want to delete this review?" after clicking the trash can icon next to a review.
• 20: Have the pop-up dismissed after clicking Cancel.
• 20: Have the review deleted from the database and removed from the album page after clicking Confirm.
• 20: View a button with the label "Add Review".
• 20: Be redirected to the new review page (e.g. /albums/<ALBUM ID>/reviews/new) the after clicking the "Add Review" button.

Users CANNOT:

• 20: Delete a review when not logged in.
• 20: Delete another user's review.

Layout:

• 10: The site-wide header is visible on the album page.
• 20: The layout of the album page matches the wireframes.

New Review

Displays a form that allows users to submit album reviews.

Requirements

Routing:

• 20: Navigating to /albums/<ALBUM ID>/reviews/new loads the new review page.

Users can:

• 20: Enter multi-line text in the text field.
• 20: Click the Submit button to submit the review.
• 20: Be redirected to the album page (e.g. /albums/<ALBUM ID>) after submitting the review.

Users CANNOT:

• 20: Submit a review when not logged in.
• 20: Submit an empty review.

Layout:

• 10: The site-wide header is visible on the new review page.
• 20: The layout of the new review page matches the wireframes.