.
├── .babelrc # Configures Babel
├── .editorconfig # Configures editor rules
├── .eslintrc # Configures ESLint
├── .gitignore # Tells git which files to ignore
├── .npmrc # Configures npm to save exact by default
├── README.md # This file.
├── dist # Folder where the build script places the built app. Use this in prod.
├── docs # Exercise Documentation.
├── package.json # Package configuration. The list of 3rd party libraries and utilities
├── src # Source code
│ ├── actions # Redux actions. List of distinct actions that can occur in the app.
│ ├── components # React components
│ ├── constants # Application constants including constants for Redux
│ ├── containers # Top-level React components that interact with Redux
│ ├── middleware # Sagas actions. List of distinct async actions that can occur in the app.
│ ├── favicon.ico # favicon to keep your browser from throwing a 404 during dev. Not actually used in prod build.
│ ├── index.html # Start page
│ ├── index.js # Entry point for your app
│ ├── reducers # Redux reducers. Your state is altered here based on actions
│ ├── store # Redux store configuration
│ └── styles # CSS Styles, typically written in Sass
│ ├── utils # Plain old JS objects (POJOs). Pure logic. No framework specific code here.
├── tools # Node scripts that run build related tools
│ ├── build.js # Runs the production build
│ ├── buildHtml.js # Builds index.html
│ ├── distServer.js # Starts webserver and opens final built app that's in dist in your default browser
│ ├── srcServer.js # Starts dev webserver with hot reloading and opens your app in your default browser
└── webpack.config.js # Configures webpack
We need to implement a new feature, the singer Katy Perry will promote some of our products. The Product Owner ask us to implement this new feature, he said that "Clients needs to identify which products are promoted by Katy Perry".
So, time to rock!.
We need to implement the following ranked User Stories.
- As a Client I need to see which products were featured by Katy Perry.
- As a Owner I need to feature some product.
- As a Client I need to have a top menu to access all feature products.
- In
summerschool-frontend
repository. - Navigate to the folder
/middleware
and opensagas.js
in Atom editor. - For
summerschool.users
: - Find
yield call
indoRequestUser
function. - Change
localhost
with thesummerschool.users public ip
. - For
summerschool.items
: - Find
yield call
indoRequestProducts
function. - Change
localhost
with thesummerschool.items public ip
. - For
summerschool.cart
: - Find
yield call
indoRequestCart
function. - Change
localhost
with thesummerschool.cart public ip
. - Save the file.
- Verify that all test pass running
npm run test
. - Use Postman to check the following endpoints. Remember set the header with key:
authorization
value:Bearer qphYSqjEFk1RcFxYqqIIFk4vaBJvDoBr3t9aHTp1JFEAO0NS7ECyLJJyUPybOUNf
- http://SERVICE-PUBLIC-IP-ADDRESS:3100/api/v1/products
- http://SERVICE-PUBLIC-IP-ADDRESS/api/v1/cart/1
- http://SERVICE-PUBLIC-IP-ADDRESS/api/v1/users/1
- Run
npm run build
.
Files route:
- In
summerschool-items-api
repository. - Navigate to the folder /api and open
products.apib
in Atom editor. - Find the Body response.
- Add
feature: true
for products withid
1, 4, 7 andfeature: false
for the rest.
example:
"id": 1,
"title": "Luna Flower",
"description": "Collared Neck Stylish",
"price": 60.92,
"category": "Women",
"feature": true,
"image": "pc.jpg"
- Save the file and start the service running
npm run api-server
. - Use Postman to verify
HOST/api/v1/products
endpoint.
Clues:
- Use spaces for indentation.
- More info APIBluePrint specification.
Files route:
- In
summerschool-cart-api
repository. - Navigate to the folder /api and open
cart.apib
in Atom editor. - Find the Body response.
- Add
feature: true
for products withid
2 andfeature: false
for the rest.
example:
"id": 2,
"title": "Dearlovers",
"description": "Chiffon Blouse U Neck",
"price": 89.99,
"category": "Women",
"feature": false,
"image": "pc1.jpg"
- Save the file and start the service running
npm run api-server
. - Use Postman to verify
HOST/api/v1/cart/1
endpoint.
Clues:
- Use spaces for indentation.
- More info APIBluePrint specification.
Files route:
- In
summerschool-frontend
repository. - Navigate to the folder
/src/components
and openProductItem.js
in Atom editor. - Find
ProductItem
and create a constPrintFeatureItem
. - Add
span
andimg
tags toPrintFeatureItem
const. span
tag withclassName
equals tofeature-product
- Nest
img
tospan
withsrc
equal to{require("../images/featured_product.png")}
Const definition example:
const Variable =
<span>
<img src="image-path" alt="alt-title"/>
</span> : "";
- Validate that show feature image only for products that have
feature
equal totrue
.
If condition assignment:
const Variable =
(condition)?
<p>True Condition</p> : <p>False Condition</p>;
- Render
PrintFeatureItem
const after the divtag
withclassName="mid-pop"
How to Render a value:
{CONST_NAME}
- Verify the correct render of the change.
- Save the file.
Clues:
- Span Tag specification.
- Img Tag specification.
- Nesting Tags post.
Files route:
- In
summerschool-frontend
repository. - Navigate to the folder
/src/components
and openContent.js
component in Atom editor. - Find
<ProductItem
component. - Add
feature
prop equal to{value.get("feature")}
.
How to add a prop to a child Component:
key={index}
feature={value.get("feature")}
price={value.get("price")}
- Save the file.
- Run
npm run build
and see the result in Chrome web browser.
Clues:
- Check Transfering Props
- Check Get function
- See how get other properties like price.
Files route:
- In
summerschool-frontend
repository. - Navigate to the folder
/src/styles
and openstyles.scss
in Atom editor. - Find
.mid-pop
class. - Nest
.feature-product
class with: position: absolute;
top: ??;
use the value obtained from Chrome Developer Tools.right: ??;
use the value obtained from Chrome Developer Tools.- Save the file.
- Run
npm run build
and see the result in Chrome web browser.
Clues:
- Check Sass 3 syntax.
- Check CSS Position property.
- How to see Chrome Developer Tools.
Files route:
- In
summerschool-frontend
repository. - Navigate to the folder
/src/components
and openHeader.js
component in Atom editor. - Find
ul
tag withclassName="nav navbar-nav nav_1"
- Add a new
li
tag nesting<Link className="color" to={'/feature'}>Feature</Link>
Clues:
- Check Link Component.
Files route:
- In
summerschool-frontend
repository. - Navigate to the folder
/src/test
and opencart.spec.js
in Atom editor. - In
handles SET_CART
,handles SET_CART_ITEM when no exist CART_ITEMS
,handles SET_CART_ITEM when exist CART_ITEMS
andhandles DELETE_CART_ITEM test
. - Note: Modify in
action
andexpect
. - Add
"feature": true
for products withid
1, 4, 7 and"feature": false
for the rest. - Save the file.
- Verify that test pass running
npm run test
.
Clues:
- Check Expect equal.
Files route:
- In
summerschool-frontend
repository. - Navigate to the folder
/src/test
and openorder.spec.js
in Atom editor. - In
handles SET_ORDER
. - Note: Modify in
action
andexpect
. - Add
"feature": true
for products withid
1, 4, 7 and"feature": false
for the rest. - Save the file.
- Verify that test pass running
npm run test
.
Clues:
- Check Expect equal.
Files route:
- In
summerschool-frontend
repository. - Navigate to the folder
/src/test
and openproducts.spec.js
in Atom editor. - In
handles SET_PRODUCTS
. - Note: Modify in
action
andexpect
. - Add
"feature": true
for products withid
1, 4, 7 and"feature": false
for the rest. - Save the file.
- Verify that test pass running
npm run test
.
Clues:
- Check Expect equal.
- In
summerschool-items-api
repository. - Navigate to the folder
/api
and open products.apib in Atom editor. - Modify this file to change
product
toproducts
. - Save the file.
- Restart the server running
npm run api-server
. - Verify the response making a
get call
to/api/v1/products
onPostman
application.
- In
summerschool-frontend
repository. - Navigate to the folder
/src/test/
and openproducts.spec.js
in Atom editor. - Find
SET_PRODUCT test
. - Add the respective feature element for expect values.
- Save the file.
- Verify the test running
npm run test
.
- In
summerschool-frontend
repository. - Navigate to the folder
/src/styles
and openstyles.scss
in Atom editor. - Find
feature-product class
nested tomid-pop
. - Correct the right value of
feature-product
. - Save the file.
- Verify the style in the web browser, if the service is not running run
npm run build
.
- In
summerschool-frontend
repository. - Navigate to the folder
/src/components
and openHeader.js
component in Atom editor. - Find the
className simpleCart_total
. - At the end of the method
reduce
fix the result to 2 decimals. - Save the file.
- Verify the style in the web browser, if the service is not running run
npm run build
.
- In
summerschool-frontend
repository. - Navigate to the folder
/src/components
and openHeader.js
component in Atom editor. - Find the
className nav
. - Fix typo on
feture menu
. - Save the file.
- Verify the style in the web browser, if the service is not running run
npm run build
.
- In
summerschool-frontend
repository. - Navigate to the folder
/src
and openroutes.js
in Atom editor. - Find the Route for features.
- Fix the typo on fetures path.
- Fix typo
/fetures
to/feature
. - Save the file.
- Verify the style in the web browser, if the service is not running run
npm run build
.
- In
summerschool-frontend
repository. - Navigate to the folder
/src/containers
and openMainStore.js
component in Atom editor. - Find the
MainPageContent
const. - Fix typo
/feture
to/feature
on the location.pathname condition. - Save the file.
- Verify the style in the web browser, if the service is not running run
npm run build
.
- In
summerschool-frontend
repository. - Navigate to the folder
/src/components
and openCheckout.js
component in Atom editor. - Find the
PrintBtnProceedToBuy const
. - Add prop to equals to
/orderSummary
and addonClick
event equals tohandleProceedToBuyClick
. - Save the file.
- Verify the style in the web browser, if the service is not running run
npm run build
.