ATM

The Number26 ATM challenge

A small web based prototype of an ATM.

It is built on JavaScript using React and Redux. It is developed with webpack and postcss.

Quick start

1. Clone this repo using git clone git@github.com:agudulin/atm.git
2. Run npm install to install dependencies
3. Run npm start to see the app at http://localhost:8080
4. Run npm run lint to lint the codebase with standradjs
5. Run npm test to run specs.

Project structure

├── server.js               // webpack dev server with hot reloading
├── webpack.config.js       // config file for webpack
└── src
    ├── app                 // main SPA container
    │   ├── index.css
    │   └── index.js
    ├── common
    │   ├── general         // general redux state
    │   │   ├── actions.js
    │   │   ├── reducer.js  // initial state description and state's reducers
    │   │   └── steps.js    // reusable string constants
    │   └── reducer.js      // combination of all possible reducers
    ├── components          // small parts of the app
    │   ├── error-pane
    │   ├── footer
    │   ├── header
    │   └── screens
    │       ├── enter-pin
    │       ├── goodbye
    │       ├── withdrawal
    │       └── withdrawal-other-amount
    └── index.js            // entry point of the app, mounts the app to DOM

Implementation details

1. ATM works as a state machine. That's why I decided to use React for this application: it thinks of UIs as simple state machines.
2. Redux helps to operate with the state using simple pure functions.
3. All components except one (<App />) are stateless.

Possible improvements

1. Add a production config with hot reloading disabled, minification enabled, and styles exctracted.
2. Use dumb-bem to produce atomic reusable components.
3. Use immutable to be sure the state is an immutable structure.

License

MIT © Alexander Gudulin