https://github.com/miksansegundo/demio

MOCK Invoice App
https://github.com/miksansegundo/demio

animatecss axios babel react redux sass thunk webpack

Last synced: 19 days ago
JSON representation

MOCK Invoice App

• Host: GitHub
• URL: https://github.com/miksansegundo/demio
• Owner: miksansegundo
• Created: 2017-12-15T18:35:27.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2017-12-15T20:39:55.000Z (almost 7 years ago)
• Last Synced: 2024-10-08T15:50:35.434Z (30 days ago)
• Topics: animatecss, axios, babel, react, redux, sass, thunk, webpack
• Language: JavaScript
• Homepage: http://demio.studiomik.es/
• Size: 374 KB
• Stars: 0
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Demio Mock Invoice App

======================

![](http://recordit.co/pIkc05SNRX.gif)

[Screencast](http://g.recordit.co/HyT9RyEE8K.gif)

This repo holds **[Mock Invoice App (demio.studiomik.es)](http://demio.studiomik.es)** a test project for Demio. It's coded on **Babel** with **[JavaScript Standard Style](https://standardjs.com/)** and it's built with **Webpack** with the awesome [create-react-app](https://github.com/facebookincubator/create-react-app) boilerplate.

The stack is:

  - **React** A JavaScript library for building user interfaces

  - **Redux** A predictable state container for JavaScript apps

  - **Sass** Syntactically Awesome Style Sheets

  - **axios** Promise based HTTP client for the browser and node.js

  - **animate.css** Just-add-water CSS animations

  - **reactstrap** Easy to use React Bootstrap 4 components

## The State

It is managed using two techniques:

 - `Redux store`

 - `Component State`

### Data management

A HOC component fetch de data from the server put it in the `store`.

The data from the server is managed in a `Redux store` and controlled byt the `Actions:

  - `UPDATE_DATA`

  - `SAVE_INVOICE`

  - `UPDATE_INVOICE`

  - `DELETE_INVOICE`

  - `EDIT_INVOICE`

  - `UPDATE_CUSTOMER`

  - `ADD_PRODUCT`

  - `DELETE_PRODUCT`

  - `SET_DISCOUNT`

  - `UPDATE_TOTAL`

### UI State

- UI state is managed in a `Component Class` with a `state`

  - Following the **React philosophy** *Props down and actions up*

  - The Actions are:

    - `toggleModal`

    - `setProduct`

    - `setValue`

    - `showError`

  - A lot of props are passed explicitly to each `Component`

## SASS

- The CSS is organized per `Component`

  - `App`

  - `Menu`

  - `Modal`

  - `Table`

  - `Button`

- Some parts uses `BEM` notation for selectors

- The HTML uses `Bootstrap 4` classes

- The Layout used is `Flexbox

- Animations are reused from [animate.css](https://daneden.github.io/animate.css/)

## Server comunication

- There is a library wrapping **axios** for `HTTP AJAX Requests`

- The API URL is in a JS config file

## Asynchonicity

- It is been managed with `Promises` and `Async - Await`

- `Redux-thunk` is been used to dispatch async actions

## Back-end API

- The backend has been refactored to simplify the `Invoices` endpoint

  - A new relation between `Invoice` & `Customer` allows the population

  of the customer data

  - `Invoice` has a new key `invoice_item` of type `JSON` allowing:

    - Easy creation and update of invoices

    - Easy fetching of the invoice list

    - TODO - Update the product data (price and name) on GET `/api/invoices`

    per each invoice item. Right now invoice items are not in a collection

    because they are embed inside the invoice and a change in a product

    won't be updated in invoice items.

## Scripts

### Run

Run a webpack-dev-server at http://localhost:3000

    yarn start

Run a test suite (work in progress)

    yarn test

Run the server API at http://localhost:8000

    yarn server

### Build

Create a single JS bundled in the *build* directory

    yarn build

### Deploy

Deploy the code to the http://demio.studiomik.es domain

    yarn deploy