# Alif Nugraha — WeeCommerce

> Alif Nugraha adalah full-stack developer yang membangun sistem bisnis custom
> end to end di bawah brand WeeCommerce: website e-commerce, website company profile,
> aplikasi bisnis internal (CRM, HRIS, POS, dashboard operasional), dan custom software
> — lengkap dengan chatbot AI customer service, knowledge base berbasis RAG, dan
> otomatisasi operasional n8n. Remote-first, melayani klien di seluruh dunia, dengan
> karya di Indonesia, Malaysia, dan Amerika Serikat.
> Tagline: "Built to convert. Wired to learn."
> Situs utama berbahasa Indonesia; versi English tersedia di https://alifnugraha.my.id/en.
> Teks lengkap seluruh dokumentasi dan artikel: https://alifnugraha.my.id/llms-full.txt

Fakta kunci:
- Empat lini layanan: (1) website e-commerce — katalog, checkout, payment gateway
  Midtrans/Stripe, dashboard admin; (2) website company profile yang menghasilkan lead;
  (3) aplikasi bisnis internal — CRM, HRIS, POS, inventori, dashboard operasional;
  (4) custom development — SaaS, aplikasi mobile Flutter, integrasi API, agen AI.
- Layer AI & otomatisasi bisa dipasang di keempat lini maupun di sistem yang sudah
  berjalan (Shopify, WordPress, aplikasi internal): chatbot AI, knowledge base RAG,
  workflow n8n self-hosted.
- Harga TIDAK dipublikasikan: setiap project di-scope satu per satu dan penawaran
  dikirim setelah konsultasi via WhatsApp. Estimasi waktu: company profile 2–5 minggu,
  e-commerce 4–10 minggu, aplikasi internal (CRM/HRIS) 6–16 minggu.
- Proof-of-work unggulan: NexaMart, toko AI-native yang berfungsi penuh — load di bawah
  3 detik di 4G, chatbot terlatih dari seluruh katalog produk, jawaban ber-grounding RAG,
  dan lima workflow back-office otomatis.
- Proses: enam fase (Discovery, Proposal, Desain & Build, Integrasi AI, Launch, Retain),
  pembayaran per milestone (50/30/20), kepemilikan source code berpindah ke klien saat
  pelunasan.
- Kontak: hello@alifnugraha.my.id (respons 24 jam), WhatsApp untuk konsultasi gratis dan penawaran.

## Halaman (Bahasa Indonesia — utama)

- [Layanan](https://alifnugraha.my.id/services): empat lini pekerjaan, scope, dan estimasi waktu tiap lini
- [Portofolio / studi kasus](https://alifnugraha.my.id/work): NexaMart dan project klien
- [Studi kasus NexaMart](https://alifnugraha.my.id/work/nexamart): arsitektur dan hasil toko AI-native
- [Studi kasus klien](https://alifnugraha.my.id/work/client-work): properti (MY), pendidikan (ID), tooling B2B
- [Tentang](https://alifnugraha.my.id/about): latar belakang, proses, dan toolkit
- [Kontak](https://alifnugraha.my.id/contact): form brief project
- [Uses](https://alifnugraha.my.id/uses): perangkat, editor, dan layanan yang dipakai sehari-hari

## Landing layanan (kata kunci transaksional)

- [Ringkasan layanan](https://alifnugraha.my.id/id)
- [Jasa pembuatan website e-commerce](https://alifnugraha.my.id/id/jasa-pembuatan-website-ecommerce)
- [Jasa chatbot AI WhatsApp](https://alifnugraha.my.id/id/jasa-chatbot-ai-whatsapp)
- [Jasa otomatisasi bisnis n8n](https://alifnugraha.my.id/id/otomatisasi-n8n)

## Blog

- [What RAG actually is — and why your store needs it](https://alifnugraha.my.id/blog/what-rag-actually-is): The retrieval layer explained for store owners. What it does, what it costs, and when simpler approaches serve you better.
- [The real cost of building on rented land](https://alifnugraha.my.id/blog/the-real-cost-of-rented-land): Marketplace fees climb, algorithms shift, and the customer data was never yours. A working breakdown of what dependency actually costs.
- [NexaMart, taken apart](https://alifnugraha.my.id/blog/nexamart-taken-apart): An honest teardown of an AI-native store — the architecture, the decisions behind it, and the trade-offs I'd make differently today.
- [n8n vs Zapier vs Make: hitung biaya otomatisasi di volume tinggi](https://alifnugraha.my.id/blog/n8n-vs-zapier-vs-make): Perbandingan biaya tiga platform otomatisasi untuk toko online yang ordernya mulai ramai — dan kenapa self-hosted menang begitu volume naik.
- [Indeks blog](https://alifnugraha.my.id/blog) · [RSS feed](https://alifnugraha.my.id/feed.xml)

## Documentations (catatan teknis, dengan source code)

Dokumentasi teknis pribadi: catatan belajar tech stack dan bedah cara fitur
situs ini dibangun — HTMX di Cloudflare Workers, i18n Intlayer, session auth
Web Crypto — lengkap dengan source code (GitHub) dan preview live.

- [Indeks docs](https://alifnugraha.my.id/docs)
- [Catatan belajar React: jalur yang benar-benar kupakai](https://alifnugraha.my.id/docs/catatan-belajar-react): Bukan tutorial React generik: urutan belajar yang bekerja, anti-pola state yang dulu sering kutulis, pola yang terbukti di project klien, dan kapan justru tidak memakai React.
- [Belajar TypeScript: dari instalasi sampai generics](https://alifnugraha.my.id/docs/belajar-typescript): Tutorial TypeScript gaya mentoring: instalasi + tsconfig yang benar, tipe dasar yang menutup 90% kebutuhan, generics dengan contoh nyata dari situs ini, dan migrasi bertahap dari JavaScript.
- [Belajar Vue 3: instalasi sampai pola komponen](https://alifnugraha.my.id/docs/belajar-vue-js): Tutorial Vue 3 dari nol: scaffold dengan create-vue, anatomi Single File Component, ref/computed, v-model, dan aturan emas props turun–event naik — dengan contoh toko sederhana.
- [Belajar Astro: situs cepat dengan nol JavaScript default](https://alifnugraha.my.id/docs/belajar-astro): Tutorial Astro dari instalasi: halaman .astro, komponen + scoped style, islands architecture (client:load vs client:visible), dan content collections untuk blog markdown.
- [Belajar Tailwind CSS v4: dari instalasi sampai design token](https://alifnugraha.my.id/docs/belajar-tailwind-css): Tutorial Tailwind v4 dari praktik nyata situs ini: instalasi Vite/CLI, model mental utility-first, responsive mobile-first, design token @theme, dan kapan (tidak) memakai @apply.
- [Belajar Bootstrap 5: grid, komponen, dan kustomisasi Sass](https://alifnugraha.my.id/docs/belajar-bootstrap): Tutorial Bootstrap 5: pasang via CDN atau npm, grid 12 kolom mobile-first, komponen interaktif lewat data-bs-* tanpa JavaScript, dan cara kustomisasi yang benar lewat variabel Sass.
- [Belajar Laravel: instalasi sampai CRUD pertama](https://alifnugraha.my.id/docs/belajar-laravel): Tutorial Laravel dari nol: instalasi via Composer, route + Blade, migration + Eloquent, validasi server, dan alur kerja artisan harian — sampai CRUD produk pertamamu jalan.
- [Belajar Livewire: Laravel interaktif tanpa JavaScript](https://alifnugraha.my.id/docs/belajar-livewire): Tutorial Livewire 3: instalasi satu perintah, komponen counter pertama, pencarian live dengan wire:model.live, dan validasi tanpa reload — filosofi yang sama dengan HTMX di situs ini.
- [Belajar Claude API: dari API key sampai streaming](https://alifnugraha.my.id/docs/belajar-claude-api): Tutorial Claude API dengan SDK resmi TypeScript: setup API key, panggilan pertama, system prompt untuk chatbot CS, percakapan multi-giliran, streaming, dan cara memilih model.
- [Belajar Gemini API: teks, gambar, dan streaming](https://alifnugraha.my.id/docs/belajar-gemini-api): Tutorial Gemini API dengan SDK @google/genai: API key gratis dari AI Studio, generateContent, system instruction, kirim gambar (multimodal), streaming, dan memilih model flash vs pro.
- [Belajar OpenAI GPT API: Responses API dan output terstruktur](https://alifnugraha.my.id/docs/belajar-openai-gpt-api): Tutorial GPT API dengan SDK openai: setup billing + API key, Responses API, instruksi & percakapan, streaming, dan output JSON terstruktur untuk pipeline ekstraksi data.
- [Membangun form kontak HTMX di Cloudflare Workers — tanpa SPA](https://alifnugraha.my.id/docs/form-kontak-htmx-cloudflare-workers): Dokumentasi lengkap form kontak tanpa SPA: HTMX partial swap, validasi server dengan Hono JSX, input tidak hilang saat error, dan progressive enhancement — dengan source code dari situs ini.
- [i18n dwibahasa dengan Intlayer di Cloudflare Workers (Hono JSX)](https://alifnugraha.my.id/docs/i18n-intlayer-cloudflare-workers): Cara situs ini melayani Bahasa Indonesia di root dan English di /en dengan Intlayer: dictionary per halaman, routing ganda, hreflang — plus jebakan crash 'reading locales' di Workers dan solusinya.
- [Session auth stateless di Workers: HMAC cookie + PBKDF2](https://alifnugraha.my.id/docs/session-auth-hmac-cloudflare-workers): Autentikasi panel admin tanpa database session dan tanpa library: token HMAC-SHA256 di cookie, verifikasi password PBKDF2 via Web Crypto, dan perbandingan constant-time — source code lengkap.
- [Blog tanpa CMS: D1 + markdown-it di Cloudflare Workers](https://alifnugraha.my.id/docs/blog-d1-markdown-cloudflare-workers): Bedah blog situs ini: render markdown sekali saat simpan (bukan per request), prepared statement D1, stempel publish COALESCE yang menjaga urutan RSS, dan seed draft dari file markdown.
- [Upload gambar ke Cloudflare R2: validasi, penamaan, cache immutable](https://alifnugraha.my.id/docs/upload-gambar-r2-cloudflare-workers): Cara editor blog situs ini meng-upload gambar ke R2: allowlist ekstensi, batas ukuran, nama file slug + suffix acak, streaming tanpa buffer, dan penyajian dengan Cache-Control immutable.
- [Stack SEO + GEO situs ini: sitemap, hreflang, JSON-LD, llms.txt](https://alifnugraha.my.id/docs/seo-geo-sitemap-hreflang-llms-txt): Lima lapisan supaya situs ditemukan Google DAN mesin AI generatif: hreflang resiprokal dwibahasa, sitemap yang digenerate dari router, FAQPage JSON-LD dari data tampilan, robots.txt ramah bot AI, dan llms.txt.
- [Fitur e-commerce: kartu produk & keranjang yang tidak bocor konversi](https://alifnugraha.my.id/docs/fitur-katalog-keranjang-ecommerce): Fitur dasar website e-commerce dibedah: format Rupiah dengan Intl.NumberFormat, anatomi kartu produk yang menjual, dan keranjang localStorage dengan badge — lengkap dengan preview live.
- [Fitur e-commerce: alur checkout Midtrans Snap yang benar](https://alifnugraha.my.id/docs/fitur-checkout-midtrans): Alur pembayaran Midtrans dari ujung ke ujung: buat transaksi Snap di server (Server Key aman), popup snap.pay di browser, dan webhook dengan verifikasi signature SHA-512 sebagai satu-satunya sumber kebenaran.
- [Fitur toko lokal: tombol order WhatsApp dengan pesan terisi otomatis](https://alifnugraha.my.id/docs/fitur-tombol-order-whatsapp): Tombol order WhatsApp yang benar: format nomor wa.me, builder pesan ter-encode berisi produk/harga/link, dan tips menaikkan konversinya — dengan tombol live yang bisa dicoba di preview.
- [Fitur company profile: empat section yang menghasilkan lead](https://alifnugraha.my.id/docs/fitur-section-company-profile): Empat section company profile yang menggerakkan angka: hero dengan proposisi 5 detik, strip kepercayaan berbasis angka, testimoni yang kredibel, dan form lead tiga field — semua dengan kode + preview live.
- [Membangun docs engine halaman ini: registry + markdown, tanpa framework](https://alifnugraha.my.id/docs/membangun-docs-engine-ini): Dokumentasi yang mendokumentasikan dirinya: markdown sebagai text module, satu registry untuk sidebar/sitemap/hreflang, ToC via injeksi anchor regex, dan contoh live dari komponen asli — tanpa Docusaurus.
- [Komponen e-commerce: kartu produk, badge diskon & rating bintang](https://alifnugraha.my.id/docs/komponen-kartu-produk): Kode lengkap kartu produk toko online: rating bintang dua lapis tanpa gambar, aspect-ratio yang mencegah layout shift, line-clamp, dan state habis stok — editor + preview live berdampingan.
- [Komponen e-commerce: quantity stepper dengan batas stok](https://alifnugraha.my.id/docs/komponen-quantity-stepper): Stepper jumlah yang benar: batas dijaga lewat disabled (bukan alert), satu fungsi render sebagai sumber kebenaran subtotal & sisa stok, plus aria-label dan aria-live — bisa dicoba langsung di preview.
- [Komponen company profile: kartu testimoni & FAQ accordion tanpa JS](https://alifnugraha.my.id/docs/komponen-testimoni-faq): Accordion FAQ memakai elemen <details> bawaan browser (tetap terindeks Google saat tertutup) dan kartu testimoni dengan avatar inisial + semantik figure/blockquote — kode dan preview berdampingan.
- [Komponen company profile: kartu tim & timeline perusahaan](https://alifnugraha.my.id/docs/komponen-tim-timeline): Grid tim dengan garis pemisah dari gap 1px (tanpa border ganda), timeline dari satu pseudo-element, avatar inisial dengan place-items, dan responsif tanpa media query — editor + preview live.
- [Komponen UI: BrowserFrame, SystemFlow & Stat — dengan contoh live](https://alifnugraha.my.id/docs/komponen-browserframe-systemflow-stat): Tiga komponen server-first yang dipakai di seluruh situs ini — mockup browser, diagram arsitektur dari tag, dan angka count-up — dirender live di halaman ini, lengkap dengan source code-nya.

## Pages (English — secondary)

- [Home](https://alifnugraha.my.id/en)
- [Services](https://alifnugraha.my.id/en/services): the four lines of work, scope, and typical timelines
- [Work / case studies](https://alifnugraha.my.id/en/work): NexaMart and client engagements
- [About](https://alifnugraha.my.id/en/about): background, process, and toolkit
- [Contact](https://alifnugraha.my.id/en/contact): project brief form
- [Docs](https://alifnugraha.my.id/en/docs): the same technical notes in English