Yoga Image

Yogaardiana

Portfolio
  • Portfolio
  • Articles

Back to Portfolio
LACI POS Official Website - Portfolio Banner

LACI POS Official Website

Visit WebsiteGitHubYouTube
Next.js 15
TypeScript
Motion
Tailwind CSS
CSS Modules
Decap CMS
Markdown
gray-matter
Vercel
Cloudflare
GitHub OAuth

Video Demo

About This Project

Laci POS — Landing Page & Ekosistem Konten Produk

Konteks & Masalah

Ide Laci POS lahir dari masalah yang cukup umum ditemui di lapangan: banyak pelaku UMKM di Indonesia belum punya sistem kasir yang layak, entah karena software berlangganan yang harganya memberatkan, atau aplikasi yang ada terlalu rumit untuk dipakai sehari-hari. Laci POS hadir sebagai jawabannya — aplikasi kasir desktop yang gratis, ringan, dan langsung bisa dipakai tanpa biaya bulanan.

Yang Saya Bangun

Landing page dengan storytelling visual. Hero section berisi 5 slide interaktif yang menonjolkan fitur inti produk — kasir, laporan, stok, backup, dan gratis — lengkap dengan auto-play dan navigasi manual. Di bawahnya ada 10 testimoni pengguna yang scroll otomatis dalam 2 baris berlawanan arah, jadi halaman terasa hidup tanpa perlu banyak interaksi dari pengunjung.

Fitur produk yang dikemas menarik. 7 kartu fitur utama, masing-masing dengan video demo singkat, badge, dan gradien dinamis, ditambah 4 slide keunggulan produk dengan dukungan video juga. Tujuannya sederhana: calon pengguna paham manfaat produk dalam hitungan detik, bukan menit.

Download section yang jelas dan bisa dipercaya. Halaman unduh khusus untuk aplikasi Windows, dengan tombol download utama dan tautan langsung ke GitHub Releases sebagai jalur alternatif.

Blog dengan pengalaman baca yang nyaman. Dilengkapi pencarian cepat (Cmd+K), filter berdasarkan tag, pagination 6 post per halaman, dan pilihan tampilan list atau grid. Semua dibangun di atas markdown file yang diparsing dengan gray-matter, jadi ringan dan mudah di-maintain.

Admin CMS tanpa ribet. Saya integrasikan Decap CMS di /dashboard-admin, terhubung ke GitHub sebagai backend penyimpanan, dengan autentikasi lewat GitHub OAuth App. Hasilnya, siapa pun di tim bisa menulis dan publish artikel blog langsung dari browser, tanpa perlu paham Next.js atau git sama sekali.

SEO yang dipikirkan sejak awal — termasuk untuk AI crawler. Selain sitemap XML, robots.txt, Open Graph, dan meta tags standar, saya juga menyiapkan konfigurasi robots.txt untuk 165+ AI crawler, plus llms.txt dan llms-full.txt — format khusus supaya konten website ini mudah dibaca dan dipahami AI assistant seperti ChatGPT atau Claude saat ada yang bertanya soal Laci POS.

Keputusan Teknis

Saya memilih Next.js 15 dengan App Router dan TypeScript sebagai fondasi, dengan pendekatan Static Site Generation (SSG) penuh — landing page dan seluruh halaman blog di-generate menjadi static file lewat generateStaticParams. Pilihan ini bukan tanpa alasan: waktu loading jadi jauh lebih cepat, dan SEO ikut diuntungkan karena konten sudah siap begitu halaman diakses.

Supaya interaktivitas (animasi, modal, slideshow, infinite scroll) tidak mengorbankan performa, semua diisolasi ke dalam client components dengan "use client", sementara data fetching blog tetap dilakukan di server components dan dikirim sebagai props. Untuk pagination blog, saya pakai Suspense boundary agar pengunjung tetap mendapat skeleton loading yang mulus, bukan halaman kosong yang tiba-tiba macet.

Tech Stack

KategoriTeknologi
FrameworkNext.js 15 (App Router) + TypeScript
AnimasiMotion (dulunya Framer Motion)
Ikonreact-icons (Feather Icons, Font Awesome)
StylingTailwind CSS + CSS Modules
CMSDecap CMS 3.x (GitHub backend)
Blog EngineMarkdown + gray-matter
HostingVercel (auto deploy dari GitHub)
DNSCloudflare
AutentikasiGitHub OAuth App

Hasil

Laci POS kini sudah live dan berfungsi penuh sebagai pusat informasi produk sekaligus gerbang distribusi resmi aplikasi kasirnya. Website ini bukan cuma halaman promosi, tapi juga infrastruktur konten yang bisa terus berkembang lewat blog, dan tetap mudah dikelola meski tanpa tim developer di baliknya sehari-hari.

🔗 Live website: https://www.lacipos.my.id

Gallery

Back to Portfolio