Caribou system design

Introduction

Caribou, a AI-empowered travel expert platform, is a startup based in Hong Kong. Founded by experts in Travel Industry and professionals in Digital Transiformation. Caribou provides infrastructures and tools to people who is willing to become part of the travel industry. I am recurited to help to bring their visions and idea to life. Here's the story of how I build the products/idea.

Workflow

Before talking about anything about the tech I use, I would like mention about the workflow of our team, since it's beginning of everything. There are Hong Kong team and Toronto team in Caribou. Business team and Product team are located in Hong Kong. Enginnering team is localed in Toronto. In Caribou, a lot features are initialized by business team. The requirements are collected and summarized by product team. After that, the enginnering team and the product team will discuss the feasibility. Sometime, feasibility study needed to be conducted before any development is planned. Assumming feasibility is fine for that feature, enginnering team will estimate the effort needed to develop the feature and a ticket will be created. Before starting to develop, the priority will be set, as there are always more requirements than we can handle. Having priority, we ensure our team is always developing something impactful.

Services

Let's talk about services Caribou needed.

  1. Advisor Platform
    1. Web-based tool for our advisors to manage their customers and view information in Caribou
  2. Landing page, https://caribou.travel
    1. CMS, Content Management System
  3. Serverless functions
  4. Internal Tools

Apart from that, we do have a few experimental/POC projects:

  1. Chatbot
    1. Telegram Chatbot
    2. Whatsapp Chatbot
  2. Chrome Extension for hotel search assistant

Design Direction

Since we are a start-up with limited resoureces, there are few important direction needed to be consider, when designing the systems.

  1. Move fast, fail fast
  2. Cost optimization
  3. Reduce maintenance effort

Therefore, we can conclude Caribou's system design in three aspects of

  1. Design Pattern: Serverless for reducing maintenance efforts and Cost efficiency
  2. Stability: We seek for stability for core products, ie Advisor Platform and Internal tools. Regarding experimental products, we don't care that much. Move Fast, Fail Fast.
  3. Scalability: Our client-facing products are scalable using different SaaS.

That why we are using a lot of SaaS to build the systems.

System Diagram

Created using excalidraw

There are multiple elements are common among the whole design.

  1. AWS
    1. Initially, we were not ready to include AWS in our design, since managing infrastructures on AWS was quite troublesome and sometime cost more effort by experience.
    2. However, as we are eligible for some start-up credit and we have discovered SST, framework built on top of AWS CDK, giving us easier time to manage infrastructures on AWS.
  2. Vercel
    1. Not only does Vercel provides reliable hosting services with no CICD setup required, separate environments and complete support to Next.js, it also provides us storage services, analytic service and monitor service.
    2. We get all of those by paying only USD$20 a month with our usage.
    3. An extremely cost effective platform
  3. React.js
    1. React is by far the most common UI framework in the world.
    2. Choosing React allow us to find talents easily, helping us to expand our team
  4. Typescript
    1. You should always use Typescript. It just makes your life easier.

Advisor Platform

Advisor Platform

Tech stack

  1. Next.js
    1. Adventage:
      1. Stable, Robust and Complete solution when trying to develop a complex react application
      2. No CI/CD (nearly) setup needed if Vercel is used as the hosting platform
      3. With Next v13/14, feature like Server Action and Server Component do help team to build application with much higher efficiency.
    2. Disadventage:
      1. Without Vercel, you may not be able to enjoy the benefits coming with features like SSR/ISR/middleware/Image optimization when you are going for none-single-machine hosting solution, eg: Using Kubernetes to host the application. 1. Of cause, you can always choose to use solution like https://open-next.js.org to get around of that.
      2. However, a lot of effect is needed.
  2. Tailwind CSS
    1. My Go-to Css Framework
    2. With projects like radix and Shadcn/UI, we can develop application faster than ever before.
    3. Our designer on the team also prefer Tailwind
  3. Drizzle ORM
    1. It generates Type defination.
    2. No need to learn anyother type schema language like Prisma do.
    3. Smooth learning curve

Landing page

Landing page

Tech Stack

  1. Webflow
    1. Adventage:
      1. Offset development effort to designer/non-tech resoureces
    2. Disadventage
      1. Unable to fine tune the site
  2. Strapi - Headless CMS (Self-hosted)
    1. Very popular open-source options in the market
      1. Easy to find solution in the community
    2. Multiple members in the team have experience with Strapi

Internal Tools

One of our retool internal tool

Why are we using Retool to build our internal tools

  1. Offset development effort to designer/non-tech resoureces, since it's very easy to edit.
  2. Reduce a lot of development effort.
;