DEV Community: Robbie Tambunting

Beginner’s Guide 📘 to Using Supabase with Clerk

Robbie Tambunting — Thu, 13 Mar 2025 23:49:51 +0000

User authentication is crucial for any web app, and while securing it properly is essential, it can also be time-consuming. That's why, for my app WhereNow, I chose Clerk to handle the heavy lifting, paired with a Supabase backend for a quick setup experience. But I ran into one challenge:

I didn’t know how to integrate Clerk and Supabase together

Thankfully, I found a solution with the help of the official Clerk YouTube tutorial and the Clerk docs. While these resources provide helpful instructions, they ask you to run a few SQL queries. If you're not familiar with PostgreSQL, it can be tricky to understand exactly what’s happening behind the scenes.

The last thing you want is to apply code without fully understanding it. That’s why I’ve created this guide to break down those SQL queries step-by-step, helping you integrate Clerk and Supabase with confidence. Please pair this article with the video tutorial and documentation mentioned above.

And with that, let’s get right into it.

Connecting to Clerk from Supabase using a DB Function

To use Clerk and Supabase together effectively, we need to connect the two services. Fortunately, Clerk provides a DB function that does exactly that.

This function acts as the bridge between Clerk’s authentication system and Supabase’s database, ensuring that user data is properly synced and accessible within your app.

Take at the function below, and let’s run through it line by line:

CREATE OR REPLACE FUNCTION requesting_user_id()
RETURNS TEXT AS $$
    SELECT NULLIF(
        current_setting('request.jwt.claims', true)::json->>'sub',
        ''
    )::text;
$$;

CREATE OR REPLACE FUNCTION requesting_user_id()
- Creates a new function called “requesting_user_id()”
- Overwrites the function if it already exists
RETURNS TEXT AS $$
- Specifies the function will return a “TEXT” value
- $$ - Used to start SQL block quotes. Sometimes more readable alternative to single quotes ‘’
SELECT statement
```
SELECT NULLIF(
    current_setting('request.jwt.claims', true)::json->>'sub',
    ''
)::text;
```
- NULLIF - Compares ‘sub’ and and empty string’’. If ‘sub’ is empty, ensures NULL is returned rather than an empty string
- ::text - Type casts the result to TEXT to match how we are storing user_id’s in our Supabase tables
- current_setting() - A PostgreSQL function that retrieves the value of a config setting
  - Refer to PostgreSQL's documentation
  - 'request.jwt.claims' - A Supabase setting that holding the JWT payload for the database request
  - true - Ensure NULL is returned if the setting doesn’t exist instead of an error
- ::json - Converts the JWT to JSON format
- ->> 'sub' - Gets the subject field from the JWT
  - sub is the unique identifier for the user, Clerk includes this in the JWT payload
LANGUAGE SQL - Specifies the function is in SQL
STABLE - Indicates that the function’s output remains the same for the same input, unless the underlying data changes

The requesting_user_id() function is an essential part of ensuring that your app’s authentication system works seamlessly between Clerk and Supabase. By extracting the sub field from Clerk’s JWT and using it in Supabase, we ensure that each user’s unique identifier is correctly linked to their account in the database. Understanding how this function works is key to making sure authentication runs smoothly and securely. With this function in place, we can get into configuring our table Row Level Security policies

Configuring RLS in Supabase for Clerk

Row Level Security (RLS) Policies are used to define the rules for accessing or modifying a SQL table’s data. Without these restrictions, anyone could read, edit, or delete our stored sensitive data - which is a major privacy risk.

We want to ensure that users can only access their own data when signed in. Thanks to the requesting_user_id()function we created to check the Clerk authentication, setting up RLS policies becomes much easier.

To restrict data access for authenticated users, we use a simple SQL check in our RLS policy to ensure that the current Clerk user_id matches the user_id in the Supabase table. This check prevents unauthorized users from accessing or modifying data.

requesting_user_id() = user_id

Clerk’s documentation lays out how to create your own RLS polcies pretty clearly. Please refer to Step 3 of the docs tutorial to create some for your own project.

Here is an query used in my app WhereNow that creates an RLS policy for the list_items table

CREATE POLICY "Select list_items policy" 
ON "public"."list_items" 
AS PERMISSIVE 
FOR SELECT 
USING (
  EXISTS (
    SELECT 1 
    FROM "public"."lists" 
    WHERE "lists"."id" = "list_items"."list_id"
    AND "lists"."user_id" = requesting_user_id()
  )
);

This query does the following:

Creates a policy for the list_items table:
- It applies to the list_items table in the public schema and defines how users can interact with it
Defines the policy as "PERMISSIVE":
- This means the policy allows access if the condition is met
Applies the policy to SELECT operations:
- This policy specifically affects SELECT queries on the list_items table
  - (Must create other policies for UPDATE , DELETE , and INSERT
Defines contraints for selecting rows
- USING specifies conditions in which users are allowed to perform a SELECT query on the list_items table
- Two conditions:
  - The list_id foreign key in the list_items row must match a list in the id of a list in the lists table
  - The user_id associated with that list must match the requesting_user_id(), which is the ID of the currently authenticated user.
Ensures users can only access their own list items:
- By using the requesting_user_id() function, the policy guarantees that users can only view list_items associated with their own lists, ensuring privacy and data security

This query only applies to the SELECT operation, but you can apply similar policies for other operations to further safeguard your table’s data.

Wrapping Up: Streamlining Authentication and Security with Clerk and Supabase

In this post, we touched on how using Clerk for user authentication with a Supabase backend be both efficient and secure for your application. The main challenge was connecting these two services and understanding how to do so.

We walked through the process of creating a custom DB function that integrates Clerk’s JWT with Supabase to check that users are properly authenticated. Then, we implemented Row Level Security (RLS) policies to restrict access to sensitive information, ensuring that each user can only access their own data.

By understanding and implementing these steps, you can quickly set up a secure authentication system for your web application and focus more energy on building key features. Happy coding, and best of luck with your projects!

If you have any questions or comments, feel free to reach out - I’m always open to learning something new or lending a helping hand!

Designing the Core Features of an App 🧑‍💻 : Building the MVP Step-by-Step

Robbie Tambunting — Wed, 12 Mar 2025 06:21:26 +0000

Building an app is exciting, but designing it to be functional and user-friendly can feel overwhelming - especially when you’re building from scratch. If you’ve ever struggled with structuring your project and don’t know where to start, continue reading on! This is my process, and I’ll break it down step-by-step as I go.

(This is DevLog #3 for my hangout tracking app, WhereNow. If you’d like to see how I planned the MVP and made intentional UI decisions for the app, checkout my previous blog posts)

tldr

Integrated Clerk Auth to rapidly build the MVP
- May be expensive if the app scales considerably
Focus on minimal UI for now (can always make UI prettier in the future)
- Prioritize functionality
Homepage Functionality
- View and create lists
- View and create groups
- Page navigation not necessary right now (small MVP project scope)
- Search for lists and groups
- View profile
Lists: Table View > Gallery view
- No need to worry about bucket storage
List Page Functionality
- Search list items
- Add/Delete list items
- Sort items by
  - Name (Alphabetical)
  - City (Alphabetical)
  - Date Created
  - Date Completed (Future possibility)
- AI list summaries

A Brief Note on Authentication

While Supabase provides authentication, I’ve decided on using Clerk as my authentication provider for a few reasons:

Faster and simpler implementation.
Seamless integration with Supabase.
Likely to stay within the 10,000 Monthly Active Users (MAUs) free tier.

Clerk handles much of the heavy lifting, allowing me to focus on the app’s core functionality. It’s a great choice for the project right now; however, Clerk’s costs can become very expensive.

I plan to offer a limited free tier, with a premium option to extend those limits. The challenge is that if WhereNow exceeds 10,000 MAUs, there’s no guarantee how many of those will convert to paying users.

It’s something to consider for the future, but for now, the priority is on building the product.

With authentication in place, it’s time to tackle the next big step: designing the homepage. This is where users will interact with the core features of WhereNow, making it one of the most crucial parts of the app.

Designing the Homepage

The homepage of WhereNow will serve as the place for users to interact with key features. Initially, the functionality will include:

Viewing and creating lists: Users will be able to create and view lists of places or events with their friends.
Viewing and creating groups: Users can create and join groups to organize their lists and activities.
Search functionality: Users will have the ability to search for existing lists and groups, making it easier to discover and join relevant ones.
Profile view: Profile settings in the top-right will allow users to view and edit their personal details.

(Figma Desktop Design)

(Localhost Implementation)

Given the limited scope of the MVP, page navigation is not a priority for now. We’ll keep the experience focused on the core features.

Lists and List Page Functionality

For displaying lists, the initial view will be in a Table View, but we’ll consider a Gallery View in the future for a more visually-appealing experience. The Gallery View would be ideal for lists that include images, but since integrating image bucket storage adds complexity, the Table View will be the focus for the MVP.

(Figma Desktop Design of List Page)

The List Page will offer several key functionalities:

Search list items: Users can easily search for items within a list.
Add and delete list items: Users can manage the content of their lists by adding or removing items as needed.
Sorting options: Users will be able to sort list items by:
- Name (Alphabetically)
- City (Alphabetically)
- Date Created
- Date Completed (This feature may be added in the future)
AI-powered list summaries: To enhance the user experience, AI will provide summaries of the list, offering quick insights into its contents.

Wrapping Up

Designing WhereNow’s MVP has been all about balancing functionality with simplicity. By integrating Clerk for authentication, keeping the homepage streamlined, and focusing on table-based list management, we’ve set up a solid foundation for the app.

Next up, we’ll be focusing on allowing users to use CRUD operations to edit their lists. Look out for the next dev log, where I’ll be utilizing Supabase and Clerk to achieve this.

Have feedback or suggestions? Let me know—I’d love to hear your thoughts!

(WhereNow Log 3)

Building the Foundation: Designing an App’s UI 🎨 with Simplicity and Purpose

Robbie Tambunting — Mon, 10 Mar 2025 20:00:39 +0000

If you've ever felt that UI design for your project is daunting, don’t worry - it's more approachable than it seems. A great starting point is to focus on establishing a clear brand identity by selecting an appropriate color palette and typography. For instance, choosing colors that evoke the desired emotions and fonts that align with your app's tone can significantly enhance user experience.

In our journey with WhereNow, a friendship-centric social app, we began by focusing on these foundational elements. Let's walk through our design decisions to illustrate how thoughtful choices in color and typography can effectively convey an app's tone and purpose.

tldr

If you’re in a rush, here’s a quick rundown of the app's design decisions:

Color Palette:
- Primary (Dark Blue #006EC7) - changed from light blue (#64EDFF) to ensure accessible color contrast
- Light (Background #F7F7F7)
- Dark (Text #181818)
Typography
- Quicksand font (Fontshare) - rounded letters that convey warmth and approachability
- Type Scale (Golden Ratio) - adequate sizing contrast between headings and body text
Figma Design
- Start designing login + sign up page
  - Crucial feature of the app
  - Ready to code once designed

Color Palette

I began the design process by selecting the brand's color palette. Blue stood out as the primary choice, symbolizing calmness and trust—qualities essential to an app centered on friendship. Additionally, since our mascot is a harp seal, blue naturally complements the oceanic theme.

Originally I wanted to go with a baby blue, but after doing some accessibility contrast checks to ensure readability and inclusivity, I decided to go with a darker blue hue.

(Original Primary Color Choice)

(Final Primary Color Choice)

Typography

For typography, the Quicksand font from Fontshare was chosen to give off a more casual, friendly look with its bubble letters and lack of sharp angles. This font gives the site a warm and approachable feel to it.

To establish a cohesive typographic hierarchy, I chose a golden ratio scale starting with a 16px base font size. Aesthetically, this scale looks great by providing harmonious contrast between headings and body text. However, one downside to the golden ratio is it causes heading sizes to increase rapidly, potentially leading to disproportionately large headings. To address this, I may switch to a different type scale in the future to maintain visual balance within the app’s design.

Designing User Authentication Pages

With the foundation in place, it was time to boot up Figma and start designing the user login and sign-up pages. These pages are crucial for user retention and overall app function.

Starting with them allows us to quickly transition into development. Incorporating best practices, such as offering alternative account sign-up options and avoiding the simultaneous use of 'sign in' and 'sign up' on the same screen, also enhances the user experience.

It’s best to keep the design simple at this stage to focus on building the core functionality before introducing any creative complexity.

Conclusion

Establishing a thoughtful design foundation is essential in creating an app that resonates with users. By carefully selecting colors and typography that reflect the app's brand and implementing user-centric design practices, we aim to deliver an intuitive and engaging experience. As we progress into the development phase, these design choices will guide the creation of a platform that embodies the spirit of WhereNow.

What is your approach to product design? Comment down below!

(WhereNow Log 2)

Designing Your Go-To Friend Hangout Organizer 👥 - Starting ‘WhereNow’ 📍

Robbie Tambunting — Sat, 08 Mar 2025 18:36:04 +0000

An App to Track Hangouts with Friends

Keeping track of new restaurants and activities to do shouldn’t feel like navigating a cluttered mess on your notes app. Yet, that’s exactly the situation my friends and I were in - lost in a disorganized list within the Apple Notes app unable to really decide which place to try next. In order to transform this experience, I’m developing “WhereNow” - an app designed to bring order, excitement, and visual appeal to the experience of planning a hangout.

I’ll walk through the journey of developing this project, starting with developing a MVP and selecting the right tech stack. We’ll then touch on modeling our tables to define a clear structure on how the app works.

Alright, let’s get started.

The Minimum Viable Product

While there’s a lot of potential for incorporating advanced AI features, the initial goal is to quickly develop a product that my friends and I can use right away. This approach allows for quick feedback and iterative improvements. The core features of the Minimum Viable Product (MVP) will include:

User Authentication: Secure login and signup functionalities to manage user profiles
Personal Lists: Ability to create and manage individual lists of places and activities
Group Collaboration: Option to create shared lists with friends within specific groups
Review System: Functionality to add reviews for list items and view reviews from group members
AI-Powered Summaries: AI-generated summaries of list items to assist in decision-making and offer a more playful experience

The aim is to quickly launch a usable product, gather user feedback, and make improvements - adding features once these core functionality are nailed down.

Tech Stack Selection

WhereNow will initially launch as a browser application. While developing a mobile app makes the most sense, my expertise lies in building web products. This approach allows me to:

Rapidly create an MVP with my existing skills
Assess user interest in the product

To ensure a secure and efficient development process, I have chosen the following technologies:

Supabase: Provides backend services and a SQL database, including authentication and simplified database table creation
Next.js: Enhances frontend performance with features like lazy-loaded images and server-side rendering.
- Will allow the development of a dynamic product landing page with Framer Motion animations
Clerk (Optional): Offers an affordable authentication services with quick integration options (Google, Twitter, etc.)
Claude AI: An advanced AI language model known for its safety and performance

Modeling Tables

Designing the database schema is important for ensuring efficient data manipulation and providing insight into the apps functionality. Below is an overview of the proposed tables for WhereNow:

Table Name: users

Description: Stores info about registered users

Fields:

id (Primary Key, Required): Unique identifier for each user
name (Required): name or nickname of the user
email (Unique, Required): Email address of the user

Table Name: groups

Description: Stores information about user groups.

Fields:

id (Primary Key, Required): Unique identifier for each group
name (Required): Name of the group.

Table Name: group_members

Description: Associates users with groups, establishing a many-to-many relationship

Fields:

user_id ((Foreign Key to users.id, Required)
group_id (Foreign Key to groups.id, Required)

Table Name: lists

Description: Stores lists that users create for themselves or for their groups

Fields:

id (Primary Key, Required): Unique identifier for each list
name (Required)
user_id (Foreign Key to users.id, Required)
group_id (Foreign Key to groups.id, Required)

Table Name: list_items

Description: Stores items within created lists

Fields:

id (Primary Key, Required): Unique identifier for each item
list_id (Foreign Key to lists.id, Required)
name (Required): Name or title of the item.
city (Optional): City where the item (e.g., restaurant) is located.
completed (Boolean, Default: false, Required): Status indicating if the item has been visited or completed

Table Name: reviews

Description: Stores user reviews for list items.

Fields:

id (Primary Key, Required): Unique identifier for each review
list_item_id (Foreign Key to list_items.id, Required)
user_id (Foreign Key to users.id, Required): Identifier linking to the reviewer
rating (Integer, Required): Rating given to the item (e.g., 1-5 stars).

- `comment` (Text): Optional textual feedback

Table Relationships

Tables	Relationship	Reason
users ↔ groups	many:many	Users can be part of many groups. Groups can contain many users
users → lists	one:many	Each list can only have one “creator”
groups → lists	one:many	Groups can have many lists, but each list must be associated with one group only
lists → list_items	one:many	List Items are associated with one list
list_items → reviews	one:many	Reviews are associated with one list item, but list items can have multiple reviews
user → reviews	one:many	Reviews are associated to only one user

Conclusion

With the project's foundation established and the backend implemented on Supabase, we can turn our attention to designing the product's user interface. The design will significantly influence the frontend development, so let's dive into Figma to brainstorm!

Thoughts or suggestions? Please comment down below! Your feedback is invaluable to making WhereNow a tool that meets your needs.

(WhereNow Log 1)

Master Type-Safe Object Keys with TypeScript keyof typeof

Robbie Tambunting — Wed, 08 Jan 2025 06:20:51 +0000

Intro

Ensuring type safety with TypeScript is essential when accessing object properties within your application. One powerful yet overlooked feature that can simplify this process is the keyof typeof construct. This simple trick leverages the keyof and typeof operator to infer the key types of an object at runtime. As a result, it helps you write safer, more maintainable code and reduces the risk of passing invalid property names.

What is `keyof`?

keyof is a TypeScript operator used to return the union type of keys from an object type

In the following example, the keyof operator lets us define constraints on which property names can be passed into our function:

type Document = {
    id: number,
    title: "string,"
    author: string
}

type DocumentKeys = keyof Document // returns "id" | "title" | "author"

const myDocument = {
    id: "0",
    title: "\"Untitled Document\","
    author: "Robbie"
}

function getMyDocumentProperty(key: DocumentKeys){
    return myDocument[key]; // key must be either "id", "title", or "author"
                                                    // thanks to keyof, no other property name is allowed
}

TypeScript will throw an error if key is anything other than "id", "title", or "author".

What is `typeof`?

In TypeScript, the typeof operator returns the type value of the variable, object, or function that follows it.

We can use typeof to automatically infer the type of an object without manually defining it:

const document = {
    id: 0,
    title: "Untitled Document",
    author: "Robbie"
}

type Document = typeof document; // { id: number, title: string, author: string }

Combining `keyof typeof`

Combining the two operators allows us to dynamically extract an object's keys in a type-safe manner. But when would we need this in practice?

Consider the following scenario:

You have predefined an object with key-value pairs, such as a configuration object
You are building a React component, and one of its props must correspond to a key in this predefined object

This is where combining keyof and typeof really shines.

Instead of manually defining the object keys as a union type — which can lead to errors if keys change — you can use keyof typeof to derive the keys directly from the object.

Here’s an example where I leveraged this technique in one of my reusable UI components:

// --- Button.tsx ---

type ButtonProps = {
  text: string;
  twStyles?: string;
  color: keyof typeof colors;
  onClick?: () => void;
};

const colors = {
  primary:
    "transition-2s hover-translate-y rounded-lg border-2 border-[#004A7C] bg-[#004A7C] px-4 py-2 text-white hover:border-[#31678c] hover:font-semibold hover:bg-[#31678c]",
  secondary:
    "transition-2s hover-translate-y rounded-lg border-2 border-[#004A7C] bg-gray-50 px-4 py-2 text-[#004A7C]  hover:font-semibold hover:bg-[#eaf3ff]",
};

function Button({ text, twStyles, color = "primary", onClick }: ButtonProps) {
  const colorStyles = colors[color] || "";
  return (
    <button
      onClick={onClick}
      className={`${twStyles} ${colorStyles} rounded-lg border-2 px-4 py-2`}
    >
      {text}
    </button>
  );
}

export default Button;

In this example, keyof typeof ensures the color prop is restricted to valid keys of the colors object. If colors is updated, its type automatically reflects the changes, reducing the risk of bugs.

Conclusion

There you have it! Understanding the keyof typeof combo in TypeScript allows you to create type-safe, maintainable code that adapts to changes in your objects. This approach eliminates redundant type definitions and reduces the chance of errors, making it a valuable tool for any TypeScript developer.

What did you think?

I’d love to hear your thoughts! Have you ever used this technique? If so, how? Share your feedback in the comments below!

Create a Time-Saving Template 🧩 with React, Vite, and Tailwind CSS

Robbie Tambunting — Sat, 14 Dec 2024 22:35:38 +0000

Why You Should Create a Template

Creating new React projects can be both time-consuming and redundant. In this guide, I’ll show you how to set up a reusable React template with Vite and Tailwind CSS. This approach allows you to skip the initial set-up process and jump straight into development for future projects.

If you’re looking for a quick start, I’ve created a ready-to-use template on GitLab here. Just clone it to your machine, and you’ll be up and running.

Now, let’s get started by setting up a remote repository.

Setting Up a Remote Repository

Sign In to the Version Control Platform of Your Choice - I’ll be using GitLab, but any other choice works
Create a New Project - In GitLab, this can be done by clicking the “+” icon on the upper left corner by your profile picture
- Select “Create blank project”
- Choose a project name, slug, + privacy level
Hit the “Create Project” Button
Under the Blue “Code” Button, copy the “Clone with HTTPS” link - We’ll need this soon, so just hold onto it

And you’re all set! Now your template will be automatically linked to this remote repo when you clone it.

Initializing the Template

Let’s explore the first steps to creating your template

Navigate to the Folder Where You Want to Store the Template:
- Open your terminal
- Change into your desired directory
  
  e.g. cd my-projects
Clone Your Template:
- Replace with the one you copied in the previous section
- Change into your new template’s directory
```
git clone <Remote-Clone-Link>
cd <new-template-name>
```
Initialize a Vite Project:

Use “.” after vite@latest to prevent Vite from creating an extra folder inside the cloned git repo
```
npm create vite@latest .
```
Select “React” and “TypeScript” when Vite prompts you for project options

💡 Note: At this point, I like to remove a lot of the default Vite files + assets

Installing Packages

Feel free to customize this section. Here’s my preferred package combination:

tailwindcss - a utility-first CSS framework
postcss - process and optimizes CSS files
autoprefixer - adds prefixes to ensure CSS compatibility across all browsers
prettier - auto formats your code to improve readability
prettier-plugin-tailwindcss - ensures consisten Tailwind class formatting (personal favorite)

npm install -D tailwindcss postcss autoprefixer prettier prettier-plugin-tailwindcss

Configuring Tailwind and Prettier

tailwind.config.js
- content: specifies which file types should use Tailwind classes
- theme.extend: allows you to create custom classes

// -- tailwind.config.js --

export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

index.css - imports Tailwind’s base styles, components, and utility classes

// -- index.css --
@tailwind base;
@tailwind components;
@tailwind utilities;

.prettierrc - allows Prettier to format Tailwind classes

// -- .prettierrc
{
  "plugins": ["prettier-plugin-tailwindcss"]
}

Committing and Pushing to the Remote Repo

You’re almost finished! To make this truly reusable, we need to save our changes to our remote repo

git add .
git commit -m"Finish react template"
git push

Final Notes

Update Packages Regularly - Always check in on your project to ensure packages aren’t deprecated and that updates don’t break your project
Remove the .git File When Cloning - This ensures that your changes to your new project don’t affect the template’s remote repo

Conclusion

Congratulations, by creating a React project template, you’ve significantly streamlined the setup process, saving yourself valuable time. Now, you can focus on actually building out your application and bringing your idea to life.

What did you think? I’m always open to feedback and suggestions, so feel free to share your thoughts or ask questions!

Why I’m Building a Realtime Collaboration App (DocuMe Devlog 1)

Robbie Tambunting — Tue, 03 Dec 2024 21:57:33 +0000

Intro

So I’m on a mission to refine my software engineering skills by building practical projects that present a new challenge each time.

I recently built out my first full-stack application called On the Rocks which taught me the basics of integrating a frontend, backend, database, and cloud hosting service. While I’m very proud of it, I know that this is just the beginning. There is so much more to learn.

This brings me to my next project: a real-time collaboration app like Google Docs.

The Idea: Why a Realtime Collaboration App?

As companies turn to remote or hybrid work models, collaboration tools like Google Suite and Microsoft 365 have become a necessity. These tools enable efficient teamwork by providing easy accessibility to files and instantly visible updates.

The Goal: To build a real-time document collaboration app and master concepts that can be applied to other projects

I won’t reinvent the wheel here, but this project will be a great opportunity to challenge myself and grow as a developer.

The Features

Full-stack apps like to-do lists and recipe trackers really only require the implementation of CRUD operations to have full user functionality.

Building a real-time app requires us to stretch our skills beyond the basics and tackle the following features:

Live Updates - Synchronizing updates across multiple clients requires use of WebSockets
Rich Text Editing - For documents to be easily styled by the user and formatted for storing in the database, a feature-rich editor like Quill is required
Handling Concurrent Edits - I’ll have to do more research on this, but the app needs a way to handle document edits happening at the same time and manipulating the same data
Version History (Stretch Goal)

In addition, I am excited to learn:

AWS Web Service Hosting - Easily scalable with different tiers suited for the app's required needs
Google Oauth

The First Steps: A High-Level Overview

Frontend Framework:
1. React for the user interface
2. Tailwind CSS for fast, responsive design
3. TypeScript for type checking and debugging
Backend:
1. Node.js
2. Express
3. MongoDB
Quill Rich Text Editor
Websockets for Real-time Communication
Google Oauth
Deployment:
1. Vercel (Frontend)
2. AWS (Backend)

I’ll possibly explore Redis for database caching and scaling preparation.

Looking Ahead

That’s the app so far! Over the coming weeks, I’ll tackle features like Quill integration, Google Oauth implementation, and real-time collaboration to realize this vision. I’ll document the challenges I face and share solutions that could help others working on similar projects.

Stay tuned for the next dev log, where I’ll discuss how I designed the app's frontend and backend architecture!

What do you think?

I’d love to hear your thoughts or share your experiences building real-time apps. Share your feedback in the comments or connect with me on LinkedIn!

C++ Programming Lecture 1

Robbie Tambunting — Tue, 20 Aug 2024 04:40:29 +0000

Why C++?

I'm on my journey to pursuing my Master's in CS! Along with taking the GRE and obtaining letters of rec, I also must take a handful of prerequisites that my Computational Mathematics major didn't include.

Today marked the start of my C++ Programming course. So why are we learning C++ instead of let’s say Python or Java? While this question wasn’t answered in my first lecture, I would like to highlight a few points:

C++ is more similar to C and requires manual memory management.
C++ supports Object Oriented Programming (OOP)

Since both Python and Java support OOP, I’d imagine that the main selling point is C++’s low-level programming capabilities. Higher-level languages abstract memory management, so C++ forces us to efficiently manage it ourselves.

Side-note: It’s really convenient that most C code can also be run as a C++ program.

Now back to my class activities.

Components of a C++ Program

We took a look at a particular code segment and were introduced to the basic components of a C++ program. Afterward, we were asked to make a few edits for an in-class assignment.

The following code snippet is as follows

#include <iostream>
using namespace std;

int main() {
    int totalInches;
    int totalFeet;
    int totalMiles;
    int remainingFeet;
    int remainingInches;
    cout << "Please enter the total number of inches: ";

    cin >> totalInches;


    totalFeet = totalInches / 12;
    totalMiles = totalFeet / 5280;
    remainingFeet = totalFeet % 5280;
    remainingInches = totalInches % 12;

    cout << totalInches << " inch(es) is equal to "
         << totalMiles << "mile(s),"
         << remainingFeet << " feet and "
         << remainingInches << " inch(es)."
         << endl << endl;

    cout << "Bye Now!" << endl;
    return 0;
}

Let’s break down each unfamiliar keyword and operator.

General

#include - a directive that tells the compiler to include contents of a specified file. The preprocessor replaces the line with #includes with the actual code located in the header file
header file - any file that contains C-language functions. May be included in other existing C files
namespace - an area that defines the scope of all things (functions + variables) inside it. It’s much like adding curly braces {} around a whole region of code and calling it a name.
int main() - defines our main program that all other functions are called from
- Standard practice is to specify an int return value and to return 0 on finish

IoStream + std

std - namespace for the C++ standard library that holds many useful classes and functions
- cout - used to print characters to the console. stands for “character output”. part of std
- cin - used to get input from the user. stands for “character input”. part of std
- endl - used to print a newline “\n” to the console and flushes the output buffer (AKA all data is written to the output device in that instant)
“using namespace std;” - allows us to define things like cout without having to write the full std::cout statement
iostream - a file that includes functions that allow for input and output operations using streams (streams - flow of data in or out of a program)
- printing to the console
- printing an error message
<< operator - used for outputting data onto the stream. Usually used to push data into the cout output stream
>> operator - used for getting input data from the stream. Usually used to pull user inputted data from the stream into a variable via cin

And that’s all for the first day! I’m looking forward to furthering my understanding of computer programs as this course progresses

Valid Parentheses (Leetcode 20)

Robbie Tambunting — Sat, 20 Jul 2024 19:48:21 +0000

I’m on a quest to improve my interview skills and general knowledge of Software Engineering as a whole. What better way to do so than to do coding challenges on Leetcode!

I’ll be honest Leetcode isn’t my strong point, but that’s all the more reason to get better. Each of these will be solved using my own implementation in JavaScript, and they will include a detailed walkthrough of my process.

So join me on this journey as I work my way through Neetcode’s 150 and more!

The first problem I will be tackling is valid parentheses:

Valid Parentheses

You are given a string s consisting of the following characters: '(', ')', '{', '}', '[' and ']'.**

The input string s is valid if and only if:

Every open bracket is closed by the same type of close bracket. Open brackets are closed in the correct order.Every close bracket has a corresponding open bracket of the same type.

Return true if s is a valid string, and false otherwise.

Problem Link: https://neetcode.io/problems/validate-parentheses

My Solution

Space Complexity: O(n)

Stack of max length n
Hashmap

Time Complexity: O(n)

Must iterate through n chars of string s

Pseudo-code Steps

Define a hashmap containing closing brackets and their opening counterparts
Define a stack that will hold all of our opening parentheses in the order they appear
Iterate through string s
1. if the current char is an opening bracket: add it to our stack
2. else it is a closing bracket: see if it’s corresponding opening bracket is the last element in the stack
  1. if so, else pop from stack
  2. else the corresponding opening bracket isn’t the last element in the stack, return false (invalid parentheses)
Return stack === 0 (boolean value)

Code

class Solution {
    /**
     * @param {string} s
     * @return {boolean}
     */
    isValid(s) {
        // define stack
        // define hashmap for brackets
        let stack = []
        const map = new Map([[")", "("], ["]", "["], ["}", "{"]])

        // iterate through s
            // if char is not in map
                // add char to stack
            // else if corresponding val is the last val in stack
                // pop top of stack
            // else (closing brace but no corresponding open brace in stack)
                // return false

        for(const char of s){
            if(!map.has(char)){
                stack.push(char)
            } else if(stack[stack.length - 1] === map.get(char) ){
                stack.pop()
            } else{
                return false
            }
        }

        // return true if stack is empty, false if not empty
        return stack.length === 0
    }
}

DEV Community: Robbie Tambunting

Beginner’s Guide 📘 to Using Supabase with Clerk

Connecting to Clerk from Supabase using a DB Function

Configuring RLS in Supabase for Clerk

Wrapping Up: Streamlining Authentication and Security with Clerk and Supabase

Designing the Core Features of an App 🧑‍💻 : Building the MVP Step-by-Step

tldr

A Brief Note on Authentication

Designing the Homepage

Lists and List Page Functionality

Wrapping Up

Building the Foundation: Designing an App’s UI 🎨 with Simplicity and Purpose

tldr

Color Palette

Typography

Designing User Authentication Pages

Conclusion

Designing Your Go-To Friend Hangout Organizer 👥 - Starting ‘WhereNow’ 📍

An App to Track Hangouts with Friends

The Minimum Viable Product

Tech Stack Selection

Modeling Tables

Table Name: users

Table Name: groups

Table Name: group_members

Table Name: lists

Table Name: list_items

Table Name: reviews

- comment (Text): Optional textual feedback

Table Relationships

Conclusion

Master Type-Safe Object Keys with TypeScript keyof typeof

Intro

What is keyof?

What is typeof?

Combining keyof typeof

Conclusion

Create a Time-Saving Template 🧩 with React, Vite, and Tailwind CSS

Why You Should Create a Template

Setting Up a Remote Repository

Initializing the Template

Installing Packages

Configuring Tailwind and Prettier

Committing and Pushing to the Remote Repo

Final Notes

Conclusion

Why I’m Building a Realtime Collaboration App (DocuMe Devlog 1)

Intro

The Idea: Why a Realtime Collaboration App?

The Features

The First Steps: A High-Level Overview

Looking Ahead

What do you think?

C++ Programming Lecture 1

Why C++?

Components of a C++ Program

General

IoStream + std

Valid Parentheses (Leetcode 20)

Valid Parentheses

My Solution

Pseudo-code Steps

Code

- `comment` (Text): Optional textual feedback

What is `keyof`?

What is `typeof`?

Combining `keyof typeof`