Interiobot.com teck stack on AWS

Data Eng Weekly - Ep 14

Last week, I released Interiobot.com. Some of you asked about the tools I used so I will share more details on how I built this SaaS.

The entire project was built on AWS.

As mentioned last week, I wanted to build this product as quickly as possible by leveraging the managed services of AWS.

I believe they are an ideal balance between no-code tools, where you control almost nothing (cf Bubble price increase of last week), and traditional app development processes, where you need to handle numerous elements by yourself: user management, authentification ect.

It’s for me the quickest way to bring a product to market, with almost no technical debt, that can scale.

The only downside is reliance on AWS; however, considering the risk, it doesn't outweigh the significant increase in development speed.

Okay, let’s dive in!

1- AWS Amplify

The core of Interiobot is based on AWS Amplify.

Amplify is an AWS toolbox that abstracts everything you need to build a web application.

It is a set of preconfigured AWS services that you can use as a boilerplate for your project.

I enjoyed the ease of beginning a new app from the start and having, for example, user authentification integrated without writing any line of code !

Once your project is setup on Amplify, you need to :

• code your frontend

• provide a data model for your backend

and that’s it :)

2- The frontend

As mentioned in the last update, I am really happy with my choice of React and Tailwind.

These tools have become nearly standard, and there is extensive documentation available online.

Tailwind offers high-quality components that enable quick and effortless customization.

I was able to create my landing page in just one day.

Let’s have a look at an example. If you need a pricing table, you can directly choose one from the Tailwind library:

Copy the react code associated:

and use it directly in your app.

Quite efficient :)

Let’s now have a look at the backend

3- The backend

Here as well Amplify helped me a lot to build it fast.

I simply provided my data model in the following format:

type Job @model @auth(rules: [{allow: owner}, {allow: private, provider: iam}]) {
  id: ID!
  image_s3_key: String!
  generated_images: [GeneratedImage] @hasMany(indexName: "byJob", fields: ["id"])
  prompt: String
  style: String
  room: String
}

...

and Amplify created for me:

• the corresponding dynamo DB tables

• the links between these tables

• the graphQL endpoint to query these tables. GraphQL is a query language for APIs, developed by Facebook. It allows clients to request specific data from the server.

Without writing any code, I was able to build the backend side of the application.

4-Step functions

My apps needed additional workflows to handle image processing tasks and payment events from Stripe.

For this, I used a combination of Lambda and Step functions.

Step Functions are excellent for combining operations sequentially like API calls, writing to DynamoDB, and transferring data to S3.

I used the AWS visual interface a lot, which allowed me to build sequences easily by dragging and dropping the necessary building blocks.

Once built, I exported the json definition of the step function, converted it as yaml, and copied it directly into my serveless.yml file

I really appreciated the capability of Step Functions to display all past executions and retry the failed ones.

Let's examine a specific workflow: new image processing.

When a user uploads a new image, the system creates a dynamo entry containing the room and style chosen by the user, as well as the S3 key of the uploaded image.

The creation of this new entry automatically triggers the corresponding Step Function workflow through an AWS EventBridge Pipe:

Once triggered the step function realized the following operations:

• Map: loop over all created records in dynamo

• Copy object: copy the image to another bucket

• Invoke the lambda that will process the image

Constructing this straightforward workflow necessitated minimal coding: just the event mapping between the various steps was required, making the process efficient and easy to manage.

I hope this article will help you if you are on the path to constructing a SaaS app.

I will update you in the next releases about the limitations and problems I will encounter with this stack.

thank you for reading.

-Ju

I would be grateful if you could help me to improve this newsletter. Don’t hesitate to share with me what you liked/disliked and the topic you would like to be tackled.

P.S. you can reply to this email; it will get to me.

---