This project was bootstrapped with Create React App.
If you want to read about Create React App you can do it here
You can see a live demo here
This project requires:
- node (v 8.11.2)
First, you need to install node. The recommended installation is with nvm
If you are using
zshyou can use the oh-my-zsh plugin for nvm
Then, install npm libraries
npm installand start your development server with
npm run start| script | description |
|---|---|
npm run start |
Starts your dev server at port 3000 |
npm test |
Runs your tests |
npm lint |
Runs your linter |
npm run build |
Builds the app |
npm run storybook |
Runs storybook at port 9001 |
npm run start-server |
Runs a json server mocking the API. (Intended to be used from docker) |
This projects tries to follow a modular development approach.
Under src folder there is components folder conaining all the available components. Right now we have only two of them:
- OrderItem: Deals with a product in the product list. Contains the button that allows adding it to the shopping cart.
- ProductItem: To deal with a product added to the shopping cart. Allows increasing/decreasing quantity as well as removing it from the cart.
Every module follows the following convention:
- It comes with a
<Component name>.jsfile which holds the sources for the component. - It optionally comes with a
<Component name>.cssfile which contains the required stylesheet to render the component. - It comes with a
<Component name>.snapshots.test.jswith the snapshot tests for the component. - It optionally comes with a
<Component name>.test.jswith the tests for the component.
The api folder contains the required classes to consume data from the backend. Currently only two classes exists:
- orders.js: Allows loading, creating or updating orders.
- products.js: Allows retrieving the list of available products.
The project comes with docker-compose support. In order to execute the project you need to first and foremost build the image:
docker-compose buildNow you're ready to execute the application:
docker-compose upIt will start three containers exposing the following services:
- http://localhost:3000: React application.
- http://localhost:3001: Backend server with a mocked API.
- http://localhost:9001: The app' storybook.
This project comes with storybook. Place your stories files together with their related components with a .stories.js extension