Lab 5: Chain Reaction

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

Objectives

  • Re-implement a front end.
  • Think in terms of React.
  • Gain first-hand experience writing your own React components.
  • Simulate a client and server concurrently on your machine.

Overview

Over the next two weeks, you’ll revamp the implementation of the Books website whose backend you implemented in the previous lab. The major change is that you’ll be redesigning the front end for this lab by implementing it using React components, employing the techniques of declarative programming, rather than doing what the staff wrote in Lab 4, doing more low-level JavaScript manipulation of the DOM.

Milestones

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

  • Implement component(s) needed for the register route by Sunday, October 13.
  • Implement component(s) needed for the list of all books and the search results by Friday, October 18.
  • Implement component(s) needed for the individual book pages, including comment views, by Wednesday, October 23.

This is without a doubt your most complex and lengthy lab. Especially if you have no prior experience with React or would consider yourself “among those less comfortable” more generally, do not assume you can wait until the last few days to complete this. Better to start earlier and use these two weeks effectively!

Collaboration

Per the syllabus it is permissible to collaborate with one partner if you wish (it is quite possible to handle this lab solo, lest you be concerned. Indeed, tackling it solo may be a great endeavor if you really want to dig in on this assignment and learn React more intricately). 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/lab5-username repository: always push your code to your cs276/lab5-username repository.
  4. Navigate to your lab5-username directory on your local machine, and run npm i. This will probably take a few seconds to a minute to run. The files in this directory (other than those in the client subdirectory) are all server code to run the back end of the Books application.
  5. Once complete, navigate to the client directory inside of your lab5-username directory, and run npm i there as well. This will take probably at least two minutes to run in most cases (React has MANY dependencies), so maybe grab a drink of water and then come back!
  6. Once complete, navigate back to the lab5-username directory (don’t stay inside of your client directory).
  7. Type export SECRET=secret in your terminal and hit return.
  8. Type npm run dev, which will start the server (running on port 4000) and concurrently the client (running on port 3000). This may take 30-60 seconds before you can visit http://localhost:3000, at which point you should see the login screen, which is a React component that we’ve written for you. You may notice that we are using some features of react-bootstrap here for aesthetics. You are welcome to do the same for this lab but it is not required.
  9. The user with credentials guest:guest exists again for you to try logging in. Of course, since no other components exist yet, you won’t see anything upon doing so, other than the navbar changing from showing “Login” and “Register” to “Logout”.
  10. You may decide to use your own implementation of Lab 4 as the basis for Lab 5. If so, you will need to copy over app.js, books.db, and package.json from your Lab 4 into the lab5-username directory (not the client subdirectory). You also will want your server to run on port 4000, rather than 3000.

Requirements

Time to revamp! This project is deliberately quite open-ended, you need only rebuild the front end to use React components. As part of that, you’ll need to spend some time on design, figuring out what components are needed, which of those components are always nested inside of other components, etc (By way of example, a “comment” probably makes sense as a component, but it also probably only makes sense to display comments inside of a “comment list”, which similarly probably only makes sense to display on a “book” view. Those, therefore, might be three components you choose to define.)

Thinking in React is a skill on its own, which is why you’ve been given extra time on this lab to really dig into what it means to organize your site’s front end. May we suggest that before you write a single line of code, you (and your partner, if applicable) spend time drawing up diagrams or flowcharts of what should happen when certain interactions on your site occur.

That said, every student or team might decide to move forward by organizing the site and the components differently, and unlike the last two labs, we’ve declined this time to nudge you in any particular direction as by predefining certain types of components that need to be completed, though at the bottom of App.js you’ll see that some potential routing options and PrivateRoutes (those requiring authentication) are proposed. Beyond the expectation that your front end is implemented fully in React, the only other requirement is that the functionality as outlined in Lab 4 must be preserved (it should still be possible to do all of those same things). You may attempt to reimplement the same two features you implemented in Lab 4, or two different ones, but you must still implement two somehow.

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/lab5-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 5–your last! Way to go!!