poc-react-invoice

Simple React/Redux/Router/Flow based Invoice SPA proof-of-concept. Loosely based on Seed Frontend Homework.

Demo: https://jfroom.github.io/poc-react-invoice

Blog post with a bit of commentary on the technologies.

Technologies

• React
• Redux & React Router
• Styled Components
• Flow static type checking
• Testing with Jest and Enzyme
• Nuclide & Redux DevTools
• Docker with Compose
• Scaffolded with Create React App which leverages Babel and webpack
• ESLint with watch
• Yarn
• React-Bootstrap
• TravisCI integration with auto-deploy to GitHub Pages

Getting Started

Required

1. Install Docker 17.03.0-ce+. This should also install Docker Compose 1.11.2+.
2. Verify versions: docker -v; docker-compose -v;

First run

docker-compose build Builds images.

Usage

Development

docker-compose up Starts web server.

open http://localhost:3000/ Loads default page into local browser.

docker-compose exec web yarn lint Run linter, stays open with watch.

docker-compose exec web yarn flow Run Flow type checker, stays open with watch. Flow much easier to work with inside of an IDE like Atom with Nuclide, or WebStorm.

Test

docker-compose exec web yarn test Run test suite, stays open with watch.

Build

docker-compose exec web yarn build Create production build of static files.

docker-compose exec web yarn serve-build Serve the build locally.

Additional References

• Flow type cheat sheet
• Redux DevTools
• Three Rules For Structuring (Redux) Applications
• TodoMVC example using Redux, React, and Typescript
• Testing Redux Applications
• Host single page apps with GitHub Pages
• Testing React components with Jest and Enzyme

TODO

• Styled-Components v2 flow types WIP: styled-components/styled-components#843 - ignoring in .flowconfig