Brancher.ai Launch
Brancher.ai Launch
Brancher.ai Launch
We officially launched http://www.brancher.ai today on Product Hunt! I wanted to share our tech stack to give insight into how it's built 🧑🏻💻 The key context here is that we only had a week to build the MVP during the AI Hackathon hosted by Ben's Bites Newsletter
We officially launched http://www.brancher.ai today on Product Hunt! I wanted to share our tech stack to give insight into how it's built 🧑🏻💻 The key context here is that we only had a week to build the MVP during the AI Hackathon hosted by Ben's Bites Newsletter
We officially launched http://www.brancher.ai today on Product Hunt! I wanted to share our tech stack to give insight into how it's built 🧑🏻💻 The key context here is that we only had a week to build the MVP during the AI Hackathon hosted by Ben's Bites Newsletter
#1 Next.js
For every project, I use @nextjs as the full-stack React Framework (React + Node.js) of choice. Having a single stack for FE and BE saves so much time, especially when you pair it up with TypeScript.
One of the key features of Next.js is flexible rendering options (CSR, SSR, SSG, etc). On the dashboard of https://www.brancher.ai, we use Client-Side Rendering to load "something" visible while data is still fetching.
On the app's landing page where users actually run the app, we use Server-side rendering to cache the page and make it friendly for SEO. In the future, we plan to selectively use Static Site Generation to render popular app pages at the build time.
#2 Vercel
The last thing I want is to maintain the reliability of the site, especially since we weren’t sure if it was going to take off. My go-to hosting service is @vercel. The deployment process is easy with GitHub/Bitbucket/etc integrations.
We pay for the Pro plan for Vercel, which let us execute back-end code as a serverless function for up to the 60s. Because generative AI services can take up to 20 seconds to respond, having a longer timeout window was crucial.
Combining that with @vercel/og package that executes as the Edge Functions, we are able to dynamically generate a unique Open Graph image for each app when shared online.
#3 TypeORM
When you build MVP, you need to quickly iterate on database models, which affects the back-end and front-end. That is why I chose @typeormjs. Using their typed entity model makes it easy to see the impact on code.
While not recommended post-launch, you can turn on the "sync" option in TypeORM to instantly propagate a change from your entity model file to your database (think auto-migration on file save!). During the hackathon, that’s how I saved a lot of time.
#4 CloudSQL for PostgreSQL
Again, I have no time for creating or maintaining a self-hosted DB! Because it is easy to get CloudSQL going at a relatively low cost with the ability to scale instantly, it was a no-brainer for me to go with it.
Here is the secret: I connected to the production instance while developing locally. Why? It doesn’t affect anybody besides us if we break something pre-launch, and you know that everything is going to work when you deploy the app to production!
#5 Auth0
Building your own auth system is just painful and not worth your time during the hackathon. @auth0 is my go-to hosted auth service, and there is a handy auth0/nextjs-auth0 package to quickly integrate Auth0 and Next.js together
#6 Stripe
With their React components, @stripe is a quick and robust way to accept payment right in your web app. We are starting out with a one-time, on-demand purchase of credits. Later, we can easily roll out a subscription model for Pro plan.
#7 JavaScript Libraries
vercel/swr: React Hooks for data fetching
@2toad/profanity: Replace profanity to make user-generated apps safe for other users
color: Based on user-defined theme for the app, we detect contrast and render UI differently
... and many more!
#1 Next.js
For every project, I use @nextjs as the full-stack React Framework (React + Node.js) of choice. Having a single stack for FE and BE saves so much time, especially when you pair it up with TypeScript.
One of the key features of Next.js is flexible rendering options (CSR, SSR, SSG, etc). On the dashboard of https://www.brancher.ai, we use Client-Side Rendering to load "something" visible while data is still fetching.
On the app's landing page where users actually run the app, we use Server-side rendering to cache the page and make it friendly for SEO. In the future, we plan to selectively use Static Site Generation to render popular app pages at the build time.
#2 Vercel
The last thing I want is to maintain the reliability of the site, especially since we weren’t sure if it was going to take off. My go-to hosting service is @vercel. The deployment process is easy with GitHub/Bitbucket/etc integrations.
We pay for the Pro plan for Vercel, which let us execute back-end code as a serverless function for up to the 60s. Because generative AI services can take up to 20 seconds to respond, having a longer timeout window was crucial.
Combining that with @vercel/og package that executes as the Edge Functions, we are able to dynamically generate a unique Open Graph image for each app when shared online.
#3 TypeORM
When you build MVP, you need to quickly iterate on database models, which affects the back-end and front-end. That is why I chose @typeormjs. Using their typed entity model makes it easy to see the impact on code.
While not recommended post-launch, you can turn on the "sync" option in TypeORM to instantly propagate a change from your entity model file to your database (think auto-migration on file save!). During the hackathon, that’s how I saved a lot of time.
#4 CloudSQL for PostgreSQL
Again, I have no time for creating or maintaining a self-hosted DB! Because it is easy to get CloudSQL going at a relatively low cost with the ability to scale instantly, it was a no-brainer for me to go with it.
Here is the secret: I connected to the production instance while developing locally. Why? It doesn’t affect anybody besides us if we break something pre-launch, and you know that everything is going to work when you deploy the app to production!
#5 Auth0
Building your own auth system is just painful and not worth your time during the hackathon. @auth0 is my go-to hosted auth service, and there is a handy auth0/nextjs-auth0 package to quickly integrate Auth0 and Next.js together
#6 Stripe
With their React components, @stripe is a quick and robust way to accept payment right in your web app. We are starting out with a one-time, on-demand purchase of credits. Later, we can easily roll out a subscription model for Pro plan.
#7 JavaScript Libraries
vercel/swr: React Hooks for data fetching
@2toad/profanity: Replace profanity to make user-generated apps safe for other users
color: Based on user-defined theme for the app, we detect contrast and render UI differently
... and many more!
#1 Next.js
For every project, I use @nextjs as the full-stack React Framework (React + Node.js) of choice. Having a single stack for FE and BE saves so much time, especially when you pair it up with TypeScript.
One of the key features of Next.js is flexible rendering options (CSR, SSR, SSG, etc). On the dashboard of https://www.brancher.ai, we use Client-Side Rendering to load "something" visible while data is still fetching.
On the app's landing page where users actually run the app, we use Server-side rendering to cache the page and make it friendly for SEO. In the future, we plan to selectively use Static Site Generation to render popular app pages at the build time.
#2 Vercel
The last thing I want is to maintain the reliability of the site, especially since we weren’t sure if it was going to take off. My go-to hosting service is @vercel. The deployment process is easy with GitHub/Bitbucket/etc integrations.
We pay for the Pro plan for Vercel, which let us execute back-end code as a serverless function for up to the 60s. Because generative AI services can take up to 20 seconds to respond, having a longer timeout window was crucial.
Combining that with @vercel/og package that executes as the Edge Functions, we are able to dynamically generate a unique Open Graph image for each app when shared online.
#3 TypeORM
When you build MVP, you need to quickly iterate on database models, which affects the back-end and front-end. That is why I chose @typeormjs. Using their typed entity model makes it easy to see the impact on code.
While not recommended post-launch, you can turn on the "sync" option in TypeORM to instantly propagate a change from your entity model file to your database (think auto-migration on file save!). During the hackathon, that’s how I saved a lot of time.
#4 CloudSQL for PostgreSQL
Again, I have no time for creating or maintaining a self-hosted DB! Because it is easy to get CloudSQL going at a relatively low cost with the ability to scale instantly, it was a no-brainer for me to go with it.
Here is the secret: I connected to the production instance while developing locally. Why? It doesn’t affect anybody besides us if we break something pre-launch, and you know that everything is going to work when you deploy the app to production!
#5 Auth0
Building your own auth system is just painful and not worth your time during the hackathon. @auth0 is my go-to hosted auth service, and there is a handy auth0/nextjs-auth0 package to quickly integrate Auth0 and Next.js together
#6 Stripe
With their React components, @stripe is a quick and robust way to accept payment right in your web app. We are starting out with a one-time, on-demand purchase of credits. Later, we can easily roll out a subscription model for Pro plan.
#7 JavaScript Libraries
vercel/swr: React Hooks for data fetching
@2toad/profanity: Replace profanity to make user-generated apps safe for other users
color: Based on user-defined theme for the app, we detect contrast and render UI differently
... and many more!
Ready to Elevate Your Project?
Let's bring your product vision to life.
© Elisha Terada 2023
Ready to Elevate Your Project?
Let's bring your product vision to life.
© Elisha Terada 2023