This is a coding challenge for entrance to Phase 4.
To get started, create a new repository called phase-4-challenge and import the files from the scaffold. Do all of your work in this repo.
During your interview, you'll review your solution with the interviewer. You'll then build a new feature to enhance the application. Read the Live Coding Exercise section at the end of this document for more details.
Skills covered:
- JavaScript
- HTML
- CSS
- HTTP
- Node.js
- Express
- SQL
- Server-side rendering
- Authentication & authorization
Each requirement is assigned a point value. A fully complete requirement will earn you full points; partially complete requirements get partial points; incomplete requirements get no points. Overall completeness is determined by dividing the total points earned by the total points available.
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.
Some work has already been done for you in the scaffold. Build off of the existing code and try to match the existing style in your solution.
Requirements checked off below have already been completed in the scaffold.
Use these wireframes to guide your design.
Real images are not required - you can just use placeholders for development.
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 |
- 10: Solution is in a public repository called
phase-4-challenge. - 10: All dependencies are declared in a
package.jsonfile. - 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).
Content in the header varies based on the user's authentication state.
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.
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.
Users are able to sign up for a new account.
Routing:
- 20: Navigating to
/sign-uploads 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.
Users are able to sign in to an account.
Routing:
- 20: Navigating to
/sign-inloads 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.
Users are able to sign out.
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.
Displays user details and submitted album reviews.
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.
Displays album details and reviews.
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.
Displays a form that allows users to submit album reviews.
Routing:
- 20: Navigating to
/albums/<ALBUM ID>/reviews/newloads 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.
During the interview, you'll have 20 minutes to work on a solution to a new challenge. This exercise will build on the solution you'll submit for the challenge above.
This part of the interview is pass/fail and is evaluated on based on your ability to demonstrate your understanding of the concepts and tools involved in building the site. You'll be allowed to ask your interviewer clarifying questions and can use the internet to search for information as needed.
Examples of features the interviewer might ask you to implement include:
Users can:
- See a "default" profile photo on their profile page before adding their own photo.
- Update their profile photo (e.g. via Uploadcare).
- See user profile photos next to their reviews.
- Receive a welcome email after creating an account.
- Visit user profile pages via "pretty" URLs, like "/users/james-franco".
Users can:
- Visit album pages via "pretty" URLs, like "/albums/malibu".
- Add a star rating to reviews (from 1-5) and see the star rating for each review of an album in star icons.
- See review content truncated to 400 characters max on the home page, with a link to view more on the album page.
- See a relative published date, e.g. "2 days ago" on an album page.
- View only the 10 reviews at a time on an album page (pagination):
- View a link/button to the "Next" 10 reviews on an album page.
- View a link/button to the "Previous" 10 reviews on an album page.
- Comment on individual reviews:
- See comment threads for a review.
- See the number of comments they've left on their public profile.
- Only add a comment when logged in.
- Only delete their own comments.
Users can:
- View "pretty" error messages when form validations fail.