Skip to content

Latest commit

 

History

History
188 lines (134 loc) · 3.39 KB

README.md

File metadata and controls

188 lines (134 loc) · 3.39 KB
Raw

Intro-React

User Stories

As a user, I can...

  • sign up
  • log in
  • view all the products on one page
  • search the products
  • favorite specific products
  • add products to my cart
  • see the product count in the cart icon
  • view my cart
  • increase the item quantity of a specific product from my cart
  • see price changes reactively with quantity changes in my cart
  • remove an item from my cart
  • As a user, I should see a fully hydrated page on first load

Backend API

Our API is built using Loopback.js To see all of the available REST API endpoints take a look at the explorer localhost:3000/explorer

Below are the main API endpoints you will use for this app

Auth

Create a new user (will also provide an access token) POST /api/users

BODY

{
  username: String,
  email: String,
  password: String
}

returns the user object on success (see: server/models/user.json for the schema) with attached access token

RETURNS

{
  id: String,
  email: String,
  username: String,
  cart: [],
  accessToken: String
}

sign in POST /api/users/login?include=user BODY

{
  email,
  password
}

RETURNS

{
  user: User,
  id: String, // accessToken
}

Products

see server/models/product.json for Product schema

Get the list of products available

GET /api/products

RETURNS

[Product, Product, ...Product]

Cart

Access users cart through the users API

Add an item to the users cart GET /api/users/:userId/add-to-cart?access_token=${accessToken}

BODY

{
  itemId: String // the id of the product to add to the cart
}

RETURNS

{
  cart: [ ...{ id: String, count: Number } ]
}

returns the updated cart. Use this information to ensure your clients cart is up to date with your server

Remove an item from the users cart GET /api/users/:userId/remove-from-cart?access_token=${accessToken}

BODY

{
  itemId: String // the id of the product
}

RETURNS

{
  cart: [ ...{ id: String, count: Number } ]
}

returns the updated cart. Use this information to ensure your clients cart is up to date with your server

delete an item from the users cart GET /api/users/:userId/delete-form-cart?access_token=${accessToken}

BODY

{
  itemId: String // the id of the product
}

RETURNS

{
  cart: [ ...{ id: String, count: Number } ]
}

returns the updated cart. Use this information to ensure your clients cart is up to date with your server

To start development

npm start

The default gulp task will

  • Compile stylus files to css.
  • Compile React app with WebPack
  • Launch nodemon which will intern manage the LoopBack server
  • Launch webpack-dev-server with Hot Reloading and React Hot Loader
  • Launch BrowserSync which will manage injecting css and webpack build

Useful docs