View the Projects by pagnition

A Blog full of Web Projects

View the Projects by the navigation at the bottom of the Page sorted by Date...


DevOps and Headless CMS

10-August-2023

DevOps and Git-based Headless CMS used with my Blog

Note: The Decap CMS was formerly known as Netlify CMS and seems to keep most / all of the features of Netlify CMS.

This Blog is using a CI / CD Pipeline as an important concept of DevOps. An Editor of the Blog can use Git-based CMS for content administration while an Administrator or Developer of the Blog can use GitHub as a CMS as well as VS Code.

The CI / CD Pipeline was implemented by

  • The code of the Blog at GitHub
  • Decap Git-based CMS / GitHub as a CMS / VS Code
  • Netlify Cloud which hosts the Blog

A few examples of how it works:

When a developer makes a change to the code of the Blog and commit the code to GitHub by VS Code or GitHub as a CMS an automated Build will happen and if no errors are detected the created files from that build will be deployed to Netlify Cloud where the Blog is hosted.

An Editor saves a Post of the Blog ( A Markdown file) by the Decap / Netlify CMS system which starts the build and deployment by a commit to GitHub.

In addition to Headless Git-based CMS I have experience with API driven CMS listed below

  • Strapi - Based on Node.js

To get more experience with Git based CMS a copy of the Gatsby Blog is hosted and administrated by Gatsby Cloud and Tina CMS using another repository at GitHub.


Traditional CMS

08-August-2023

In addition to the Headless API-driven and Git-based CMS I have experience with the traditional CMS listed below:

  • WordPress - Based on PHP
  • Drupal - Based on PHP
  • Typo3 - Based on PHP
  • Umbraco - Based on .NET

Webpack 5 boilerplate with React and TypeScript

14-July-2023

A Webpack 5 boilerplate with React and TypeScript

Try the demo...

The code at GitHub

A Webpack 5 boilerplate with React and TypeScript. Babel 7 compiles the TypeScript files to ES5. The Webpack module "fork-ts-checker-webpack-plugin" handles the type checking. The demo App serve React routing, a Webpack logo, my photo with some info and compiled PostCSS. Bootstrap CSS was used to make the demo mobile friendly.


Tests

02-July-2023

Types of Tests used creating this Blog and the Web Projects

  • Usability Tests to involve the future Users of the Blog and Projects with the goal of satisfied Users
  • End-to-end Tests or Functional Tests for making sure that the workflows work as expected. The authentication of a User could be an example
  • Integration Tests across several units to achieve their goals
  • Unit Test for testing functions or classes by supplying input and making sure the output is as expected

Below a demo of testing with Jest and Supertest in a Node.js Express TypeScript App

The code at GitHub

Below a demo of Unit testing with xUnit and .NET Core console App

The code at GitHub

Node Express REST API Membership system + Email notification - JWT

30-May-2023

Node Express REST API Role based Membership system with Email Verification and Forgot Password using pure SQL towards a MySQL DB - Authentication by JWT

Try the demo...

The Node.js Web API was made without any ORM framework like Sequelize

Functionality of the Web App

  • JWT authentication
  • Email sign up and verification
  • Forgot password and reset password functionality
  • Role based authorization with two roles "User" and "Admin"
  • CRUD Account management routes with role based access control

Tech used for building the Web App

  • Node.js
  • Pure SQL instead of using ORM like Sequelize
  • The Node.js Web API is hosted at Azure App Service with the Free App Service Plan
  • The React Client is hosted at a traditional Webhotel
  • MySQL as the Database for both Dev + Prod
  • CORS Policy implemented by Node.js and at Azure
  • JWT Token for access secure routes




A Blog made with Gatsby React and GraphQL