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 startThe 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-serverwith Hot Reloading and React Hot Loader - Launch BrowserSync which will manage injecting css and webpack build