Hack-a-thon #2: Building a Bookstore

Building a Bookstore Part 1

Today is the day we finally MONETIZE! Our billion-dollar idea: we're going head-to-head with Amazon's book store. This will be a group project using the same GitHub workflow that we used for the Student Showcase website.

Step 1: Set up a GitHub repo

Fork and clone your integration manager/instructor's boilerplate for this project, and make sure that your remotes are set up correctly for the GitHub workflow!
If you or your team needs to review, take a look at the student showcase.

Step 2: Self-Reflection

The following lists the core web development skills that you should feel comfortable using in your project thus far:

Using Markdown to create a README.md file introducing your project.
Pushing to GitHub and seeing it rendered on your repository's main page.
Creating an HTML document using the following HTML tags:
- <html>, <head>, <title>, <body>
- header and paragraph tags
- bold and italic tags
- <div> and <span>
- ordered and unordered lists
- images and links
Using a style attribute on an HTML element, then a <style> tag in the head, then a <link> tag to a separate .css document to include CSS styles in your page.
Refactoring your code to use classes and ids.
Using complex CSS selectors
Using positions fixed, absolute, and sticky to position elements
Creating an HTML form incorporating various inputs (text, password, email, textarea, radio, checkbox, submit, etc)
Making your form live using Formspree
Using display: flex to build dynamic containers in 2 dimensions
Using the CSS grid system to lay out your page
Using built-in global functions like console.log
Setting and retrieving values from JavaScript variables and complex data types like Arrays and Objects
Using document.querySelector() in conjunction with .textContent and .innerHTML to retrieve and place content on the page
Using if, else if and else to implement branching logic
Using logical and (&&), logical or (||), and boolean negation (!)
Composing functions with return values
Using basic events to help users interact with your page

Step 3: Coding!

Let's go through the following steps, dividing up tasks as a team, to get this new mega-store launched. Good luck:

To start, make sure you've properly forked and set up your project repo.
Create Navigation, Header, Content, and Footer components to inject into a div with an id of root. Use parcel and the module system to organize these components! You should be able to create the entire application with a single render function.
Now add some content to the header and footer components.
Add layout CSS using positions and/or grid.
Add some css styles to make each component stand out.
Create a <form> element that will allow a user to input a new book (eventually). Make sure that each field has a name attribute that's exactly the same as the corresponding property listed above (you'll see why in a minute).

Now take all the information about our books and make them into JavaScript Objects. Create variables book1, book2, etc. Set each equal to an object with keys name, author, and pictureUrl, which hold string values, price and id, which holds a number value, and sellingPoints, which is an Array of Strings. EXAMPLE:

const book1 = {
    "id": 1,
    "name": "Lasagna: A Retrospective",
    "author": "Garfield"
    "pictureUrl": "http://graphics8.nytimes.com/images/2015/10/15/   dining/15RECIPE20DIN/15RECIPE20DIN-articleLarge.jpg",
    "price": 24,
    "sellingPoints": [
        "Lasagna is delicious.",
        "The essential guide to Italian casseroles of all types.",
        "Real G's move silent, like Lasagna. -Lil Wayne"
    ]
}

Create a Book stateless functional component that takes in a book Object (like the one above) and outputs that book's information in card-like markup.
Make sure that the Book component has corresponding styles!
import the Book component into your Content component, using it to transform each book Object into useable markup. What are the limitations of this approach?
Instead of import-ing Book into Content, let's feed all of the book Objects into Content in index.js. How could you organize those book Objects into a single complex data type to give to Content? And how could we handle that complex data type in Content

Now let's make this form work! We'll do that by hooking into the submit event:

document
   .querySelector('form')
   .addEventListener(
       'submit',
       (event) => {
           const data = event.target.elements;
           const newProduct = {
               'name': data[0].value,
               'author': data[1].value,
               'pictureURL': data[2].value,
               'price': data[3].value,

               // we'll learn how to handle sellingPoints next
               'sellingPoints': []
           };

           // this might be a hint for number 11
           booksArray[booksArray.length] = newProduct;

           render(booksArray);
       }
   );

In whatever time remains, make sure that this bookstore looks as good as we can make it!

PreviousSingle Page Applications and Functional Components NextLoops

Last updated 5 years ago

Was this helpful?