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. Sebuah aplikasi pemendek URL (URL Shortener) profesional yang dirancang khusus untuk kebutuhan publikasi BEM Universitas Jenderal Soedirman. Aplikasi ini mengubah tautan yang panjang (seperti Google Drive atau Form) menjadi tautan pendek yang tepercaya, estetis, dan mudah diingat.

Fitur Utama

Custom Slugs: Buat tautan pendek dengan nama yang Anda inginkan (misal: bem-unsoed.com/oprec).
QR Code Generator: Membuat dan mengunduh QR Code untuk setiap tautan pendek yang dibuat.
Database Management: Kelola, perbarui (edit tautan/password), dan hapus tautan yang sudah ada melalui antarmuka admin yang intuitif.
Complex URL Support: Mendukung pemendekan URL kompleks dengan parameter query panjang (seperti UTM tags atau share links).
Admin Verification: Keamanan ekstra dengan sistem password untuk memastikan hanya admin yang berwenang yang dapat membuat atau mengedit tautan.
Glassmorphism UI: Antarmuka modern dengan efek kaca yang elegan dan dinamis, dibangun menggunakan komponen kustom.
Click Tracking: Melacak jumlah klik pada setiap tautan secara real-time.
Institutional Branding: Terintegrasi dengan identitas visual BEM Unsoed.
Responsive Design: Pengalaman pengguna yang mulus di perangkat desktop maupun mobile.

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

Memulai (Local Development)

1. Prasyarat

Pastikan Anda sudah menginstal:

Node.js (versi terbaru direkomendasikan)
NPM atau PNPM

2. Instalasi

Clone repositori ini dan instal dependensinya:

Bash

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

3. Konfigurasi Environment Variables

Buat file .env.local di root direktori dan tambahkan kredensial Supabase Anda:

Env

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

4. Menjalankan Server

Bash

npm run dev

Aplikasi akan berjalan di http://localhost:3000.

Struktur Proyek

src/app: Routing Next.js (Home, Shortener, Database, QR Generator, Contact, dan Dynamic Redirects).
src/components: Komponen UI kustom, termasuk sistem desain Glassmorphism dan navigasi Dock.
src/lib: Konfigurasi Supabase, utilitas, dan konstanta.
public: Aset statis seperti logo dan ikon.

Keamanan

Aplikasi ini menggunakan sistem verifikasi password sederhana untuk pembuatan tautan baru. Password default diatur di sisi klien (untuk prototipe ini), namun sangat disarankan untuk dipindahkan ke sisi server atau menggunakan Supabase Auth untuk penggunaan produksi yang lebih aman.

Kontribusi

Kontribusi selalu terbuka! Jika Anda ingin meningkatkan aplikasi ini, silakan buat Pull Request atau laporkan Issue.

Related projects

Rumio.id: Platform Marketing & Eksplorasi Properti Generasi Baru

Rumio.id adalah platform pemasaran dan eksplorasi properti komprehensif yang dirancang untuk menghubungkan pencari, pemilik, dan agen properti dengan pengalaman interaktif 360° menggunakan teknologi web modern.

Read case study View project

Panggih Sedulur: Kuisioner Minat Bakat UKM Unsoed

Platform kuisioner interaktif untuk UKM Unsoed dengan sistem scoring 5 kategori utama, branching questions, dan rekomendasi personalisasi.

Read case study View project

Website Resmi BEM Universitas Jenderal Soedirman

Pengembangan dan pengelolaan website resmi Badan Eksekutif Mahasiswa Universitas Jenderal Soedirman (BEM-U) menggunakan WordPress, Elementor, dan custom inject HTML.

Read case study View project

GrowTo: Platform Direktori Delivery Order Purwokerto

Pengembangan platform informasi layanan delivery order untuk area Purwokerto sebagai Final Project program Soedirman Digital School 2025.

Read case study View project

NiceGuy Sound Board

Buat para streamer laper yang pengen naik kereta Bigmo via Soundboard telah kami sediakan aplikasi yang sudah sepaket dengan sound2 yang sering digunakan oleh rektor kita BIGMO.

Read case study View project

Edu-Tajwid: Platform Edukasi Digital Ilmu Tajwid

TajwidApps adalah platform edukasi berbasis web yang dirancang untuk membantu pengguna mempelajari hukum bacaan Al-Qur'an (Tajwid), makharijul huruf, dan sifat huruf secara fasih dan tartil.

Read case study View project

Transformasi Digital Rabiha Tour & Travel: Branding dan Pengembangan Website

Pengembangan identitas visual, desain konten media sosial menggunakan CorelDRAW & Photoshop, serta pembangunan website company profile menggunakan WordPress Elementor.

Read case study

Najmi Calculator: Kalkulator Interaktif dengan Fitur Real-Time

Pengembangan aplikasi kalkulator responsif menggunakan Vanilla JavaScript dengan fitur Dark Mode dan sistem Error Handling kustom.

Read case study View project