DEV Community: Patrik Braborec

Side Projects Starter Pack

Patrik Braborec — Fri, 29 Nov 2024 09:58:41 +0000

I have worked on a few side projects over the past few years and have identified that the most important thing is to get things done quickly to validate an idea. The best part is that you can do this very fast nowadays, not just because of large language models (AI), but mainly because of the many existing tools with great developer experiences. The following post summarizes the tools you can use to create prototypes of end-to-end applications.

The Example Application

To demonstrate this capability, I will showcase it in an application that tracks stock prices, summarizes messages about particular stocks in a feed, and sends emails. Since I believe it is very important to measure whether the app's idea is successful, analytics will also be implemented!

Tools

The following tools are chosen based on a single metric: time to market, which measures how quickly the application will be available to users.

Client

Next.js, React Query, Tailwind & Shadcn

I think that this combo is great and will help you build an application in a couple of hours.

Tip 1: Try v0.dev. It generated the entire UI for the example application.

Tip 2: Check all TanStack libraries; I also use TanStack From.

Backend

Supabase

I think that Supabase will solve 80-90% of your initial backend needs out of the box, mainly:

Database
Authentication
Storage (if you need to upload things like images)

Also, theirs GraphQL-like queries are awesome!

Bun

I found that the best approach is to write simple scripts for simple tasks, such as getting data from somewhere and storing it. Remember, the important thing is time to market, not to make it perfect.

The interesting thing is Bun (a fast JavaScript runtime similar to Node.js). It is:

Super fast
Works out of the box with TypeScript
Has a nice project initializer (those who have initialized TypeScript projects will know that it is a pain)

Infrastructure

The best approach is to use GitHub for source code control, and then, based on your needs, you can use a variety of tools. I mostly prefer Cloudflare and Render (I run cron jobs over here).

Tip 1: Cloudflare offers very generous free hosting.

Notifications

The simplest way to send emails nowadays is to use Resend.

Analytics

For product analytics, Posthog is simply the best. The best feature you will find useful is Session Replay (you will actually see how your users use the app).

Tip 1: If you want to see how many people saw your landing page, I encourage you to use plausible.io (PS: you do not need to use a cookie bar).

Tip 2: Cloudflare also has analytics.

Tip 3: Be sure to use a reverse proxy with Posthog. Next.js makes it simple to configure.

The Application

If you are interested, you can check out the application: Side Projects Starter Pack.

You can also check the source code: GitHub.

Final Words

Thanks for reading! If you want to support my work, you can fill the very short survey. It would mean a lot to me!

How to Send Alerts from Supabase

Patrik Braborec — Thu, 26 Oct 2023 16:29:46 +0000

Sometimes, you may find the need to be notified about changes in your Supabase database as soon as possible. It can be for various reasons. For example, you may want to know if a new user registered, or if a critical business action occurs, such as a user adding an item to their shopping basket. This tutorial outlines a simple way to achieve this using Emitbase (an open-source alert platform for developers).

Prerequisites

Node.js 18.12 or later.
Docker on your machine.
Installed Emitbase CLI.

Supabase Table and the Requirements for Alerts

For the sake of simplicity, I have a basic table named buyers with the following columns:

id (the table's identifier)
created_at (the registration time of the user)
updated_at (the time of the user's last update)
name (the buyer's name)
approved (a flag indicating if a user has been approved by an admin and can log into the application)

I want to receive a Slack message when the following events occur:

A new buyer registers within the last five minutes.
The 'buyers' table contains any rows where the 'approved' column has a 'FALSE' value.

Step 1: Create a New Emitbase Project

$ npx emitbase init <your-project-name>

Step 2: Set Up Your `profiles.yml`

First, create a credentials file:

$ touch profiles.yml

In the profiles.yml file, please define your credentials:

emitbase:
  databases:
    dev:
      host: <database-host>
      database: <database-name>
      port: <database-port>
      user: <database-username>
      password: <database-password>

  notifications:
    dev:
      slack:
        port: <slack-port>
        channel: <slack-channel>
        signingSecret: <slack-signing-secret>
        token: <slack-token>

  target: dev

Check the Integration with Slack documentation page for more information about Slack credentials.

Step 3: Create Necessary Thresholds for Alerts

The first threshold must track whether a new buyer has registered within the last five minutes:

new_users:
  expression: SELECT * FROM buyers WHERE created_at >= NOW() - INTERVAL '5 minutes'
  cron: '* * * * *'

The second threshold must track whether the 'buyer' table contains any rows where the approved value is FALSE.

unapproved_users:
  expression: 'SELECT * FROM buyers WHERE approved = FALSE'
  cron: '* * * * *'

Step 4: Create Alerts Messages

For new users:

new_users:
  slack:
    message: 'You have new users who have registered on the platform! 🚀'

For unapproved rows:

unapproved_users:
  slack:
    message: '📣 We have some unapproved users! Take a look!'

Step 5: Build and Run Emitbase

To run the project, it is necessary to build a Docker image:

$ docker build -t emitbase .

Then, you can just run it and wait for notification on your slack! 🎉

$ docker run -it emitbase

Showcase

The following images show messages in Slack. It's really simple; you can set up your alerts in minutes!

Conclusion

For more information, please refer to the entire Emitbase documentation. If you encounter any issues, please feel free to create an issue. Lastly, if you appreciate Emitbase and would like to show your support, please give it a star on GitHub. Thank you!

JavaScript Object Items Order

Patrik Braborec — Wed, 19 Aug 2020 16:17:27 +0000

The Bug 🐛

I had to solve an issue with the order of items in a dropdown. The problem was that items in the dropdown were sorted wrongly (in a different way than from the server).

For example, data from the server were in this order:

const items = [{
    id: "/product/id/2",
    title: "product 2"
  },
  {
    id: "/product/id/1",
    title: "product 1"
  },
  {
    id: "/product/id/4",
    title: "product 4"
  },
  {
    id: "/product/id/5",
    title: "product 5"
  },
];

There was a function which mapped that data from the server into an object, something like this:

function mapToObject(items) {
  return items.reduce((acc, item) => {
    acc[item.id] = item;
    return acc;
  }, {});
};

Because JavaScript (for objects) does not (always) follow the insertion order, the result of that function was:

{
  "/product/id/1": {
    id: "/product/id/1",
    title: "product 1"
  },
  "/product/id/2": {
    id: "/product/id/2",
    title: "product 2"
  },
  "/product/id/4": {
    id: "/product/id/4",
    title: "product 4"
  },
  "/product/id/5": {
    id: "/product/id/5",
    title: "product 5"
  }
}

The result of that function led to the wrong order of items in the dropdown.

Why does it happen? 🔍

Jul 6 '16

168

Property order in normal Objects is a complex subject in JavaScript.

While in ES5 explicitly no order has been specified, ES2015 defined an order in certain cases, and successive changes to the specification since have increasingly defined the order (even, as of ES2020, the for-in loop's order). Given is the…

Open Full Answer

The Solution 🚀

I wanted to keep "similar structure" because the dropdown can have a lot of items (for example, I would have to iterate over all items to get a selected item) so I solved the issue with a Map object - guarantees the keys will be iterated in order of insertion and it has similar features like Object.

function toMappedItems(items) {
  const map = new Map();
  items.forEach(item => map.set(item.id, item));
  return map;
}

The result of that new function is:

0: {"/product/id/2" => {id: "/product/id/2", ...}}
1: {"/product/id/1" => {id: "/product/id/1", ...}}
2: {"/product/id/4" => {id: "/product/id/4", ...}}
3: {"/product/id/5" => {id: "/product/id/5", ...}}

So it is easy to work with that result and it keeps the order of items from the server.

The whole problem and solution are "simplified". The main take away is to not rely on the order in Object. 🎉