ViriCiti Example App

This repository holds the ViriCiti Example App starter kit.

We've set up the full project for you with Webpack, Node.js, Express, Socket.io, React.js and Less. This should provide you with the tools to build a cool web app!

Getting Started

First, fork the repository at:

https://github.com/viriciti/assignment

Then open up your terminal and clone the forked repository

^{Replace [YOUR_USERNAME] with your name}

git clone https://github.com/[YOUR_USERNAME]/assignment.git

Enter the directory

cd assignment

Install all the dependencies

npm i

Run the project

npm start

Finally, open up your browser at http://localhost:1337

The Assignment

We have provided you with a starter kit that receives vehicle data in the front-end over a socket connection. This is all setup for you. The assignment can be done from two perspectives: you can choose whatever you would like to do:

1. Doing the assignment focused on front-end
2. Doing the assignment focused on back-end

More on this later.

We've provided you with a few parameters:

The data

The assignment is based on a vehicle data generator. A stream of objects that looks like this:

{
  time: 1511512585495,
  energy: 85.14600000000002,
  gps: ["52.08940124511719","5.105764865875244"],
  odo: 5.381999999997788,
  speed: 12,
  soc: 88.00000000000007
}

• time - Unix timestamp of the moment the datapoint was recorder
• energy - Energy used in kWh
• gps - Latitude and longitude where the datapoint was recorded
• odo - The distance driven in km
• speed - The speed the vehicle was going in km/h
• soc - The state of charge (battery) of the vehicle in %

Now choose what you would like to do, front-end of back-end work, and pick the appropriate assignment!

Front-end based assignment

We would like to see how you can visualize the vehicle data for the end-user. What does the user want to see and how are you going to display this? Give the user real-time insights into his/her vehicle.

We highly encourage you to use your creativity in this assignment. However, we do have some requirements it needs to meet:

Front-end - The requirements

Your app needs to at least:

• provide the user with useful insights in data through data visualizations (e.g. D3.js)
• be modular (in React.js components)
• have re-usable components and be coded DRY (Don't Repeat Yourself)
• be fully responsive and mobile friendly
• use Less in a structured way for styles

Front-end - Up for more?

Cool! You could extend the app's functionality by:

• Enrich the data-set with different data sources (e.g. weather API)
• Optimize page loading (performance)
• Global state management, like using Redux.js
• Service workers
• Progressive Web App

Back-end based assignment

You choose to leave the client-side JS app in the example application as it is and concentrate on the back-end. Awesome!

In the example application you will find a Vehicle data generator in src/server/lib/Vehicle.js. This generator is part of a node HTTP server. Now, it is your task to create a separate service for this generator, so potentially more services could make use of it. The image below depicts the current situation and the preferred situation.

Move the data generator from src/server/lib/vehicle.js, which is now a node module included in the HTTP server, to another process based on a TCP server. For the HTTP server to keep receiving the vehicle data, it needs to connect (as a TCP client) to this new TCP server that is running the vehicle data generator. To make it a bit more interesting, the port on the TCP server should be an arbitrary port, so you will need to make use of some sort of service discovery. i.e. Consul may be a good choice, but etcd is interesting too.

Back-end - Requirements

• Your modified back-end needs three services, a HTTP server (consuming the data), a TCP server (production the data) and the (third-party) service discovery service
• The TCP server registers its port in the service discovery
• The TCP server generates the vehicle data and streams it over a TCP connection
• The HTTP server, hosting the web client, connects to this TCP server and receives its data
• Make the HTTP server reconnect with the TCP server after the connection is dropped (implement a reconnection strategy)
• Run more vehicles by increasing the number of instances of your Vehicle Data Generator service (and stream them to the HTTP server)
• Allow multiple HTTP servers to connect to your vehicle TCP server(s)

Back-end - Up for more?

Nice! Now that is working and if you still have some energy (and time ;) ) left, how about:

• Improve the Vehicle.js module! (it lacks re-reading it's source file after reading through it all)
• Dockerize all your services

Still some time left?

• Add some data-visualisation in the front-end part to actually see these vehicles drive on a map using the GPS location

The project file structure

The project structure is pretty straight forward. Below you can find some of the things you might be looking for.

Node.js and Express server

This project runs on a node HTTP server using Express. You can find the server's entry file here:

src/server/index.js

React.js front-end

This project uses React.js in the front-end. You can find the mounting of the app here:

src/client/main.js

Less for styles

This project uses Less for styling. You can find the main Less file here:

src/client/less/app.less

Read up material

Looking to level up your knowledge and skills? These are some good articles/courses that you can check out.

Front-end

• Atomic Design
• BEM
• LearnYouReact
• GitIt
• ExpressWorks

Back-end

• Node.js Streams API
• Readable Streams & Back-pressure
• Node.js TCP server
• Service Registry with consul or etcd
• Docker

General

• Learn Node.js and it's modules

Questions

If you have any questions about the assignment or project setup feel free to contact us at d.bitter@viriciti.com (front-end) or s.rijk@viriciti.com (back-end). You can also come by the office. We're always ready to help.

Good luck with the assignment!