shift3/react-challenge-project-jan-2022

January 2022 iteration of the React Technical Challenge project

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 main 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 main 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. Run docker compose up. This will start up the database image and the server/
• The first time running this the server will go through the build process, but this should only happen once.
• With the server running, open up a new terminal window and navigate to the application directory.
  • If this is your first time running the app, run npm install.
  • Run npm start.
• Your connection target on Mac and Linux is localhost://.
• 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. Ctrl-C also works for shutting down the client.

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.

react-challenge-project-jan-2022's Issues

Bug: Order Time does not format time correctly

Expected Behavior/Desired Use Case

Order Time should be correctly formatted in hh:mm:ss format.

Actual/Current Behavior

Order Time does not zero-pad minute and seconds correctly, so it will sometimes show invalid time formats such as this example:

Steps to Reproduce the Problem/Implement this feature

1. Create an order when the current time minutes or seconds is less than 10.

Learning

This is a common type of problem when time parsing is done manually instead of using built-in time formatting tools. Research best-practices for displaying time in the current stack and apply those best practices to this project.

Live Refresh

This feature request is on the difficult side and is considered "extra credit". It is intended for advanced developers to demonstrate how they would tackle a more difficult problem.

Current Functionality

The current app only displays orders when a fetch is specifically called from the application. If someone adds/deletes/edits orders in the database through a method other than the app (such as Postman), the app does not reflect any changes in the order.

Desired functionality

In a real world application, an app like this would likely be deployed in several different locations that share the same database. For example a cashier would enter in an order and then this order would display on a make line for the cooks to make.

An endpoint has been created to simulate this sort of functionality on the server end. Hitting the /live-mode endpoint with a POST request triggers an operation on the server where orders are added and deleted at regular intervals. This interval can be specified by including { time: x } in the request body where x is the number of seconds. If no time is specified, the interval between orders is 5 seconds.

The desired functionality is to have these orders display on the front end as they are being added/deleted on the back end.

Bonus Feature: Login System

Notes

This challenge is to allow full stack developers to demonstrate their skill/experience with a basic login system, which is a common aspect of many projects. Since this will require some familiarity with MongoDB to create the collection, as well as some additions on the server (An endpoint for creating an account will need to be created as well as modifying the current login procedure), this is considered extra credit.

It is highly recommended that you encrypt the password being stored in the manner of your choosing. Bringing in packages to accomplish this is okay.

Bonus points for validating the email field, making sure the format is a proper email address.

Current Functionality

Right now, there is no user account system in place. Every login attempt as far as authentication is concerned is a success.

Desired functionality

Build a "Create account" page with similar style to the login page, and create a link from the login page to the create account page. Filling in the form with an email and password and submitting should create an account on the back-end and return the user to the login page.

Logins should now properly check the email/password against the newly added collection in the database and either properly authenticate, or return a login failure that is handled on the front end in the form of an error message in text.

Bonus feature: API call refactor

This bonus request should be tackled after completing #8 . As such, it is recommended that you branch off the code submitted for that pull request to complete this issue. This task aims to target applicants with stronger knowledge of both Redux and general React structure, therefore is considered an extra credit "bonus".

Current functionality

API calls are currently being handle in components that have other concerns; For example, the API call for submitting an order is handled inside the order form. Ideally, we want each component to have only one concern. If this application was to add even more features, we would run into difficulty debugging a component that is responsible for so many tasks.

Desired functionality

Fortunately, Redux can accommodate us. The axios package is already installed; refactor the code to leverage Redux to handle our API calls, and store the results inside Redux so any component can have access to them, and adjust the components accordingly.

Feature Request: Add "edit" and "delete" order functionality

Desired functionality

Add frontend functionality for the "Edit" and "Delete" buttons.

The server endpoints for these actions exists as defined in the readme.

Task should leverage existing React components to keep code as DRY as possible.

Feature Request: Test for correct time display

Desired Feature

The current testing suite should verify if the component correctly displays the time format from Issue #2 .

Actual Behavior

The current testing suite only checks if the component successfully renders one, multiple or no orders.

Update Dependencies

Expected Behavior/Desired Use Case

All project dependencies should be up to date to prevent security exploits.

Actual/Current Behavior

Several of the project's dependencies (most if not all are from npm) contain security vulnerabilities and could be a potential vector for an attack.

Steps to Reproduce the Problem/Implement this feature

The applicant should apply their knowledge and ingenuity to solve this problem.

Bug: Retrieve user from Redux and include in Order Form

Expected Behavior

When filling out an order, the users info should be added to the order as part of the ordered_by field. This info is grabbed from Redux.

Actual/Current Behavior

While login returns a success, the users information is not being returned from Redux.

Intentional Bug: Order form submit doesn't work

Expected Behavior

When submitting the order form, the order should successfully submit and be added to the order list.

Actual/Current Behavior

The order form submit action does not work due to an issue with the react parameters.

Order form found here: http://localhost:3000/order

Feature Request: Route Guarding

Desired Behavior

Navigating to the order form or the order list should not be possible without being logged in. Should someone attempt to do so, they should be taken to the login page.

Current Behavior

There is no route guarding, so users can place and view orders without being logged in.

Feature Request: Log Out

Desired Behavior

The logout button in the nav should return the user to the welcome page and clear the login information in Redux

Current Behavior

The logout button currently does nothing.

Feature Request: User Display in Nav

Desired Behavior

When a user successfully logs in, display their email in the nav bar

Current Behavior

There is no indication on the app regarding login status.

Notes

You will most likely want to branch this PR off the fix for #4 .