A Blog full of Web Projects

13 projects tagged with "react"

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

    10-January-2025

    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

  • Next.js 13 Web App with JWT Auth and MongoDB

    09-January-2025

    A Next.js Web App with TypeScript and JWT Authentication using MongoDB and Mongoose ODM

    Tech used for the Web Application

    • The Next Web App is hosted at Vercel Cloud
    • Node 22 at Vercel Cloud
    • Next Version 13
    • React 18
    • TypeScript
    • Joi for validation
    • Zustand for state management
    • MongoDB was the choice of NoSQL Document Database
    • Mongoose ODM ( Object Data Modeling ) which is used for NoSQL like ORM ( Object Relational mapping ) is used for Relational databases like MySQL
    • The MongoDB is hosted at Mongo Atlas Cloud Platform

    Try the demo...

    The code at GitHub

    Next.js was used for creating this full stack web application "Static Site Generator" SSG serving as a login and registration system by a MongoDB. The Web App is secured by HTTPS and JWT Authentication.

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


  • Webpack 5 boilerplate with React and TypeScript

    08-January-2025

    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.


  • Webpack 5 boilerplate with React

    07-January-2025

    A Webpack 5 boilerplate with React

    Try the demo...

    The code at GitHub

    A Webpack 5 boilerplate with React. 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.


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

    05-December-2024

    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

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

    02-December-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 + Refresh Tokens

    Note: Due to the resource limitations of the Microsoft Azure Free App Service Plan, the initial load time will be up to 30 seconds!

    Volta was used for Node Version Management switching between Node versions

    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

    • 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
    • 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
    • Refresh Token by HTTP only Cookie to generate new JWT Tokens

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

    01-December-2024

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

    Version used for this Web App

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


  • 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 Core 2.2 REST API Role based Membership system

    07-October-2023

    ASP.NET Core 2.2 REST API with C# towards Angular and React serving as Role based Membership system

    Traditional webhosting is used for this Application

    A Web API role based Membership System for authentication and registration managing Users by an Angular or React client / ASP.NET Core 2.2 Web API with C# secured by HTTPS and Authentication by a JWT

    Administrate Posts by an Angular client and the Web API after a successfully login


  • Java Spring Boot JAX-RS using REST API + MVC

    04-October-2023

    Java Spring Boot JAX-RS Jersey REST API + MVC Application

    Note: Due to the resource limitations of the Microsoft Azure Free App Service Plan, the initial load time will be up to 2 minutes. A 403 Status code may happen too!

    Try the demo...

    The source code at GitHub

    Migration from Java 8 to Java 11 ! Showing and administrate a dataset of persons by a Java Jersey REST API + MVC Web Application using Jersey REST API, MVC, JSP, JAX-RS, JPA, Hibernate, Maven and MySQL. React, Fetch API (Not working in IE), AngularJS and jQuery for the frontend client


  • Java Spring Boot REST API + MVC using Spring Security

    03-October-2023

    Java Spring Boot REST API + MVC using Spring Security

    Note: Due to the resource limitations of the Microsoft Azure Free App Service Plan, the initial load time will be up to 2 minutes. A 403 Status code may happen too!

    Try the demo...

    The source code at GitHub

    Migration from Java 8 to Java 11 ! Showing and administrate a dataset of persons by a Java REST API + MVC Web Application (Secured by login) using REST API, MVC, Security, JSP, JPA, Hibernate, Maven, MySQL and jQuery for the frontend.


  • .NET Core 2.0 MVC and REST API with Crud functionality

    15-January-2023

    ASP.NET Core 2.0 REST API with C# showing a dataset of Persons by MVC / Web API

    Traditional webhosting is used for the Application

    Try the demo...

    Showing / Administrate a dataset of persons as a REST API + MVC using C#, MS SQL Database, AngularJS, ReactJS, jQuery, Ajax and JSON dataset. Secured by HTTPS

    The source code at GitHub
A Blog made with Gatsby React and GraphQL