“There was a star danced, and under that was I born.”
Much Ado About Nothing - William Shakespeare.
A birthday is a very special occassion for anyone regardless of their age. Just send them this card and your special wishes to your friend (or foe), just to make them feel special 🚀.
If it's your birthday, then you have my best wishes 🙏🏻. Enjoy the day 🎉, with a little dance 💃🏻 with that special one and understand with one extra notch up your belt your duties have been extended by one ✨.
It's your day from 0️⃣0️⃣:0️⃣0️⃣ to 2️⃣3️⃣:5️⃣9️⃣ and you should live to the fullest.
They say a demo is worth a thousand words. So if you head to the website 🔗https://birthday.cybrix.in, you would be greeted 👯♂️👯♀️ with a birthday card 🎴.
The project is open-source 📖 & used a MIT License 🗝. For more info on the scope of a MIT License, please check 🔗 https://choosealicense.com/licenses/mit/.
To get a copy 🖨 of the license included, please see LICENSE.md.
I have included a 💡 tips file. It contains trips & tricks which make my life & project a bit easier.
- Vite + React + Typescript & Tailwind CSS
- Firebase (Hosting & Storage) + Google ReCaptcha (AppCheck in Firebase & Site Protection)
ViteJS is a library of happiness in disguse. ViteJS uses Rollup for "packing & building" a site, which alone is excellent. Vitejs flaunts a HMR (Hot Module Replacement 🔥) feature, without a loss in state 🤯. It has open-source scaffolding for almost all popular front-end stacks (like React, Svelte and even VanillaJS & VanillaTS). It is my go to choice for all projects 😍.
ReactJS is a library, I work with professionally 🤝🏻. I do not hate Vue or Svelte etc, by there is something comfortable 🛌🏻 for me working with ReactJS. I would not argue it has plenty room for improvement 🤔 (and should be inspired from Next.js).
Typescript is one of the libraries I personally hated 🤧. Over time ⏳, I have realized 🤔 that extra piece of work 💧 I have to do ahead during development saves me from bugs 🐛. I am even more productive ⚒ with Typescript, than without. P.S. It saves me from lot of embarrassment 😳 ahead of time 🙉.
Tailwind CSS is one of my favourite ❣ inline style builder 🧱. The range of utility classes predefined & flexibility🤺 is mind-blowing 😵.
I have been using Firebase for a long time now as a BaaS. Firebase has it's pros 🙂 and cons 😕, yet it is a strong contender 💪🏻 in the field of BaaS providers.
In my experience my Firebase Hosting 🌐 is quite fast and easy to deploy, with the free domains *.web.app and *.firebaseapp.com. The Firebase CLI 👨🏻💻 makes it extremely fast to deploy the same 🚀. Before utilizing the main resources we can use a temporary preview channel to get a feel of the site in a real-world domain 😮 (not merely localhost where everything works and then breaks 🙄).
On the other hand, I am using Firebase Storage 🗄 as a Content Delivery Network for my assets 🖼. Secured by rules 🛤 my specific bucket 🧺 (here birthday) is secure 🔐 from manipulation and can be read 👀 by everyone. Morever it is protected 🛡 by a token which is only generated if the request originates for whitelisted origins 📃. I can speak from my experience Storage in GCP is quite fast 💨 (may be not the fastest) and get's my job done ✅.
AppCheck by Firebase is just a feature to verify 🧐 all requests that originates for Firebase Resources (like Firestore, Storage, Functions etc...), are from whitelisted origins 📃. These origins are controlled seperately in the Google ReCaptcha V3 settings and the same secret ReCaptcha Key 🤫 is shared with Firebase. On the other hand 🤟🏻, the client (i.e. your browser 🕸 & my app 📱) knows the public/site key 🗣. By knowlege 📚 (and high level stuff 🌊), we know Google secures misuse 🤐 resources.
In particular that part could be really be skipped 😑. This site (or any other site using AppCheck) does not need any ReCaptcha Badge Protection 🛡. As I did not include ❎ a privacy policy, this is my way of declare 🗣, the site used ReCaptcha.
- For hosting a static site you may continue with:
- Github Pages [Experienced. Demo: https://anrcry.github.io]
- Render [Never Tried]
- Netlify [Partially tried. Very Fast 🏁]
- Vercel [Partially tried. Very Fast 🏁]
- Fly.io [Never tried]
- Coolify.io [Never tried]
- Backendless [Never tried]
- For cloud storage for free, you may try
- AWS S3 (Free Tier) [Never tried]
- Supabase Storage [Partially tried. No comments 🤐]
- nhost.io Storage [Never tried]
- Back4App [Never tried]
- Backendless [Never tried]
👆🏻 Most Cloud Storage services are Backend as a Service (BaaS). They are very likely to provide Cloud Functions, Database Storage etc.
I would someday 📅 like to further develop this with an admin 👩🏻💻 panel or something of that sort. That way I could issue random links 🔗 for each of my friends. Their details (name, email and phone number) will be filled ✍🏻 in dynamically.
- Partial SSR to create custom greetings.
- ⭐🔴 Add my social links to the birthday site pointing to myself... 🖱
- 🔴 Know your audience:
- Add a custom popup, to send a message to us directly (with feeback). If the user is known (due to dynamic link, no name is required).
- ⚠ Server Side: Curating the feedback/message from the user to improve/thank them later.
- 🟡 Admin Panel to make stuff dynamic.
- 🔵 Dynamic URL linking (Optional)
- 🟡 ⚠ Server Side: CRON job to read Firestore once everyday at 0️⃣0️⃣:0️⃣0️⃣ (IST), to send out SMS and/or email via API with birthday greetings.
🔴 - High Priority
🟡 - Medium Priority
🔵 - Low Priority
⚠ - Probably Server Side
⭐- Currently working on this.
- Anweshan Roy Chowdhury: I go by the name @cybrix. This project is my solo undertaking 🙂. Feel free to reach me out at [email protected]
I would like to conclude by saying, I loved developing this project. As always every project makes me learn something new.
3️⃣ 2️⃣ 1️⃣ ... 🚀🚀🚀 ... 🎇🌟
Developed with lots of love ❤️,
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent