Project Manager SPA v2

Project Manager Single Page Application (PMSPA) is a simple application built for personal project management and time keeping.

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

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

Backend is created using Node and Express.

Architecture setup

PMSPA 2 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.

PMSPA2 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.

PMSPA 2 Pipeline diagram

Project Details

Application consists of the following screens:

Login
Homepage
Projects
Tasks
Calendar
Events

Click on the image to view in full size.

Projects, Project and New Project screens - Projects can be viewed, created and deleted. List of tasks belonging to each project can be viewed. Project details in JSON format can be viewed as well.

Click on the image to view in full size.

Tasks, Task and New Task screens - Tasks can be viewed, created and deleted. List of notes belonging to each project can be viewed. List of events logged for each task can be viewed. Task details in JSON format can be viewed as well.

Click on the image to view in full size.

Events and New Event screens - Events mark all work done for a single task in a given time. Logs can be added to each event for separate work done for a single task throughout the day. Events can be marked as booked. Total worked time and total booked events are displayed in the charts.