Shift3 React Challenge Project

This project represents a challenge to test your git flow, programming, and troubleshooting fundamentals. Below you will find instructions on how to complete the challenge, as well as additional information on how to stand up and navigate this project.

Challenge Instructions

You will begin by creating a fork of this repository to your own Github account. All work will be completed and reviewed within your own fork. Please do not create a Pull Request (PR) back into this repository.

Once you have created your fork, review the Issues labeled challenge task HERE. Shift3's standard for branching is as follows:

• Maintain a master and development (dev) branch on your fork
• For each feature/task (Issue), create a new branch based off of your dev branch
• Once a task has been completed, create a Pull Request from the working branch to your master branch and reference the Issue you are working on. These open PRs will be the final submission which Shift3 will review.

Once you are ready to submit your work, send an email to your Shift3 contact with a link to your fork.

Please apply the following Shift3 Standard Practices as you work on this project:

• Each unit of work (Issue) should be completed within its own branch.
• Use Karma-style formatting for your Git Commit Messages.
• Generate a PR for each unit of work (Issue) which is completed. Keep the scope of these PRs as narrow as possible. Try not to create PRs which rely on or contain code from previous PRs unless there is truly a dependency between the two units of work.

Project Information

This is a multi-container docker environment that utilizes Docker to create three seperate but linked containers:

• MongoDB database
• Node/Express Server
• React client

Project Requirements

• Docker
  • For Mac Users: Docker Desktop for Mac
  • For Windows 10 Home/Pro/Enterprise Users: Docker Desktop for Windows
  • For Windows 7 Users: Docker Toolbox
  • For Linux Users (follow link and choose your Distro): Docker Engine
• Do not have anything running on the required ports (3000 for client, 4000 for server, 27017 for mongo.)

Running the project

• After cloning the repo, go into the project's root directory. There are two ways to run the project. Docker Desktop on Windows has some outstanding issues with file updating, so by default, the hot reloading features on the server and client will not work. The solution is to enable polling which is more CPU intensive. The two ways to run the app are:
  • If you have bash installed, running bash start.sh will run a script that calls the correct docker command.
  • If you prefer not to use bash, the correct docker command is:
    • On Mac: docker compose up
    • On Windows: docker compose -f ./docker-compose.yml -f ./docker-compose.windows.yml up
• The first time running this the server and client will both go through the build process, but this should only happen once.
• Your connection target on Mac and Linux is localhost://. For Windows users on Docker Toolbox, you will need to run docker-machine ip to find your address to connect to, default is 192.168.99.100:. You will also need to edit /application/src/private.js and replace the SERVER_IP export with either the commented out line, or your own.
• Database can be found at (target):27017, server at (target):4000, client at (target):3000.

Development process

Shutting down the servers can be done with a Ctrl-C command from your terminal. Alternatively, you can load up Kitematic to close them as well.

If you need to exec into one of the containers, Kitematic has a GUI to do that for you. Otherwise, you will need to run docker ps, find the container ID, and then run docker exec (container_name) -it bash.

Kitematic can also be useful for looking at the logs for one specific container, since all three are tailed in the terminal.

Endpoint testing

The following backend endpoints can be queried via Postman for testing purposes:

• Login (POST) - (server addr)/api/login (Expects name/password in request body)
• Current Orders (GET) - (server addr)/api/current-orders
• Add Order (POST) - (server addr)/api/add-order (Expects ordered_by, quantity, menu_item in request body)
• Delete Order (POST) - (server addr)/api/delete-order (Expects id in request body)
• Edit Order (POST) - (server addr)/api/edit-order (Expects id in request body. Will look for ordered_by, quantity, menu_item.)
• Flush Orders (DELETE) - (server addr)/api/delete-all (This deletes all current orders in the DB)
• Live Mode (POST) - (server addr)/api/live-mode Starts a simulated "live order mode" where random orders will either be added or deleted at an interval declared in time in the request body (in seconds). Orders will be added/deleted a total of 12 times.