May 8, 2025
•
Cecep Miftah Solahudin
•
3 min read
FolioSnap: Proyek Portfolio Builder Saya dengan Laravel, Inertia, dan React
Mengenal FolioSnap: Proyek Portfolio Builder Saya dengan Laravel, Inertia, dan React
Halo semuanya! 👋
Di postingan kali ini, saya ingin berbagi sedikit cerita tentang proyek pribadi saya yang sedang dibangun, namanya FolioSnap. Ini adalah aplikasi web yang saya buat untuk membantu desainer, fotografer, atau siapa saja yang ingin menampilkan karya mereka secara online dengan cara yang simpel tapi tetap keren.
Apa Itu FolioSnap?
FolioSnap adalah sebuah portfolio builder — semacam "CV online" visual yang bisa diatur sendiri. Kamu bisa masuk, tambahkan karya-karya kamu (gambar, deskripsi, link), lalu secara otomatis ditampilkan dalam layout yang rapi dan responsif.
Saya buat ini karena banyak teman saya yang punya karya bagus, tapi bingung cara memajangnya dengan cara yang profesional. Sementara tools di luar sana kadang terlalu rumit, berat, atau tidak fleksibel.
Teknologi di Balik FolioSnap
Proyek ini saya bangun dengan stack berikut:
- Laravel sebagai backend
- Inertia.js sebagai jembatan antara backend dan frontend
- React sebagai library utama untuk tampilan, dan
- TipTap Editor sebagai teks editor yang powerfull
Dengan pendekatan ini, saya bisa tetap pakai Laravel seperti biasa (routing, auth, database, dsb.), tapi bagian frontend-nya bisa dibuat lebih dinamis dan interaktif pakai React.
Beberapa fitur utama:
- Upload gambar untuk karya
- Deskripsi singkat & link eksternal
- SEO-friendly URL & layout
Kenapa Pakai Inertia.js?
Jujur, awalnya saya sempat bingung mau pilih Livewire atau Inertia. Tapi karena saya pernah belajar React sebelumnya, akhirnya saya pilih Inertia karena bisa tetap pakai Laravel di backend tapi tampilan dan logika UI-nya bisa lebih fleksibel pakai React.
Dan sejauh ini, saya nggak nyesel. Inertia tuh kayak "jembatan" antara Laravel dan React. Nggak perlu repot setup API endpoint atau authentication manual — semua masih bisa pakai fitur Laravel kayak biasanya.
Tantangan Selama Ngerjain
Nggak semua hal mulus, tentu aja. Ada beberapa tantangan waktu ngerjain proyek ini:
- Integrasi file upload pakai useForm + forceFormData di Inertia butuh trial-and-error.
- Bikin tampilan yang responsive tapi tetap clean.
- Menyesuaikan cara berpikir Laravel yang "server-side" dengan React yang "client-side".
Tapi dari semua itu, saya belajar banyak hal. Mulai dari manajemen form, validasi, sampai deployment ke shared hosting pakai Git.
Status Saat Ini
FolioSnap masih dalam tahap pengembangan, tapi fitur dasarnya sudah bisa jalan:
- User bisa login dan menambahkan karya
- Setiap user punya halaman publik sendiri
- Desainnya sudah cukup rapi untuk dipamerkan ke klien atau recruiter 😉
- Dan form contact me yang secara otomatis mengirim message ke email kamu ketika ada seseorang yang menghubungi kamu lewat form tersebut.
Saya juga lagi nyiapin fitur export ke PDF dan custom domain (biar makin profesional).
Dan berikut link demonya yaitu di https://foliosnap.cecepmiftah.my.id/
Penutup
Saya nulis ini bukan cuma buat dokumentasi pribadi, tapi juga siapa tahu bisa bermanfaat buat kamu yang lagi belajar Laravel, Inertia, atau React. Kalau kamu lagi bikin proyek pribadi juga, saya saranin banget coba gabungkan teknologi yang kamu udah kenal dan sukai. Prosesnya jadi lebih menyenangkan dan kamu bisa belajar sambil jalan.
Terima kasih udah baca sampai akhir! Kalau kamu punya masukan, pertanyaan, atau sekadar mau lihat demo-nya, feel free untuk komen atau kontak saya. 🙌
