QuetzalVPN

OpenVPNmadeeasy!

Description

QuetalVPN is a free and open source Web GUI for your OpenVPN server. Featuers include:

  • User Management 👤
  • Server Configuration ⚙️
  • A dashboard 📊

For a closer look, check out the project website.

Design

Primary

#00ff70

Warning

#f8d40d

Error

#ff3633

QuetzalVPN Mobile Screenshot

Buttons

Primary Button
Button
Warning Button
Error Button

Inputs

Input fields
Toggle-switch
Search
Checkbox
Combobox

These fully accesable components were created with

Headless UI

React

TailwindCSS

User Management

Profile Download

Gone are the days of using shell scripts to generate profile files for OpenVPN. One click and your download starts!

User Actions

Temporarily disable or delete a users access to connect to your VPN.

User Management

Live Insights

Watch live data on all users regarding their connections status and even IP address

Quetzal Users

Connected

Idle

Disabled

More Details

I developed QuetzalVPN in a team of 4 as a school project at IT-HTL Ybbs. My main focus was the frontend and UI / UX design.

I did my design in Figma and implemented it with React + TailwindCSS for the styling.

The project is open source and available on GitHub.

Raphael was my main collaborator. He wrote the backend in Kotlin using the Ktor framework while also being reponsible for server configuration and communication.