A Blog full of Web Projects

11 projects categorized with "DevOps"

  • Next.js 15 Web App with Basic Auth

    30-November-2024

    A Next.js Jamstack Web App with Basic Authentication hosted a Netlify

    Version used for this Web App

    • Node 22.11.0 ( Note: Running Node 20 at Netlify for now )
    • Next 15.0.3
    • React 18.3.1

    Try the demo...

    The code at GitHub

    The Next.js framework being the "Static Site Generator" was used for creating this full stack web application serving as a login system by having a client using the API Routes of Next.js getting the data / User credentials from a JSON file. The web application is secured by HTTPS and Basic Authentication.

    This Next.js Jamstack Web Application is hosted at Netlify Cloud and uses continuous build and deployment


  • Next.js 15 Web App with JWT Auth

    29-November-2024

    A Next.js Jamstack Web App with JWT Authentication hosted at Vercel

    Version used for this Web App

    • Node 22.11.0
    • Next 15.0.3
    • React 18.3.1

    Try the demo...

    The code at GitHub

    The Next.js framework being the "Static Site Generator" was used for creating this full stack web application serving as a login system by having a client using the API Routes of Next.js getting the data / User credentials from a JSON file. The web application is secured by HTTPS and JWT Authentication.

    This Next.js Jamstack Web Application is hosted at Vercel Cloud and uses continuous build and deployment


  • .NET 8 REST API Membership system + Email verification - Azure and GH Pages

    25-November-2024

    .NET 8 REST API at Azure with C# using Entity Framework Core + MS SQL consuming an Angular 14 Client at GH Pages - serving as a Membership System

    Unit Testing:

    • Karma + Jasmine - Used with the Angular Client

    Try the demo...

    The Web API was made without the ASP.NET Core Identity using custom JWT middleware

    Functionality of the Web App

    • JWT authentication with Refresh Tokens
    • Refresh token rotation
    • Revoked token reuse detection
    • 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

    • C#
    • The .NET 8 Web API is hosted at Azure App Service
    • DevOps by Azure App Service + Repos for the .NET 8 Web API
    • The Angular Client is hosted at GH Pages
    • DevOps by GitHub Actions + Pages for the Angular Client
    • MS SQL as the Database for both Dev + Prod
    • CORS Policy implemented by .NET
    • JWT Token for access secure routes
    • Refresh Token by HTTP only Cookie to generate new JWT Tokens
    • Swagger API documentation with routes

  • .NET Core 2.2 REST API with JWT Authentication - Azure and GH Pages

    21-October-2024

    ASP.NET Core 2.2 REST API with C# consuming from a Vue 3 client using JWT Authentication for Login

    The Vue 3 Client is hosted at GitHub Pages

    The API is hosted at Microsoft Azure App Service

    For the Web API a CI / CD Pipeline was implemented by Azure DevOps and deployed to Azure App Service

    A Login system by a Vue 3 and a Angular client / ASP.NET Core 2.2 Web API with C# secured by HTTPS and Authentication by a JWT with the Baerer schema in the Authorization Header


  • .NET Core 2.2 REST API with Basic Authentication - Azure and GH Pages

    21-October-2024

    ASP.NET Core 2.2 REST API with C# consuming from a Vue 3 client using Basic Authentication for Login

    The API is hosted at Microsoft Azure App Service and the Vue 3 Client at GitHub Pages

    For the Web API a CI / CD Pipeline was implemented by Azure DevOps and deployed to Azure App Service

    A Login system by a Vue client / ASP.NET Core 2.2 Web API with C# secured by HTTPS and a Basic Authorization Header


  • Next.js 12 - DevOps by GitHub Actions and Pages

    17-August-2024

    Next.js with TypeScript - DevOps by GitHub Actions and hosted at GitHub Pages

    Version used for this Web App

    • Node 14.21.3
    • Next 12.1.6
    • React 18.1.0

    Try the demo...

    The code at GitHub

    A Create Next App with TypeScript using GitHub Actions and Pages as DevOps. This Next.js Web App is one of the default starters with a lot of useful links for learning Next.js.


  • Nuxt 3 Hello World Web App at GitHub Pages

    17-August-2024

    Nuxt 3 Hello World Web App ready for TypeScript and hosted at GitHub Pages using GitHub Actions as DevOps

    Try the demo...

    The code at GitHub

    A Hello World by Nuxt v3.0.0 using GitHub Actions and Pages for DevOps. This Nuxt Web App is a minimal default starter


  • Nuxt 3 Ionic Web App at GitHub Pages

    17-August-2024

    Nuxt 3 Ionic TypeScript Web / Mobile Hybrid App using Capacitor IOS and Android. This starter template is hosted at GitHub Pages using GitHub Actions as DevOps

    Try the demo...

    The code at GitHub

    This starter template is ready for developing Web / Mobile Hybrid Apps using Nuxt v3.0.0, Ionic, Capacitor, Ios and Android


  • Node Express REST API Membership system + Email notification - JWT

    13-February-2024

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

    Volta was used for Node Version Management switching between Node versions

    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
    • Sequelize used to implement the ORM at the Web API
    • The Node.js Web API is hosted at Azure App Service with the Free App Service Plan
    • One React client at GH Pages which uses DevOps. The React HashRouter solves most 404 / Browser refresh issues at GH Pages
    • One React Client is hosted at a traditional Webhotel
    • The React TypeScript 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

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


  • Hello World with Docker and GitHub Actions

    31-August-2022

    Hello World with Docker and GitHub Actions

    This simple action example prints "Hello World" to the log or "Hello" + the name of a person to greet

    The code at GitHub

    As a start, I am learning Docker by reading and using the online Docker Playground instead or installing Docker Desctop at my local system.


A Blog made with Gatsby React and GraphQL