## FlowDesk Official Website Website resmi untuk aplikasi desktop **FlowDesk** — sebuah aplikasi produktivitas lokal-pertama (offline-first) yang mendukung macOS, Windows, dan Linux. ### Fitur Utama Website - **Hero Section 2 Kolom** — Teks di kiri, screenshot aplikasi di kanan dengan slideshow otomatis berganti setiap 5 detik (dark/light mode) menggunakan Framer Motion AnimatePresence - **Halaman Unduh Dinamis** — Tombol unduhan (.dmg, .exe, .tar.gz) diambil langsung dari GitHub Releases API secara real-time. Dilengkapi accordion panduan instalasi untuk masing-masing platform - **Halaman Roadmap** — Timeline zig-zag interaktif dengan animasi garis gradien yang terisi saat di-scroll. Data dikelola via file `roadmap.json` tanpa perlu menyentuh kode UI - **Penghitung Unduhan Global** — Animasi angka speedometer yang menampilkan total unduhan dari semua rilis GitHub (.dmg + .exe + .tar.gz) - **Dukungan Dwibahasa** — Bahasa Indonesia dan Inggris penuh di seluruh halaman - **Custom Scrollbar & Progress Bar** — Scrollbar kustom berwarna ungu, progress bar vertikal di sisi kiri layar mengikuti posisi scroll - **Blur-up Image Loading** — Efek skeleton/blur saat gambar preview dimuat ### Stack & Arsitektur Dibangun dengan **Next.js 16 (App Router + Turbopack)** dan **Tailwind CSS v4**. Semua data rilis diambil dari GitHub API dengan revalidasi setiap 60 detik. Animasi menggunakan **Framer Motion** dengan `useScroll`, `useSpring`, dan `AnimatePresence`. ### Link - **Live:** [flowdesk.web.id](https://flowdesk.web.id) - **GitHub:** [github.com/Kharisdestianmaulana-hub/flowdeskweb](https://github.com/Kharisdestianmaulana-hub/flowdeskweb)

## Overview FlowDesk is a highly responsive, cross-platform collaborative workspace application designed for seamless team productivity. Built with .NET and Avalonia UI, it runs natively on macOS, Windows, and Linux. FlowDesk redefines how teams manage projects, tasks, and documents by offering unparalleled flexibility—whether working completely offline, discovering peers on a local network (LAN), or connecting to a self-hosted server. ## Key Features * **Multi-Mode Workspace Architecture:** Seamlessly switch between Private (Offline-first), Local (LAN Network Discovery using UDP Broadcasts), and Server (Cloud-hosted) workspaces. * **Full Real-Time Synchronization:** Powered by SignalR and WeakReferenceMessenger, any changes made to tasks, documents, or projects instantly reflect across all connected devices in the network—no refresh needed. * **Advanced Document Management:** Built-in Markdown and Rich Text editor with live preview, real-time collaboration, and granular file permissions (Viewer vs. Editor). * **Premium Neo-Modern UI:** A deeply customized, aesthetically pleasing user interface utilizing glassmorphism, dynamic gradients, and smooth micro-animations. It fully supports System-wide Dark and Light themes. * **Standalone Cross-Platform Delivery:** CI/CD optimized to distribute the app as standalone, single-file executables (`.dmg` for macOS, `.exe` for Windows, and `.tar.gz` for Linux) without requiring users to install external runtimes. ## Technical Highlights Developing FlowDesk involved solving complex engineering challenges, particularly around **peer-to-peer network discovery** and **data concurrency**. I implemented a custom background discovery service that uses UDP multicasting to automatically find host servers on a local network, gracefully handling firewall constraints. The UI architecture rigorously follows the **MVVM (Model-View-ViewModel)** pattern via the CommunityToolkit, ensuring high testability and clean separation of concerns. The local data is robustly managed using **SQLite** and **Entity Framework Core**, providing a blazing-fast offline experience that intelligently syncs up when a network connection is established. ### Link Downloads - **Websites:** [flowdesk.web.id](https://flowdesk.web.id) - **GitHub:** [github.com/Kharisdestianmaulana-hub/flowdeskweb](https://github.com/Kharisdestianmaulana-hub/flowdesk)

# Dexpress Fried Chicken (DFC) - F&B Management & E-Commerce System ## Deskripsi Proyek DFC Web App adalah sebuah platform pemesanan makanan mandiri (Self-Order E-Commerce) dan sistem manajemen terintegrasi untuk bisnis kuliner lokal Dexpress Fried Chicken di area Cirebon (Tuparev, Plered, Sumber, dll). Sistem ini menghubungkan pelanggan langsung dengan outlet terdekat tanpa melalui aplikasi pihak ketiga, sehingga seluruh alur transaksi—dari pemesanan hingga perekaman laporan keuangan—dapat dilacak secara real-time dan terpusat. ## Latar Belakang & Tujuan Proyek ini dikembangkan dengan tujuan untuk mendigitalisasi proses pemesanan dan pencatatan operasional UMKM kuliner. Mengusung konsep belanja cepat tanpa hambatan, aplikasi ini memungkinkan konsumen untuk memesan ayam goreng favorit mereka secara instan tanpa perlu mendaftar akun. Di sisi lain, sistem ini memberikan alat kontrol penuh kepada Owner untuk memantau performa cabang dan membuka peluang pendaftaran kemitraan franchise secara transparan. ## Tech Stack * **Frontend:** HTML5, Vanilla CSS3 (Custom Responsive Layout), Vanilla JavaScript. * **Backend:** PHP (Native / Procedural). * **Database:** MySQL (Relational Database). * **Iconography & UI:** Phosphor Icons, FontAwesome, SweetAlert2. * **Deployment Architecture:** CPanel / InfinityFree Hosting (dengan konfigurasi Waktu Indonesia Barat). ## Arsitektur Sistem & Fitur Utama Aplikasi ini mengadopsi arsitektur Multi-Role yang dibagi menjadi 4 panel kendali: ### 1. Panel Konsumen (Public Facing) * **Guest Checkout System:** Pengalaman berbelanja secepat kilat. Pelanggan dapat memesan makanan tanpa kewajiban registrasi atau login. * **Dynamic Outlet Selector:** Sistem cerdas yang memungkinkan pembeli memilih cabang terdekat, lengkap dengan pengecekan ketersediaan stok real-time per outlet. * **Keranjang JSON:** Mengelola keranjang belanja dan catatan khusus pesanan di sisi client sebelum dikirim ke database. * **Live Tracking Berbasis WA:** Pelanggan dapat melacak status pesanan (Menunggu -> Disiapkan -> Siap Diambil -> Selesai) dan mencetak struk secara mandiri dengan menggunakan Nomor WhatsApp mereka sebagai kunci pencarian. * **Smart Chatbot UI:** Asisten virtual interaktif di halaman depan untuk menjawab FAQ dan memberikan navigasi instan. ### 2. Panel Admin Outlet (Kasir / Dapur) * **Auto-Sync Order Dashboard:** Layar kasir yang secara otomatis memperbarui antrean pesanan web setiap 10 detik tanpa perlu refresh manual. * **Order Fulfillment:** Tombol kendali alur pesanan satu klik (Terima & Masak -> Makanan Siap -> Selesaikan). * **Manajemen Stok Manual:** Dilengkapi Floating Action Button (FAB) untuk mencatat penjualan offline dan mengurangi stok ayam secara otomatis agar data gudang tetap presisi. * **Request Restock:** Modul terintegrasi untuk mengirim permohonan bahan baku ke Gudang Pusat. ### 3. Panel Owner (Super Admin) * **Dashboard Pemantauan Terpusat:** Memantau status operasional (Buka/Tutup) seluruh outlet cabang secara live. * **Riwayat Penjualan Web:** Menampilkan tabel arsip seluruh transaksi yang terjadi di website dengan fitur filter berdasarkan tanggal dan cabang. * **Smart Omzet Calculator:** Perhitungan otomatis total pendapatan (omzet) yang memvalidasi dan hanya menghitung uang dari pesanan berstatus "Selesai". * **Manajemen Konten & Kemitraan:** Fitur pengelolaan konten Company Profile, Visi Misi, dan rekapitulasi data calon mitra yang mendaftar. ### 4. Panel Mitra & Gudang * Sistem portal khusus untuk pendaftaran calon pengusaha UMKM (franchisee) dan manajemen distribusi logistik bahan baku dari pusat ke seluruh cabang. ## Alur Transaksi Pemesanan (End-to-End) 1. **Order:** Konsumen mengakses web -> Memilih Outlet -> Memilih Menu & menambah catatan -> Menuju halaman Checkout (Mengisi data & memilih metode pembayaran Tunai/QRIS). 2. **Track:** Konsumen diarahkan ke halaman Live Tracking. Pesanan tersimpan di database dengan status "Menunggu Konfirmasi". 3. **Process:** Dashboard kasir Outlet berkedip memunculkan pesanan baru -> Karyawan menekan tombol "Terima & Masak" -> Layar tracking konsumen otomatis berubah menjadi "Sedang Disiapkan". 4. **Pickup:** Ayam selesai digoreng -> Karyawan menekan "Makanan Siap" -> Konsumen mengambil pesanan. 5. **Complete:** Kasir menekan "Selesaikan" -> Karyawan menekan tombol Floating Action untuk memotong stok bahan baku -> Data transaksi terkunci permanen sebagai omzet di Laporan Keuangan Owner. Konsumen kini dapat mencetak struk digital.

# AnyFiles - All-in-One Document & Media Utility Toolkit ## Deskripsi Proyek AnyFiles adalah aplikasi *mobile* utilitas lintas platform (Android & iOS) yang dirancang untuk mempermudah pemrosesan dokumen dan media secara cepat dan intuitif. Mengusung antarmuka yang sangat bersih dan modern, AnyFiles memungkinkan pengguna untuk melakukan modifikasi file seperti kompresi, pemisahan halaman, dan konversi format langsung dari genggaman mereka. Aplikasi ini menggunakan model *Freemium*, di mana pengguna dapat menikmati fitur dasar secara gratis dan opsi *Upgrade ke Pro* untuk membuka batasan pemrosesan file tanpa batas (Unlimited File Processing). ## Tech Stack * **Frontend:** Flutter (Dart) - *Mobile-first approach*. * **UI/UX:** Material 3 Design dengan custom *rounded clean architecture* (dominasi *white space* dan aksen biru solid). * **Backend & Authentication:** Appwrite / Firebase (Manajemen profil pengguna, autentikasi email, dan status langganan). * **Local Processing:** Eksekusi modifikasi PDF dan gambar berjalan di perangkat secara lokal untuk menjamin privasi dan kecepatan. ## Arsitektur Antarmuka & Navigasi Utama Aplikasi ini menggunakan sistem *Bottom Navigation Bar* yang membagi fitur menjadi tiga pilar utama: ### 1. Home (Dashboard Pusat) * **Smart Search Bar:** Memudahkan pencarian alat utilitas spesifik. * **Hero Banner:** Menampilkan penawaran *upgrade* ke versi PRO. * **Kategori Tools:** Menampilkan grid alat yang tersedia. Fitur yang sudah diimplementasikan meliputi: * **PDF Tools:** *Merge PDF* (menggabungkan file), *Split PDF* (mengekstrak halaman), *Compress* (mengecilkan ukuran file), *To Image* (mengubah PDF ke JPG/PNG), dan *Rotate PDF*. * **Image Tools:** *Convert Image* dan utilitas media lainnya. ### 2. Recent (Manajemen Riwayat) * Menyimpan riwayat aktivitas pemrosesan file secara rapi (contoh: `AnyFiles_1776...pdf`). * Menampilkan detail *metadata* aktivitas: Jenis aksi (misal: "Compress"), tanggal pemrosesan, dan ukuran file akhir. * Dilengkapi tombol aksi (*three dots menu*) pada setiap *item* untuk interaksi lebih lanjut (seperti hapus, bagikan, atau buka file) dan tombol *Clear History* (ikon tempat sampah) di sudut kanan atas. ### 3. Profile & Settings (Manajemen Akun) * **Profile Screen:** Menampilkan informasi kredensial pengguna (Nama, Email) dan kartu status paket saat ini (Free/Pro) lengkap dengan tombol "Upgrade Now". * **Settings Screen:** Diakses melalui halaman Profile, menu ini memberikan kontrol penuh atas preferensi aplikasi pengguna: * *Account Plan:* Manajemen siklus penagihan dan langganan. * *Application Preferences:* Mendukung *toggle* Tema (Light/Dark Mode), Bahasa (English US), dan pengaturan Notifikasi (Push/Email). * *Support & About:* Akses ke Pusat Bantuan (*Help Center*), Kebijakan Privasi, dan tombol *Log Out*.

# Diversa - AI-Powered Gamified IT Learning Platform ## Deskripsi Proyek Diversa adalah aplikasi *mobile* lintas platform (Android & iOS) pembelajaran IT (*EdTech*) berbasis kecerdasan buatan yang dirancang untuk membuat pendidikan teknologi menjadi lebih interaktif, menarik, dan mudah diakses. Mengusung antarmuka yang modern dengan elemen gamifikasi, Diversa mengatasi masalah *dropout* pada pembelajaran mandiri dengan menyediakan tantangan belajar dan pendampingan mentor virtual secara *real-time* langsung dari genggaman pengguna. Aplikasi ini menggunakan model bisnis campuran, di mana pengguna individu dapat menggunakan jalur *Freemium* untuk materi dasar, dengan opsi *Upgrade ke Premium* untuk membuka akses materi lanjutan dan fitur AI Assistant tanpa batas. ## Tech Stack * **Frontend:** React Native (Expo) - *Mobile-first approach* untuk Android dan iOS. * **UI/UX:** Antarmuka *gamified* yang responsif dan bersih, dirancang dengan komponen *mobile custom* untuk mempertahankan fokus serta retensi belajar. * **Backend & Authentication:** Firebase (Menggunakan Firebase Authentication, Cloud Firestore untuk *real-time database*, dan Cloud Storage). * **AI & Core Processing:** Integrasi API (Python/Node.js) yang terhubung via *cloud* untuk memproses logika AI Assistant, *prompt engineering*, dan evaluasi input pengguna. ## Arsitektur Antarmuka & Navigasi Utama Aplikasi ini menggunakan sistem *Bottom Navigation Bar* yang membagi ekosistem pembelajaran menjadi tiga pilar utama: ### 1. Learning Hub (Dashboard Pusat) * **Smart Search Bar:** Memudahkan pengguna mencari bahasa pemrograman atau modul spesifik (misal: "Python for Beginners"). * **Gamified Paths:** Menampilkan alur belajar interaktif lengkap dengan sistem *experience points* (XP), level, dan *badges*. * **Interactive Modules:** Fitur utama dalam area ini meliputi modul pembelajaran adaptif dan **AI Mentor Chat** yang selalu *standby* untuk memberikan *troubleshooting* dan panduan layaknya instruktur pribadi. ### 2. Progress & Analytics (Manajemen Riwayat) * Dasbor pelacakan performa yang menyimpan riwayat aktivitas belajar pengguna secara rapi dan visual. * Menampilkan *metadata* aktivitas: Modul yang diselesaikan, skor XP, dan rekap waktu belajar harian. * Data disinkronkan secara *real-time* menggunakan Firestore untuk memastikan progres selalu *up-to-date* meskipun pengguna berganti perangkat. ### 3. Profile & Settings (Manajemen Akun) * **Profile Screen:** Menampilkan informasi kredensial pengguna (Nama, Email, Avatar), portofolio level, serta kartu status langganan dengan tombol "Upgrade Now". * **Settings Screen:** Diakses melalui halaman Profile, menu ini memberikan kontrol penuh atas preferensi aplikasi pengguna: * *Subscription:* Manajemen paket langganan dan siklus penagihan premium. * *Application Preferences:* Mendukung *toggle* Tema (Light/Dark Mode) dan pengaturan Notifikasi *Push* untuk pengingat belajar. * *Support & About:* Akses ke Pusat Bantuan (*Help Center*), Kebijakan Privasi, dan tombol *Log Out*.