Every query you run is automatically saved, so you don't have to rebuild from memory or search through browser history. You can rename and favorite queries for quick access, and replay them with all parameters preserved, including indexes, keys, attributes, and filters.

This first release includes the following MVP features. If you have an idea for another feature, please let me know!

• Auto-saves query history as you run them

• Favorites & rename support to keep things organized

• Replay queries with indexes, keys, attributes, and filters included

• Editor defaults like auto-unmarshalling JSON and height adjustment

Install DynamoDB Extended from the Chrome Web Store and open the side panel to get started. Your queries will begin logging automatically.

Source code available on GitHub. Feel free to open feature requests!

— Alex

Unfortunately, our team did not select you to join the program this cycle. Evaluations were primarily based on the links to the content you submitted for consideration — and alignment to your chosen topic area — along with your AWS journey, background, and other information in the application.

It felt like a punch in the gut. I've been part of the AWS Community Builder's program since 2020. I've written over 10 tutorials on getting started with AWS Serverless that have more than 12,000 views. I maintain over 10 GitHub repositories that have helped new AWS developers learn common Serverless patterns. I'm a Director of Engineering at a startup that builds exclusively with AWS Serverless technology. I was even interviewed by AWS and am still featured in the AWS Amplify customer section. As I sat there staring at the rejection email, I couldn’t help but think, “What went wrong?”

I'm not sharing this experiences to brag about accomplishments or complain about the selection process, but to start a conversation about normalizing rejection. Rejection is tough. It can feel discouraging, but it's something we all experience, both personally and professionally. By discussing it openly, my goal is to remove the stigma. Rejection doesn't define your abilities or worth. It should be seen as an opportunity to grow. It's a chance to reflect on ourselves and consider how we can improve.

So, what does this moment mean for me? How can I turn this rejection—this obstacle—into an opportunity? I haven't written any new AWS content in over a year, and during that time, our industry has changed a lot. AI has become a major focus, and I haven't shared any opinions, guides, or insights on it. I use AI and AWS Serverless technology every day, both at work and in side projects. I've been building a lot, but writing and sharing very little. Community building is all about just that—building community! So that’s my commitment for the next year. I plan to write and share more about my experiences with AWS and Serverless. These hands have some dirt on them, and I want to show it.

Rejection sucks, especially in our field, but it's part of the journey. In fact, one could argue that achievements aren’t meaningful without rejection. Here are a few ways we can turn these moments into growth opportunities:

1. Reflect and Learn: Take a moment to understand what happened. Was there feedback? Use it. Every piece of criticism is a chance to improve.

2. Stay Connected: Lean on your community. Share your experiences; you'll find you're not alone. Engaging with others can offer new perspectives and support.

3. Keep Building: Don't let rejection stop your progress. Dive into new projects, contribute to open-source, or write about your experiences. Continuous learning and sharing keep you moving forward.

4. Take Care of Yourself: It's okay to feel down. Acknowledge it, but don't dwell on it. Engage in activities you enjoy, and remember to balance work with rest.

Remember, rejection doesn't define us. It's just a detour, not a dead-end. Keep pushing, keep coding, and keep sharing. I know I plan to. To all the Community Builders, congratulations! I'll see you all next year.

For the Hashnode AI For Tomorrow Hackathon, I launched CongressGPT to help us finally understand what Congress is actually doing.

CongressGPT lets users have natural language conversations with the latest bills from the United States House of Representatives and Senate. It uses Vercel's Cron and Supabase's RAG capabilities to continuously update a vector database with new bills.

Keeping up with what Congress is doing is hard. The language used in the bills can be challenging to follow. CongressGPT makes it easy to ask questions and understand congressional bills.

It's more important than ever to stay informed about what our representatives are doing, and I hope CongressGPT helps you do just that.

The Tech

Next.js 14

This project uses several new features from Next.js and React, including the app router, dynamic metadata, server components, and suspense.

Supabase

Supabase is powering a majority of CongressGPT features including authentication, chat and vector storage and similarity searching. I've been using Supabase for several projects and really enjoying it.

Govinfo API

The Govinfo API provides an RSS feed that is updated daily with the latest bills introduced in the U.S. House of Representatives and Senate.

Vercel

Vercel hosts the Next.js application and runs a nightly cron job to pull the latest Govinfo RSS entries, converting any new bills into a vector database.

Shadcn/ui

The entire website is built using shadcn/ui and TailwindCSS.

Supabase

I've been a fan of Supabase for about a year now. This is my second project, the first being an open-source journaling app, Supajournal. This guestbook feature requires users to sign in and leave messages, making Supabase the perfect choice. In this section, we'll walk through setting up GitHub OAuth, a table with proper Row-Level Security (RLS), and generating TypeScript types.

GitHub OAuth

Supabase makes setting up OAuth quite simple, offering a variety of provider options. As I primarily write tech content, I decided to implement the guestbook feature using GitHub OAuth.

This setup will require you to have both your GitHub OAuth app and Supabase authentication settings open simultaneously. Essentially, we need to connect these two systems by configuring each within the other. Don't worry, we'll guide you through this process step by step.

First, navigate to https://database.new and create a new Supabase project. In my case, I named it alexkates-dev. Allow a few seconds for the project setup to complete.

Next, go to GitHub and log in. Click your avatar in the top-right corner, then click Settings -> Developer Settings -> OAuth Apps -> New OAuth App. Keep this tab open, as we'll need it shortly.

Now, return to Supabase and navigate to your new project's dashboard. From the left-hand menu, click Authentication -> Providers -> GitHub. Excellent! Keep this tab open as well. The upcoming steps will involve switching between Supabase and GitHub to set up both sides of the OAuth exchange.

Copy the Callback URL (for OAuth) value from Supabase. It should resemble something like https://yvcsamdilcryjsvbsct.supabase.co/auth/v1/callback. Return to GitHub and paste this value into the Authorization callback URL field. Additionally, while you're here, enter your Application Name and Homepage URL.

Now, click Generate a New Client Secret. Take note of your Client ID and Client Secret, then return to Supabase. Enter those values into the GitHub provider configuration located above the Callback URL from earlier, and click save.

The final step in Supabase is to navigate to URL Configuration and add a couple of Redirect URLs. I added two: http://localhost:3000/auth/callback and https://alexkates.dev/auth/callback. You should definitely add the localhost, but your production callback will vary depending on your domain.

Excellent! By now, your GitHub and Supabase Authentication systems should be set up and prepared for coding later on.

Guestbook Table

Once a user can sign in, they will need the ability to leave a message. I kept this part relatively simple by creating a single table called Guestbook with columns for the id, created_at, message, user_id, username, and avatar.

Next, we need to configure Row Level Security, or RLS. This is an impressive feature in Supabase that enables you to implement access control policies directly in your database. Head back to Authentication -> Policies where we will create two policies.

For a Guestbook feature, we have two access patterns. First, anonymous users need to be able to read messages left by others. Click New Policy -> Get started quickly, and we'll use the template called "Enable read access to everyone."

Next, an authenticated user needs to be able to leave a message. Once again, we'll use a pre-built template for this. Click New Policy -> Get started quickly, and this time, select the template called "Enable insert access for authenticated users only".

Excellent! By now, you should have Supabase authentication set up and a table called Guestbook with RLS configured for public read access and authenticated write access.

Next.js

I've been increasingly using Next.js 14, React Server Components, and Server Actions, and this Guestbook feature presented another perfect opportunity to use these newer features.

In this section, we'll walk through all the code changes you'll need to make to allow a user to view previous Guestbook messages, sign in with GitHub, and leave a new message.

I'm going to assume you already have a Next.js app. If you haven't created one yet, it's as simple as running pnpm dlx create-next-app@latest.

Project Setup

There are several initial setup steps required to make our Next.js app and Supabase work together. Let's begin with our .env.local file. We will need four environment variables to enable the Guestbook feature. These variables can be found in various locations within the Supabase dashboard.

NEXT_PUBLIC_SIGNIN_REDIRECT_URL="http://localhost:3000/auth/callback"
NEXT_PUBLIC_SUPABASE_ANON_KEY="eyJhbGci1iKIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inl2ZHNhbWRpbGNyeWpoc3Zic2N0Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3MDgyNzkwMzIsImV4cCI6MjAyMzg1NTAzMn0.vHUHdPZ-npFD9zhnUIexdTw9rlYByDQQa1HW5RsKtZM"
NEXT_PUBLIC_SUPABASE_URL="https://yvdsamdilcryjhsvbsct.supabase.co"
SUPABASE_ACCESS_TOKEN="sbp_c83522caea12924355eb1270e4521850ac4d307a"

NEXT_PUBLIC_SIGNIN_REDIRECT_URL - We'll use this environment variable within our "Login with GitHub" call to Supabase, instructing GitHub where to redirect after successful authentication.

NEXT_PUBLIC_SUPABASE_ANON_KEY and NEXT_PUBLIC_SUPABASE_URL - these two values can be found in the Supabase dashboard. Note that they are marked as NEXT_PUBLIC and are perfectly safe to be exposed to client components.

SUPABASE_ACCESS_TOKEN - Unlike the ANON key, this access token is a secret and should not be exposed to client components. In fact, we will only use it as part of our build scripts to generate TypeScript files in the next step. To create one, go back to your Supabase project's main dashboard and, in the left navigation, click Account -> Access Tokens. Don't worry, I've already rotated my secret, so the one shared above is invalid.

TypeScript Generation

In this section, we'll discuss generating TypeScript files based on your Supabase schema. This is beneficial because it ensures your code always reflects the latest state of your database design, while allowing you to build these artifacts and add them to your .gitignore file.

There are three new package.json scripts we need to add, specifically predev, prebuild, and supabase-codegen.

"scripts": {
    "predev": "pnpm install && pnpm supabase-codegen",
    "dev": "next dev",
    "prebuild": "pnpm supabase-codegen",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "supabase-codegen": "supabase gen types typescript --project-id yvdsamdilcryjhsvbsct --schema public > src/supabase/types.ts"
  },

predev - This script runs before each pnpm dev command, ensuring that our packages and generated TypeScript are always up to date before starting the development server.

prebuild - Functions similarly to predev, but it ensures that the most recent TypeScript files are generated during the build process on Vercel.

supabase-codegen - This is where the magic happens. This command instructs Supabase to generate TypeScript types based on a specific project-id. You can find this project id in the Supabase dashboard for your project. In the left navigation, click Project Settings -> General.

Great! Our Next.js environment variables are now set up. Next, we'll dive into some coding.

Supabase init

We need to run a one-time command to initialize Supabase. This command simply connects the Next.js app to the Supabase instance. Just run supabase init from the root of your Next.js app and follow the prompts. For more information, you can find the Supabase init documentation here.

This command will create a supabase directory at the root of your project. Personally, I prefer to have it inside the src directory, so I moved it. However, feel free to leave it where it is if you prefer. Once finished, your Supabase folder should resemble the following.

The final step is to add a line to the .gitignore file in the supabase directory. Include types.ts, as this is where we will store all of our generated types. In fact, you can now run the script from earlier, pnpm supabase-codegen, and your types.ts file will be created in your supabase directory.

Supabase Client Component

We'll be interacting with Supabase from both server and client components. The Supabase SSR library needs to be configured slightly differently depending on where we are using it. In this section, we'll create a couple of client factories to make this process easier moving forward.

Starting with the createBrowserClient factory which is a bit more straightforward as there are no cookies to manage.

This code ensures that we always obtain a version of the Supabase client compatible with client components. It utilizes the two NEXT_PUBLIC environment variables we set earlier: the public URL and the anonymous key. The client is also typed to the Database type generated from our codegen, providing autocomplete functionality when attempting to query later.

import { createBrowserClient } from "@supabase/ssr";
import { Database } from "./types";

export function createClient() {
  const { NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY } = process.env;

  return createBrowserClient<Database>(NEXT_PUBLIC_SUPABASE_URL!, NEXT_PUBLIC_SUPABASE_ANON_KEY!);
}

Supabase Server Component

Our server client, which will be used in React Server Components, Server Actions, and middleware, is slightly more complex because it needs to manage the user's cookie state.

Similar to the client component, we are using the createServerClient factory function from @supabase/ssr. We also require the same environment variables as before. Finally, we need to configure "cookie methods." These methods determine how to get, set, and remove a cookie from the next/headers cookie store.

import { createServerClient, type CookieOptions } from "@supabase/ssr";
import { type cookies } from "next/headers";
import { Database } from "./types";

export function createClient(cookieStore: ReturnType<typeof cookies>) {
  const { NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY } = process.env;

  return createServerClient<Database>(NEXT_PUBLIC_SUPABASE_URL!, NEXT_PUBLIC_SUPABASE_ANON_KEY!, {
    cookies: {
      get(name: string) {
        return cookieStore.get(name)?.value;
      },
      set(name: string, value: string, options: CookieOptions) {
        try {
          cookieStore.set({ name, value, ...options });
        } catch (error) {}
      },
      remove(name: string, options: CookieOptions) {
        try {
          cookieStore.set({ name, value: "", ...options });
        } catch (error) {}
      },
    },
  });
}

Middleware

Next, we need to add a middleware.ts file to the root of the Next.js project (or the src directory if you're using that, like me). This middleware performs several important tasks, but its primary responsibility is to intercept every request and ensure that the Supabase user cookie is up-to-date in the cookie store. It also calls supabase.auth.getUser(), which refreshes the user's access token if it has become stale. Finally, it includes a matcher that only applies when the route is /guestbook, as most of my site is public.

import { createServerClient, type CookieOptions } from "@supabase/ssr";
import { NextResponse, type NextRequest } from "next/server";

export async function middleware(request: NextRequest) {
  const { NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY } = process.env;

  let response = NextResponse.next({
    request: {
      headers: request.headers,
    },
  });

  const supabase = createServerClient(NEXT_PUBLIC_SUPABASE_URL!, NEXT_PUBLIC_SUPABASE_ANON_KEY!, {
    cookies: {
      get(name: string) {
        return request.cookies.get(name)?.value;
      },
      set(name: string, value: string, options: CookieOptions) {
        request.cookies.set({
          name,
          value,
          ...options,
        });
        response = NextResponse.next({
          request: {
            headers: request.headers,
          },
        });
        response.cookies.set({
          name,
          value,
          ...options,
        });
      },
      remove(name: string, options: CookieOptions) {
        request.cookies.set({
          name,
          value: "",
          ...options,
        });
        response = NextResponse.next({
          request: {
            headers: request.headers,
          },
        });
        response.cookies.set({
          name,
          value: "",
          ...options,
        });
      },
    },
  });

  await supabase.auth.getUser();

  return response;
}

export const config = {
  matcher: ["/guestbook"],
};

app/guestbook/page.tsx

Let's start building the Guestbook page and components! First, we'll create the Next.js page.tsx file that serves as our Guestbook page. This React Server Component fetches the current authenticated user from Supabase and conditionally renders a page based on whether a user is signed in or not. This page also displays the <GuestbookList /> component and uses <Suspense /> to stream the list of guestbook entries to the client while the rest of the page loads instantly. If the user is not signed in yet, this page will display a client component called <SignInWithGithub /> that controls the OAuth flow with GitHub for us. Finally, if a user is signed in, this page will display a form, <GuestbookForm />, for the user to submit their message.

import GuestbookForm from "@/components/guestbook-form";
import GuestbookList from "@/components/guestbook-list";
import ParagraphSkeleton from "@/components/paragraph-skeleton";
import SignInWithGitHub from "@/components/sign-in-with-github";
import SignOut from "@/components/sign-out";
import { cn, fadeIn } from "@/lib/utils";
import { createClient } from "@/supabase/server";
import { cookies } from "next/headers";
import { Suspense } from "react";

export default async function Page({
  searchParams,
}: {
  searchParams?: {
    submitted?: boolean;
  };
}) {
  const supabaseClient = createClient(cookies());
  const {
    data: { user },
  } = await supabaseClient.auth.getUser();

  if (!user)
    return (
      <main className="flex flex-col gap-8">
        <section className={cn(fadeIn, "animation-delay-200 flex flex-col gap-2")}>
          Welcome to my guestbook!
          <div>
            <SignInWithGitHub />
          </div>
        </section>
        <section className={cn(fadeIn, "animation-delay-600")}>
          <Suspense fallback={<ParagraphSkeleton />}>
            <GuestbookList />
          </Suspense>
        </section>
      </main>
    );

  return (
    <main className="flex flex-col gap-8">
      <section className={cn(fadeIn, "animation-delay-200")}>
        <div className="flex items-center gap-2">
          Hi, {user.user_metadata.user_name}!<div className="animate animate-wave animation-delay-1000">👋</div>
          <SignOut />
        </div>
        {searchParams?.submitted ? <span>Your message has been submitted! Thanks for signing my guestbook.</span> : <GuestbookForm />}
      </section>
      <section className={cn(fadeIn, "animation-delay-600")}>
        <Suspense fallback={<ParagraphSkeleton />}>
          <GuestbookList />
        </Suspense>
      </section>
    </main>
  );
}

Observe how we import the createServer factory method from earlier and pass the cookies() from next/headers to it. This enables Supabase to maintain the user's state across pages, layouts, RSCs, and server actions.

<SignInWithGithub />

Supabase makes the actual code for OAuth flows quite straightforward. Remember that we already configured the OAuth exchanges earlier using the GitHub OAuth app we created and the Supabase Authentication section of our project.

Now, all that remains is to add this client component that will handle signing in with GitHub for us! You'll also notice the NEXT_PUBLIC_SIGNIN_REDIRECT_URL, which is used to inform GitHub where to redirect within our app once the user has completed the OAuth flow.

Unlike other instances, this time we are using the createClient factory for our browser client. This is because the OAuth flow is primarily a client-side process and must be initiated from the browser rather than on the server.

"use client";

import { createClient } from "@/supabase/client";
import { GitHubLogoIcon } from "@radix-ui/react-icons";
import { Button } from "./ui/button";

export default function SignInWithGitHub() {
  async function signInWithGitHub() {
    const supabase = createClient();
    supabase.auth.signInWithOAuth({
      provider: "github",
      options: {
        redirectTo: process.env.NEXT_PUBLIC_SIGNIN_REDIRECT_URL,
      },
    });
  }

  return (
    <Button onClick={signInWithGitHub}>
      <GitHubLogoIcon className="mr-2" />
      Sign in with GitHub
    </Button>
  );
}

<GuestbookList />

Next up is our GuestbookList component, which is also a server component. It's responsible for fetching the complete list of guestbook entries from our Supabase table and mapping each to the JSX that will be used to display the message. Once again, we use the Supabase server client, but this time we use it to actually run a SQL query, simply selecting all from the guestbook table.

After obtaining the guestbook entries, we sort them in descending order by created_at and map each to some JSX that resembles a text message component. If it wasn't already clear, I'm using shadcn/ui for the majority of the UI, which is also where the Avatar components come from.

import { createClient } from "@/supabase/server";
import { cookies } from "next/headers";
import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";

export default async function GuestbookList() {
  const supabaseClient = createClient(cookies());
  const { data } = await supabaseClient.from("guestbook").select("*");

  return (
    <ul className="flex flex-col gap-6">
      {data
        ?.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
        ?.map((message) => (
          <li key={message.id} className="flex items-center gap-2">
            <Avatar>
              <AvatarImage src={message.avatar} alt={message.username} />
              <AvatarFallback>{message.username.substring(0, 2)}</AvatarFallback>
            </Avatar>
            {message.username}: {message.message}
          </li>
        ))}
    </ul>
  );
}

<GuestbookForm />

In my opinion, Next.js server actions have greatly simplified the process of submitting data to a server. There's no longer a need to create an API route and manage client-side state for submission. The GuestbookForm component consists of a form, text input, and a button to submit the form. The form submission action is a Server Action that writes directly to our guestbook table.

import submitGuestbookMessage from "@/server/submit-guestbook-message";
import SubmitGuestbookMessageButton from "./submit-guestbook-message-button";
import { Input } from "./ui/input";

export default function GuestbookForm() {
  return (
    <form action={submitGuestbookMessage} className="flex flex-col gap-4">
      <div className="flex gap-2 items-center">
        <Input className="max-w-sm" id="message" name="message" required placeholder="Press enter to submit." />
        <SubmitGuestbookMessageButton />
      </div>
    </form>
  );
}

There are some interesting features within the <SubmitGuestbookMessageButton /> component. This client component utilizes the new useFormStatus hook from the latest react-dom release. This enables us to conditionally render content based on whether the form is pending submission or not.

"use client";

import { PaperPlaneIcon, ReloadIcon } from "@radix-ui/react-icons";
import { useFormStatus } from "react-dom";
import { Button } from "./ui/button";

function SubmitGuestbookMessageButton() {
  const { pending } = useFormStatus();

  return (
    <Button variant="default" disabled={pending} size="icon">
      {!pending ? <PaperPlaneIcon className="pl-1 h-5 w-5" /> : <ReloadIcon className="pl-1 h-5 w-5 animate-spin" />}
    </Button>
  );
}

export default SubmitGuestbookMessageButton;

<SignOut />

Finally, the <SignOut /> component enables users to sign out of our app if they wish. This client component utilizes the Supabase browser client to invoke the auth.signOut() function.

"use client";

import { createClient } from "@/supabase/client";
import { useRouter } from "next/navigation";
import { Button } from "./ui/button";

export default function SignOut() {
  const router = useRouter();

  async function signOut() {
    const supabase = createClient();
    await supabase.auth.signOut();

    router.refresh();
  }

  return (
    <Button onClick={signOut} size="sm" variant="link" className="p-0 text-muted-foreground">
      Sign Out
    </Button>
  );
}

Outro

I truly enjoyed building the Guestbook page on my personal site using Next.js and Supabase. The new tools in Next.js 14, such as React Server Components, Server Actions, and the app router, combined with the power of Supabase auth and the @supabase/ssr library, made this a fun project to work through.

If you found this helpful, I have a couple other free to use tools over at alexkates.dev/projects and also consider connecting on Twitter.

For the Hashnode APIs Hackathon, I launched hashnode-next, a beautifully simple Hashnode starter kit powered by Next.js and shadcn/ui. Hashnode-next is the fastest way to go headless with Hashnode, enabling you to migrate your blog with just one click.

Use the Vercel deploy button to deploy your own copy directly to your Vercel account, or start locally using the command below.

npm create-next-app -e https://github.com/alexkates/hashnode-next

Some Background

"Either write something worth reading or do something worth writing."
- Benjamin Franklin

I've been a writer and fan of Hashnode since January 2022, when I published my first article. Since then, I have published over 25 articles with more than 50,000 total views.

When Hashnode Headless became generally available, I was really excited to migrate my blog. This was right around the time that Next 14 was launching, and I knew this would be a fun project.

Then Hashnode announced the Hashnode APIs Hackathon and I knew it was the perfect time to open-source my blog template. I believed that creating a modern yet simple template that developers and bloggers could launch with just one click would be valuable.

Getting Started

Migrating your blog to headless with hashnode-next is as easy as deploying on Vercel, adding a single environment variable, and clicking Create.

If you'd prefer to start locally, you can use the following command and setting your .env.local.

npx create-next-app -e https://github.com/alexkates/hashnode-next

Lastly, the README is a great resource for Github ticket templates, contributing, and more.

The Tech

Next.js 14

Uses several of the newest capabilities from Next.js and React including app router, dynamic metadata, server components, and suspense.

Hashnode API

The blog, tag, and personal data GQL queries were primarily used to drive the /blog and /about pages. Additionally, the GQL Playground was utilized to develop the GQL documents.

Recording analytics and pageviews was by far the trickiest part. I ended up using Next.js redirects and Hashnode's Google Analytics.

Lastly, graphql-code-generator was employed to create TypeScript types from the schema.

Vercel

Nothing crazy here... just your typical Vercel hosting and the awesome Vercel Deploy Button. This was my first time wiring up the Vercel deploy button, and I loved it.

Shadcn/ui

The entire template is built using shadcn/ui and TailwindCSS, especially using the Card component for each post and badge tile.

Outro

Building hashnode-next was my first attempt at creating an open-source project. I'm truly proud of the outcome, and I hope that some Hashnode bloggers looking to go headless and learn Next.js 14 will find this helpful.

If you found this helpful, I have a couple other free to use tools over at alexkates.dev/projects and also consider connecting on Twitter.

Title Tag

The <title> tag is one of the most important parts of your SEO strategy and user experience. It's like your website's first impression: search engines use it to grasp what a page is about, affecting how it ranks in search results. For users, it's the first part of a page's content, appearing as a clickable headline in search results and on browser tabs. A catchy and relevant title tag can boost a page's visibility and click-through rates.

<title>Alex Kates | Welcome to my Blog!</title>

Description Tag

The meta description tag is equally as important for your website's SEO and user engagement. Think of it as your website's elevator pitch: it doesn't directly affect rankings, but it's essential for drawing users in from search results. It's kind of like your website's hook. This tag provides a brief preview of your page's content in search engine listings. A well-crafted meta description can help someone feel confident that your website has what they are looking for.

<meta name="description" content="Join Alex Kates on a journey through innovative tech trends, personal development tips, and insightful commentary on modern culture. Dive into the blog now!"/>

Robots Tag

The meta robots tag is like a map for search engines navigating your website, telling them what they should and shouldn't pay attention to on your site. This tag doesn't interact directly with your visitors, but it plays a role in defining your website's SEO strategy. By specifying whether to index a page or follow its links, the meta robots tag helps you manage how your content is discovered and displayed in search results. It's a powerful tool for controlling the accessibility of your website's content to search engines.

<meta name="robots" content="index, follow"/>

This tells search engines to index the page and follow the links on it, increasing its visibility and reach.

Open Graph Tags

Open Graph (og:*) tags are like your website's social media business card. They're import for defining how your content appears when shared on many social media platforms. These tags ensure your content is not just visible, but also engaging and clickable in social feeds.

<meta property="og:title" content="Exploring Tech Trends with Alex Kates"/>
<meta property="og:description" content="Join the conversation on the latest in tech on Alex's blog."/>
<meta property="og:image" content="http://example.com/image.png"/>
<meta property="og:url" content="http://example.com/blogpost"/>
<meta property="og:type" content="article"/>

og:title

The title of your content as it should appear in the share. It's the first thing people notice, like a headline.

og:description

Provides a concise and compelling summary of your content, helping to get a user to click.

og:image

This is the visual hook of your share, the image that appears in the post.

og:url

The URL of your page. This tag ensures the link shared is consistent and directs users exactly where you want them to go.

og:type

This tag tells the social media platform what type of content you're sharing like an article, video, or image gallery.

Twitter Card Tags

Similar to Open Graph, but for Twitter. These tags ensure that your content is displayed attractively when shared on Twitter.

<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content="Latest Tech Insights by Alex Kates"/>
<meta name="twitter:description" content="Dive deep into the world of technology with Alex's expert insights and discussions."/>
<meta name="twitter:image" content="http://example.com/image.jpg"/>
<meta name="twitter:site" content="@AlexKatesTech"/>

twitter:card

This tag sets the type of content you're sharing, like a summary or a large image, shaping the layout of your tweet.

twitter:title

Much like a headline, it grabs the reader's attention, summarizing your content in a tweet.

twitter:description

Offers a sneak peek into your content, enticing users to click through.

twitter:image

This visual element can be the deciding factor for engagement, making your tweet stand out.

twitter:site

Represents your handle or site's identity, connecting your content with your brand.

Canonical Tag

The rel="canonical" link tag acts like a detour sign for search engines, guiding them to the original or most relevant version of your content. It's particularly useful when similar content appears across multiple URLs. This tag helps prevent confusion over which page to rank, ensuring that all the SEO juice flows to the URL you deem most important.

<link rel="canonical" href="http://www.example.com/preferred-page.html"/>

With this tag, you're effectively telling search engines, "This is the page that matters most," ensuring your intended page gets the recognition and ranking it deserves.

Viewport Tag

The viewport meta tag controls how your website scales and renders on different screen sizes, from desktop monitors to mobile devices. This tag is fundamental in responsive web design, allowing your content to adapt across devices, enhancing user experience and accessibility.

<meta name="viewport" content="width=device-width, initial-scale=1"/>

This tag tells the browser to match the screen's width in device-independent pixels and start with a zoom level of 1. It's an important part of making your website accessible to all users across devices.

Thanks For Reading

Thanks for joining in on this journey through key meta tags. Mastering these can really elevate your site's SEO and user experience. Stay tuned for more tips and tricks in the tech world – feel free to follow along on Twitter @thealexkates. Happy coding!

For the Supabase Launchweek X Hackathon, I launched supajournal.app, an AI-powered journal that features statistics tracking and AI-generated writing prompts.

Intro 👋

“Write hard and clear about what hurts.”

– Ernest Hemingway

Journaling is one of the best things you can do for your mind, your heart, and your soul. it's a profound gift you give yourself—a space to untangle your thoughts, celebrate your victories, and find solace in your challenges.

But building a habit of writing can be challenging at first. It takes commitment, consistency, and patience.

Introducing Supajournal! Build that journaling habit once and for all.

Features 🔍

supajournal.app just launched for the Supabase Launch Week X Hackathon and already has several important features to help you build that journaling habit.

AI Generated Writing Prompts 🤖

For many, the hardest part of journaling everyday is finding inspiration. With supajournal.app, you no longer have to worry about running out of ideas or struggling to come up with topics.

Our AI-generated writing prompts are specifically designed to ignite your creativity and offer a starting point for your journal entries. The AI is optimized to encourage deep, meaningful, and insightful writing, helping you establish a journaling habit.

Statistics 📈

You can't improve what you don't measure. It's crucial to track progress over time when developing any new habit. That's why Supajournal includes six key statistics as part of the MVP:

1. Journal Entries

2. Streak

3. Most Popular Word

4. Word Count

5. Words per Journal Entry

6. Most Recent Entry

Block Editor ✍🏻

Supajournal offers a Notion-like editor experience. Powered by novel.sh and TipTap, this editor feels like a next-generation writing experience. The editor is composed of blocks, each of which can be modified independently from the others. You can drag, delete, edit, and customize each of these blocks to fit the mood you are in.

Technology 🤖

Supabase

This project was submitted as part of the Supabase Launchweek X hackathon. Supabase powers the Postgres database, authentication, and row-level security that form the core of the Supajournal app.

Open AI

At the core of Supajournal is its integration with OpenAI. Powered by the new gpt-3.5-turbo model, Supajournal generates thought-provoking journal prompts to help you overcome writer's block and engage in self-reflection.

Next.js

I absolutely love Next.js. I think it's the best web development framework I've ever seen. Supajournal is using Next.js 14 and utilizes several new features including React Server Components, App Router, and Server Actions.

TypeScript

Not much to say here other than it's 2023 and I've been using TypeScript by default for about 2 years.

Shadcn/ui

This was my first project using shadcn, and I must admit I was impressed. I genuinely appreciate the paradigm of installing a component without using NPM. It feels as if I own the components and can customize them however I need. Additionally, the components themselves feel incredibly clean and pleasant to use.

Outro 👋

Building a consistent journaling habit is hard. It requires dedication and persistence. Many people try but struggle with inconsistency or writer's block. However, journaling offers benefits such as improved mental clarity, self-awareness, and personal growth. Committing to journaling can lead to a more fulfilling and meaningful life.

I hope you try Supajournal and finally build that journaling habit once and for all!

In this post, we will guide you step by step on how to take custom font files and host them on a Content Delivery Network (CDN) in AWS. We'll be using the AWS CDK, TypeScript, and Bun to manage various AWS resources, including S3 and CloudFront, to deliver your stunning custom fonts to the edge, close to your users and apps.

We will then build a new Next.js app in a Bun monorepo. This Next.js app will use our new CDN to pull in our new fonts. We'll write the CSS and font-face code to properly use our new font.

Project Setup

To start we need to set up our new project. Were going to be using Bun, TypeScript, and the AWS CDK. Utilizing these tools together allows us to use a single language, TypeScript, across our entire repository. It will also make it incredibly easy to transition to a monorepo powered by Bun later on in this article.

cdk init

Begin by opening your terminal and running mkdir how-to-host-custom-fonts-in-s3 to create a new directory specifically for this project.

Next, navigate to this new directory with cd how-to-host-custom-fonts-in-s3, and run bunx cdk init app --language typescript. Bunx is an alias for `bun x` and functions similarly to `npx`.

mkdir how-to-host-custom-fonts-in-s3
cd how-to-host-custom-fonts-in-s3
bunx cdk init app --language typescript

nvm use

Next, we'll need to run a couple more commands to properly set up Node and install our dependencies.

I usually have multiple work and personal-related projects on my laptop, so managing Node.js versions across all of them is crucial. I prefer using a .nvmrc file at the root of my projects. For this project, we will utilize Node.js version 20.

Let's create a .nvmrc file at the root of our project and set its value to v20, which is the latest version of Node.js.

Great! Now just a few more commands to finish setting up our development environment.

nvm install v20
nvm use

1. nvm install v20: Installs Node.js version 20 using Node Version Manager (nvm).

2. nvm use: Activates the installed Node.js version for the session.

bun install

Now we are going to switch from npm to Bun as our package manager. I'm personally a big fan of Bun and have been slowly migrating all of my existing projects to use it. For any new projects, Bun is a default for me.

The AWS CDK scaffolds new projects using NPM as the package manager. To switch to Bun, we need to delete the package-lock.json and run bun install. Simply run the following commands to do so.

rm package-lock.json
bun install

1. rm package-lock.json: Removes the package-lock.json file that was created by our cdk init command earlier.

2. bun install: Installs project dependencies using Bun.

If everything goes smoothly, your folder structure should resemble the image below. The most crucial aspect is that you now have a bun.lock file. This lockfile functions differently from npm or yarn, as it is a binary file rather than plaintext. The primary reason for this is to enhance performance. Bun’s lockfile saves & loads quickly and saves a lot more data than what is typically inside lockfiles.

.prettierrc.json

The following configuration is based on personal preference. Since I have a widescreen monitor, I prefer to set my Prettier printWidth wider than the default. In this case, I'm using a value of 120.

Building the stack

For our font hosting and delivery setup, we will be implementing several key AWS services:

• S3 Bucket: Used for reliable and organized storage of font files. It's the main storage component.

• CloudFront Distribution: Acts as the delivery mechanism, ensuring rapid distribution of fonts to users globally.

• CloudFront Origin Access Identity (OAI): A security feature that allows CloudFront to securely access S3 fonts without public access.

• CloudFront Cache Policy: Dictates caching behavior to optimize performance and costs, affecting load times and bandwidth.

• CORS Configuration: Essential for cross-origin resource sharing, it enables secure usage of fonts across different domains.

Let's break down exactly what is happening here, line by line.

• Imports: Bringing in necessary CDK modules for S3, CloudFront, and CloudFront origins.

• Stack Definition: Creating a custom stack class HowToHostCustomFontsInS3Stack extending the CDK Stack.

• S3 Bucket Setup: Initializing an S3 bucket with a removal policy and CORS configuration, allowing GET requests from any origin.

• Origin Access Identity: Creating a CloudFront Origin Access Identity (OAI) for secure access to the S3 bucket contents.

• Bucket Permissions: Granting read permissions to the OAI for the S3 bucket.

• Cache Policy: Defining a CloudFront cache policy to control header behavior, particularly for the 'Origin' header.

• CloudFront Distribution: Setting up a CloudFront distribution with the cache policy, an S3 origin linked to the OAI, and enforcing HTTPS.

• CDK Output: Outputting the domain name of the CloudFront distribution for easy access post-deployment.

It's time to deploy this stack to AWS. Simply run bun cdk deploy --require-approval never. If all goes well, you will see an output similar to the one below. Pay particular attention to the distribution domain name output, as we will use it later to construct the URL for fetching the font files.

That's it! In just about 45 lines of TypeScript and AWS CDK code, you can create a CDN using CloudFront, backed by S3, to host your custom fonts. These fonts will be readily available at the edge, wherever your users access your web application.

Upload Fonts to S3

For simplicity, we will use the Montserrat font from Google, but the specific font is not important. If you have a completely custom font, this same solution will work just as well! This also works for any type of font file, including TTF, OTF, and WOFF.

1. Log in to AWS Management Console: Open your AWS account and navigate to the S3 service.

2. Select Your S3 Bucket: Locate and access the S3 bucket designated for the 'Montserrat' font files.

3. Upload 'Montserrat' Folder: Click on 'Upload', then 'Add folder', and select the 'Montserrat/static' folder which includes various font files like 'Montserrat-Regular.ttf'. Ensure the MIME type for each file is set to 'font/truetype'.

   

4. Review and Upload: Double-check that the MIME types are correct and proceed with the upload. If the MIME type is incorrect, you may encounter a CORS error later, which can be a nightmare to debug.

   

5. Verify Upload: Refresh the bucket post-upload to confirm the Montserrat folder and its contents are uploaded. To test the 'Montserrat-Regular.ttf', use this URL format in your browser: https://dkeeepdefzien.cloudfront.net/Montserrat/static/Montserrat-Regular.ttf. This URL combines your CloudFront domain with the file path, allowing you to verify the successful hosting of the font file.

6. 

   Test with cURL: The last thing to verify is to make sure the proper Content-Type header is set. This is important for browsers to handle the font file correctly.

curl -I https://dkeeepdefzien.cloudfront.net/Montserrat/static/Montserrat-Regular.ttf

If everything is working, you should be able to download the file by navigating directly to https://dkeeepdefzien.cloudfront.net/Montserrat/static/Montserrat-Regular.ttf. Also, the cURL command should produce output like the following.

Congratulations! You now have a functioning CDN hosting your custom font, which you can download directly from your web app.

Extra Credit

Now let's have some fun! In this section, we are going to ...

1. Convert our project to a Bun monorepo

2. Add a Next.js app

3. Fetch and use our custom fonts

Convert to a Monorepo

Monorepos with Bun are straightforward and have the added benefit of hoisting common dependencies to the root of the repository.

1. From the root, create the folder /packages/fonts-cdn

2. Move everything from the root to /packages/fonts-cdn

3. Delete /packages/fonts-cdn/node_modules

4. Update the name of /packages/fonts-cdn/package.json to be "fonts-cdn"

5. Create package.json in the root and set it to the following

    {
      "name": "how-to-host-custom-fonts-in-s3",
      "version": "1.0.0",
      "workspaces": [
        "packages/*"
      ]
    }
   

6. From the root, run bun install

Your project should now resemble the structure below:

Create a Next.js app

Now let's scaffold a Next.js using create-next-app and Bun.

cd packages
bun create-next-app

Step through the normal create-next-app prompts and you should see an output that looks like this.

After completing the create-next-app prompts, your project should resemble the following structure. You will notice that there are now two packages. The first one is "fonts-cdn", which was our AWS CDK app from part 1 of this walkthrough. The second one is our newly created Next.js app called "fonts-app".

Great! Let's run the Next.js app in development mode and ensure everything works properly. From what I understand, with Bun, you need to change directories (cd) into the package you want to run and then execute the development command. This is slightly different from Yarn, where you can stay at the root and run the 'yarn workspace' command followed by the desired command.

cd packages/fonts-app
bun dev
open http://localhost:3000

You should see the iconic Next.js default page!

Use the Font CDN

Fantastic, we now have all the components necessary to utilize our custom fonts hosted on our CDN. When it comes to using a custom font with Next.js and Tailwind, there are several options for customizing Tailwind.

I recommend these docs from Tailwind Toolbox, which explain the differences between various Tailwind font customizations. Essentially, you can either overwrite or extend the default Tailwind theme, and your approach will affect the appearance of your generated Tailwind utility classes.

For the sake of brevity, let's host our CSS locally and overwrite the existing Tailwind utility classes. However, this decision ultimately depends on your specific use cases.

Create montserrat.css

First, we must create a CSS file that defines our font faces. The crucial aspect is to establish a font face for each font file, taking into account font weight and italics. Call this CSS file 'montserrat.css' and place it in fonts-app/src/app/montserrat.css.

Update globals.css

Next, make a one-line change to 'fonts-app/src/app/globals.css' to include 'montserrat.css'. Simply use the @import statement in 'globals.css' to incorporate the new CSS file. After making this change, your 'globals.css' should resemble the following.

Delete next/font/google

The latest version of Next.js comes with an excellent font optimization system. However, it doesn't directly align with our use case since we want to host our font on a CDN for multiple apps to utilize. Therefore, we will remove the font optimization code for now.

Navigate to fonts-app/src/app/layout.tsx and eliminate any usage of next/font/google and Inter. Once completed, your layout.tsx should resemble the following.

Update tailwind.config.ts

Since we are using Tailwind, we need to inform it that we want to use Montserrat as our sans-serif font family. Tailwind makes this process quite straightforward. There are several ways to customize your font family with Tailwind, depending on your use case and objectives. For this walkthrough, we will override the default sans-serif font so that the out-of-the-box utility classes seamlessly use our Montserrat font. To accomplish this, update your tailwind.config.ts file, specifically the config.theme.fontFamily.sans value. Once updated, it should look like the following.

Notice that we are setting the sans font family to an array, with the primary value as Montserrat and using the spread operator to include the default settings as backups.

Testing it all out

Awesome! Now let's test our new fonts and setup. Restart your dev server by running the following commands.

cd packages/fonts-app
bun run dev
open http://localhost:3000

If everything is working, the default Next.js page should now be using the Montserrat font and should look like the following image.

Thanks for reading!

Congratulations! If you made it this far, you successfully hosted custom font files on a Content Delivery Network (CDN) in AWS using AWS CDK, TypeScript, and Bun. We covered setting up the project, building and deploying the stack, uploading fonts to S3, and utilizing the CDN with a Next.js app.

If you found this content helpful, please consider liking, sharing, and following me here on Hashnode and at https://twitter.com/thealexkates.

Today we launched the Croissant Chrome Extension that offers Guaranteed Buybacks of up to 75% on over 1 million items at your favorite retailers.

Croissant’s Guaranteed Buybacks are exactly what they sound like —
you buy an item at retail, and we’ll buy it back from you at a baked-in price for up to one year. No fees. No pressure. Just money back for your things.

After you install it from the Chrome Web Store, you can use it to see the Guaranteed Buyback value of items as you shop. Any eligible items you buy, while the extension is activated, will be added to your Croissant Collection. If you choose to redeem your buybacks, simply send them to Croissant and get paid.

How It Works

Getting started with the Croissant Chrome Extension is a simple and straightforward process. All you need to do is follow these steps:

1. Quick Installation: Add the Croissant Chrome Extension to your browser from the Chrome Web Store, and you're all set. It integrates quietly and quickly, ready to work behind the scenes.

2. Know Your Item's Worth: As you shop, Croissant shows you the guaranteed buyback value for items you're interested in. This helps you shop with an awareness of an item’s future value.

3. Track Your Purchases: Upon purchase, the item enters your Croissant Collection, which acts as a personal inventory, tracking the value of everything you buy.

4. Easy Resell Option: When you're ready for a change, Croissant’s buyback process is at your service. Sell your items, and Croissant ensures you receive the guaranteed value back in return.

With Croissant, you're not just buying—you're investing in items that hold onto value, giving you a smarter way to shop.

Know Value

At its core, Croissant's Chrome Extension is all about learning and understanding the value of things while you shop. For instance, consider the Triumph Crew Neck Tee from Alo Yoga.

It retails for $54, but Croissant informs me that I can resell it within a year and receive a guaranteed value of $24 back in cash. This realization has a psychological effect at the point of purchase. I now think, "Oh, I'm only spending $30 on this full-priced item because it holds value beyond the initial purchase." When I'm ready to move on from it, I can resell it back to Croissant for $24!

Activate Guaranteed Buybacks

With just a click, you activate the buyback feature for your new purchases. This locks in your guaranteed buyback, ensuring you can choose to sell any item back to Croissant at a predetermined price.

Upon activating the Guaranteed Buybacks feature, you can rest assured that your purchases will be smoothly integrated into your Croissant account, providing you with the opportunity to resell them at a later date. This not only secures the predetermined buyback price for each item but also offers you the flexibility and convenience to manage your purchases with ease. By activating, you proactively maximize the value of your purchases while ensuring a hassle-free experience when you decide to sell them later.

Hassle-Free Reselling

As you activate the Croissant Chrome Extension and lock in your Guaranteed Buybacks, your purchases will flow into your Croissant collection. You can access your Croissant collection via our web app or IOS app.

When you're ready, you can access your collection and locate your Guaranteed Buybacks. Simply click or tap the "Sell" button, package and ship your item, and your proceeds will be deposited into your Croissant wallet, where you can withdraw them via Venmo or PayPal.

Thanks For Reading

Launching Croissant Chrome Extension has been a highlight of my career. It's been an incredible ride, and I couldn't be prouder of the product we've built, the team and the way we've all pulled together to make it happen. It feels amazing to put this out into the world!

In this article, we explore 7 useful AWS CLI commands for managing S3 buckets, including checking bucket size, listing objects with specific extensions, finding the largest files, listing objects from a specific date, listing objects with a specific prefix, listing recently modified objects, and identifying empty directories. These commands will help you manage and optimize your S3 storage more effectively.

Whether you're experienced with AWS or new to cloud storage, mastering the AWS CLI, particularly the aws s3 ls command, can help you manage your S3 buckets. I've collected 7 of my most common and useful aws s3 ls commands that I've been recently using that have helped make s3 interactions so straightforward.

1. Check the Size of an S3 Bucket

Ever wondered how much data you've stored in a specific bucket? This command helps you calculate the total size of an S3 bucket, giving you insights into your storage utilization.

aws s3 ls s3://YOUR_BUCKET_NAME --recursive | awk '{total += $3} END {print "Total:", total/1024/1024 " MB"}'

2. List All Objects with a Specific Extension

Filtering by file extension is useful when you're trying to get an overview of specific file types stored in your bucket, like PDFs.

aws s3 ls s3://YOUR_BUCKET_NAME --recursive | grep ".pdf"

3. List Top 10 Largest Files in a Bucket

This command helps you spot the 10 largest files in your bucket, which might assist in clean-up or storage optimization.

aws s3 ls s3://YOUR_BUCKET_NAME --recursive | sort -k 3 -n -r | head -n 10

4. List Objects from a Specific Date

If you've uploaded or modified files on a particular date and want to view them, this command is your go-to. Just replace the date accordingly.

aws s3 ls s3://YOUR_BUCKET_NAME --recursive | grep "2023-08-21"

5. List Objects with a Specific Prefix

Organizing your S3 bucket with prefixes helps in data management. This command lets you view objects under a specific prefix.

aws s3 ls s3://YOUR_BUCKET_NAME/PREFIX/

6. List All Objects Modified Within the Last 10 Days

Want to see what's been updated recently? This command lists all the objects modified in the last 10 days, helping you keep track of recent changes.

aws s3 ls s3://YOUR_BUCKET_NAME --recursive | grep "$(date +%Y-%m-%d -d '10 days ago')"

7. Find Empty Directories in a Bucket

Empty directories can clutter your bucket and might be remnants of older structures. Use this command to identify and possibly clean them up.

for prefix in $(aws s3 ls s3://YOUR_BUCKET_NAME/ | awk '{print $2}'); do 
    count=$(aws s3 ls s3://YOUR_BUCKET_NAME/$prefix --recursive | wc -l); 
    if [ $count -eq 0 ]; then 
        echo "Empty directory: $prefix"; 
    fi; 
done

Alright, folks, that's a wrap! Whether you're an AWS pro or just getting started, I hope these aws s3 ls tricks make your life a tad easier. The more you play around with these commands, the more you'll get the hang of it. Did I miss any that you regularly use?

Like this type of content? Follow me on Twitter for more!

In this blog post, we're going to walk through a step-by-step guide to upgrading an Astro project to take advantage of all the features and optimizations Bun 1.0 has to offer.

Astro Project Structure

Before diving into the migration steps, it's essential to understand the existing structure of the BullyBarks project. In this Astro-based project, you'll notice a few specific files like .nvmrc (NVM), .npmrc, and pnpm-lock.yaml. These indicate that I've been using Node Version Manager (NVM), npm, and PNPM for package management. These are precisely the tools we'll be migrating away from as we transition to Bun 1.0. Now, let's break down the folder structure to better understand how the project is organized.

• .prettierrc: The configuration file for the Prettier code formatter.

• .vscode: This directory holds Visual Studio Code-specific settings.

• src/: Project's source code including components, layouts, and pages.

• public/: static files

• astro.config.mjs: The Astro configuration file.

• tsconfig.json: The TypeScript configuration file.

• tailwind.config.cjs: This holds the configuration for Tailwind CSS.

• node_modules/: This directory contains all the dependencies for the project.

• dist/: The output directory generated after running Astro's build script.

• .npmrc and .nvmrc: These are configuration files for npm and NVM, respectively.

• package.json: Like any Node.js-based project, this file lists dependencies and scripts.

• pnpm-lock.yaml: Since we're using PNPM for package management, this file locks down the versions of the dependencies.

• .astro: Astro types directory

Install Bun

Bun ships as a single executable that can be installed in a few different ways. I chose to use the bun.sh install script below.

curl -fsSL https://bun.sh/install | bash

Verifying Bun Installation

After installing Bun, it's a good practice to verify that the installation was successful. This ensures that Bun and its accompanying executables are correctly set up in your system.

To confirm that Bun is properly installed, run the following commands:

which bun
which bunx

If both commands return valid file paths, that means Bun and BunX are successfully installed and are ready for action.

Eliminating Previous Package Managers

Time to roll up your sleeves! We're going to start by eliminating any traces of the previous package managers from the project. Delete the following files and directories: .npmrc, .nvmrc, pnpm-lock.yaml, and node_modules.

To do this, run the following command:

rm -fr node_modules .npmrc .nvmrc pnpm-lock.yaml

Install Dependencies with Bun

With the old package manager files out of the way, it's time to bring in the new star of the show—Bun. To install all of your project's dependencies using Bun, simply run the following command:

bun install

Run Astro Dev with Bun

Now that Bun is installed and verified, you can use it to run your Astro development server. bunx, an accompanying tool of Bun, enables you to run package scripts without requiring system-wide installs.

To fire up the Astro development server using bunx, execute the following command:

bunx --bun astro dev

If you're following along with the steps, your console output should closely resemble the screenshot below:

Update package.json Scripts

Now that you're running Astro with Bun, you'll want to update your package.json scripts to make this change permanent. Update the scripts section in your package.json to look like the following:

"scripts": {
  "dev": "bunx --bun astro dev",
  "build": "astro build",
  "preview": "bunx --bun astro preview",
  "astro": "bunx --bun astro"
},

Push to Vercel

After you've made your changes and updated your package.json, commit and push your updates to GitHub. This action will trigger a new build on Vercel.

The screenshot confirms that Vercel recognizes we're using Bun and handles the installation and build process accordingly.

Wrapping It Up

So, there you have it—switching your Astro project over to Bun is pretty much a breeze. And let's be honest, who wouldn't want the extra speed that Bun brings? Just a few tweaks to your package.json, and you're pretty much set.

The best part? Vercel's added Bun support within 72 hours of launch. Vercel detects that your repository is using Bun and handles the install and build steps for you.

I'm still blown away by Bun and all that it promises, and props to Vercel for seeing it as well.

If you found this helpful, give it a like and follow me here on Hashnode and Twitter at @thealexkates. Cheers, and happy coding! 🚀

In this guide, we're diving into the world of Bun 1.0 to unlock its full potential. We'll cover:

• 🛠️ Installation process for Bun

• 🌱 Your first Bun project

• 🖥️ Creating your inaugural Bun server

• 🎭 Server-side rendering with Bun streams and React

• 📦 Fetching 3rd party data and rendering server-side

Project Setup

Install Bun

You can install Bun alongside your current node installation without messing up any of your other repositories.

# Install Bun
curl -fsSL https://bun.sh/install | bash

Initialize Bun Project

Next, let's initialize a new Bun project.

# Project setup
mkdir bun-httpserver
cd bun-httpserver
bun init

Using bun init will scaffold out a project, as you can see in the following screenshot. You'll notice a new file, bun.lockb, which takes the place of yarn, npm, or pnpm lock files. Also, index.ts and tsconfig.json are both scaffolded by default, which means TypeScript support is baked right in, and no extra setup is required.

Your First Bun Server

Believe it or not, setting up your first Bun server is remarkably simple. You can get up and running with just a couple of lines of code.

const server = Bun.serve({
  port: 3000,
  fetch(req) {
    return new Response(`Bun!`);
  },
});

console.log(`Listening on http://localhost:${server.port} ...`);

Look a bit closer at each line ...

• const server = Bun.serve({ ... });: This line initializes the server using Bun.serve() and sets it to listen on port 3000.

• port: 3000,: Specifies that the server should listen on port 3000.

• fetch(req) { ... }: Defines a function that will handle all incoming HTTP requests. When a request comes in, it returns a new HTTP response with the text "Bun!".

• return new Response(Bun!);: Creates a new HTTP response object with the text "Bun!".

• console.log(Listening on http://localhost:${server.port} ...);: Logs a message to the console, indicating that the server is listening. It uses template literals to insert the port number dynamically.

Your entire project should now look like the following screenshot.

Implementing Server-Side Rendering (SSR) with React and Bun

Now the Real Fun Starts: Implementing Server-Side Rendering (SSR) with React and Bun. In this section, we'll dive into the intricacies of Server-Side Rendering, or SSR as it's often abbreviated, using both React and Bun.

Adding Packages the Bun Way

If you're familiar with yarn, you'll feel right at home here. To add packages in Bun, simply use the add command. Want it as a dev dependency? Just throw in the -d flag.

bun add react react-dom
bun add @types/react-dom -d

Switching Gears to JSX

Next up, we're going to transition our existing index.ts server file to index.tsx. This allows us to return JSX elements directly.

mv index.ts index.tsx

Diving into Our New index.tsx

In this revamped index.tsx file, we're using renderToReadableStream from react-dom/server to render our Pokemon component. We then wrap this stream in a Response object, ensuring the content type is set to "text/html".

import { renderToReadableStream } from "react-dom/server";
import Pokemon from "./components/Pokemon";

Bun.serve({
  async fetch(request) {

    const stream = await renderToReadableStream(<Pokemon />);

    return new Response(stream, {
      headers: { "Content-Type": "text/html" },
    });
  },
});

console.log("Listening ...");

Ok, more is going on here. Let's take a look.

• import { renderToReadableStream } from "react-dom/server";: Imports the function renderToReadableStream from the react-dom/server package for server-side React rendering.

• import Pokemon from "./components/Pokemon";: Imports a React component named Pokemon from a relative file path.

• Bun.serve({ ... });: Uses the Bun.serve() method to set up an HTTP server. It includes an asynchronous fetch function to handle incoming HTTP requests.

• async fetch(request) { ... }: An asynchronous function that will be triggered for each HTTP request coming to the server.

• const stream = await renderToReadableStream(<Pokemon />);: Asynchronously renders the Pokemon React component to a readable stream.

• return new Response(stream, { ... });: Returns a new HTTP Response object with the readable stream and sets the "Content-Type" header to "text/html".

• console.log("Listening ...");: Outputs a message to the console indicating that the server is listening for incoming requests.

Crafting a Streamable React Component

Finally, we're going to build a straightforward React component. This component will be server-side rendered (SSR) and streamed right back to the client.

import React from "react";

type PokemonProps = {
  name?: string;
};

function Pokemon() {
  return <div>Bun Forrest, Bun!</div>;
}

export default Pokemon;

Firing Up the Bun Serve

Next is the exciting part—let's run our Bun server and see everything come together!

bun index.tsx

Navigate to http://localhost:3000 and you should see our SSR Pokemon component!

Building Dynamic Routes with a Pokémon Twist

Ready for something more advanced? In this section, we'll be creating two distinct routes: /pokemon and /pokemon/[pokemonName].

• Navigating to /pokemon will trigger a fetch request to the Pokémon API, rendering the results as a clickable list of anchor tags.

• Clicking any of these anchors takes you to /pokemon/[pokemonName], where a specific Pokémon is fetched, server-side rendered (SSR), and then streamed back to your client.

A Closer Look at Our Enhanced index.tsx

In this updated version, our index.tsx is doing some heavy lifting. It now includes dynamic routing to either show a list of Pokémon fetched from the Pokémon API or to display a specific Pokémon based on the URL. Whether it's the list or an individual Pokémon, the component is server-side rendered and then streamed back to the client.

import { PokemonResponse } from "./types/PokemonResponse";
import { PokemonsResponse } from "./types/PokemonsResponse";
import { renderToReadableStream } from "react-dom/server";
import Pokemon from "./components/Pokemon";
import PokemonList from "./components/PokemonList";

Bun.serve({
  async fetch(request) {
    const url = new URL(request.url);

    if (url.pathname === "/pokemon") {
      const response = await fetch("https://pokeapi.co/api/v2/pokemon");

      const { results } = (await response.json()) as PokemonsResponse;

      const stream = await renderToReadableStream(<PokemonList pokemon={results} />);

      return new Response(stream, {
        headers: { "Content-Type": "text/html" },
      });
    }

    const pokemonNameRegex = /^\/pokemon\/([a-zA-Z0-9_-]+)$/;
    const match = url.pathname.match(pokemonNameRegex);

    if (match) {
      const pokemonName = match[1];

      const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${pokemonName}`);

      if (response.status === 404) {
        return new Response("Not Found", { status: 404 });
      }

      const {
        height,
        name,
        weight,
        sprites: { front_default },
      } = (await response.json()) as PokemonResponse;

      const stream = await renderToReadableStream(<Pokemon name={name} height={height} weight={weight} img={front_default} />);

      return new Response(stream, {
        headers: { "Content-Type": "text/html" },
      });
    }

    return new Response("Not Found", { status: 404 });
  },
});

console.log("Listening ...");

A lot is going on here. Let's dive deeper into the interesting pieces.

• Initialize HTTP Server with Bun: The Bun.serve() method sets up an HTTP server and specifies an asynchronous fetch function to handle incoming requests, effectively acting as the entry point for all HTTP traffic.

• Route for All Pokémon: When the URL path is /pokemon, the server fetches a list of Pokémon from an external API and renders a PokemonList React component to HTML. This HTML is then sent back to the client.

• Route for Specific Pokémon: The code uses a Regular Expression to match URL paths that specify a particular Pokémon's name (e.g., /pokemon/pikachu). If such a path is detected, the server fetches details for that specific Pokémon and renders it using the Pokemon React component.

• Server-Side React Rendering: For both the general and specific Pokémon routes, the renderToReadableStream function converts React components to a readable stream, which is then returned as an HTML response.

• Error Handling: The code includes specific handling for 404 errors. If a Pokémon is not found in the API or if the URL doesn't match any expected routes, a "Not Found" message is returned with a 404 status code.

The PokemonList Component

This component is taking the list of Pokemon and turning them into clickable list items. Each list item is an anchor tag that routes the user to /pokemon/[name] when clicked, rendering individual Pokémon details.

import React from "react";

function PokemonList({ pokemon }: { pokemon: { name: string; url: string }[] }) {
  return (
    <ul>
      {pokemon.map(({ name }) => (
        <li key={name}>
          <a href={`/pokemon/${name}`}>{name}</a>
        </li>
      ))}
    </ul>
  );
}

export default PokemonList;

The Pokemon Component

The Pokemon component is responsible for taking an individual Pokemon's height, weight, name, and image URL, and returning exactly how we want to display a single Pokemon.

import React from "react";

function Pokemon({ height, weight, name, img }: { height: number; weight: number; name: string; img: string }) {
  return (
    <div>
      <h1>{name}</h1>
      <img src={img} alt={name} />
      <p>Height: {height}</p>
      <p>Weight: {weight}</p>
    </div>
  );
}

export default Pokemon;

Re-running the Server with HMR

Time to restart our server, but this time let's add the --watch flag for Hot Module Reloading (HMR). Good news—Bun has us covered, so you can say goodbye to nodemon.

bun --watch index.tsx

Dynamic Routes in Action

The first screenshot shows you what happens when you navigate to /pokemon. As you can see, a list of Pokémon appears, each one being a clickable link. All this is happening thanks to our PokemonList component, which fetches and displays clickable names.

The second screenshot takes us to /pokemon/charmander. This time, our Pokemon component takes center stage, showing Charmander's height, weight, and an image—everything beautifully server-side rendered, of course.

That's All, Folks!

If you've been coding along, give yourself a pat on the back! You've just:

• 🛠️ Installed and initialized a shiny new Bun project

• 🌐 Created your very own HTTP server

• 🖼️ Utilized Server-Side Rendering (SSR) to stream a simple React component

• 🗺️ Constructed two distinct routes that fetch data and SSR different React components

Feel free to leave a comment or hit that like button if you found this useful or entertaining and follow me on Twitter!

Until next time, happy coding! 🚀

While the question may seem simple—"Are types really necessary?"—it's a multi-faceted issue that deserves deeper exploration. With that said, let me make a case for TypeScript, a technology that many, including myself, believe brings undeniable advantages to the development experience.

Types Exist: The Unavoidable Truth

Firstly, whether you're an ardent TypeScript supporter or a dyed-in-the-wool JavaScript developer, the undeniable truth is types exist. They form the framework of our coding logic, governing how we interact with variables, invoke functions, and even structure entire programs. Now, the question isn't really about the existence of types, but rather, when do you want to know about type errors?

Catch Errors Early with TypeScript

TypeScript provides the benefit of compile-time type checking. Imagine knowing you have spinach in your teeth before walking into a meeting rather than finding out afterwards. That's what TypeScript offers—a chance to catch and rectify errors early, during development, saving you from the embarrassment of runtime crashes or even worse, production failures.

Sure, you can write unit tests in JavaScript to catch type issues. But then you find yourself asking: why not just use TypeScript in the first place and catch these issues even earlier?

The Rich Developer Experience

Ever had your GPS guide you smoothly around traffic, and thought, "Wow, what did we do before this?" That's what working with TypeScript feels like. The rich IDE support with features like Intellisense and autocomplete not only speeds up the development process but also makes it more accurate and efficient.

Matt Pocock sums this up beautifully in this tweet. The DX of TypeScript is so good that 70% of respondents in the State of JS 2022 said that they use TypeScript over JavaScript.

One Language to Rule Them All

The power of TypeScript shines exceptionally bright when you're dealing with monorepos that include web apps, mobile platforms, APIs, data layers, and even infrastructure as code. Why? Because TypeScript allows you to use one language across your entire stack, and in a type-safe way. This is nothing short of a superpower in the realm of development. Think about it: consistency, reduced context switching, and increased productivity—TypeScript offers all these benefits and more.

I can't imagine, in 2023, building software outside of the TypeScript/monorepo ecosystem. Once you've experienced being able to build a feature, from client to server to infrastructure to database, all in the same repository, in a fully type-safe way, there's no going back.

Community Reactions

The tech community's response to this development has been nothing short of enthusiastic, with many individuals sharing their thoughts and experiences. Here are a few of the most compelling and insightful reactions that I found to be particularly interesting:

Conclusion

While DHH's announcement about dropping TypeScript from Turbo 8 has sparked renewed debate, it also provides an opportunity for reflection. TypeScript isn't just a trend or a buzzword; it's a tool that offers tangible advantages such as early error detection, a more robust IDE experience, and a unified, type-safe language for monorepos.

So, coming back to our original question—do we really need types? With TypeScript, the answer seems to be a resounding "Yes, and they offer so much more!" Whether you view it as a safety net or an enabling superpower, TypeScript stands out as an incredibly valuable tool for modern development.

AWS provides a wide range of services that, when combined, can produce powerful results. One such combination is the direct integration of API Gateway with Kinesis, although it comes with its own set of challenges. In this post, we will discuss a common issue developers encounter when working with VTL transformations for this integration: escaping VTL quotes.

Utilizing API Gateway to direct payloads into a Kinesis stream is a valuable configuration in event-driven architectures. By removing intermediaries like Lambda, you achieve a more efficient workflow. However, the trade-off is that you must use VTL in API Gateway to ensure the payload meets Kinesis's requirements.

Our CDK Stack

The Cloud Development Kit (CDK) provides a high-level, object-oriented abstraction over AWS CloudFormation. For direct integration, the CDK stack establishes an API Gateway endpoint that is directly integrated with a Kinesis stream:

import { Stack, App } from '@aws-cdk/core';
import { RestApi, Integration, PassthroughBehavior } from '@aws-cdk/aws-apigateway';
import { Stream } from '@aws-cdk/aws-kinesis';

class ApiGatewayKinesisIntegrationStack extends Stack {
  constructor(scope: App, id: string) {
    super(scope, id);

    const kinesisStream = new Stream(this, 'MyKinesisStream');

    const api = new RestApi(this, 'MyApi', {
      restApiName: 'Kinesis Integration Service',
    });

    const kinesisIntegration = new Integration({
      type: IntegrationType.AWS,
      options: {
        passthroughBehavior: PassthroughBehavior.NEVER,
        requestTemplates: {
          'application/json': `{
            "StreamName": "YourKinesisStreamName",
            "Data": "WHAT SHOULD I DO HERE???", 
            "PartitionKey": "yourPartitionKey"
          }`,
        },
        integrationResponses: [{
          statusCode: '200',
        }],
      },
      integrationHttpMethod: 'POST',
      uri: `arn:aws:apigateway:your-region:kinesis:action/PutRecord`,
    });

    api.root.addMethod('ANY', kinesisIntegration, { apiKeyRequired: true });
  }
}

This stack creates a Kinesis stream and an API Gateway endpoint. The endpoint employs direct integration with Kinesis. The requestTemplates section is where the VTL transformation occurs. Pay attention to the Data property in requestTemplates, as this is our primary focus.

Wrapping the Request Body and the VTL Quote Escaping Challenge

When directly integrating API Gateway with Kinesis using VTL, a frequent requirement is to wrap the request body in a new object structure. This may be to add metadata, contextual information, or simply reformat the payload for consistent processing downstream. But this nesting of JSON brings its own challenges due to VTL's unique way of handling quotes.

Imagine our first naive attempt to construct the payload:

#set($data = $input.json('$'))
{
  "StreamName": "YourKinesisStreamName",
  "Data": "$util.base64Encode('{type: $context.resourcePath, data: $data}')",
  "PartitionKey": "yourPartitionKey"
}

It's evident from the above that while we're attempting to wrap the payload, the mishandling of quotes will throw us into issues.

A slightly improved, but still flawed, attempt could look something like:

#set($data = $input.json('$'))
{
  "StreamName": "YourKinesisStreamName",
  "Data": "$util.base64Encode('{"type": "$context.resourcePath", "data": "$data"}')",
  "PartitionKey": "yourPartitionKey"
}

Here, we are trying to nest the JSON correctly. But again, this will fail due to how quotes are mishandled.

A Solution Emerges

Those familiar with other languages might expect a backslash (\) to be the go-to for escaping, but in VTL, we escape double quotes with another double quote ("").

#set($data = $input.json('$'))
#set($type = $context.resourcePath)

{
  "StreamName": "YourKinesisStreamName",
  "Data": "$util.base64Encode("{""type"": ""$type"", ""data"": $data}")",
  "PartitionKey": "yourPartitionKey"
}

By properly managing our quotes, the JSON is correctly structured, and we avoid transformation errors.

Conclusion

The combination of API Gateway with Kinesis offers a fast, direct method of ingesting events into your stream. Yet, the intricacies of VTL can sometimes be a stumbling block. By understanding the subtleties of quote handling and the need for nested JSON structures, you can ensure smooth data flow into Kinesis. Happy streaming!

For many years, I had heard about the ancient philosophy of Stoicism, but I never took the time to dive deeper into its teachings. That is, until the Summer of 2022, when I attended Michael McGill's Practical Stoicism online course. From that moment on, I was captivated by the philosophy's practical approach to life's challenges. I was completely hooked on the Stoic ideas of the dichotomy of control, Amor Fati, and Memento Mori.

As I continued my exploration of Stoicism, I stumbled upon several books by Ryan Holiday, including my favorite so far, The Obstacle Is The Way. This book spoke to me on a deep level and provided me with valuable insights on how to navigate life's challenges.

In this post, I want to share with you my three main takeaways from the book and how each one helped me during a recent crisis.

The Crisis

Recently, during a heavy rainstorm, I experienced a real-life crisis that put my Stoic training to the test. My basement flooded due to a clogged main drain, and I found myself in crisis management mode for hours on end. I had to continuously shop vacuum water into buckets and carry them upstairs and outside to prevent my belongings from being damaged. To make matters worse, I was dealing with a nasty head cold at the same time.

Despite the overwhelming nature of the situation, I tried to remain calm and focused, thinking "how would a Stoic handle this?". I reminded myself that I couldn't control the rain or the drain blockage, but I could control my response to the situation. I also reflected on the Stoic idea of Memento Mori, or the acceptance of our mortality, and realized that this crisis was a reminder that life is fragile and unpredictable.

After calling several emergency plumbing services, I finally found one that could come out to fix the blockage. Although I was taken aback by the cost of the emergency repair, I reminded myself of the Stoic principle of accepting what we cannot change and focusing on what we can control. After several hours, hundreds of dollars, and a lot of hard work, the crisis was finally over.

In the following sections, I will share my three main takeaways from The Obstacle Is The Way and how each one helped me during this crisis.

Develop a different perspective on obstacles

It's very easy to panic during a crisis. We are kind of hard-wired to either fight or flight. It takes a ton of practice and presence to create a bit of space between a thing happening and your reaction to it. I've learned that cultivating a mindset of resilience, optimism, and focus is key to overcoming obstacles. By taking a step back and looking at the situation objectively, we can avoid being consumed by emotions and make more effective decisions.

When my basement flooded, I found myself struggling to keep a positive outlook. But then I remembered that perspective is everything, especially when dealing with obstacles. That's when I had a lightbulb moment: my house is over 100 years old and the basement walls were crumbling with dust and rubble all around. So, instead of feeling defeated, I decided to shift my perspective and see the flood as an opportunity to finally give my basement the cleaning it desperately needed. It's amazing how a small change in perspective can turn a seemingly negative situation into a positive one

Take action and persevere

Ryan Holiday encourages us to set clear and specific goals and make a plan to achieve them. It's important to break down big goals into smaller, manageable steps, and to stay focused on what needs to be done right now instead of getting overwhelmed by the bigger picture. By doing this, we can take action and persist through any challenge. Looking at my situation through this lens presented some interesting things.

First, this was a big obstacle, requiring attention to water removal, finding an expert, and researching the root cause all at the same time. Chunkifying these problems made thinking about them easier. For example, I spent 30 minutes only dealing with the water flowing in. By focusing on something I could immediately control, I was able to get a small win and a little momentum, which helped my outlook on the situation.

Next, after some time to think, it occurred to me that this problem was beyond what I can do and I would need an expert. Now that I had a system in place for water removal, my next problem was finding an emergency plumber late on a Friday night in a rain storm.

Embrace obstacles as opportunities for growth

The Stoics believed that obstacles were not something to be avoided or ignored, but rather embraced as opportunities for growth and development. Ryan Holiday echoes this sentiment in his book, encouraging readers to view obstacles as a means of learning and becoming stronger.

During my basement flood crisis, I realized that this was a chance for me to practice Stoicism in real life. The emergency plumber quoted me $500 to fix the issue. My initial reaction was that this was expensive. But then I tried a different perspective. I looked at this as an opportunity to pay for a real-life lesson. I agreed, and I watched every single thing this plumber did and asked questions along the way. I learned how to snake the main line leaving the house in case this ever were to happen again.

In addition, I learned more about how my house functions and what I can do to prevent similar situations from happening in the future. I also gained a new sense of confidence and self-reliance in dealing with unexpected events. I think changing perspective is exactly what the Stoics meant when they talked about turning obstacles into opportunities.

Conclusion

Ryan Holiday's book, The Obstacle Is The Way, offers practical advice and inspiration for dealing with life's challenges. Through the lens of Stoicism, Holiday encourages readers to develop a different perspective on obstacles, take action and persevere, and embrace obstacles as opportunities for growth.

My experience with the basement flood crisis was a perfect example of how these three takeaways can be applied in real life. By shifting my perspective, taking action, and embracing the obstacle, I was able to turn a negative situation into a positive one and learn valuable lessons along the way.

I've launched https://fitgpt.xyz, which offers an AI-powered Fitness Coach capable of creating specialized workout routines and personalized meal plans tailored to your current fitness level and future goals.

Intro 👋

Are you feeling bored with your fitness and nutrition routine? If your workout regimen has lost its excitement and your meals have become repetitive, it may be time to switch things up.

Introducing FitGPT! Your AI-Powered Fitness Coach.

FitGPT is a fitness companion that tailors to your unique needs, no matter where you are on your fitness journey. By leveraging the power of AI, FitGPT creates personalized workout routines and meal plans that take into account your current fitness level and goals, ensuring that you get the most out of your fitness routine.

I'm building FitGPT to solve two specific issues I saw I was personally having with my Fitness journey.

To start, I have over 10 years of experience building my own fitness routines and have experimented with numerous workout programs over time. However, I found that my routine became stagnant and I wanted a simple way to create fresh routines on demand.

Additionally, I am passionate about nutrition and think it's super important to be consistent. I aim to eat whole, nutritious foods for at least 6 days out of the week. However, I have become increasingly bored with my current meal options.

Whenever I sought out new recipes on the internet, I found myself sifting through excessive blog posts and advertisements before finally arriving at the recipe. It was simply frustrating.

This is why I'm building FitGPT.

Features 🔍

FitGPT is just launching and already has several important features to help you on your fitness journey including ...

Routines 💪

The "Create Routines" feature in FitGPT makes it easier than ever for users to create personalized workout routines tailored to their specific needs and goals. This feature uses the same AI technology powering ChatGPT, which considers the user's fitness experience, equipment availability, time constraints, and workout goals. FitGPT combines details about your current fitness level with AI to generate a custom workout plan that is both effective and enjoyable.

Not only does the "Create Routines" feature generate a fresh workout routine every time, but it also provides the user with a beautifully formatted plan that is easy to follow. The workout plan includes a calorie estimate along with clear instructions on each exercise and the number of sets and reps to complete.

Users can save their workout routines and access them at any time, making it easy to stay on track with their fitness goals. With this feature, users can take the guesswork out of creating a workout routine and focus on getting the most out of their workouts.

Meals 🍜

FitGPT's "Generate Meals" feature is an awesome tool for anyone looking to make healthy eating a breeze. It considers your dietary preferences, nutritional requirements, and cooking abilities to develop a custom meal plan just for you.

When you use the "Generate Meals" feature, it asks you a few questions like "What ingredients do you have?" and "What are your dietary restrictions?" It uses your answers to create meals that are not only delicious but also personalized to your needs. It takes into account factors like food allergies, dietary preferences, and calorie goals to develop dishes that are both satisfying and healthy.

One of the greatest benefits of the "Generate Meals" feature is its ability to eliminate the stress of meal planning. With this tool, you can access on-demand meals that are tailored to your dietary requirements and preferences. You'll get step-by-step instructions, an ingredient list, and calorie and macro estimates. Whether you're looking for breakfast, lunch, or dinner ideas, FitGPT has got you covered with healthy, personalized meals at your fingertips.

Technology 🤖

FitGPT is powered by some of my favorite web development technologies. It's been so fun diving deep into all of these different technologies.

Open AI

At the heart of FitGPT is the integration with Open AI. Powered by the new gpt-3.5-turbo model, FitGPT is able to create personalized routines and meals nearly instantaneously.

Vercel

Vercel is the platform of choice for FitGPT. It provides build, deployment, hosting, environment management, API management, and so much more. I even upgraded to the Pro Plan for the extra bandwidth and function requests.

Next.js

I absolutely love Next.js. I think it's the best web development framework I've ever seen. FitGPT is using Next.js 13 and utilizes several new features including the new next/image and next/link.

NextAuth.js

Authentication can be a real bear when spinning up a new project. NextAuth.js makes it super easy to get going, and it lets me own my Auth data. I'm using the DynamoDB provider along with the Google adapter, with plans to introduce other ways to login in the future.

TypeScript

Not much to say here other than it's 2023 and I've been using TypeScript by default for about 2 years.

DynamoDB

I love, love, love DynamoDB, especially single-table design. I can't overstate how much simpler it is to store data for a transactional-based web application.

Tailwind CSS

Tailwind CSS is a must-have for me when it comes to UI development.

DaisyUI

I just discovered DaisyUI and fell in love with it. Simply put, it's delightful to work with. With DaisyUI, I feel like I have all of the power with Tailwind CSS plus some really awesome pre-built components.

Outro

So, to sum it up, FitGPT is the ultimate fitness companion that is perfect for anyone at any point in their fitness journey. Using AI, FitGPT creates personalized workout plans and meal ideas based on your fitness level and goals, making sure you get the most out of your fitness journey.

I hope you try FitGPT and find it as useful as it has been for me!

Brave

My go to browser for the past year has been Brave. As a web developer, it offers me everything that Chrome offers, but seems to run more efficiently and I earn rewards simply by browsing

Notion

Notion is my second brain. This is where I organize all of my thoughts, ideas, personal projects, todo lists, work, finances, etc.

Alfred

Alfred is a better Spotlight. I don't even use the dock anymore. Everything I do on my MacBook starts with CMD+SPACE. You can configure Alfred to index your entire hard-drive, which makes searching and opening individual files super easy.

Slack

All work comms go through Slack. It's basically replaced email for me.

Spectacle

I used to be a Windows dev and one thing I immediately missed when switching to a MacBook was window snapping. Spectacle is the missing window snapping tool for MacBook. I use CMD + OPTION + ← OR → to snap windows to the left or right of my screen.

Visual Studio Code

Visual Studio Code has everything I need to work full-stack. I do all of my coding from this single IDE.

Extensions

• vscode-icons
• prettier-vscode
• gitlens
• es7-snippets
• night wolf theme
• github-copilot

Canva

I have literally zero artistic ability. Canva makes it super simple to create graphics for blog posts, Twitter, etc.

Spotify

Let's be real, if you aren't jamming out on Spotify while coding, are you even coding? Personally, I love LOFI. Haters may hate.

ITerm2

ITerm2 is the must-have terminal upgrade. I've been using it for years. It includes features such as autocomplete, search, and many other configuration settings.

Oh My Zsh

Oh My Zsh is an open source, community-driven framework for managing your Zsh configuration. It did for the terminal what React did for JavaScript. It basically gives your terminal a framework within which you can customize everything.

Powerlevel10k

Ever wonder how content creators make their terminal look almost futuristic? Check out Powerlevel10k. It has a great configuration wizard, performance, and customizations to make your terminal awesome.

Fig.io

Fig.io adds IDE-style autocomplete to your existing terminal. I use tab-completion all the time, and Fig brings this to a whole other level.

AWS CLI

I do a ton of work in AWS, and the majority of my interactions are done via the AWS CLI.

XCode

Get it from the App Store. I need it for mobile app development.

NVM

Full-stack TypeScript developer here, and NVM is a must have.

• nvm install --lts
• npm install -g npm # Upgrades to latest NPM for LTS.
• which node
• which npm

Global NPM Packages

I like to install the following packages globally rather than using npx because I find that fig.io works better for these when installed.

• npm install -g cdk
• npm install -g expo-cli
• npm install -g yarn

Zoom

What can I say? Zoom seems to have won the video conference battle. It works great.

That's it as of now. I'll update this if any new software comes along that I can't live without!

Loom

Like Zoom, but with an L! Loom is fantastic for shooting demo videos of new features and sharing them with the team.

Discord

Can you ever have too many chat programs? Honestly, if I had my way, I'd exclusively use Discord for everything.

Docker

I'm big into Serverless technologies, so I thought I was going to get away with not needing Docker. However, I've recently started to use Supabase, which requires docker to run locally.

Supabase CLI

Supabase makes me feel like I have superhero powers. I click 2 buttons and get a Postgres database, authentication, row-level security, APIs, serverless functions, and blob storage. Seriously Supabase, y'all outdid yourselves.

If you like this content please consider following me at https://twitter.com/thealexkates

All of the code can be found in this repository.

Setup

We need to run a few commands to set up our CDK app.

mkdir how-to-trigger-cloudwatch-alarm-from-lambda
cd how-to-trigger-cloudwatch-alarm-from-lambda
npx cdk init app --language typescript

This should build the following directory structure.

Also, make sure to have the AWS CLI configured. For more information follow the AWS CLI quickstart guide.

Create the Lambda Function

Deploying a Lambda function requires bootstrapping the CDK app which builds an S3 bucket where the Lambda's source code will live. This is a one-time operation.

npx cdk bootstrap

Install esbuild so the TypeScript can be efficiently compiled and minified into JavaScript. This isn't a requirement, but having esbuild installed will bypass the need for docker.

npm install -D esbuild

Create src/index.ts and paste the following code which will throw an error on invocation.

export function handler() {
  throw new Error("error");
}

Open lib/how-to-trigger-cloudwatch-alarm-from-lambda.ts and define the new Lambda function.

const nodejsFunction = new NodejsFunction(
  this,
  "how-to-trigger-cloudwatch-alarm-from-lambda",
  {
    handler: "handler", // The name of the TypeScript function to invoke.
    runtime: Runtime.NODEJS_14_X, // The Node.js runtime to use.
    entry: "src/index.ts", // The TypeScript file that contains the handler function.
  }
);

Now let's deploy the Stack to AWS.

npx cdk deploy --require-approval never

Create the CloudWatch Alarm

Open lib/how-to-trigger-cloudwatch-alarm-from-lambda.ts and add the CloudWatch Metric and Alarm.

const numberOfFunctionErrors = nodejsFunction.metricErrors( // Capture invocation errors.
  {
    period: Duration.minutes(1), // Sum invocation errors each minute.
  }
);

const alarm = new Alarm(
  this,
  "how-to-trigger-cloudwatch-alarm-from-lambda-alarm",
  {
    metric: numberOfFunctionErrors, // Watch the number of invocations.
    threshold: 1, // Compare to the threshold of 1.
    evaluationPeriods: 1, // Look within the context of 1 evaluation period.
    comparisonOperator:
      ComparisonOperator.GREATER_THAN_OR_EQUAL_TO_THRESHOLD, // Trigger if greater than or equal to 1.
  }
);

## Create the SNS Email Subscription

Open `lib/how-to-trigger-cloudwatch-alarm-from-lambda.ts` and add the SNS Topic, Email Subscription and SNS Action.

```typescript
const topic = new Topic(
  this,
  "how-to-trigger-cloudwatch-alarm-from-lambda-topic"
);
topic.addSubscription(new EmailSubscription("your@email.com")); // Add a new email subscription to the SNS topic.
alarm.addAlarmAction(new SnsAction(topic)); // Add a new SNS Action to the CloudWatch Alarm.

Stack Summary

After piecing everything together, your lib/how-to-trigger-cloudwatch-alarm-from-lambda.ts should look like this.

import { Duration, Stack, StackProps } from "aws-cdk-lib";
import { Construct } from "constructs";
import { NodejsFunction } from "aws-cdk-lib/aws-lambda-nodejs";
import { Runtime } from "aws-cdk-lib/aws-lambda";
import { Alarm, ComparisonOperator } from "aws-cdk-lib/aws-cloudwatch";
import { Topic } from "aws-cdk-lib/aws-sns";
import { EmailSubscription } from "aws-cdk-lib/aws-sns-subscriptions";
import { SnsAction } from "aws-cdk-lib/aws-cloudwatch-actions";

export class HowToTriggerCloudwatchAlarmFromLambdaStack extends Stack {
  constructor(scope: Construct, id: string, props?: StackProps) {
    super(scope, id, props);

    const nodejsFunction = new NodejsFunction(
      this,
      "how-to-trigger-cloudwatch-alarm-from-lambda",
      {
        handler: "handler",
        runtime: Runtime.NODEJS_14_X,
        entry: "src/index.ts",
      }
    );

    const numberOfFunctionErrors = nodejsFunction.metricErrors({
      period: Duration.minutes(1),
    });

    const alarm = new Alarm(
      this,
      "how-to-trigger-cloudwatch-alarm-from-lambda-alarm",
      {
        metric: numberOfFunctionErrors,
        threshold: 1,
        evaluationPeriods: 1,
        comparisonOperator:
          ComparisonOperator.GREATER_THAN_OR_EQUAL_TO_THRESHOLD,
      }
    );

    const topic = new Topic(
      this,
      "how-to-trigger-cloudwatch-alarm-from-lambda-topic"
    );

    topic.addSubscription(new EmailSubscription("your@email.com")); // Update with your email!

    alarm.addAlarmAction(new SnsAction(topic));
  }
}

Let's do one final deployment.

npx cdk deploy --require-approval never

Testing

Let's use the AWS CLI to test everything.

First, let's get the Lambda Function name, which can be found using the following command

aws lambda list-functions

Next, using the Lambda Function name from the previous command, use the AWS CLI to invoke the Lambda Function.

 aws lambda invoke \
  --function-name "HowToTriggerCloudwatchAla-howtotriggercloudwatchal-aYncvjc4a5RT" \
  response.json

Wait about a minute and check the email address that was configured for the SNS Email subscription. If all went well, an email should have been sent with a subject similar to ALARM: "HowToTriggerCloudwatchAlarmFromLambdaStack-howtotriggercloudwat..." in US East (N. Virginia)

Clean Up

Don't forget to delete the stack when finished!

npx cdk destroy

Thanks for reading! If you found this useful, please follow me here https://dev.to/thealexkates https://twitter.com/thealexkates

My submission for the Hasura X Hashnode Hackathon is Petsura.

Help pets find their forever homes! Quickly scroll your feed of adoptable fluffs and share on Twitter, send an email to the foster, or open the pet directly in Petfinder

Petsura is powered by the Hasura platform, built using NextJS on Vercel, and leverages the Petfinder API.

Intro

Petsura is an Instagram-like web application that allows you to quickly browse through the adoptable pets found on Petfinder. When you find a fluff that sparks joy, you can share it on Twitter, contact the foster directly, or open the pet's full biography on Petfinder.

Motivation

I have three rescue animals that live with me, and I think the world would be a better place if more animals were adopted. I wanted to make an app that was basically Instagram for adoptable pets. Also, I've been itching to play with Hasura and this hackathon was a perfect time.

How to use

Feed

The main page is called the feed page. It displays 25 random, adoptable pets from the Petfinder API. Scroll the feed until you find a pet that sparks joy. You can load more pets when you arrive at the end of the feed.

When you find that special pet, you can do three different actions.

🐦 Share the pet on Twitter.

📧 Email the foster to express interest in adopting.

🌐 Open the pet's full biography on Petfinder.

Tech stack

Hosting

Vercel is a platform for hosting full-stack web applications. Petsura uses Vercel to host the NextJS web application.

Web Framework

NextJS is the React framework for building modern, production-ready applications. Petsura is built on NextJS.

Styles

Tailwind CSS CSS framework that lets you rapidly build beautiful web pages without leaving your HTML files.

API

Hasura is a fully managed GraphQL platform. Petsura uses Hasura for its GraphQL API and also leverages the Action feature to integrate with an AWS APIGW.

Serverless allows you to rapidly develop serverless applications in AWS. Petsura uses Serverless to build the APIGW and Lambda that integrates the Hasura GraphQL API with the Petfinder Rest API.

Apollo GraphQL Client is a great library to use in your React application to fetch data using GraphQL. Petsura uses the useQuery hook to interact with the Hasura.

Outro

I hope you enjoy using Petsura as much as I did building it! Let's connect on Twitter -> https://twitter.com/thealexkates

My submission for the Hashnode/Netlify hackathon is Hashnode Roulette.

Make your hashnode feed wonderful. Quickly find new stories and authors to follow using simple mobile gestures.

Hashnode Roulette is powered by the Netlify platform, built using NextJS, and leverages the Hashnode API.

Intro

Hashnode Roulette is a Tinder-like web application that allows you to quickly browse through the top Hashnode articles and swipe them to react, follow, or open the article.

☝️ Swipe up to open the article in a new window.

👉 Swipe right to like the current article.

👇 Swipe down to follow the author.

👈 Swipe left to skip the article.

Motivation

I personally think Hashnode is the best developer blogging platform in the market right now. I wanted to spend some time learning their GraphQL API. Also, I love working with NextJS and wanted to learn next-auth. Also, it's a lot of fun refreshing the page and getting random articles.

How to use

Login

Unfortunately, there isn't a way to sign in to Hashnode via OAuth yet. For now, use your Twitter credentials to sign in.

Settings

Certain gestures, like swipe-right and swipe-down, use GraphQL mutations via the Hashnode API. These mutations require you to use your API key.

You'll need to grab your Hashnode API key. Head over to your Account Settings -> Developer -> Generate New Token.

Enter your Hashnode API key and click Submit.

Deck

The main page is called the Deck page. It has a random set of Hashnode articles as cards. These cards can be swiped in different directions based on how you want to react to the article.

☝️ Swipe up to open the article in a new window.

👉 Swipe right to like the current article.

👇 Swipe down to follow the author.

👈 Swipe left to skip the article.

Tech stack

Hosting

Netlify is a platform for hosting full-stack web applications. Hashnode Roulette uses Netlify to host the NextJS web application.

Web Framework

NextJS is the React framework for building modern, production-ready applications. Hashnode Roulette is built on NextJS.

Authentication

next-auth is the go-to authentication framework when working with NextJS. Hashnode Roulette uses the twitter-oauth module to allow users to authenticate using their Twitter credentials.

UI Controls

react-tinder-card is an NPM module that makes it easy to implement the swipe-card UI control. Hashnode Roulette uses this package to present the user with Hashnode articles that can be swiped.

Data

Apollo GraphQL Client is a great library to use in your React application to fetch data using GraphQL. Hashnode Roulette uses the useQuery and useMutation hooks to interact with the Hashnode API.

Outro

I hope you enjoy using Hashnode Roulette as much as I did building it! Let's connect on Twitter -> https://twitter.com/thealexkates