Skip to content
Snippets Groups Projects
Select Git revision
  • backend-fixes
  • deployment
  • frontend-devel
  • master default protected
  • assignments
  • final
  • assignment08
  • assignment07
  • assignment06
  • assignment05
  • assignment04
  • assignment03
  • assignment02
  • assignment01
14 results
Blame Permalink
technology.md 4.62 KiB

Technologies, Architecture & Development Process

Architecture & Technology

The application is divided into a front-end (client folder) and back-end (server folder). Both are running on JavaScript runtimes and are written in TypeScript. The communication between the server and client is implement using a REST API.

Server

The server runs on the Node.js environment. The code is rune using node-ts when testing, and compiled using the TypeScript compiler before running it with regular node for production.

The API is implement on the server using the express web framework. The server also serves the static resources for the front-end. The back-end handles requests using a database connection handled by the Knex.js query builder. For testing a SQLite3 database is used, while for production and staging the server connects to a PostgreSQL database.

Authentication is handled using JSON Web Tokens (JWT) that are signed either using a secret (in testing) or using a public and private key pair (in production). The authentication token must be given for all request that require authentication. Password are salted and hashed using the bcrypt algorithm and later verified against the provided credentials for generating new tokens.

The implementation of the API is split into multiple parts. The parts all have unit test in the server code, that are run using the Jest testing framework and the supertest library for testing the API. Documentation for each part can be found in the API Documentation.

Client

The front-end is running in the browser and implemented as a Single Page Application. Like the server, it is written in TypeScript and transpiled before running in the browser. For production builds, the application is bundled and minified using Webpack. We are also using the Workbox library to simplify the implementation of the service worker and make the website a Progressive Web App (PWA).

The client uses the React framework together with the React router library. React is a JavaScript library for rendering user interfaces. It uses a component structure, where the programmer defines custom components that can be nested and will then be rendered by the library into the browsers DOM. We implemented only functional components, and used TSX to allow easier input of the React nodes.

We also use SCSS for styling the pages and custom components we implemented. It is transpiled, similar to TypeScript, before running the code in the browser. The resulting CSS will also be bundled using Webpack.

Development Process

We started development by thinking about the user story and crating simple wireframes. After we had an idea of what the application was supposed to do, we started to design the database structure. With the database schema finished and after selecting the technologies, we started work first on the backend. At the same time, we also started work on the front-end, initially working on the parts that did not need the API. After we completed the functionality of the server code, we focused our attention on design and implementation of the client side code. From then on, changes to the back-end where small and mainly to fix bugs that were found during the implementation of the front-end. We focused the last part of development on finding and fixing bugs, adding only a small amount of new features in the last month.