Gambaran Umum Proyek

Domain ini sudah ada sejak tahun 2024. Myterial.id sendiri adalah tim kecil yang dibentuk oleh teman saya. Dan saya juga bergabung dengannya. Awalnya kami tidak tahu apa yang menjadi fokus kami. Pada tahun awal saya membangun situs kami dengan WordPress tema kustom, yang tema tersebut saya buat sendiri. Saat itu situs web lebih fokus pada blog. Tetapi tahun ini kami lebih fokus pada Produk Digital. Dan kami perlu membuat ulang situs web dengan cepat, lebih murah, lebih modern, lebih aman untuk menjual produk digital, tapi tetap mempertahankan elemen gaya desain sebelumnya.

02

Masalah dan Tujuan

Jadi tujuan utamanya adalah membuat toko produk digital modern dengan gaya desain kita sendiri yang murah dan cepat dikembangkan, serta sistem pembayaran yang cukup aman. Masalahnya adalah bagaimana mencapainya? Untuk mencapaihal terseput, pertama adalah biaya hosting. Jadi saya memutuskan untuk menggunakan Netlify karena gratis. Untuk email, kami menggunakan Resend. Untuk basis data, kami menggunakan Supabase karena gratis. Dan untuk pembayaran yang aman, kami menggunakan Midtrans. Untuk mempercepatnya, Digunakan metode Vibe Coding dengan Tech Stack yang selaras dengan tools lain yang saya sebutkan sebelumnya. Jadi saya gunakan Vue.

03

Peran AdiKoding

Jadi tanggung jawab saya disini adalah merancang dan mendevelop website myterial.id.

04

Fitur

Sebagai situs toko online, situs ini memiliki Dashboard dan fitur-fitur keren lainnya. Seperti halaman login rahasia dengan kata sandi. Fitur-fitur tersebut untuk memastikan admin situs web, yaitu teman saya, dapat mengelola produk yang dipublikasikan sambil tetap aman. Dan untuk pengunjung, saya membuat situs web memiliki mode gelap/terang. Saya juga membuat situs web memiliki efek kenyamanan setelah membeli produk. Selain itu, berkat Resend, saya dapat membuat situs web mengirimkan tautan produk ke email mereka.

05

Keputusan Desain

Kode dasar situs web ini digenerate oleh AI dan saya hanya mengubah sedikit kodenya. Mengapa? Karena desain dasarnya sudah saya masukkan saat promt awal. Dalam promt awal saya menjelaskan branding dasar seperti warna dan gaya dari website. Termasuk navigasi sidebar tampilan desktop. Mengapa? Karena saya menyukai desain sidebar, dan partner saya di Myterial juga menyukainya. Untuk elemen desain lainnya, saya memutuskan untuk menggunakan glashmorphism untuk memperkuat kesan modern.

06

Tech Stack & Tools

Tailwind CSS

Vue

JavaScript

Supabase

Netlify

Resend

Midtrans

Gemini & Copilot

07

Tantangan

Meskipun saya mengembangkan situs web Myterial dengan Vibe Coding, saya selalu memastikan apa yang dihasilkan oleh AI sudah benar. Terkadang saya menemukan kesalahan ketik dan kesalahan pada kode. Yang saya lakukan adalah memperbaiki kesalahan tersebut secara manual dan terkadang mendiskusikan kesalahan tersebut denga AI. Terutama hal-hal yang berkaitan dengan proses pembayaran. Saya menguji dan berdiskusi dengan AI untuk memastikan proses pembayaran berjalan dengan baik. Berkat fitur sandbox Midtrans, saya dapat menguji keseluruhan proses pembayaran dengan mudah. Pada tahap deployment, saya menghadapi beberapa masalah seperti gagal deploy di Netlify, gagal terhubung dengan Resend, dan domain kustom belum terhubung ke Netlify. Namun, saya berhasil menyelesaikan masalah tersebut.

08

Hasil

Secara keseluruhan, apa yang telah dicapai situs web myterial.id cukup baik. Walaupun belum terlalu berdampak banyak. Tapi setidaknya teman saya menyukai situs web tersebut. Dan saya juga selalu berkomitmen untuk selalu mengupgrade situs myterial.id menjadi lebih baik.

09

Refleksi

Berkat proyek ini, saya belajar membuat website dengan Vue dan memanage budget pembuatannya. Ya, karena ini proyek Vue pertama saya yang bisa dibilang proper. Sebelumnya, saya hanya tahu cara membuat website dengan React dan WordPress. Dan sebagai anggota myterial.id, saya juga memiliki tanggung jawab untuk terus meningkatkan website ini.

adikoding.com - Responsive website with SEO optimize and dashboard

myterial.id – Responsive e-products store for construction