Building E-Commerce Applications with Express

What tools will we need to build both our front end and back end applications? These are a small selection of the most important ones.

Express

• Answers HTTP requests, orchestrates logic, communicates with database

MongoDB

• Permanently stores customer data

Babel

• Translates ES6 to ES5 and allows use
  of “import” statements

React

• Handles templating on the client

• Useful for drafting emails

Webpack

• Translates ES6 to ES5 like Babel, but specifically for client applications

• Allows for CSS imports, multiple build processes

Our first demo is a big one – we’ll be setting up Express to respond to HTTP requests and Babel to compile ES6 in one step.

• Configure Babel to run express with ES6

• Install related dependencies

• Create simple Express file responding to HTTP requests with Hello World Message

• Run our application

• Install and run MongoDB and related Node drivers

• Install tools needed to test REST API

  • Postman

  • Robo3T

• Create entry in DB with Node

• Client is sent by server to end user’s computer

• End user interacts with client

• Bad client = unsatisfied user

• Regardless of server quality

• Contains links, buttons, forms, etc.

• Allows user to interact, through server, with database and vendors

  • Create an order

  • Provide payment information

  • Check out

Client code has to be understood by any given web browser, so we need different tooling than what we used to make the server.

• Create main client file with a React component

  • Component will just output “Hello World” for starters

  • Format is JSX

• Install and configure Webpack

  • Configured via webpack.config.js

  • Webpack compiles our main file and all its dependencies into one user friendly file

  • Uses Babel to transform code

A Router is key as it is the best way to add multiple pages to your site (‘/about’, ‘/contact’, etc.) without adding additional HTML files.

• Create a “Welcome Route”

• Welcomes user and lets them start an order

• Install React Router and create a routing file

• Routes file is just a simple React component

• Configure routes to serve welcome route

Customization potential can give your e-Commerce app an edge on the competition.

In this video, we’ll make a form that lets users do just that.

• Create an “Order Route”

• Create link on Welcome Route to Order Route

• Create form for customizing order

• Consists of various kinds of inputs, labels and submit button

• Functionality to be added later

Redux is used to handle state for front end applications.
It is more reliable and easier to troubleshoot than many other methods.

• Create a Redux store

• Store provides any other component with state

• Create a default state for our application

• Default state contains Order details, for now

• Update order page

• Connect component to Redux using React-Redux

• Updating form dispatches an event

• Handle event by updating application state
  and rendering

Calculating prices for orders is an area where the server and client have to be in perfect sync.

• Create a /price REST route

• Takes an argument and returns the sticker price of the order

• Calculations are done on server

• End user can’t peek at internal logic

• Integrate Redux Saga

• Redux Saga lets us respond to actions with side-effects, i.e., calling our shiny new REST API

• Call /price REST route whenever order details change

• Update client with real-time price from server

Carts prevent orders from being duplicated. We’ll update the application so a cart is created for every shopping session.

• Create REST API linking our cart utilities to POST requests

• Update Welcome Page

• Clicking “Start Order” will now trigger a Saga

• Saga will get a fresh Cart ID from server

• Update Order Page

• Show error if user is on order page without having first created a cart

After deciding what their order will be, customers need a secure way to share their delivery details and credit card information.

• Create a /checkout route

• Accessible through link on /order route

• Contains forms for delivery details, credit card details

• Create a Checkout REST API

• API listens for POST requests

• Server will reply with 501 Not Implemented

• Implementation to come in next chapter

• Create a Saga

• Saga calls Checkout REST API whenever form is submitted

Validation can save us lots of time and money by helping users submit valid form data.

• Create a validation utility

• Utility is given a credit card information payload and returns an array of zero or more errors for each field

• Invoke validation utility when checkout is called

• If errors exist, return errors to client via JSON

• Display errors to end user

• Return 501 Not Implemented if there are no errors

Once the data has been validated, we can complete the transaction and let the user know that their order is complete.

• Create checkout routine which is invoked by the /checkout REST API

• Creates customer record in database

• If successful, return 200 Success message to client

• Update client to indicate when order has been placed successfully

Now that the client has placed an order, they expect it to be delivered promptly. An email notification will let the producer know where to send the deliverables.

• Create dummy email accounts for sending and receiving emails

• Install and configure nodemailer

• Send an email from your email service provider to vendor’s account

• Create an email template

• Server-rendered React works very well

• Apply payload to template, render it, and send to the vendor via email