Restaurant Menu Builder

A technology demonstration, in the form of a simple restaurant menu management app, that integrates the following technologies:

• Redux for the app's model layer.

• React for the app's view layer.

• TypeScript as the scripting language.

• Webpack for build and bundling.

• Bootstrap for styling.

• Karma/Mocha for testing.

• SASS for styling. Here we use Libsass instead of Ruby SASS.

• Google Analytics.

• Travis CI for build and deployment.

To view the app live, click here. Please note that visual aesthetics is not the main purpose of this app.

Overview

The UI has two panels: the left-hand panel for adding, selecting/deselecting or deleting menu items and the right-hand one for immediate viewing of the resulting menu.

Each menu item has the following properties:

• Category, e.g desserts, vegetables, snacks and so on.

• Name: name of the menu item.

• Description: description of the menu item. Usually the ingredients.

• Price, in dollars.

• Whether or not the item is vegetarian.

• Whether or not the item is undercooked. Sometimes food can contain foodstuffs that are undercooked, like a medium­rare steak, which restaurants must report by law.

The user interface:

• The left panel is used to edit menu items.

  • Click on each menu item to toggle that item's inclusion in the menu.

  • Click "Delete" to remove that item from the database.

  • Fill in the form at the top to add new items.

• The right panel is a live preview of the menu.

Build

• On the command line, cd to the project directory

• Run npm install. If you don't have npm already installed, follow the instructions here.

• To do development, run npm run start. This will start a web server on port 8080 so point your web browser to http://localhost:8080/ to see a working version of the app. Because Hot Module Replacement is enabled, any SASS changes will take effect right away without reloading and any TypeScript changes will take effect after a refresh.

• To build for production, run npm run build. The resulting app is in the dist directory in the project directory. index.html is the entry point.

• To run tests, execute npm test.

Note:

• While debugging with Chrome Dev tools, use the webpack:///./~/ pattern to blackbox third-party libraries.