where-for-lunch

Decide a lunch place for you!

Getting Setup

Download Node v8+ or install by NVM

Check if Node is succesfully installed:

$ node -v

Install Dependencies

$ npm install

Starting the app

run client:

$ npm run webpack-dev

run server:

$ npm run start

On development, run client & server at one go

$ npm run dev

Running tests

$ npm test

Local development:

http://localhost:3000/#/

For server side, this repo uses 3001 as the default port number, if you want to change to a port number you prefered, add it to your own .env file and change your axios baseUrl (do not commit this)

Dev Tools

There are a few chrome extensions that make development a breeze.

• React Developer Tools
• Redux DevTools extension

Application Structure

.
├── client
│   └── index.js    # client app bootstrapping and rendering
│   └── actions     # redux actions
│   └── assets      # assets that are not component-specific, including images or fonts
│   └── components  # presentational react components that are mostly stateless, not connected to redux store
│   └── constants
│   └── containers  # container react components that subscribe to redux
│   └── lib
│   └── middleware  # redux middlewares
│   └── reducers    # redux reducers
│   └── routes      # react-router
│   └── sagas       # redux sagas, generators mostly used for dealing with async flows
│   └── services    # API services
│   └── store       # redux store with middlewares applied and reducers connected
│   └── styles      # global styles, variables
│   └── types       # custom prop types for react components
├── config          # webpack and other config files
├── server
│   └── app.js      # express app setup including routes
│   └── server.js   # server app entry point
│   └── lib
│   └── routes      # express routes
│   └── services    # API services
├── .env            # used for development only, store env variables
└── test
    └── client      # jest unit tests and component tests
       └── components
         └── __snapshots__ # jest components snapshots
    └── server      # to be implemented
    └── setup.js    # scripts needed to run tests
    └── jestSetup.js# jest setup

Some more explanations

.env

local development env variables. For an existing copy click here

test

This repo uses jest as the main test framework. For component tests, you can either choose jest + enzyme or jest snapshots. There are two examples set for Place.js. For debugging purpose, tests can be ran under auto reload mode

$ npm run test-tdd

To update the snapshots after logic changes:

$ npm run jest-update

Note that it's your responsibility to make sure the updated snapshots are the correct ones

Api tests, server side, saga are still pending for tests to be implemented.

For any new logics, please add tests in.

node

Server side uses await, if you prefer to use Promise, please go ahead

Eslint

Please make sure there are no eslint errors, for your convenience, it is recommended to install eslint on your local editor.

ES6

This repo uses es6 syntax. Please stick with it.

CSS

This repos uses CSS module and with PostCSS plugins. In general, you can define your style as global styles or component styles which stays within each component directory

Trouble shooting

Windows native cmd users, you may experience erros saying env is not recognised as internal command, in this case you may want to switch to a more advanced terminal

Production mode:

Not implemented yet