Day 11 - Tech Stack (n.)⚡️
A house is built by a bunch of bricks (⚡️BetterFriend Project Day 8 - 38)
Tech Stack [tek] [stak]
noun.
: A tech stack is the combination of technologies (programming languages, frameworks, databases, etc.) used to build and run an application.
: It essentially provides the foundation and tools for developing, deploying, and maintaining software.
Quick Recap:
We now have,
Product Requirement Doc (Live Doc) - PRD:
⚡️⚡️ BetterFriend PRD Building Publicly v1 ⚡️⚡️
A New Logo & Branding: that feels like a family-owned diner than an alarm clock
We need to have a vision of how the product will work.
This is a cool article from Boz (CTO of Facebook) that helped me define it.
VISION
The word vision is thrown around often can be easily confused with mission statements and strategy. I have come to see vision as any description of a desired future state. For Facebook, if I were to describe what the world would be like when we achieve our mission that is an example of vision. If I describe the state of the user experience after a given set of strategic work is done that is an example of vision. Well articulated and widely shared mission and strategy should create vision that is broadly shared.
When someone asks you a question of the form “what will it look like when…” or “how will it feel if…” or “how do you see this playing out after…” they are asking you about your vision. When you say “imagine a world where…” or “I think the way the market will react is…” or “I think it should feel like…” you are describing a vision.
BetterFriend Vision:
“Remind me my friends birthdays where I will 100% see it. Always reliable.”
Birthdays are 1 day out of the year. 1 single day. Just picture missing our best friend’s birthday. It’s high stakes and there’s no going back. We miss it, we are fucked.
The guilt. The shame. The voices:
“How will I look at them in the eyes next time?”
“How will I respond when they say Happy Birthday to me on my birthday!?”
They will forgive us, but we won’t forgive ourselves. This can’t happen again.
It should feel like a password keeper - always trusted and always available. Runs in the background. I never have to think about it, and always there when I need it.
It needs to be in places where we can see everyday - chats. SMS / Chat Apps.
Since I’ve been outside of the U.S. for the past 4 years, my main communication channel has been Whatsapp. The network effect is strong. Besides Japan (uses Line), China (Wechat), Korea (KakaoTalk), most countries in Europe / South America and South East Asia / Middle East are all using Whatsapp.
Email reminders are not good enough. SMS / Text reminders maybe down the road depending on the cost. Chat Apps is a great landing spot.
I decided to use Telegram as a testing ground (it’s free) and Whatsapp as the main product. SMS / iMessage will come in the future where there is demand.
Vision for Whatsapp BetterFriend chatbot
Do I want people to input data in a user interface like a web-app? Not really.
They can just talk back to the chat bot. Why bother?
Do I need an app in the Appstore on android & iPhone? Not for the chatbot v1.0. I likely will need it for privacy concerns down the line.
For now it will simply be - Name, Birthday, Be able to remind me every month / every week / every day.
Okay now the vision is set, where do I store the data? Where do I host the reminder so it runs accordingly without fail? How do people find out about it? How does this all work together!?!?
I went to Grok this time and had 2-3 hour chat with it basically landed here:
The Flow:
Bob finds BettterFriend.xyz (Vercel V0 + HTML + CSS)
Bob messages BetterFriend Whatsapp Bot (Next.js + Vercel Hosting)
Whatsapp API sends message to BetterFriend Front-End (Next.js + Vercel)
Front-End then sends the message to the Back-End (Next.js + Vercel + Trigger )
Back-End creates a new account with Bob’s number in the database (Prisma)
Back-End search database and sends the birthday of Mom back to Front-End
Front-End sends it Birthday of Mom to the Bob via Whatsapp API
I will need to learn how to version control and host the codebase on Github as well.
A bit overwhelming but AI can help us break down each concept in details now.
In short,
Front End:
V0 (owned by Vercel) to build a simple website and host BetterFriend.xyz. Free!
Next.js (the latest React.js library for frontend + backend + Vercel created it)
Whatapp API integration:
- Option 1 - Get approved by Meta with my personal LLC.
They require approval to use Whatsapp API.
- Option 2 - Zixflow Free - Newer Whatsapp focused Platform
- Option 3 - AIsensy - Established Whatsapp PlatformIf Option 1 for Whatsapp - Use Next.js and Vercel to manage the Whatsapp
Back End:
Next.js (built on top of React.js) for back-end and hosted on Vercel. Free to start!
Next.js is great for serverless structure - this does not natively support scheduling and background jobs.
I’m going to try a startup called Trigger.dev to manage that part.PostgresSQL Database by Neon / Prisma natively integrated to Vercel.
Hosting:
Vercel can host for free.
Ready to build!
See you tomorrow!
⚡️BetterFriend Project Day 8 - 38