Skip to content

Instantly share code, notes, and snippets.

@iLeonelPerea

iLeonelPerea/summerschool-frontend.md

Last active July 29, 2016 06:14
Show Gist options
  • Save iLeonelPerea/9e3c18f43f043f1c5bc7f3d072de7eb9 to your computer and use it in GitHub Desktop.
Save iLeonelPerea/9e3c18f43f043f1c5bc7f3d072de7eb9 to your computer and use it in GitHub Desktop.
Download ZIP
summerschool-frontend
Raw
summerschool-frontend.md

Folder structure

.
├── .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

Get Started

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!.

Requirements

  1. Postman
  2. Google Chrome
  3. Atom Editor

Instructions

We need to implement the following ranked User Stories.

  1. As a Client I need to see which products were featured by Katy Perry.
  2. As a Owner I need to feature some product.
  3. As a Client I need to have a top menu to access all feature products.

First al all - configure the ip of your APIs

  1. In summerschool-frontend repository.
  2. Navigate to the folder /middleware and open sagas.js in Atom editor.
  3. For summerschool.users:
  4. Find yield call in doRequestUser function.
  5. Change localhost with the summerschool.users public ip.
  6. For summerschool.items:
  7. Find yield call in doRequestProducts function.
  8. Change localhost with the summerschool.items public ip.
  9. For summerschool.cart:
  10. Find yield call in doRequestCart function.
  11. Change localhost with the summerschool.cart public ip.
  12. Save the file.
  13. Verify that all test pass running npm run test.
  14. Use Postman to check the following endpoints. Remember set the header with key: authorization value: Bearer qphYSqjEFk1RcFxYqqIIFk4vaBJvDoBr3t9aHTp1JFEAO0NS7ECyLJJyUPybOUNf
  15. http://SERVICE-PUBLIC-IP-ADDRESS:3100/api/v1/products
  16. http://SERVICE-PUBLIC-IP-ADDRESS/api/v1/cart/1
  17. http://SERVICE-PUBLIC-IP-ADDRESS/api/v1/users/1
  18. Run npm run build.

Tasks

1. Modify Items API

Files route:

  1. In summerschool-items-api repository.
  2. Navigate to the folder /api and open products.apib in Atom editor.
  3. Find the Body response.
  4. Add feature: true for products with id 1, 4, 7 and feature: false for the rest.

example:

  "id": 1,
  "title": "Luna Flower",
  "description": "Collared Neck Stylish",
  "price": 60.92,
  "category": "Women",
  "feature": true,
  "image": "pc.jpg"
  1. Save the file and start the service running npm run api-server.
  2. Use Postman to verify HOST/api/v1/products endpoint.

Clues:

  1. Use spaces for indentation.
  2. More info APIBluePrint specification.

2. Modify Cart API

Files route:

  1. In summerschool-cart-api repository.
  2. Navigate to the folder /api and open cart.apib in Atom editor.
  3. Find the Body response.
  4. Add feature: true for products with id 2 and feature: false for the rest.

example:

  "id": 2,
  "title": "Dearlovers",
  "description": "Chiffon Blouse U Neck",
  "price": 89.99,
  "category": "Women",
  "feature": false,
  "image": "pc1.jpg"
  1. Save the file and start the service running npm run api-server.
  2. Use Postman to verify HOST/api/v1/cart/1 endpoint.

Clues:

  1. Use spaces for indentation.
  2. More info APIBluePrint specification.

3. Add feature image to Products.

Files route:

  1. In summerschool-frontend repository.
  2. Navigate to the folder /src/components and open ProductItem.js in Atom editor.
  3. Find ProductItem and create a const PrintFeatureItem.
  4. Add span and img tags to PrintFeatureItem const.
  5. span tag with className equals to feature-product
  6. Nest img to span with src equal to {require("../images/featured_product.png")}

Const definition example:

const Variable =
      <span>
        <img src="image-path" alt="alt-title"/>
      </span> : "";
  1. Validate that show feature image only for products that have feature equal to true.

If condition assignment:

const Variable =
  (condition)?
    <p>True Condition</p> : <p>False Condition</p>;
  1. Render PrintFeatureItem const after the div tag with className="mid-pop"

How to Render a value:

  {CONST_NAME}
  1. Verify the correct render of the change.
  2. Save the file.

Clues:

  1. Span Tag specification.
  2. Img Tag specification.
  3. Nesting Tags post.

4. Add feature prop to Products.

Files route:

  1. In summerschool-frontend repository.
  2. Navigate to the folder /src/components and open Content.js component in Atom editor.
  3. Find <ProductItem component.
  4. 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")}
  1. Save the file.
  2. Run npm run build and see the result in Chrome web browser.

Clues:

  1. Check Transfering Props
  2. Check Get function
  3. See how get other properties like price.

5. Add feature product styles.

Files route:

  1. In summerschool-frontend repository.
  2. Navigate to the folder /src/styles and open styles.scss in Atom editor.
  3. Find .mid-pop class.
  4. Nest .feature-product class with:
  5. position: absolute;
  6. top: ??; use the value obtained from Chrome Developer Tools.
  7. right: ??; use the value obtained from Chrome Developer Tools.
  8. Save the file.
  9. Run npm run build and see the result in Chrome web browser.

Clues:

  1. Check Sass 3 syntax.
  2. Check CSS Position property.
  3. How to see Chrome Developer Tools.

6. Add feature menu.

Files route:

  1. In summerschool-frontend repository.
  2. Navigate to the folder /src/components and open Header.js component in Atom editor.
  3. Find ul tag with className="nav navbar-nav nav_1"
  4. Add a new li tag nesting <Link className="color" to={'/feature'}>Feature</Link>

Clues:

  1. Check Link Component.

7. Update Cart tests.

Files route:

  1. In summerschool-frontend repository.
  2. Navigate to the folder /src/test and open cart.spec.js in Atom editor.
  3. In handles SET_CART, handles SET_CART_ITEM when no exist CART_ITEMS, handles SET_CART_ITEM when exist CART_ITEMS and handles DELETE_CART_ITEM test.
  4. Note: Modify in action and expect.
  5. Add "feature": true for products with id 1, 4, 7 and "feature": false for the rest.
  6. Save the file.
  7. Verify that test pass running npm run test.

Clues:

  1. Check Expect equal.

11. Update Order tests.

Files route:

  1. In summerschool-frontend repository.
  2. Navigate to the folder /src/test and open order.spec.js in Atom editor.
  3. In handles SET_ORDER.
  4. Note: Modify in action and expect.
  5. Add "feature": true for products with id 1, 4, 7 and "feature": false for the rest.
  6. Save the file.
  7. Verify that test pass running npm run test.

Clues:

  1. Check Expect equal.

12.Update Products tests.

Files route:

  1. In summerschool-frontend repository.
  2. Navigate to the folder /src/test and open products.spec.js in Atom editor.
  3. In handles SET_PRODUCTS.
  4. Note: Modify in action and expect.
  5. Add "feature": true for products with id 1, 4, 7 and "feature": false for the rest.
  6. Save the file.
  7. Verify that test pass running npm run test.

Clues:

  1. Check Expect equal.

Fix new Feature errors task

1. Fix Items API service.

  1. In summerschool-items-api repository.
  2. Navigate to the folder /api and open products.apib in Atom editor.
  3. Modify this file to change product to products.
  4. Save the file.
  5. Restart the server running npm run api-server.
  6. Verify the response making a get call to /api/v1/products on Postman application.

2. Fix Product test.

  1. In summerschool-frontend repository.
  2. Navigate to the folder /src/test/ and open products.spec.js in Atom editor.
  3. Find SET_PRODUCT test.
  4. Add the respective feature element for expect values.
  5. Save the file.
  6. Verify the test running npm run test.

3. Fix feature-product styles.

  1. In summerschool-frontend repository.
  2. Navigate to the folder /src/styles and open styles.scss in Atom editor.
  3. Find feature-product class nested to mid-pop.
  4. Correct the right value of feature-product.
  5. Save the file.
  6. Verify the style in the web browser, if the service is not running run npm run build.

4. Fix to 2 decimals total amount.

  1. In summerschool-frontend repository.
  2. Navigate to the folder /src/components and open Header.js component in Atom editor.
  3. Find the className simpleCart_total.
  4. At the end of the method reduce fix the result to 2 decimals.
  5. Save the file.
  6. Verify the style in the web browser, if the service is not running run npm run build.

5. Fix the typo for feature menu.

  1. In summerschool-frontend repository.
  2. Navigate to the folder /src/components and open Header.js component in Atom editor.
  3. Find the className nav.
  4. Fix typo on feture menu.
  5. Save the file.
  6. Verify the style in the web browser, if the service is not running run npm run build.

6. Fix route path.

  1. In summerschool-frontend repository.
  2. Navigate to the folder /src and open routes.js in Atom editor.
  3. Find the Route for features.
  4. Fix the typo on fetures path.
  5. Fix typo /fetures to /feature.
  6. Save the file.
  7. Verify the style in the web browser, if the service is not running run npm run build.

7. Fix Pathname validation. location.pathname validation

  1. In summerschool-frontend repository.
  2. Navigate to the folder /src/containers and open MainStore.js component in Atom editor.
  3. Find the MainPageContent const.
  4. Fix typo /feture to /feature on the location.pathname condition.
  5. Save the file.
  6. Verify the style in the web browser, if the service is not running run npm run build.

8. Fix Link Proceed To Buy.

  1. In summerschool-frontend repository.
  2. Navigate to the folder /src/components and open Checkout.js component in Atom editor.
  3. Find the PrintBtnProceedToBuy const.
  4. Add prop to equals to /orderSummary and add onClick event equals to handleProceedToBuyClick.
  5. Save the file.
  6. Verify the style in the web browser, if the service is not running run npm run build.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment