/newDevChallengePt2

Primary LanguageJavaScript

Concept3D Interview : The Technical Challenge

Overview

Hello prospective candidate! In this repo, you're given a boilerplate that contains most of the libraries you'll need to complete the challenge. It's intended to examine your abilities in the following areas:

  1. Database and API design
  2. React/Redux knowledge
  3. Algorithmic problem solving
  4. General self-ownership of code in order to solve a problem
  5. Comfort diving into the docs in order to learn new technologies
  6. Ability to write clean, well organized, and refactored code
  7. Git usage and best practices

We understand that you are primarily Back-End developers, however, all of our Front-End applications are built in React. As such, we expect that you will have a working knowledge of how React works and the data structures that make working in React a pleasant experience.

We will be most focused on the server side logic and implementation of this challenge, but the basic Front End functionality is still very important. Read through the documentation before you begin. There will be instructions at the bottom of this README.

Requirements

  1. This boilerplate effectively contains two applications: A React Redux application that has been bootstrapped with Create React App, and an Express API. You'll notice that, at the moment, the API uses app.locals as a data store. In this part of the challenge, you will integrate a persistent data store. The user story is as follows:

    When I navigate to the root path of the applicaiton, I see the three seeded markers displayed on the page.

    Notes:

    • This is kind of a non story from the user perspective but it's an important story from our perspective. This is a basic refactor from app.locals to a persistent data store.
    • We use cloud infrastructure for most of our applications and, as such, take advantage of the sweet options that AWS provides.
    • We are looking for you to integrete AWS DynamoDB and build out a basic query that grabs all locations and returns them to the Front-End as JSON.
    • You shouldn't have to touch the React code in this portion of the challenge.

  2. As you'll see when you look into the Front-End boilerplate, there are two major components. The Form and the Map. The form will be used to add new markers to the map. The basic form has been set up, but lacks the functionality to save new markers. This part has two aspects - client side and server side. The user story is:

    When I enter a valid latitude and longitude into the form with a name, and then press enter, I will see a new marker added to the map with the correct name in the popup. If there are errors, I will see them rendered on screen. On success, the map will pan to the new marker's coordinates.

    Notes:

    • Markers must persist.
    • Valid latitude and longitude is important. As is the existence of a name.
    • Verify lat, lng, and name server-side.
    • Return meaningful error messages to the Front-End and render them accordingly.
    • Use Redux and Reducers to update the state of your app.
    • When adding a new marker, the center of the map will be set to the [lat, lng] of the new marker.

  3. Now that you're adding your new markers and saving them, let's make some shapes! Using the Leaflet library, let's make a polygon out of our markers. Here's the user story:

    When I click on a marker, it's location will be used as a point for a polygon. Successive clicks will add markers to the polygon, and clicking a point will remove it from the polygon

    Here's an example in pictures:

    After 2 Clicks:

    2 Clicks

    After 3 Clicks:

    3 Clicks

    After clicking on "Boston"

    Unclick

    Notes:

    • It is important that these polygons persist.
    • Use the React-Leaflet library to draw your polygon.

  4. BONUS TIME!

    If you have some extra time, feel free to implement any of the following. No stress.

    • Tests are always appreciated. See what you can do here.
    • Host your application. Heroku is free and easy. That being said, use whatever you are comfortable with.
    • Add some other fun features with the React-Leaflet library. Be creative!

Intructions

  1. Clone this repo to your own machine. (Do not fork it)
  2. cd c3d-challenge
  3. Delete the .git directory.
  4. Initialize git. Host this project as a new repo on your own Github profile.
  5. npm install
  6. Open a separate terminal tab and run npm run dev (this will start your server)
  7. npm start (this will start the React application)
  8. Good luck!

We rely heavily upon Git. Be sure to checkout new branches for new features. Commit often.

This project was made with Create-React-App and Nodemon, so it supports hot-reloading anytime you make a change (both client side and server side)!

Helpful Links:

Final notes:

Take as long as you need to feel to do your best work. However, this challenge should realistically take no longer than approximately 5-6 hours.

Have fun!