System Design of my Activity Page

This Sunday morning I'm thinking to add Activity page to my site — inspired by Daniel Raffael activity page here.

So I want to have like activity gallery that stores exported image from Samsung Health.

The process is as follows — I will share the activity from my phone and then upload the image to the Telegram Bot. After that, the Activity page should display all activities, including the most recent one.

Here the system design that I will build. I like to define the process in sequence diagram.

Below are the steps to design and implement that idea.

Telegram Bot Service#

I will build telegram bot service using Rust called ZeroBot Activity.

There's a framework called teloxide in Rust to make Telegram bots.

It will handle user interaction. Input image, save it locally, push it to Github repository.

Backend#

For the backend, I'll use a persistent storage SQLite with Prisma as the ORM. Here's the model activities schema:

id: uuid
file_name: str
note: str
created_at: date

API Specification:#

Set up an API endpoint to fetch and save the activity.

List all activity

GET https://satrya.zeroinside.id/api/activities

Accept: application/json

Add a new activity

POST https://satrya.zeroinside.id/api/activities

Content-Type: application/json

Authorization: Basic <base64-encoded-credentials>

{
    "file_name": "activity_file_name.jpg",
    "note": ""
}

Frontend#

I will introduce a new route named activity and use Server-Side Rendering to display the component.

The UI layout will utilize a grid system, specifically: class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4".

Each activity item will be displayed using a card.

It will look something like this: