Saya Membuat Undangan Online Pernikahan Saya Sendiri dengan Next dan TailwindCSS
“Assalamualaikum warahmatullahi wabarakatuh, kami mengundang anda untuk datang ke pernikahan kami pada tanggal … pukul … di …. Karena kondisi pandemi COVID-19, harap mengisi RSVP di http://undangan-online-ku.com”
Sejak PSBB Jakarta pertama sudah selesai tahun kemarin, saya menerima banyak undangan pernikahan kerabat saya, yang disebarkan melalui grup WhatsApp. Setiap pesan yang dibroadcast, terdapat satu link yang mengarah ke halaman undangan online pernikahan mereka. Halaman tersebut mengandung informasi mengenai tanggal dan jam acara, lokasi pernikahan dan akad, serta foto-foto prewedding yang ciamik.
Saya baru saja menikah pada tanggal 21 Februari 2021. Sebagai orang yang berada pada spektrum sosial yang sama, istri saya juga mendapatkan pesan-pesan broadcast tersebut di grup WhatsApp-nya. Akibatnya?
“Aku juga mau dong dibikinin kayak gini buat nikahan kita” — Istri saya, bulan Januari
Tentu saja, saya bisa apa kalau sudah calon istri saya sudah berucap seperti itu. Laut pun akan saya seberangi, ibaratnya. Walaupun tidak seperti pak Sandiaga Uno yang berenang antar pulau :)
Penentuan Teknologi
“Ini dia saatnya gue mencoba teknologi aneh-aneh yang belum pernah gue pake” — Saya, optimisme masih tinggi
Saya tahu bahwa ini hanya sebuah static site. Jadi pilihannya antara Next atau Gatsby. Dengan optimisme di atas, saya mencoba untuk mengulik Gatsby. Satu dua hari saya riset mengenai Gatsby sembari kerja di kantor, saya memutuskan untuk memakai Next saja. Mengapa? Karena:
Kepala sudah pusing tujuh keliling karena merancang plan untuk pernikahan, masih sempat-sempatnya berfikir bahwa saya masih punya banyak waktu. Saya akan pakai yang saya sangat nyaman sekali, Next dan Tailwind.
Untuk deployment saya berfikir untuk menggunakan sesuatu yang tidak ribet. Saya ingin proses deployment saya seperti lagu yang ditulis oleh Charlie Puth: “I’m only one push away, I’ll be there to save the day”. Oleh karena itu, saya mencoba peruntungan untuk menggunakan Vercel.
Proses dan Hasil
Semua pekerjaan saya bisa Anda lihat di http://siska-denny.vercel.app atau di Github saya:
Proses deployment-nya juga cepat. Saya belum pernah pakai Vercel sebelumnya, dan ternyata memang hanya one-push-away, proyek yang telah dibuat dapat langsung ditampilan lewat URL yang diberikan oleh Vercel.
Saya coba cek seberapa bagus sih skor Lighthouse saya, turns out it’s not that bad:
Saya harus akui saya memang masih lemah di A11y. Namun, saya senang sekali memakai Vercel karena dengan menggunakan Vercel, skor Best Practice-nya selalu 100. Saya juga masih harus memperbaiki Perfomance serta SEO.
Insight dan Penutup
Sejujurnya, saya tidak puas dengan hasil buatan saya. Mengapa? Karena menurut saya hanya “begitu saja”. Ini adalah website yang menampilkan foto prewedding saya dan istri, menampilkan informasi lokasi pernikahan serta tanggal dan waktunya, lalu ada satu link yang mengarah untuk RSVP via Google Form. I mean, I could have done better!
Dalam mengerjakan proyek ini, saya belajar beberapa hal:
- Seandainya saya lebih committed dalam proyek ini, mungkin hasilnya akan lebih cemerlang lagi. Saya mungkin bisa buat sistem RSVP sendiri, mungkin bisa membuat animasi lebih swoosh, dan lain-lain.
- Vercel memudahkan setengah dari perjalanan saya. Saya mungkin akan pakai ini lebih sering lagi karena one-push-away-nya yang membuat saya hanya melakukan push, duduk manis, menyeruput teh, and it’s live!
- Ini bisa jadi kesempatan buat mahasiswa/i yang membutuhkan uang lebih, sekaligus menambah portfolio sebelum lulus kerja. Memang, saat ini sudah banyak usaha-usaha kecil yang bergerak di bidang ini, namun saya rasa semangat mahasiswa/i dengan kantong kering tidak akan mudah goyah berkompetisi dengan usaha-usaha tersebut.
Sampai disini artikel yang saya tulis. Semoga artikel ini dapat menginspirasi Anda. Mungkin sehari, seminggu, sebulan setelah Anda membaca ini, teman kerabat Anda akan menikah dan meminta tolong Anda untuk membuatkan undangan online untuk pernikahan mereka. It’s your time to shine!
Hyperjump Update!
We just launched our free and open source synthetic monitoring tool called Monika on Product Hunt! Your review and upvote are greatly appreciated! 🤝
Hyperjump is an open-source-first company providing engineering excellence service. We aim to build and commercialize open-source tools to help companies streamline, simplify, and secure the most important aspects of its modern DevOps practices.
