ProjectsFebruary 15, 2026

URL Shortener BEM Unsoed Edition

Najmi's URL Shortener (BEM Unsoed Edition)

Tech Stack: Next.js 15, Tailwind CSS 4, Supabase, TypeScript, Radix UI, Framer Motion. A professional URL Shortener application specifically designed for the publication needs of BEM Universitas Jenderal Soedirman. This app turns long links (like Google Drive or Forms) into short links that are trustworthy, aesthetic, and easy to remember.

Key Features

Custom Slugs: Create short links with your desired name (e.g., bem-unsoed.com/oprec).
QR Code Generator: Generate and download a QR Code for every short link created.
Database Management: Manage, update (edit links/passwords), and delete existing links through an intuitive admin interface.
Complex URL Support: Supports shortening complex URLs with long query parameters (such as UTM tags or share links).
Admin Verification: Extra security with a password system to ensure only authorized admins can create or edit links.
Glassmorphism UI: A modern interface with an elegant and dynamic glass effect, built using custom components.
Click Tracking: Track the number of clicks on each link in real-time.
Institutional Branding: Integrated with the visual identity of BEM Unsoed.
Responsive Design: A seamless user experience on both desktop and mobile devices.

Tech Stack

Frontend: Next.js 16 (App Router)
Styling: Tailwind CSS 4
Database & Auth: Supabase
UI Components: Radix UI & Motion (Framer Motion)
Form Validation: React Hook Form & Zod
Utilities: QRCode.react, Sonner, Lucide Icons

Getting Started (Local Development)

1. Prerequisites

Make sure you have installed:

Node.js (latest version recommended)
NPM or PNPM

2. Installation

Clone this repository and install the dependencies:

Bash

git clone https://github.com/najmifaza/najmisurlshortener.git
cd najmisurlshortener
npm install

3. Environment Variables Configuration

Create a .env.local file in the root directory and add your Supabase credentials:

Env

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

4. Running the Server

Bash

npm run dev

The application will run at http://localhost:3000.

Project Structure

src/app: Next.js Routing (Home, Shortener, Database, QR Generator, Contact, and Dynamic Redirects).
src/components: Custom UI components, including the Glassmorphism design system and Dock navigation.
src/lib: Supabase configuration, utilities, and constants.
public: Static assets like logos and icons.

Security

This application uses a simple password verification system for creating new links. The default password is set on the client-side (for this prototype), but it is highly recommended to move it to the server-side or use Supabase Auth for more secure production use.

Contribution

Contributions are always open! If you want to improve this application, please submit a Pull Request or report an Issue.

Related projects

Rumio.id: Next-Generation Property Marketing & Exploration Platform

Rumio.id is a comprehensive property marketing and exploration platform designed to connect seekers, owners, and property agents with an interactive 360° experience using modern web technologies.

Read case study View project

Panggih Sedulur: Unsoed Student Club Aptitude Questionnaire

An interactive questionnaire platform for Unsoed student clubs, featuring a 5-category scoring system, branching questions, and personalized recommendations.

Read case study View project

Official Website of BEM Universitas Jenderal Soedirman

Development and management of the official website for the Student Executive Board of Universitas Jenderal Soedirman (BEM-U) using WordPress, Elementor, and custom HTML inject.

Read case study View project

GrowTo: Delivery Order Directory Platform for Purwokerto

Development of an information platform for delivery order services in the Purwokerto area as the Final Project for the Soedirman Digital School 2025 program.

Read case study View project

NiceGuy Sound Board

For hungry streamers wanting to ride the Bigmo train via Soundboard, we've provided an app bundled with sounds frequently used by our rector, BIGMO.

Read case study View project

Edu-Tajwid: Digital Educational Platform for Tajweed

TajwidApps is a web-based educational platform designed to help users learn the rules of Quranic recitation (Tajweed), articulation points (makharijul huruf), and characteristics of letters fluently.

Read case study View project

Digital Transformation of Rabiha Tour & Travel: Branding and Website Development

Development of a visual identity, social media content design using CorelDRAW & Photoshop, and building a company profile website using WordPress Elementor.

Read case study

Najmi Calculator: Interactive Calculator with Real-Time Features

Development of a responsive calculator app using Vanilla JavaScript, featuring Dark Mode and a custom Error Handling system.

Read case study View project