Table of Contents

1. Product overview.
2. Demo.
3. How to run locally.
4. How to host on-premises.
5. Architecture and design decisions.

Product Overview

click2approve is a free, open-source, cross-platform document approval system with a responsive user interface that allows you to:

• Upload documents.
• Send documents for approval by specifying a list of approvers' email addresses.
• Notify requesting and approving parties via email.
• Keep track of approval requests.

Demo

Please visit click2approve.com to see how it works.

⭐ If you find this project useful, please give the repository a star to support ongoing development and visibility.

How to Run Locally

Prerequisites

• You have installed the latest version of Docker Desktop.
• You have installed a Git client.

Getting Started

1. Clone the Repository

Run in a terminal:

git clone git@github.com:luarvic/click2approve.git

2. Open click2approve Directory

Run in a terminal:

cd click2approve

3. Build and Run Docker Images

Run in a terminal:

docker compose build --no-cache
docker compose up -d

Wait until you see:

 ✔ Network click2approve_default Created
 ✔ Container click2approve-db-1  Created
 ✔ Container click2approve-api-1 Created
 ✔ Container click2approve-ui-1  Created

4. Verify Running Docker Containers

Run in a terminal:

docker ps -a

Make sure all of the following containers are up and running:

• click2approve-api-1.
• click2approve-db-1.
• click2approve-ui-1.

(Find more details about those containers below in Architecture and design decisions.)

5. Open the Web Page

In the web browser open http://localhost:3333/.

You should see a page with the click2approve title.

Welcome to the click2approve service! 🎉🎉🎉

How to Host On-Premises

The same Docker-based setup can be used as a foundation: run the containers on your own servers, place the UI and API behind your internal load balancer or reverse proxy, and persist the database volume on managed storage. The steps above cover a local run, but the approach is identical for an on-prem deployment with your environment-specific networking, DNS, and TLS configuration.

For production on-prem, consider using a dedicated VM or Kubernetes node pool, configuring externalized secrets for database credentials and email settings, and enabling regular backups for the database volume. These details depend on your infrastructure, so adapt them to your internal standards.

Architecture and Design Decisions

The application consists of the following microservices:

• Client-side UI (React TypeScript v18.2).
• Server-side API (ASP.NET Core v10.0).
• Relational database (MySQL 8.4.0).

All microservices are containerized with Docker.

Client-side UI

It provides a graphical interface, allowing users to interact with the application via a web browser.

It is written in TypeScript and uses:

• React library;
• Material UI CSS framework;
• MobX state management framework.

The build transforms the TypeScript code into a JavaScript single-page application (SPA). The ui container hosts Nginx web server that returns the SPA to the users. The SPA handles HTTP requests coming from the users and interacts with the Server-side API microservice.

Server-side API

It provides HTTP endpoints that implement business logic.

It is written in C# and uses:

• ASP.NET Core framework.
• Entity Framework.
• ASP.NET Identity framework.

The build compiles the C# code into a self-hosted web API application that handles HTTP requests coming from the UI. The application interacts with the relational database and the filesystem to manage user data.

Relational Database

It provides the relational data storage required for system operation.