Code Monkey home page Code Monkey logo

aim-takehome's Introduction

aim-takehome

overview

This project demonstrates how to create a simple real-time web-based map visualization that communicates with a Node.js server over GRPC. The server and client communicate using GRPC, using code generated from the service defined in the proto directory. The server has simulated "robots", which just move around randomly. Their positions are visualized on top of a map using Leaflet.

The project consists of three components:

  1. Web client
  2. GRPC server
  3. Envoy proxy

The web client communicates with the GRPC server via the Envoy proxy. A proxy layer is required because browsers do not provide fine-grained transport APIs required by GRPC. Envoy is the proxy used in the official docs.

All dependencies can be retrieved automatically given that you have some basic prerequisites installed. A single command will install dependencies and then start all three components locally in development mode. You can then navigate to the web client URL to see the project in action. See the next section for details.

running

Dependencies: Node 16+, npm, Docker

  1. Get pnpm: npm install -g pnpm
  2. pnpm start
  3. navigate to http://localhost:4567

When you're done:

  1. Stop the Envoy container using pnpm stop-envoy

controls

  • Drag to pan map, scroll/pinch to zoom
  • Machine locations are displayed as pin icons
  • Select a machine using the dropdown, or by clicking on its icon
  • With a machine selected, use the buttons to perform actions

notes on testing

There's no automated testing yet. Here are some things that could be tested:

  • Start client and server, check that client shows "connected"
  • A pin appears on the map for each distinct machine written to MachineStream
  • When the server writes to MachineStream, a corresponding pin on the map moves
  • Selecting a machine and clicking "(Un)Pause" causes the server to receive (Un)Pause RPC
  • Clicking on a map pin selects the correct machine
  • The client calls MachineStream again if the stream ends (reconnect)

development

  • The server and client support hot-reloading.
    • The client has hot module replacement via Parcel
    • The server will be recompiled and restarted when changes occur

regenerating proto outputs

Dependencies: Python 3, protoc on path

  1. npm i -g protoc-gen-ts
  2. cd proto
  3. python generate.py

aim-takehome's People

Contributors

loganzartman avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.