Overview
Digital Invitation website where users can create and share their invitations. The Invitation covers all the conventional invitation needs with many other features such as online payment, customizable data & contents, RSVP, support for multiple schedules, map locations & directions, reminders, custom message templates, monitoring dashboard, SEO friendly, etc.
Tech Stacks
Backend - Typescript • Firebase Function • Firebase Auth • Firestore • Telegram API • Midtrans • GitHub Action for CI/CD • BunnyCDN for storage
Frontend - Nuxt + Vuetify for the main website • React + ChakraUI for the dashboards • Vercel
Tools - Better Uptime for monitoring • Google Analytics • Figma • Github
Lessons Learned & Notes
Here are some notes and lessons that I learned in the process of developing this project:
-
Development using Firebase with multi-environment
-
Data migrations using Firebase + Firestore
-
Automate deployment using GitHub Action for different environments
-
Integrate google analytics on SPA. Apparently, google analytics doesn't automatically log the page_view event on every route change in the Single Page App
-
Use a CDN service like BunnyCDN to store all media instead of Firebase Storage to save more money. In the early time, 90% of my Firebase cost is from the storage and its bandwidth. After I move the content and media storage to BunnyCDN, I save >300K IDR per month (assume there are more than 5 invitations created in that month)
-
You can deploy your product MVP for free using Firebase + Vercel combo and extend the stacks based on your needs
-
Use an external API monitoring service to periodically call your serverless function to reduce the cold start. My go-to choice is Better Uptime. Cause it can monitor multiple URLs with low intervals (per 3 minutes), monitor from multiple regions, can generate the status page + connect to custom domains, email notifications, add team members, and all of that for FREE
-
Use a static page or server-side rendered page for the Landing Page for better SEO performance
-
Use Telegram as an error logger and notification instead of other notification services
-
Use lower image resolution as an Image graph meta so the link preview can be shown on WhatsApp and other social media
-
Vue is better at handling form instead of React. Better use Vue if you want to create an app that will handle many complex forms