jBot - Just a bunch of tables - PM v3

jBot - Just a bunch of tables - is an iteration over PMSPA 2, a version 3 of sorts, that uses a different CSS framework and is used for for more detailed overview of tasks and events.

URL: https://jbot.angelovski.ga/#/

Frontend is built using Create React App. Styling is handled using Bootstrap. Global state is handled using Easy Peasy state manager.

Backend is created using Node and Express.

Architecture setup

jBot application consists of separate frontend and backend instances.

Frontend

Frontend consists of static assets created by building the Create React App. App is adjusted for deployment on a static host by using the Hash Router.

Assets are hosted on GitHub pages using a subdomain of a custom domain.

Backend

Backend is built using Node JS and Express and hosted on Azure. Database used in the backend is Mongo DB hosted on Mongo Atlas.

Frontend and backend communicate via http/1.1, with CORS enabled.

Ctrl + scroll to zoom in. Click here to view in new tab.

jBot Architecture diagram

Pripeline setup

Frontend and backend instance pipelines are also completely separate.

Frontend

Pipeline consists solely from GitHub elements. Code is hosted in GitHub Repo, and the website is hosted on GitHub pages.

Website assets (html, css and js files built by Create React App) are deployed to GitHub pages using NPM package gh-pages.

Backend

Code is hosted in Azure DevOps Repo. Pushing to master branch triggers the production Azure DevOps pipeline that is using a Self-hosted agent for building and deploying the backend app. App is deployed on Azure App Service on Linux running Node JS.

Ctrl + scroll to zoom in. Click here to view in new tab.

jBot Pipeline diagram

Project Details

Application consists of the following screens:

Login
Tasks
Stats

Click on the image to view in full size.

Tasks screen is displaying the Tasks from PMSPA 2 with a focus on Notes. Here, the notes can be added to a particular task, edited, and removed. Editor.js is used as a text editor for adding and modifying notes. In addition, Task's creation, modification and due dates are displayed. A color indicator displays how close or over the due date a specific task is. Task is more blue/green if due date is not yet reached, and yellow/red if the due date is close or passed.

Click on the image to view in full size.

Stats screen is displaying the events logged in PMSPA 2 and all associated details. Total number of hours worked, booked, pending booking and overtimes is displayed in numeric and graphic representation. List of events is displayed for the selected range of days. Each can expand and display the associated logs. Each event has a link to the task in the booking system, and a link to the parent task.