Mohammad Daffa
Mohammad Daffa

Project Details - Invitree.id

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

Send Mohammad Daffa a reply about this page
More from Mohammad Daffa
Back to profile