Lab 4: Books

Released Wednesday, October 2
Due Wednesday, October 9 at 11:59am

Objectives

  • Become more comfortable with Node.
  • Read and attempt to understand code written by others.
  • Implement a back-end.
  • Gain more experience with Express.
  • Refine your understanding of SQL to interact with tables.
  • Establish connections across tables in a database.

Overview

In this project, you’ll build a book review website. Users will be able to register for your website and then log in using their username and password. Once they log in, they will be able to search for books, leave reviews on individual books, and see the reviews left by other people. You’ll then implement at least two additional features of your choice to enhance your site’s usability.

Milestones

The project is due on October 9, but we recommend that you try to meet the following milestones:

  • Complete the database design, and add implement the register route by October 4.
  • Complete the import script, and complete the implementation of the books route by October 7.
  • Support listing and submitting reviews (both reviews routes, get and post) and incorporating additional features by October 9.

Collaboration

Per the syllabus it is permissible to collaborate with one other classmate on this lab. If you do, both partners must still submit their own repositories, and both partners must turn in identical work. You should use the README.md file to note that you worked with a partner and state clearly who your partner was (name and GitHub username).

Getting Ready

  1. Click here to go to the GitHub Classroom page for starting the assignment.
  2. Click the green “Accept this assignment” button. This will create a GitHub repository for your project.
  3. Click on the link that follows “Your assignment has been created here”, which will direct you to the GitHub repository page for your project. It may take a few seconds for GitHub to finish creating your repository. You should then be able to clone on your machine the cs276/lab4-username repository. Always push your code to your cs276/lab4-username repository.
  4. Follow the instructions atop README.md.
  5. Take a long and careful look at public/js/script.js before diving in headfirst. You’ll notice that we have implemented nearly all of the front-end functionality (at least, to start with). You may wish to modify some parts of this to have slightly different behavior than what we have provided by default, which is totally fine, but don’t reinvent the wheel!

Requirements

Alright, it’s time to actually build your web application! Here are the requirements:

  • Read: Did you review public/js/script.js? Now’s the time! We have written almost everything you need for the front-end portion of this application (code to generate forms, code to execute upon forms being submitted, etc.), but your app.js will need to send the proper data to the front end for it to interpret. Much like real world development, these parts of large applications are often written by two separate teams. Much unlike real world development, though, we’re leaving it to you to determine the appropriate data to send, rather than providing a document that outlines this exactly.
  • Registration: Users should be able to register for your website, providing (at minimum) a username and password.
  • Login: Users, once registered, should be able to log in to your website with their username and password. You’ll see this functionality is already implemented for you as part of the distribution code!
  • Logout: Logged in users should be able to log out of the site. This functionality, as well, is implemented for you already.
  • Import: Provided for you in this project is a file called books.csv, which is a spreadsheet in CSV format of exactly 5000 different books. Each one has an ISBN nubmer, a title, an author, and a publication year. In a Node application called import.js separate from your web application, write a program that will take the books and import them into your SQLite database. You will first need to decide what table(s) to create, what columns those tables should have, and how they should relate to one another. Run this program by running node import.js to import the books into your database, and submit this program with the rest of your project code.
  • Search: Once a user has logged in, they should be taken to a page where they can search for a book. Users should be able to type in the ISBN number of a book, the title of a book, or the author of a book. After performing the search, your website should display a list of possible matching results, or some sort of message if there were no matches. If the user typed in only part of a title, ISBN, or author name, your search page should find matches for those as well!
  • Book Page: When users click on a book from the results of the search page, they should be taken to a book page (or open a modal box), with some details about the book: At a minimum this should include its title and any reviews that users have left for the book on your website. If you review script.js… perhaps this is taken care of for you if you supply the proper information?
  • Review Submission: On the book page/modal box, users should be able to submit their own textual review, and should also be able to view the reviews left by other users.
  • Additional Features: You need to implement at least two additional features into your application as well. What those features are generally is up to you, so long as they are roughly on par with the complexity of the suggestions below. If unsure as to whether your proposed feature is sufficiently complex, do drop the staff a line!
    • Extend the functionality of your project by obtaining an API key from Goodreads– you may need to create a free account or log in to your account first to access that page–and incorporate some of Goodreads’ data into your book page as well.
    • Include support for users to mark other users as friends, and include a view where if two users are friends, one can view a list of all of the ratings of the other.
    • Include support for editing and/or deleting reviews previously left (but only, of course, if the user trying to edit/delete the review is the one who left the review in the first place!)
    • On each book page, provide a few “quick links” to other books by the same author (sort of a rudimentary suggestion feature).
    • In both the view of all books and in the individual book view, include a display of the count of comments that have been left by users.
    • Or something completely different!
  • In README.md, include a short writeup describing your project, what’s contained in each file, a list of all of the tables in your database and what column names (and data types) are in each column, and (optionally) any other additional information the staff should know about your project.
  • If you’ve added any Node packages that need to be installed in order to run your web application, be sure you’ve set up your project as an npm package, ans saved those packages to package.json by installing using the --save flag.

Beyond these requirements, the design, look, and feel of the website are up to you! You’re also welcome to add additional features to your website, so long as you meet the requirements laid out in the above specification!

Hints

  • At minimum, you’ll probably want at least one table to keep track of users, one table to keep track of books, and one table to keep track of reviews. But you’re not limited to just these tables, if you think others would be helpful!
  • To simply encrypt a user’s password using bcrypt, rather than just comparing (as may be helpful for register), you can run code like this:
bcrypt.hash(password, saltRounds, (err, hash)
  • To send the user back to login right away after completing registration, define your callback function using the function keyword (rather than using => notation… we’ll wave our hand as to why that’s necessary, if that’s ok!), and you can include the following line at the end:
res.json(getToken(this.lastID, jwtSecret))

Why? What does this do? It turns out after you insert a new row into the database that has an autoincrementing primary key, information about that primary key’s value is stored as a property called lastID. It is also possible to handle this by simply re-querying the database after making the insert, to extract the user ID, and then pass that value to getToken instead.

FAQs

Check back here for frequently asked questions!

How to Submit

Step 1 of 2

  1. Make sure all of your latest changes have been committed and pushed to your cs276/lab4-username repository.
  2. If you collaborated with a partner on this lab, be sure you’ve clearly identified who your partner is in the README.md text file, and be sure each of you individually submits, where your submissions should (other than the README.md file) be identical.

Step 2 of 2

Fill out this form.

Congratulations! You’ve completed Lab 4.