{"id":15471581,"url":"https://github.com/miksansegundo/demio","last_synced_at":"2026-04-07T21:31:54.102Z","repository":{"id":83792426,"uuid":"114400561","full_name":"miksansegundo/demio","owner":"miksansegundo","description":"MOCK Invoice App","archived":false,"fork":false,"pushed_at":"2017-12-15T20:39:55.000Z","size":383,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-17T18:30:35.803Z","etag":null,"topics":["animatecss","axios","babel","react","redux","sass","thunk","webpack"],"latest_commit_sha":null,"homepage":"http://demio.studiomik.es/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/miksansegundo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-12-15T18:35:27.000Z","updated_at":"2017-12-15T19:20:55.000Z","dependencies_parsed_at":"2023-07-12T14:46:15.403Z","dependency_job_id":null,"html_url":"https://github.com/miksansegundo/demio","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/miksansegundo/demio","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miksansegundo%2Fdemio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miksansegundo%2Fdemio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miksansegundo%2Fdemio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miksansegundo%2Fdemio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/miksansegundo","download_url":"https://codeload.github.com/miksansegundo/demio/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miksansegundo%2Fdemio/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31530641,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T16:28:08.000Z","status":"ssl_error","status_checked_at":"2026-04-07T16:28:06.951Z","response_time":105,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animatecss","axios","babel","react","redux","sass","thunk","webpack"],"created_at":"2024-10-02T02:20:43.648Z","updated_at":"2026-04-07T21:31:54.081Z","avatar_url":"https://github.com/miksansegundo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Demio Mock Invoice App\n======================\n![](http://recordit.co/pIkc05SNRX.gif)\n[Screencast](http://g.recordit.co/HyT9RyEE8K.gif)\n\nThis 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.\n\nThe stack is:\n  - **React** A JavaScript library for building user interfaces\n  - **Redux** A predictable state container for JavaScript apps\n  - **Sass** Syntactically Awesome Style Sheets\n  - **axios** Promise based HTTP client for the browser and node.js\n  - **animate.css** Just-add-water CSS animations\n  - **reactstrap** Easy to use React Bootstrap 4 components\n\n## The State\nIt is managed using two techniques:\n - `Redux store`\n - `Component State`\n\n### Data management\nA HOC component fetch de data from the server put it in the `store`.\nThe data from the server is managed in a `Redux store` and controlled byt the `Actions:\n  - `UPDATE_DATA`\n  - `SAVE_INVOICE`\n  - `UPDATE_INVOICE`\n  - `DELETE_INVOICE`\n  - `EDIT_INVOICE`\n  - `UPDATE_CUSTOMER`\n  - `ADD_PRODUCT`\n  - `DELETE_PRODUCT`\n  - `SET_DISCOUNT`\n  - `UPDATE_TOTAL`\n\n### UI State\n- UI state is managed in a `Component Class` with a `state`\n  - Following the **React philosophy** *Props down and actions up*\n  - The Actions are:\n    - `toggleModal`\n    - `setProduct`\n    - `setValue`\n    - `showError`\n  - A lot of props are passed explicitly to each `Component`\n\n## SASS\n- The CSS is organized per `Component`\n  - `App`\n  - `Menu`\n  - `Modal`\n  - `Table`\n  - `Button`\n- Some parts uses `BEM` notation for selectors\n- The HTML uses `Bootstrap 4` classes\n- The Layout used is `Flexbox\n- Animations are reused from [animate.css](https://daneden.github.io/animate.css/)\n\n## Server comunication\n- There is a library wrapping **axios** for `HTTP AJAX Requests`\n- The API URL is in a JS config file\n\n## Asynchonicity\n- It is been managed with `Promises` and `Async - Await`\n- `Redux-thunk` is been used to dispatch async actions\n\n## Back-end API\n- The backend has been refactored to simplify the `Invoices` endpoint\n  - A new relation between `Invoice` \u0026 `Customer` allows the population\n  of the customer data\n  - `Invoice` has a new key `invoice_item` of type `JSON` allowing:\n    - Easy creation and update of invoices\n    - Easy fetching of the invoice list\n    - TODO - Update the product data (price and name) on GET `/api/invoices`\n    per each invoice item. Right now invoice items are not in a collection\n    because they are embed inside the invoice and a change in a product\n    won't be updated in invoice items.\n\n## Scripts\n### Run\n\nRun a webpack-dev-server at http://localhost:3000\n\n    yarn start\n\nRun a test suite (work in progress)\n\n    yarn test\n\nRun the server API at http://localhost:8000\n\n    yarn server\n\n### Build\n\nCreate a single JS bundled in the *build* directory\n\n    yarn build\n\n### Deploy\n\nDeploy the code to the http://demio.studiomik.es domain\n\n    yarn deploy\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmiksansegundo%2Fdemio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmiksansegundo%2Fdemio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmiksansegundo%2Fdemio/lists"}