Making My Own Online Wedding Invitation
Of all the things I am excited about about getting married, one of them is that I get to create, and design my own wedding invitation. And as a programmer, there’s nothing more fulfilling than creating the online version of it!
Here’s where I start.
Since I only got 3 months before the ceremony, and I had to spread the invitation, at least 1 month in advance, meaning I only got 2 months to create the whole thing, which is plenty of time actually, if you got nothing else to worried about outside the wedding itself (lol).
So, I decided to start with designing the paper-based invitation first, to get a grasp of what the theme is (yes, I’m designing first, then deciding the theme), and find what color and content that goes well with the theme.
I used Figma, for the first time, and instantly regrets my whole life of struggling with Adobe Illustrator and Inkscape to design vectors, and since then, Figma is my new jam. Never coming back to manual vectors unless I really needed them.
Here’s basically what I ended up with. I had a few struggles at first, but Figma is actually intuitive enough if you’re already familiar with Vector based editors.
I got a logo custom-designed, and scrolled hours of Pinterest to get good flower images and properties to go with it. In the end, I’m pretty happy with what I came up with.
The next step is the online invitation. After procrastination and lots and lots of fitting for a dress and wedding suit, I am finally ready to start the development process.
Since 1 month is left, I’m using the tech I’m most comfortable with, for the front end, and avoiding writing a backend at all costs, to avoid over-writing and my self-idealism of writing a clean code (that I might never see again in this case). After a quick research, I decided to use Tailwind CSS for styling, along with NextJS and Vercel combo for hosting. I bought a cheap domain from Google Domain and set it up in Vercel, and I’m ready to go!
By the way, Vercel sets up amazing documentation on how to do this here (https://vercel.com/docs/concepts/get-started/assign-domain), and since they offer free hosting that can be integrated into GitHub, my deployment is as instant as pushing changes to a branch, and the pipelines took care of itself, very neat!
After assigning a domain, and trying to host a NextJS sample project on the domain name, I started on my page. The way I started by listing down everything I wanted to create, and by referencing other wedding invitation website features, and setting up a priority-effort list that I can complete before the deadline. Kind of a solo sprint point meeting if you’d like.
Once everything was set up, I started coding!
If you noticed, there’s a feature here called “Konfirmasi Kehadiran” or Attendance Confirmation, to confirm/RSVP for the guest, and a form to send a wish or congratulations message, which can be viewed by the public. And since I tried to avoid using a Backend API and databases, I’m using Firebase’s Firestore database and integrating it as a simple GET/POST API to save the data to a NoSQL structure database. This also gives me a real-time data upon rendering, with a manual re-fetch upon adding/opening the page initially.
My biggest challenge on this project is actually the setup of the image. I really struggled to get the image showing on the share version of the link. Tried using a locally hosted image on the project, but the crawlers seem never to get the image since it was ready on a client-side render.
After everything, I managed to get it to work by hosting the image on Imgur, and placing the link directly in the meta og:image in the <head>. Bad thing is, I’m not able to test it on my locally since it requires an HTTPS url to test it, so had to deploy it each time, and copy-paste the link into my WhatsApp web to check if the implementation is ok.
After a few struggles and tons of commits, here’s what I got :
Until now, I haven’t yet tried on how to show the big og image, tried adding the twitter og url/image meta, and still haven’t managed to get it worked. And since the deadline is coming fast, I decided to abandon the idea.
At last, I managed to get it done in just a sliver of time before sharing it with my close friend. And just like other rushed projects are, fixes are made along the way, even the night before D-Day. All and all, I never regretted that I took the chance to design my own invitation page.
And how is it now, if you asked?
Well, it gained quite a popularity among the family, one even requested for it to be custom-made for their own wedding invitation page. And since I didn’t apply a proper component-based and concern separation in it, the content has been mixed up and styling messed up here and there due to it.
Probably will fix it and make it a thing that can be better customized, has its own dashboard, and sustains itself better, and hey, why not make it better than those pre-made dashboard invitation pages with blogger/wordpress elementor templates, all at once? (wink)
We’ll see!
