Smarthome web application built with React and Fastify

Auto formatted with standardjs, tested with jest 🎗

What is this and who is it for 🤷‍♀️

This project was made during Patronage20 internship program in Intive. This is forked repository from: intive/patronage20-js.

I've learnt a lot from this project. Technologies that was used:

• React with hooks
• Redux and Redux Sagas
• Fastify
• StandardJS
• Unit testing with jest
• Swagger documentation and OpenAPI
• Internationalization with il8next
• Docker

Features

• List of sensors (temperature sensors, window sensors, smoke detectors etc.) with live values
• Placing and removing sensors from map
• Changing color settings of LED Lights sensors
• Notifications panel
• HVAC panel with list of current rules
• HVAC form for creating new heating/cooling rules
• Internationalization with i18next
• Backend as a proxy with MongoDB for storing notifications and map positions
• Backend with basic cookies authorization
• Documentation of endpoints in swagger (/.well-known/documentation)
• Mock server generated with prism from OpenAPI schema

Setting up development environment 🛠

Prerequisites

Node minimum version 12.18.2, npm minimum version 6.14.5. In older versions mock server doesn't work because of prism prerequisites.

MongoDB must be installed locally or provided address to it in .env.

Populate .env file:

MONGODB_URI='mongodb://' # if you dont have local mongodb
GATEWAY_URL='http:localhost:3001' # address to gateway
COOKIE_NAME=NAME # if not set then cookie is not necessary to access website. It's also sended to gateway
COOKIE_VALUE=VALUE # if not set then it's not necessary for setting cookie in browser. It's also sended to gateway, so if gateway need cookie it's must have.

To manually set cookie in browser paste:

var doSetCookie = function setCookie (c_name, value, exdays) {
  var exdate = new Date()
  exdate.setDate(exdate.getDate() + exdays)
  var c_value = escape(value) + ((exdays == null) ? '' : '; expires=' + exdate.toUTCString())
  document.cookie = c_name + '=' + c_value + '; samesite=Lax'
}
doSetCookie('Name', 'Value', 1)

With correct Name and Value.

Backend

• Install node modules with npm install
• Run application with npm run start:watch

Frontend

• Build application with npm run build:frontend:dev
• Frontend should be builded and served by backend. On every change frontend should be rebuilded and reloaded by backend.
• Access frontend by http://0.0.0.0:3000/
• Set cookie if request was forbidden.

Docker 🐋

Instead of configuring local development prerequisites you can use Docker with command:

sudo docker-compose up

This will build application with MongoDB and expose it to your machine.

Rebuilding image:

sudo docker-compose up --build

Testing 🚥

Run frontend tests with: npm run test:frontend

Run backend tests with: npm run test:server

Run database test with: npm run test:db

Using mock backend server 🎭

Documentation is prepared using OpenAPI schema. You can acces this documentation under localhost:3000/.well-known/documentation.

• Start mock server with npm run start:local:mock
• You can the enter a whole url like http://localhost:3001/api/v1/dashboard an you will see the static examples served by the mock server.
• Then you can:
  • change the examples like http://localhost:3001/api/v1/dashboard?__example=positiv - where you can set the __example param with any example provided in the ./src/docs/examples/ directory.
  • set a dynamic mock (but it's not very useful and I don't know how to deal with it) by http://localhost:3001/api/v1/dashboard?__dynamic=true

Setting your own Mocks

• Follow the positive_example example.
  • Go to openapi.json and set what's needed.
  • Go to ./src/docs/examples and create what's needed.

Using mock gateway 🎭

Run mock gateway with npm run start:gateway:mock. Mock gateway will be working on port 3001. Add/edit to .env follwing line:

GATEWAY_URL=http://localhost:3001

Architecture 🏗️

This repository contains folders:

• docs - with documentation resources such as images and diagrams
• frontend - this is folder with frontend application implemented with React
• gateway-mock - mock of gateway. Is used when there's no access to proper gateway.
• src - this is backend application which has specialized API and works with MongoDB
• tests-server - unit test for backend