Part 1. Clock-in/out System - Diagram
Tags: javascript, typescript, node, nest
Published: 2019-02-24 23:03:21

---
title: Part 1. Clock-in/out System - Diagram
published: true
description: In this first post of the series of post about the clock-in/out system I’m going to describe the system’s architecture. The best way to describe the problem which our system will resolve is using a diagram. In this diagram you can see different components which can be in different or in the same server. The Figure 1 show the diagram used to build the clock-in/out system.
tags: javascript, typescript, nodejs, nest
series: clock-in/out system
canonical_url: https://carloscaballero.io/part-1-clock-in-out-system-diagram/
cover_image: https://cdn-images-1.medium.com/max/1000/1*KhCkmbtORw2Ux3n5WCrtzA.png
---

This post is part of a Series of post which I’m describing a clock-in/out system
if you want to read more you can read the following posts:

*****

*Originally published at [www.carloscaballero.io](https://carloscaballero.io/part-1-clock-in-out-system-diagram/)* on November 25, 2018.


* [Part 1. Clock-in/out System: Diagram.](https://dev.to/carlillo/part-1-clock-inout-system---diagram-4kgj)
* [Part 2. Clock-in/out System: Basic backend — AuthModule.](https://dev.to/carlillo/part-2-clock-inout-system-basic-backend-i--authmodule-d2l)
* [Part 3. Clock-in/out System: Basic backend — UsersModule.](https://dev.to/carlillo/part-3-clock-inout-system---basic-backend-ii---usersmodule-5hf5)
* [Part 4. Clock-in/out System: Basic backend- AppModule.](https://dev.to/carlillo/part-4-clock-inout-system---basic-backend-iii---appmodule-5anb)
* [Part 5. Clock-in/out System: Seed Database and migration data](https://dev.to/carlillo/part-5-clock-inout-system-seed-database-and-migration-data-320m)
* [Part 6. Clock-in/out System: Basic frontend.](https://dev.to/carlillo/part-6-clock-inout-system-basic-frontend---angular-28pg)
* [Part 7. Clock-in/out System: Deploy backend (nestJS) using docker/docker-compose.](https://dev.to/carlillo/part-7-deploy-backend-nestjs-dockerdocker-compose-3cmb)
* [Part 8. Clock-in/out System: Deploy frontend (Angular 2+) using environments.](https://dev.to/carlillo/part-8-clock-in-out-system-deploy-frontend-angular-6-using-environments-nog)
* [Part 9. Testing: Backend Testing — Unit Testing - Services](https://dev.to/carlillo/part-9-clock-in-out-system-testing-backend-testing-3imk)
* [Part 10. Testing: Backend Testing — Unit Testing - Controllers](https://dev.to/carlillo/part-10-testing-backend-testing-unit-testing-controllers-573a)
* Part 11. Testing: Backend Testing — E2E Testing
* Part 12. Testing: Frontend Testing — Unit Testing
* Part 13. Testing: Frontend Testing — Integration Testing


In this first post of the series of post about the clock-in/out system I’m going to describe the system’s architecture. The best way to describe the problem
which our system will resolve is using a diagram. In this diagram you can see
different components which can be in different or in the same server. The Figure
1 show the diagram used to build the clock-in/out system.

![](https://cdn-images-1.medium.com/max/1000/1*KhCkmbtORw2Ux3n5WCrtzA.png)
<span class="figcaption_hack">Figure 1. Clock-in/out system: Diagram</span>

So, the components of our system are the following:

* **ID Card**: All users have a card which is identified using an **UID**. The way
to work is that the user pass their card near of a Arduino system which has a
**NFC reader.**
* **Arduino**: There are two [Arduino](https://www.arduino.cc/) in the system. The
first is used to clock-in and the second is used to clock-out. So, each Arduino
send to the backend the UID’s card using the **POST** verb over **HTTPS**. The
Arduino system have a NFC and a WiFi chip: 1) The first is used to read the
card; 2) and the second is used to connect to the LAN to send the UID to the
server.
* **Backend**: The backend is developed using [NestJS](https://www.nestjs.com/)
which is a framework over [express](https://expressjs.com/) (although you can
use other libraries as [fastify](https://www.fastify.io/)) which can developed
software using the [SOLID](https://en.wikipedia.org/wiki/SOLID) principles and
the syntax as [Angular](https://angular.io/). This backend will be connected to
a relational database [Postgres](https://www.postgresql.org/) using
[TypeORM](http://typeorm.io/) as
[ORM](https://en.wikipedia.org/wiki/Object-relational_mapping).
* **Frontend**: The frontend is developed using [Angular](https://angular.io/)
which is a **framework over JavaScript** which is a good option when you want
scale large webapps (client-side). In this case, is used to illustrated how to
using the **last Angular's version and good practices**. The frontend is develop
using [RxJS](https://github.com/ReactiveX/rxjs), RxJS is a library for reactive
programming using **Observables**, to make it easier to compose **asynchronous
or callback-based code**. The connection between frontend and backend could have
been using **sockets to obtain real-time** but using **polling** you obtained a
result as a socket (**near real-time**) but more easiest.

There are several components which could be developed in the future as an
**admin panel** to manage information about users and cards, personal
information about my check-in/out in the system, the frontend could do search by
users to know if the user is in the building or not. Maybe, in the future this
features could be develop but today will go to presented a basic system of
clock-in/clock-out.

The GitHub project is [https://github.com/Caballerog/clock-in-out](https://github.com/Caballerog/clock-in-out)

*****

*Originally published at [www.carloscaballero.io](https://carloscaballero.io/part-1-clock-in-out-system-diagram/) on November 25, 2018.*