DEV Community: ashish

Mastering Supabase RLS - "Row Level Security" as a Beginner

ashish — Thu, 20 Mar 2025 17:28:25 +0000

Introduction

Row Level Security (RLS) is one of Supabase's most powerful features, allowing developers to implement robust security controls directly at the database level. Unlike traditional application-level security, RLS enforces access rules within the database itself, ensuring that users can only access the data they're authorized to see, regardless of how they connect to your application.

TL;DR:

What RLS is and why it's essential
How to set up RLS policies for database tables
Implementing RLS for Supabase Storage
Real-world examples and patterns
Common mistakes and how to avoid them

What is Row Level Security?

Row Level Security is a PostgreSQL feature that Supabase leverages to control which rows in a table a user can access. It works by defining policies that filter the rows a user can see based on their identity or other attributes.

Why Use RLS?

Security at the Data Layer: Security rules are enforced at the database level, not just in your application code.
Simplified Application Logic: Your frontend code doesn't need to implement complex filtering logic.
Consistent Security: The same security rules apply regardless of how data is accessed (API, direct database access, etc.).
Reduced Risk of Data Leaks: Even if there's a bug in your application code, the database will still enforce access controls.

Setting Up RLS for Database Tables

Before we start

All the RLS policies need to be added/modified using the SQL editor on your Supabase project dashboard, you can find it on the sidebar SQL Editor -

And for Storage policies, go to Storage > Policies > Click on New Policy button and then finally choose Create from scratch, it will open up the editor as a popup for you -

Step 1: Enable RLS on Your Tables

RLS is enabled by default on tables created with the Table Editor in the dashboard. If you create one in raw SQL or with the SQL editor, you will have to enables RLS yourself. The first step is to enable it:

-- Enable RLS on a table
ALTER TABLE schema_name.table_name ENABLE ROW LEVEL SECURITY;

Once RLS is enabled, the table becomes inaccessible to all users (including authenticated ones) until you define policies that grant access.

Step 2: Create RLS Policies

Policies define the conditions under which a user can perform operations (SELECT, INSERT, UPDATE, DELETE) on rows in a table. While creating RLS policie you need to keep in mind the design and structure of your application logic.

Basic Policy Structure

CREATE POLICY policy_name
ON table_name
FOR operation
TO role
USING (expression);

policy_name: A descriptive name for your policy
table_name: The table this policy applies to
operation: Can be SELECT, INSERT, UPDATE, DELETE, or ALL
role: Usually 'authenticated' or 'anon' in Supabase
expression: A boolean expression that determines which rows are accessible (this is the main logic for row access)

Example 1: Simple User-Based Access

Let's create a policy for a todos table where users can only access their own todos:

-- Enable RLS
ALTER TABLE todos ENABLE ROW LEVEL SECURITY;

-- Create policy for users to see only their own todos
CREATE POLICY "Users can view their own todos"
ON todos
FOR SELECT
TO authenticated
USING (auth.uid() = user_id); -- user_id is the column that stores the owner's user ID and auth.uid() is the currently authenticated user's ID

-- Allow users to insert their own todos
CREATE POLICY "Users can insert their own todos"
ON todos
FOR INSERT
TO authenticated
WITH CHECK (auth.uid() = user_id);

-- Allow users to update their own todos
CREATE POLICY "Users can update their own todos"
ON todos
FOR UPDATE
TO authenticated
USING (auth.uid() = user_id);

-- Allow users to delete their own todos
CREATE POLICY "Users can delete their own todos"
ON todos
FOR DELETE
TO authenticated
USING (auth.uid() = user_id);

In this example:

auth.uid() is a Supabase function that returns the ID of the currently authenticated user
user_id is a column in the todos table that stores the owner's user ID

Example 2: Role-Based Access Control

For more complex scenarios, you might want to implement role-based access:

-- Enable RLS
ALTER TABLE projects ENABLE ROW LEVEL SECURITY;

-- Create policy for admins to see all projects
CREATE POLICY "Admins can view all projects"
ON projects
FOR SELECT
TO authenticated
USING (
  EXISTS (
    SELECT 1 FROM user_roles
    WHERE user_roles.user_id = auth.uid()
    AND user_roles.role = 'admin'
  )
);

-- Create policy for regular users to see only their projects
CREATE POLICY "Users can view their own projects"
ON projects
FOR SELECT
TO authenticated
USING (
  auth.uid() = owner_id
  OR
  EXISTS (
    SELECT 1 FROM project_members
    WHERE project_members.project_id = projects.id
    AND project_members.user_id = auth.uid()
  )
);

This example shows how to implement more complex access patterns where:

Admins can see all projects
Regular users can only see projects they own or are members of

Example 3: Public and Private Data

For applications with both public and private data:

-- Enable RLS
ALTER TABLE posts ENABLE ROW LEVEL SECURITY;

-- Anyone can read public posts
CREATE POLICY "Public posts are viewable by everyone"
ON posts
FOR SELECT
USING (is_public = true);

-- Users can read their own private posts
CREATE POLICY "Users can view their own private posts"
ON posts
FOR SELECT
TO authenticated
USING (auth.uid() = author_id);

-- Users can update their own posts
CREATE POLICY "Users can update their own posts"
ON posts
FOR UPDATE
TO authenticated
USING (auth.uid() = author_id);

RLS for Supabase Storage

Supabase Storage also supports RLS-like access controls. While not technically PostgreSQL RLS, it follows similar principles.

Setting Up Storage Policies

Storage policies are defined through the Supabase dashboard or via SQL. By default Storage does not allow any uploads to buckets without RLS policies. You selectively allow certain operations by creating RLS policies on the storage.objects table.

This creates confusions among new users a lot when they try to upload files to storage and they get RLS error. But it is important to understand that this is a security feature and needs to be configured properly.

For example, if you want to allow users to upload files to a specific bucket, you can create a policy like this:

create policy "Allow upload on your-bucket-id"
on storage.objects for insert
with check ( bucket_id = 'your-bucket-id' );

Now we can modify this policy to allow only authenticated users to upload files to the bucket:

create policy "Allow upload on your-bucket-id"
on storage.objects for insert 
to authenticated
with check ( bucket_id = 'your-bucket-id' );

Now, let's further modify this policy to allow both insert and select operations on the bucket for authenticated users:

create policy "Allow upload and select on your-bucket-id"
on storage.objects for insert, select
to authenticated
with check ( bucket_id = 'your-bucket-id' );

Let's look at some more complex patterns for storage access control:

-- Create a policy to allow users to upload their own profile pictures
CREATE POLICY "Users can upload their own profile pictures"
ON storage.objects
FOR INSERT
TO authenticated
WITH CHECK (
  bucket_id = 'profile_pictures' AND
  (storage.foldername(name))[1] = auth.uid()::text
);

-- Create a policy to allow users to view their own profile pictures
CREATE POLICY "Users can view their own profile pictures"
ON storage.objects
FOR SELECT
TO authenticated
USING (
  bucket_id = 'profile_pictures' AND
  (storage.foldername(name))[1] = auth.uid()::text
);

-- Create a policy to allow public access to public images
CREATE POLICY "Public access to public images"
ON storage.objects
FOR SELECT
USING (
  bucket_id = 'public' AND
  storage.extension(name) IN ('png', 'jpg', 'jpeg', 'gif')
);

In these examples:

We're using the storage.foldername() function to extract parts of the file path
We're organizing files by user ID to enforce ownership
We're restricting access based on file extensions for public files

Implementing Storage RLS in Your Application

When using storage with RLS, you'll typically organize your storage structure to facilitate security rules:

// Upload a file to a user-specific folder
const { data, error } = await supabase.storage
  .from('profile_pictures')
  .upload(`${user.id}/avatar.png`, file);

// Access a file from a user-specific folder
const { data, error } = await supabase.storage
  .from('profile_pictures')
  .download(`${user.id}/avatar.png`);

Advanced RLS Patterns

Pattern 1: Tenant Isolation for SaaS Applications

For multi-tenant SaaS applications:

-- Enable RLS
ALTER TABLE tenant_data ENABLE ROW LEVEL SECURITY;

-- Create policy for tenant access
CREATE POLICY "Tenants can access their own data"
ON tenant_data
FOR ALL
TO authenticated
USING (
  tenant_id = (
    SELECT tenant_id FROM users
    WHERE users.id = auth.uid()
  )
);

This pattern ensures complete isolation between tenants in a multi-tenant application.

Pattern 2: Time-Based Access

For content with time-limited access:

-- Enable RLS
ALTER TABLE premium_content ENABLE ROW LEVEL SECURITY;

-- Create policy for premium access
CREATE POLICY "Premium users can access content during subscription"
ON premium_content
FOR SELECT
TO authenticated
USING (
  EXISTS (
    SELECT 1 FROM subscriptions
    WHERE subscriptions.user_id = auth.uid()
    AND subscriptions.expires_at > now()
  )
);

Pattern 3: Row-Level Permissions

For granular permission control:

-- Enable RLS
ALTER TABLE documents ENABLE ROW LEVEL SECURITY;

-- Create policy for document access
CREATE POLICY "Users can access documents they have permission for"
ON documents
FOR SELECT
TO authenticated
USING (
  EXISTS (
    SELECT 1 FROM document_permissions
    WHERE document_permissions.document_id = documents.id
    AND document_permissions.user_id = auth.uid()
    AND document_permissions.can_read = true
  )
);

-- Create policy for document updates
CREATE POLICY "Users can update documents they have permission for"
ON documents
FOR UPDATE
TO authenticated
USING (
  EXISTS (
    SELECT 1 FROM document_permissions
    WHERE document_permissions.document_id = documents.id
    AND document_permissions.user_id = auth.uid()
    AND document_permissions.can_write = true
  )
);

Testing RLS Policies

It's crucial to thoroughly test your RLS policies. Here's how:

Using the Supabase Dashboard

The Supabase dashboard allows you to impersonate users and test queries:

Go to the SQL Editor
Click on "User Management" in the dropdown
Select a user to impersonate
Run your queries to verify the policies work as expected

Testing in Your Application

// Test as a specific user
const { data: userATodos } = await supabaseClientForUserA
  .from('todos')
  .select('*');

// Test as another user
const { data: userBTodos } = await supabaseClientForUserB
  .from('todos')
  .select('*');

// Verify that each user only sees their own todos
console.assert(
  userATodos.every(todo => todo.user_id === userA.id),
  'User A should only see their own todos'
);

Common Pitfalls and How to Avoid Them

Pitfall 1: Forgetting to Enable RLS

If you create tables but forget to enable RLS, they'll be publicly accessible. Always enable RLS on all tables:

-- Script to enable RLS on all tables in the public schema
DO $$
DECLARE
  r RECORD;
BEGIN
  FOR r IN (SELECT tablename FROM pg_tables WHERE schemaname = 'public')
  LOOP
    EXECUTE format('ALTER TABLE %I ENABLE ROW LEVEL SECURITY;', r.tablename);
  END LOOP;
END
$$;

Pitfall 2: Overly Permissive Policies

Be careful with policies that might be too broad or not restrictive enough:

-- BAD: This policy allows any authenticated user to see all rows
CREATE POLICY "Too permissive"
ON sensitive_data
FOR SELECT
TO authenticated
USING (true);

-- GOOD: This policy restricts access properly
CREATE POLICY "Properly restricted"
ON sensitive_data
FOR SELECT
TO authenticated
USING (auth.uid() = owner_id);

Pitfall 3: Forgetting About JOIN Queries

RLS applies to each table individually. When performing JOINs, make sure all tables have appropriate policies:

-- If a user can access 'projects' but not 'project_details',
-- this JOIN might not return the expected results
SELECT p.name, pd.description
FROM projects p
JOIN project_details pd ON p.id = pd.project_id;

Pitfall 4: Performance Considerations

Complex RLS policies can impact performance. Consider indexing columns used in policy expressions:

-- Add an index to improve RLS policy performance
CREATE INDEX ON todos(user_id);

Conclusion

Row Level Security is necessary for building secure applications with Supabase. By implementing RLS policies correctly, you can ensure that your data remains secure while simplifying your application code.

Remember these key points:

Always enable RLS on all tables
Design your database schema with RLS in mind
Test your policies thoroughly
Consider performance implications for complex policies
Use RLS for both database tables and storage

With these practices in place, you can build applications that are both secure and scalable, leveraging the full power of Supabase's security features.

Additional and Related Resources

[Boost]

ashish — Tue, 17 Dec 2024 11:31:34 +0000

Creating a full-stack AI based calorie/nutrition tracker in just 8 hrs using Supabase & Lovable

ashish ・ Dec 17 '24

#webdev #ai #javascript #tutorial

Creating a full-stack AI based calorie/nutrition tracker in just 8 hrs using Supabase & Lovable

ashish — Tue, 17 Dec 2024 11:21:51 +0000

TL;DR

This blog is a short tutorial/how-to on how you can use Supabase & Lovable to create full-stack apps within hours instead of days! I created a full-stack AI based calorie/nutrition tracker app using these tools in just 8 hours and I'll be showing the "how" here in this blog.

The Idea

I've been thinking of building an AI based calorie tracker app for long for myself since I use LLMs like Claude and ChatGPT a lot to use natural language for tracking my daily meals, calories, and their macros. But as a developer I knew I could make the whole process easier and better and Munchwise does exactly that.
Munchwise creates personalised goals for you based on your personal information and then lets you track your meals using natural human language along with complete daily/weekly analytics!

Features & Tech Stack

Features -

Create account and get personalised goals for calorie/nutrition
Track meals and their calories/macros using natural human language
View dedicated daily/weekly analytics

Tech stack -

Supabase - Auth, Database, Edge functions
Vite & React - Framework, Build tool
Tailwind CSS - Styling
Lovable - Code generation

Creating the Frontend

PS: Before you start you should head over to Lovable and create a new account!

For frontend, I used Lovable to create a minimal working UI and get a basic wireframe for the app which I could build upon and Lovable didn't disappoint me at all. The initial design I got from Lovable was good enough to start working on the backend and then I could improve and change the UI however I want myself. Here is what it looked like in the first iteration & the first prompt -

First prompt -

a nutrition/calorie tracker app, where a user can sign in and then they can input their age, height, weight, and daily calorie goal, we can have a daily required calorie calculator for them as well. And then the user can log their daily calorie intake by either text (logging the meal they ate in human language like 1 bowl daal 2 cups rice...), and then using llm ai based apis we calculate the calories and nutritional data for the meal and add it to the daily goal, a dashboard like interface which shows daily completion , charts which compare daily calorie intake against required, ,

all of this should be made using nextjs, supabase, shadcnui, for the ai part just hardcode for now ig, use orange theme for shadcn, 

pages needed - home page, sign-in page, sign-up page, /track page (dashboard), analytics page and an onboarding page where user will enter data like age height weight, whether they want to gain/lose weight and then ai will create the daily calorie intake goal for them which can be edited by them

After this my main focus was to build out the basic UI for all the pages, and using some more prompts like this -

After a few more prompts, the final UI made by lovable looked like this -

As you can see, the UI already looks pretty nice without me writing any code! I did remove the sidebar in the final iterations and decided to go with top navbar on all the pages though.

Integrating Supabase

The backend/API integration has always been complex for me being a full-stack engineer since I don't over-engineer my frontend. So, Lovable being able to do almost 80% of the backend task by itself was just amazing.
All you have to do is click on the Supabase button on the top right corner of the Lovable page and then you can connect your Supabase account to lovable. Once connected, you need to use prompting again to create the Table schema, Auth, RLS policies, and Edge functions as required by you.
But first you will need to create a Supabase account if you don't already have one by heading over to https://supabase.com -

Create account using Github/Email on Supabase
Once on dashboard click on New project and then create a new project.
Once you have created the project, you can get back to Lovable and then connect your Supabase account and choose the project you created to connect with it.

As you can see, Lovable created the required tables along with their schema, and the required Edge functions in my Supabase project and then once I approved the changes it ran the migration!

Adding AI Superpowers

The app relies on AI completions to convert natural human language to the meal's calorific and nutritional data. I used TogetherAI's API for this part and Lovable once again knew exactly what to do! I just asked it to use Together AI for the AI part and it asked me for my API key and it was done!

You can get your own Together AI API key by creating a free account, you will need a credit cards to add more credits though.

And with this, all of the app's basic functionalities were ready from Authentication to Onboarding of user to Meal tracking and analytics without any code written by me, yet.

Finishing up the app

Now that the app was ready, the only thing I had to do was to fix some UI related issues here and there and some backend issues as well (mostly related TogetherAI's API). I worked on the app for a few more hours debugging and fixing things and here's what the app looks like now -

Pretty neat right? And I'm not joking when I say that this app was made in just 8 hours, what we can achieve using AI these days is unimaginable and if you're not using it by now, you're really missing out!

Links

Github - https://github.com/asrvd/munchwise
Supabase - https://supabase.com
Lovable - https://lovable.dev
Lovable project link - https://lovable.dev/projects/a6534cfb-4ce6-4145-85b7-601a2d051606

Thanks a lot for reading!

Creating a Pokémon guessing game using Supabase, Drizzle, and Next.js in just 2 hours!

ashish — Tue, 23 Apr 2024 19:43:06 +0000

After completing my work and studies a bit earlier yesterday, I had some free time on hand and since I haven't built any fun side projects since the last 2 months, I decided to build one before I went to sleep and surprisingly I ended up building a very fun little Pokémon guessing game using Supabase, Drizzle, & Next.js in roughly 2 hours! This blog post is not exactly a tutorial but more like a story of how I built the whole thing.

Here's the live app link if you wanna play around with it - https://pokeguesser-ten.vercel.app/

The plan

If you have ever watched Pokémon, you would know they had this guessing game after the interval where you would guess a Pokémon based on its shadow. I wanted to build something similar but since that can be a bit more tough, I decided to let users see the Pokémon and not just the shadow. Since, I wanted to finish this project faster, I also decided to let everyone have a global catch record instead of everyone having their own.

Setting up everything

Setting up the project was very easy, thanks to the amazing documentation these tools have!

Init a new Next.js project with app router and TailwindCSS
```
pnpm create next-app@latest
```
Setting up Supabase
Create a new Supabase project, and get
the connection string for the database from settings >
database.

Add the connection string inside a new `.env` file in the 
root of your project like this -

DATABASE_URL=your_connection_string

Install and setup drizzle

pnpm add drizzle-orm postgres
pnpm add -D drizzle-kit

Now, we need to add the setup and config files for drizzle. Create a drizzle.config.ts file in the root of your project and add the following -

// drizzle.config.ts

import type { Config } from "drizzle-kit";
import * as dotenv from "dotenv";

dotenv.config();

export default {
  schema: "./src/lib/db/schema.ts",
  out: "./drizzle",
  driver: "pg",
  dbCredentials: {
    connectionString: process.env.DATABASE_URL!,
  },
} satisfies Config;

Create a new folder under src/ named lib/ and add another folder named db/ inside it. Add these two files inside the folder -

//  src/lib/db/index.ts

import { drizzle } from "drizzle-orm/postgres-js";
import postgres from "postgres";

const connectionString = process.env.DATABASE_URL;

if (!connectionString) {
  throw new Error("DATABASE_URL is not set");
}

declare module global {
  let postgresSqlClient: ReturnType<typeof postgres> | undefined;
}

let postgresSqlClient;

if (process.env.NODE_ENV !== "production") {
  if (!global.postgresSqlClient) {
    global.postgresSqlClient = postgres(connectionString);
  }
  postgresSqlClient = global.postgresSqlClient;
} else {
  postgresSqlClient = postgres(connectionString);
}

export const db = drizzle(postgresSqlClient);

// src/lib/db/schema.ts

import { pgTable, varchar, integer } from "drizzle-orm/pg-core";

export const pokemon = pgTable("pokemon", {
  id: integer("id").primaryKey().notNull(),
  name: varchar("name", { length: 50 }).notNull(),
  type: varchar("type", { length: 50 }).notNull(),
});

These two files contain the schema of our table and the initialized database wrapper. You can look at Drizzle Docs to learn more about how it works!

And with this everything's setup, we just need to create the UI and backend functions.

Finishing up

I won't go into a lot of detail into each file, the project is open sourced and all the source code is available here, feel free to check it out!

Let's see the code for the home page file -

// src/app/page.tsx

import Image from "next/image";
import Guesser from "@/components/Guesser";
import { db } from "@/lib/db";
import { pokemon } from "@/lib/db/schema";

async function fetchRandomPokemon() {
  // the random pokemon should not be one that has already been caught
  const caughtPokemons = await db.select().from(pokemon);

  const caughtPokemonIDs = caughtPokemons.map((pokemon) => pokemon.id);
  let randomPokemonID;

  do {
    randomPokemonID = Math.floor(Math.random() * 898) + 1;
  } while (caughtPokemonIDs.includes(randomPokemonID));

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

  return {
    id: randomPokemon.id,
    name: randomPokemon.name,
    type: randomPokemon.types[0].type.name,
  };
}

export default async function Home() {
  const pokemon = await fetchRandomPokemon();
  return (
    <>
      <h1 className="text-4xl font-bold text-balance">
        Catch&apos;em all! Can you guess this Pokémon?
      </h1>
      <Image
        src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/${pokemon.id}.png`}
        alt="A random Pokémon"
        width={300}
        height={300}
      />
      {pokemon && <Guesser pokemon={pokemon} />}
    </>
  );
}

It fetches a random pokemon from the pokeAPI using a random integer making sure that the pokemon hasn't already been caught.

Here's the code for the Guesser Component -

// src/components/Guesser.tsx

"use client";

import { useState } from "react";
import random from "@/lib/actions/random";
import catchPokemon from "@/lib/actions/catch";

export default function Guesser({
  pokemon,
}: {
  pokemon: {
    id: number;
    name: string;
    type: string;
  };
}) {
  const [guess, setGuess] = useState("");
  const [correct, setCorrect] = useState(false);
  const [showResult, setShowResult] = useState(false);

  const sleep = (ms: number) =>
    new Promise((resolve) => setTimeout(resolve, ms));

  async function handleSubmit(event: React.FormEvent) {
    event.preventDefault();
    if (guess.toLowerCase() === pokemon.name.toLowerCase()) {
      setCorrect(true);
      setShowResult(true);
      catchPokemon({ guessedPokemon: pokemon }).then(() => {
        setShowResult(false);
        setGuess("");
      });
    } else {
      setCorrect(false);
      setGuess("");
      setShowResult(true);
      await sleep(3000);
      setShowResult(false);
    }
  }

  return (
    <div className="flex flex-col gap-2 items-center font-silk">
      <div className="flex gap-2 items-center">
        <input
          type="text"
          value={guess}
          onChange={(event) => setGuess(event.target.value)}
          className="border border-gray-300 rounded p-2"
          placeholder="Enter your guess"
        />
        <button
          onClick={handleSubmit}
          className="bg-blue-500 text-white rounded p-2 hover:bg-blue-600"
        >
          Catch!
        </button>
        <button
          className="bg-red-500 text-white rounded p-2 hover:bg-red-600"
          onClick={() => random()}
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 256 256"
          >
            <path
              fill="currentColor"
              d="m214.2 213.1l-.5.5h-.1l-.5.5l-.3.2l-.4.3l-.3.2l-.3.2h-.4l-.3.2h-.4l-.4.2H168a8 8 0 0 1 0-16h20.7L42.3 53.7a8.1 8.1 0 0 1 11.4-11.4L200 188.7V168a8 8 0 0 1 16 0v40.8a.4.4 0 0 0-.1.3a.9.9 0 0 1-.1.5v.3a.8.8 0 0 0-.1.4l-.2.4c0 .1-.1.2-.1.4l-.2.3c0 .1-.1.2-.1.4l-.2.3l-.2.3l-.3.4Zm-63.6-99.7a8 8 0 0 0 5.7-2.4L200 67.3V88a8 8 0 0 0 16 0V47.2a.4.4 0 0 1-.1-.3a.9.9 0 0 0-.1-.5v-.3a.8.8 0 0 1-.1-.4c-.1-.1-.1-.3-.2-.4s-.1-.2-.1-.4l-.2-.3c0-.1-.1-.2-.1-.4s-.2-.2-.2-.3s-.2-.2-.2-.3l-.3-.4l-.2-.3l-.5-.5h-.1c-.2-.2-.4-.3-.5-.5l-.3-.2l-.4-.3l-.3-.2l-.3-.2h-.4l-.3-.2h-.4l-.4-.2H168a8 8 0 0 0 0 16h20.7L145 99.7a7.9 7.9 0 0 0 0 11.3a7.7 7.7 0 0 0 5.6 2.4ZM99.7 145l-57.4 57.3a8.1 8.1 0 0 0 0 11.4a8.2 8.2 0 0 0 11.4 0l57.3-57.4A8 8 0 0 0 99.7 145Z"
            />
          </svg>
        </button>
      </div>
      <span className={`text-xs`}>
        You can only catch the Pokémon if you guess its name correctly!
      </span>
      {showResult && (
        <div
          className={`text-xs ${correct ? "text-green-500" : "text-red-500"}`}
        >
          {correct
            ? `${pokemon.name} has been caught!`
            : "You missed it! Try again!"}
        </div>
      )}
    </div>
  );
}

As you can see I'm using two server actions here named random and catchPokemon. The first one just revalidates the cache for home age which generates a new Pokemon to guess, the other one is used to store the caught Pokemon to db if the guess is correct. Here's the code for it -

// src/lib/actions/catch.ts

"use server";

import { db } from "@/lib/db";
import { pokemon } from "@/lib/db/schema";
import { revalidatePath } from "next/cache";

type Pokemon = typeof pokemon.$inferInsert;

export default async function catchPokemon({
  guessedPokemon,
}: {
  guessedPokemon: Pokemon;
}) {
  const caughtPokemon = await db.insert(pokemon).values(guessedPokemon);

  revalidatePath("/");

  return caughtPokemon;
}

And this is more or less the code I wrote in those 2 hours! You can check the whole project on github and feel free to ask me about any queries you might have in the comments below!

Conclusion

Building this project was quite a fun experience, I got to learn about connecting Supabase with Drizzle, and using Drizzle with Next.js as well. Hope you liked the project, thanks for reading!

Kakizu: Turn your sketches into beautiful AI generated art using Cloudflare!

ashish — Mon, 15 Apr 2024 07:49:42 +0000

This is a submission for the Cloudflare AI Challenge.

What I Built

Hey there, creative minds! I've cooked up something super cool called Kakizu that's gonna blow your artistic socks off. Get ready to turn those quirky doodles and sketches into mind-blowing AI-generated artworks with just a few clicks!

Kakizu is all about letting your imagination run wild on its rad drawing canvas. Whether you're a seasoned artist or just someone who loves doodling during boring meetings or classes, this is your chance to let those crayon scribbles shine. Once you've worked your sketch magic, get ready for the real showstopper. With the power of Cloudflare's AI awesomeness, Kakizu will zap your doodle into a jaw-dropping AI-generated masterpiece. It's like having your own personal art genie, but way cooler (and no lamps required).

Demo

Demo Video -

Live App Link - https://kakizu.vercel.app/

My Code

All the code for this project is open source on github. Do leave a ⭐ if you liked the project!

Journey

After thinking a lot about what I should build for this challenge, I came up with this idea where you can just scribble for fun and then AI generates an art based on that scribble!

I decided to use Next.js for my web app framework and shadcn/ui for ui framework. Initially I thought of using the img2img model from cloudflare but that model didn't quite work as well. I realized that I needed to give the model a detailed prompt. Thus I decided to go with 3 separate models - one for identifying the objects in image, one for creating the prompt based on the previous caption, and the last one for generating the final image.

Working with cloudflare AI models was easy and fun thanks to the amazing documentation. I used the REST API endpoints for integrating the models with my API.

Creating the sketch pad for the app was one of the toughest tasks. I researched a lot to find the most appropriate library for the task and finally decided to use react-konva. Once the user draws something and clicks on generate - the sketch is exported as an image and then fed to the model from cloudflare to generate the final image.

Multiple Models and/or Triple Task Types

My project qualifies for the Multiple Model Per Task Criteria. I have used the following three models to create AI art from sketches -

@cf/unum/uform-gen2-qwen-500m - for identifying the objects in the user made sketch and captioning it.
@cf/meta/llama-2-7b-chat-fp16 - for creating appropriate prompt for ai image generation.
@cf/lykon/dreamshaper-8-lcm - for generating the final image.

Add password-less OTP based authentication to your Next.js apps using Supabase & Twilio

ashish — Fri, 22 Dec 2023 06:05:06 +0000

User authentication is one of the most important aspects of a full stack app (web app / mobile app) and implementing it in your apps "used to be a hassle" during the early (stone-age) days but not anymore, thanks to tools like Supabase which make it much easier to add relatively tough to implement features like authentication in your apps.

There are a lot of different types of authentication used by apps - Email-Password, OAuth, Magic links, OTPs and some more stuff. But one of the most user-loved authentication type has got to be OTP based authentication as it's password-less & much much faster (let's be honest, we all hate creating and remembering passwords!). In this blog I'm going to show you how you can implement your own SMS-OTP based authentication in your Next.js projects using Supabase & Twilio so let's get started!

Prerequisites

Before we jump into the code part, I need you to quickly do the following stuff -

Create a Supabase account if you don't have one already and create a new project. The most simple way to do that is by going to database.new.
Create a Twilio account if you don't have one already & then head over to your console & get your free trail phone number - you can look at this guide by Twilio for help.
Connect Supabase with Twilio
1. Head over to your Twilio console , scroll down to view your account credentials.
2. Head over to your Supabase project dashboard. Use the sidebar to navigate to Authentication > Providers and enable Phone provider.
3. You will be asked to enter the credentials you got in Step 1. You need to enter your trial phone number in the Twilio Message Service SID field.
4. Click on save and we're done!
Setup a new Next.js project with Supabase using this command.
```
npx create-next-app -e with-supabase    
```
Get your Supabase Project URL and API Key by going to your project dashboard and then navigating to Settings > API. Paste them both in a new .env file like this -
```
NEXT_PUBLIC_SUPABASE_URL=your-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
```
Run the app using the dev command.
```
npm run dev
```
If you take a look at the code now, you would see a basic Next.js app with some Supabase features have been added along with an Email-Password authentication. Now let's create our own password-less login flow.

Time to write some code!

If you want to have the Email-password auth setup navigate to /app/login/page.tsx file. Our SMS OTP auth flow would be quite similar! Let's start by creating a new route for this auth flow - for example /sms-login. Create a new folder named sms-login inside the app directory and create a new file named page.tsx inside it and one more file named actions.ts. Here's the folder structure -

app
|-- sms-login
|   |-- page.tsx // route code goes here
|   |-- actions.ts // server actions

If you don't know what server actions are yet, you're missing out on the latest features of Next.js. Make sure you give the new docs a read. For now, just think of them as form mutations which run on the server.

Head over to actions.ts file and paste the following code (don't worry, I have explained the working of this code block below) -

// app/sms-login/actions.ts

"use server";

import { cookies } from "next/headers";
import { createClient } from "@/utils/supabase/server";
import { redirect } from "next/navigation";

export const signIn = async (formData: FormData) => {
  "use server";
  const phone = formData.get("phone") as string;
  const cookieStore = cookies();
  const supabase = createClient(cookieStore);
  
  const { error } = await supabase.auth.signInWithOtp({
    phone,
  });

  if (error) {
    return redirect("/sms-login?message=Could not authenticate user");
  }
  
  return redirect("/sms-login?message=Check your phone for the OTP");
};

export const verifyOTP = async (formData: FormData) => {
  "use server";
  const phone = formData.get("phone") as string;
  const token = formData.get("token") as string;
  const cookieStore = cookies();
  const supabase = createClient(cookieStore);

  const { error } = await supabase.auth.verifyOtp({
    phone,
    token,
    type: "sms",
  });

  if (error) {
    console.error(error);
    return redirect("/sms-login?message=Could not authenticate user");
  }

  return redirect("/");
};

Let's go through the code now. Notice the "use server"; notation at the top of the file, it specifies that this piece of code should strictly run only on the server! The next 3 lines are the imports we need - cookies util from next.js, createClient from supabase (the code for this exists in the /utils/supabase/server.ts file, explaining that would be beyond the scope of this article though.), & the new redirect util from next.js for redirecting users as we want to.
As you can see, we have two server actions signIn & verifyOTP defined in the file. The first few lines of bothe the actions are pretty similar where we fetch the data from our form using formData and setup our supabase client. Supabase provides two easy-to-use utilities for OTP auth - auth.signInWithOtp() & auth.verifyOtp(). The first one is used to send the OTP to the user's phone number while the other one is for verifying the OTP and finally signing-in the user.
The next few lines just check if there's an error or not and redirect the user accordingly.

Now, let's write the code for our frontend. Head over to the /sms-login/page.tsx file and paste the following code -

"use client";

import Link from "next/link";
import { signIn, verifyOTP } from "./actions";
import { useState, useEffect } from "react";

export default function SMSLogin({
  searchParams,
}: {
  searchParams: { message: string };
}) {
  const [otpSent, setOtpSent] = useState(false);

  return (
    <div className="flex-1 flex flex-col w-full px-8 sm:max-w-xl justify-center gap-2">
      <Link
        href="/"
        className="absolute left-8 top-8 py-2 px-4 rounded-md no-underline text-foreground bg-btn-background hover:bg-btn-background-hover flex items-center group text-sm"
      >
        <svg
          className="w-4 h-4 mr-2"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            className="inline-flex"
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="2"
            d="M10 19l-7-7m0 0l7-7m-7 7h18"
          ></path>
        </svg>
        Back
      </Link>
      <h1 className="text-4xl font-bold">Sign in using phone number</h1>
      <p className="text-foreground">
        {searchParams.message || "Sign in to your account"}
      </p>
      <form
        action={async (formData) => {
          if (otpSent) {
            await verifyOTP(formData);
          } else {
            try {
              await signIn(formData);
              setOtpSent(true);
            } catch (e) {
              console.error(e);
            }
          }
        }}
        className="flex flex-col gap-2"
      >
        <label htmlFor="phone" className="flex flex-col gap-1">
          <span className="text-foreground">Phone</span>
          <input
            type="tel"
            name="phone"
            id="phone"
            className="rounded-md px-4 py-2 bg-inherit border mb-2"
            placeholder="+91 1234567890"
          />
        </label>
        <label
          htmlFor="token"
          className={`flex flex-col gap-1 ${otpSent ? "" : "hidden"}`}
        >
          <span className="text-foreground">Your OTP</span>
          <input
            type="text"
            name="token"
            id="token"
            required
            placeholder="123456"
            className={`rounded-md px-4 py-2 bg-inherit border mb-2`}
          />
        </label>
        <button
          type="submit"
          className="bg-green-700 rounded-md px-4 py-2 text-foreground mb-2 max-w-max hover:bg-green-600"
        >
          {otpSent ? "Verify OTP" : "Send OTP"}
        </button>
        {otpSent && <ExpirationTimer />}
      </form>
    </div>
  );
}

const ExpirationTimer = () => {
  const expirationTime = 60;
  const [timeLeft, setTimeLeft] = useState(expirationTime);

  let id: any = null;

  useEffect(() => {
    if (timeLeft > 0) {
      id = setTimeout(() => {
        setTimeLeft(timeLeft - 1);
      }, 1000);
    }
    return () => {
      clearTimeout(id);
    };
  }, [timeLeft]);

  return (
    <div className="flex justify-between items-center">
      <p className="text-foreground text-sm">
        {timeLeft > 0 ? `OTP expires in ${timeLeft} seconds` : "OTP expired!"}
      </p>
      <button
        className="text-foreground text-sm underline disabled:text-foreground/50 disabled:cursor-not-allowed"
        formAction={async (formData) => {
          await signIn(formData);
          setTimeLeft(expirationTime);
        }}
        disabled={timeLeft > 0}
      >
        Resend OTP
      </button>
    </div>
  );
};

Time to understand the code now. As you can see, the first line this time is "use client;" which denotes that this file will only run on the client side - it's a React Server Component . The next 3 lines again are imports we would need, notice how we have imported the server actions we created previously.
The main page component SMSLogin starts with a state definition otpSent. I'm using it to update the form with a new OTP input once the OTP has been sent. The most important part of this code is the <form/> component, everything else is just normal next.js frontend code you can understand easily. If you look at the form component you would see an action attr -

...
action={async (formData) => {
          if (otpSent) {
            await verifyOTP(formData);
          } else {
            try {
              await signIn(formData);
              setOtpSent(true);
            } catch (e) {
              console.error(e);
            }
          }
        }
      }
...

Inside every form action attr you have access to the submitted formData. Inside the action code, We're first checking if the OTP has been sent already - If it has been sent we run the verifyOTP action and if not, we run the signIn action and set the otpSent state to true.
Inside the form component we have two input fields - phone & token/otp. Notice how the input field form OTP has been hidden until the otpSent state turns true. Also, we are using a single submit button for both sending and verifying OTP. In the last line of our form compoennt, you would see a new component <ExpirationTimer/> being conditionally rendered if the OTP has been sent.
The ExpirationTimer component has been defined in the last few lines of the code. It has two utilities -

To show the remaining time until OTP expires.
Allow user to resend OTP once it expires. The first line of the component defines the expiration time which is 60 sec (you can change it in the Supabase auth settings). Now we're using another state variable to find the time left and show it to the user. We have an effect running with a timeout function which updates the state variable every second. Let's look at the last part of the code which is the Resend OTP button -

<button
  className="text-foreground text-sm underline disabled:text-foreground/50 disabled:cursor-not-allowed"
  formAction={async (formData) => {
          await signIn(formData);
          setTimeLeft(expirationTime);
  }}
  disabled={timeLeft > 0}
>
  Resend OTP
</button>

Notice how the button is disabled till the OTP expires (timeLeft > 0), The button has a formAction attr which is being used so that we have access to the same formData from the Login form. Inside the action we are simply calling the signIn action once again and resetting the timeLeft state so that the timer restarts.

With this our frontend & backend for the auth flow is ready! Now, we need to do one last thing - Head over to the /app/components/AuthButton.tsx page and change the Login link from /login to /sms-login like this -

<Link
  href="/sms-login"
  className="py-2 px-3 flex rounded-md no-underline bg-btn-background hover:bg-btn-background-hover"
>
  Login
</Link>

Time to see our code in action

Start your dev server if you haven't yet (npm run dev) & head over to localhost:3000, this is what the home page would look like -
Click on the Login button on the top-right, this will take you to the login page you just made -
Now you just need to enter your phone number and click on Send OTP, and if you did everything correctly you would receive an OTP soon after on your phone via SMS. Enter the OTP in the input field and click on Verify OTP. Congratulations! You just made a completely password-less login flow using Supabase!

Resources

Conclusion

This blog assumes that you have at least some knowledge of Next.js app router (v14). I tried to explain every little thing in the best possible way but you may still have some doubts. Feel free to leave a comment below, I'll be happy to help you out!

Thanks a lot for reading!

Creating a hackathon winning AI based app in a weekend using Supabase, OpenAI, & Next.js

ashish — Tue, 10 Oct 2023 07:17:29 +0000

Back in April 2023, Supabase announced it's AI themed hackathon for Launch Week 7 - there were a lot of categories to win in and for me it was the perfect way to spend my weekend. This blog is about how I created an AI based app that won me the hackathon category for Best use of AI which I created in a weekend - yes, that's right. This is how fast it has become to ship web based software these days thanks to techs like Next.js and Supabase.

The idea & the stack

The most important yet the most simplest part of building something for a hackathon is thinking of an idea that shines among all the other submissions. I spend like half a day thinking of what I should build, I knew I was going to build something OpenAI. My app idea for the hackathon was an AI based Twitter thread generator. You feed the app a blog or some sort of content and then choose the number of tweets the thread should have and that's it. OpenAI's model would then process the blog and create twitter posts from it. I named the app Supathreads and the app is live here at Supathreads.vercel.app.

NOTE: The app won't work now as I spent all my OpenAI credits, but you see it working in this video below for now.

Here's the stack I used for building the app -

Next.js as a Framework.
Supabase as my database.
Prisma ORM.
NextAuth.js for auth.
Tailwind CSS for styling.

I decided not to use Supabase's built-in Auth feature as I didn't have a very complex use case for Auth, I just needed a simple OAuth button for GitHub.

Setting up the project

For building the project, you would need a Supabase account & an OpenAI account. You can create both of them for free though there's a limit to the free credits you get in OpenAI and they expire after a certain point of time.

Once you have created accounts on them, obtain your OpenAI API key by going to platform.openai.com/account/api-keys

Then create a project on Supabase, and get it's connection URL which we will use for connecting it with Prisma. Go to the project's settings -> Database -> Scroll down and click on Node.js. You will also need to replace [YOUR-PASSWORD] in the string with the password you got while creating the project.

Store both the OpenAI API key and Connection URI for Supabase in a .env file so that you can use it in our project.

Building the backend

To keep the blog concise, I would only focus on the main functionality of the app that's creating threads from content. Let's first see how the backend for AI generation works.

// src/app/api/thread/route.ts

import { OpenAIStream, OpenAIStreamPayload } from "@/lib/stream";

// OPENAI_API_KEY from env file
if (!process.env.OPENAI_API_KEY) {
  throw new Error("Missing env var from OpenAI");
}

export const config = {
  runtime: "edge",
};

export async function POST(req: Request) {
  console.log("ok");
  if (req.method !== "POST") {
    return new Response("Method not allowed", { status: 405 });
  }
  const { prompt } = (await req.json()) as {
    prompt?: string;
  };

  if (!prompt) {
    return new Response("No prompt in the request", { status: 400 });
  }

  const payload: OpenAIStreamPayload = {
    model: "gpt-3.5-turbo",
    messages: [{ role: "user", content: prompt }],
    temperature: 0.7,
    top_p: 1,
    frequency_penalty: 0,
    presence_penalty: 0,
    max_tokens: 2000,
    stream: true,
    n: 1,
  };

  const stream = await OpenAIStream(payload);
  return new Response(stream);
}

This is the main API route responsible for generation of threads. The prompt along with content for generation of threads is passed in the request. The API then uses the OpenAIStream function to stream the generated thread to the frontend.
Back when. I built this app - there were not a lot of good/easy options available to achieve streaming in the UI like it is now thanks to vercel/ai library. I researched a bit and then found this code from one of @nutlope's projects on GitHub that does exactly what I needed.

// src/lib/stream.ts

import {
  createParser,
  ParsedEvent,
  ReconnectInterval,
} from "eventsource-parser";

export type ChatGPTAgent = "user" | "system";
console.log("...")

export interface ChatGPTMessage {
  role: ChatGPTAgent;
  content: string;
}

export interface OpenAIStreamPayload {
  model: string;
  messages: ChatGPTMessage[];
  temperature: number;
  top_p: number;
  frequency_penalty: number;
  presence_penalty: number;
  max_tokens: number;
  stream: boolean;
  n: number;
}

export async function OpenAIStream(payload: OpenAIStreamPayload) {
  const encoder = new TextEncoder();
  const decoder = new TextDecoder();

  let counter = 0;

  const res = await fetch("https://api.openai.com/v1/chat/completions", {
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${process.env.OPENAI_API_KEY ?? ""}`,
    },
    method: "POST",
    body: JSON.stringify(payload),
  });

  const stream = new ReadableStream({
    async start(controller) {
      // callback
      function onParse(event: ParsedEvent | ReconnectInterval) {
        if (event.type === "event") {
          const data = event.data;
          // https://beta.openai.com/docs/api-reference/completions/create#completions/create-stream
          if (data === "[DONE]") {
            controller.close();
            return;
          }
          try {
            const json = JSON.parse(data);
            const text = json.choices[0].delta?.content || "";
            if (counter < 2 && (text.match(/\n/) || []).length) {
              // this is a prefix character (i.e., "\n\n"), do nothing
              return;
            }
            const queue = encoder.encode(text);
            controller.enqueue(queue);
            counter++;
          } catch (e) {
            // maybe parse error
            controller.error(e);
          }
        }
      }

      // stream response (SSE) from OpenAI may be fragmented into multiple chunks
      // this ensures we properly read chunks and invoke an event for each SSE event stream
      const parser = createParser(onParse);
      // https://web.dev/streams/#asynchronous-iteration
      for await (const chunk of res.body as any) {
        parser.feed(decoder.decode(chunk));
      }
    },
  });

  return stream;
}

This code block might seem a bit scary but what it does isn't that hard to understand. It creates a readable stream out of your response data, turns it into chunks of smaller data and then returns them as a stream which makes it look like the data is being generated in real time on the frontend.

Building the frontend

Now that we have our backend ready, let's create the frontend for taking the content as input and showing the generated thread.

// src/components/thread-form.tsx

"use client";
import { useState } from "react";
import { z } from "zod";
import { UtilButton } from "@/components/ui/buttons";
import { SignOut } from "@/app/actions";
import { CopyButton } from "@/components/ui/buttons";
import { toast } from "react-hot-toast";

export const InputSchema = z.object({
  article: z.string().trim().nonempty().max(17000),
  numberOfTweets: z.number().max(6).min(1).default(4),
  tweetType: z.enum(["short", "medium", "long"]).default("medium"),
});

type TweetType = "short" | "medium" | "long";

export default function ThreadForm() {
  const [article, setArticle] = useState("");
  const [numberOfTweets, setNumberOfTweets] = useState(4);
  const [tweetType, setTweetType] = useState<TweetType>("medium");
  const [generatedTweets, setGeneratedTweets] = useState<string>("");
  const [loading, setLoading] = useState(false);
  const [showSaveForm, setShowSaveForm] = useState(false);
  const [threadTitle, setThreadTitle] = useState("");

  const generateThread = async () => {
    const id = toast.loading("Generating thread...");
    const input = InputSchema.safeParse({
      article,
      numberOfTweets,
      tweetType,
    });
    if (!input.success) {
      console.log(input.error);
      toast.error("Invalid form input!", {
        id,
      });
      return;
    }
    const prompt = `Turn this article into an interesting twitter thread that catches people's attention, your tone should be like that of a famous twitter thread creator, the first tweet should be an introduction tweet to the thread, the thread should consist of ${input.data.numberOfTweets} tweets of ${input.data.tweetType} length each. Keep the links and people's name in the article as it is, and clearly label them like "1." and "2.",separate each tweet with a line gap, tweets should be written in first person - \n ${input.data.article}`;
    setGeneratedTweets("");
    setLoading(true);
    const response = await fetch("/api/thread", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        prompt,
      }),
    });

    if (!response.ok) {
      console.error(response.statusText);
      toast.error("Couldn't generate thread!", {
        id,
      });
    }

    // This data is a ReadableStream
    const data = response.body;
    if (!data) {
      return;
    }

    const reader = data.getReader();
    const decoder = new TextDecoder();
    let done = false;

    while (!done) {
      const { value, done: doneReading } = await reader.read();
      done = doneReading;
      const chunkValue = decoder.decode(value);
      setGeneratedTweets((prev) => prev + chunkValue);
    }
    // scrollToBios();
    setLoading(false);
    toast.success("Thread generated successfully!", {
      id,
    });
  };

  const toggleSaveForm = async () => {
    setShowSaveForm((prev) => !prev);
  };

  const saveThread = async () => {
    const id = toast.loading("Saving thread...");
    if (!threadTitle.trim()) {
      toast.error("Please enter a thread title!", {
        id,
      });
      return;
    }
    const reqBody = {
      title: threadTitle,
      tweets: generatedTweets.split("\n\n").map((tweet, index) => ({
        content: tweet.trim().slice(3),
      })),
    };

    const response = await fetch("/api/threads", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(reqBody),
    });

    if (!response.ok) {
      console.error(response.statusText);
      toast.error("Couldn't save the thread!", {
        id,
      });
    }

    const data = await response.json();
    console.log(data);
    toast.success("Thread saved successfully!", {
      id,
    });
  };

  return (
    <div className="lg:w-[56%] w-full flex flex-col gap-2 justify-start items-center p-4 my-6">
      <h2 className="text-xl font-bold w-full bg-clip-text text-transparent bg-gradient-to-b from-zinc-900 via-neutral-800 to-stone-900">
        Create a new thread
      </h2>
      <div className="flex flex-col lg:flex-row md:flex-row gap-4 w-full">
        <div className="w-full">
          <label
            htmlFor="numberOfTweets"
            className="self-start text-sm mb-1 text-zinc-700"
          >
            Number of tweets (1 - 6)
          </label>
          <input
            type="number"
            className="w-full bg-zinc-200 text-zinc-900 focus:bg-zinc-200/50 transition-all border border-zinc-300/60 shadow-smfocus:border-zinc-500/50 duration-200 rounded-md p-2 outline-none"
            max={6}
            min={1}
            placeholder="Number of tweets"
            value={numberOfTweets}
            onChange={(e) => setNumberOfTweets(parseInt(e.target.value))}
          />
        </div>
        <div className="w-full">
          <label
            htmlFor="tweetType"
            className="self-start text-sm mb-1 text-zinc-700"
          >
            Tweet type
          </label>
          <select
            value={tweetType}
            className="w-full bg-zinc-200 text-zinc-900 focus:bg-zinc-200/50 transition-all border border-zinc-300/60 shadow-sm focus:border-zinc-500/50 duration-200 rounded-md p-2 outline-none"
            onChange={(e) => setTweetType(e.target.value as TweetType)}
          >
            <option value="short">Short</option>
            <option value="medium">Medium</option>
            <option value="long">Long</option>
          </select>
        </div>
      </div>
      <div className="w-full">
        <label
          htmlFor="article"
          className="self-start text-sm mb-1 text-zinc-700"
        >
          Article (max 17k characters)
        </label>
        <textarea
          placeholder="Enter your article"
          className="w-full bg-zinc-200 text-zinc-900 focus:bg-zinc-200/50 transition-all h-[400px] border border-zinc-300/60 shadow-sm focus:border-zinc-500/50 duration-200 rounded-md p-2 outline-none scrollbar-thin scrollbar-track-transparent scrollbar-thumb-zinc-500/50 scrollbar-thumb-rounded-md"
          onChange={(e) => setArticle(e.target.value)}
        />
      </div>
      <div className="w-full flex gap-4">
        <UtilButton onClick={generateThread} label="Generate" />
        <SignOut />
      </div>
      {generatedTweets.trim() !== "" && (
        <div className="w-full whitespace-pre-line text-zinc-200 flex flex-col gap-2 mt-4">
          <h2 className="text-xl font-bold w-full bg-clip-text text-transparent bg-gradient-to-b from-zinc-900 via-neutral-800 to-stone-900">
            Generated tweets
          </h2>
          <div className="relative flex flex-col gap-4 z-0 mb-2">
            <div className="absolute w-full h-full left-5 z-[-100] top-0 bg-transparent border-l border-zinc-400/60"></div>
            {generatedTweets.split("\n\n").map((tweet, index) => (
              <p
                key={index}
                className="bg-zinc-200 shadow-md relative z-[100] border border-zinc-300/60 rounded-md p-4 pr-10 text-zinc-900"
              >
                {tweet.trim().slice(3)}
                <CopyButton text={tweet.trim().slice(3)} />
              </p>
            ))}
          </div>

          <div>
            {showSaveForm && (
              <div className="flex gap-4 mb-4">
                <input
                  type="text"
                  placeholder="Thread name / title"
                  className="w-full bg-zinc-200 text-zinc-900 focus:bg-zinc-200/50 transition-all border border-zinc-300/60 shadow-sm focus:border-zinc-500/50 duration-200 rounded-md p-2 outline-none"
                  value={threadTitle}
                  onChange={(e) => setThreadTitle(e.target.value)}
                />
                <UtilButton onClick={saveThread} label="Save" />
              </div>
            )}
            {generatedTweets && (
              <UtilButton
                onClick={toggleSaveForm}
                label={showSaveForm ? "Cancel" : "Save Thread"}
              />
            )}
          </div>
        </div>
      )}
    </div>
  );
}

This is my main component for the thread creation UI. You can see some imports and predefined prompt for OpenAI. Your prompt should be concise but to-the-point for best results. I have a few states I'm using to handle input changes. Once someone selects all inputs and then clicks on the Generate button. the whole input gets validated against a Zod schema and then is fed to the API route we created in the previous step. The generated response is being split into separate tweets and is then shown in the UI as a thread.

Adding the Save functionality to threads

We have our main functionality of the app working, but what if someone wants to save the generated threads to use it later or just bookmark it? Supabase is here to help us! If you see the above code block you can see I'm providing a button in the form to save it once the tweets have generated. You can name your thread and then click on Save and it will get added to your dashboard!

Let's look at the function and API I'm using for saving threads.

/ src/components/event-form.tsx

...
const saveThread = async () => {
    const id = toast.loading("Saving thread...");
    if (!threadTitle.trim()) {
      toast.error("Please enter a thread title!", {
        id,
      });
      return;
    }
    const reqBody = {
      title: threadTitle,
      tweets: generatedTweets.split("\n\n").map((tweet, index) => ({
        content: tweet.trim().slice(3),
      })),
    };

    const response = await fetch("/api/threads", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(reqBody),
    });

    if (!response.ok) {
      console.error(response.statusText);
      toast.error("Couldn't save the thread!", {
        id,
      });
    }

    const data = await response.json();
    console.log(data);
    toast.success("Thread saved successfully!", {
      id,
    });
  };
...

This function is being used in my frontend to save the generated thread. It sends a request to my API route with the tweets in the request body. Let's look at the API route.

// src/pages/api/threads/index.ts

import type { NextApiRequest, NextApiResponse } from "next";
import { prisma } from "@/lib/prisma";
import { getServerSession } from "next-auth";
import { authOptions } from "../auth/[...nextauth]";
import { ThreadCreateSchema } from "@/lib/schemas";

async function handler(req: NextApiRequest, res: NextApiResponse) {
  const session = await getServerSession(req, res, authOptions);
  console.log("running");

  if (!session || !session.user) {
    res.status(401).json({ error: "Unauthorized" });
    return;
  }

  if (req.method === "POST") {
    const parsedBody = ThreadCreateSchema.safeParse(req.body);

    if (!parsedBody.success) {
      res.status(400).json({ error: "Invalid request body" });
      return;
    }

    try {
      const thread = await prisma.thread.create({
        data: {
          title: parsedBody.data.title,
          authorId: session.user.id,
          tweets: {
            create: parsedBody.data.tweets.map((tweet) => ({
              content: tweet.content,
            })),
          },
        },
        select: {
          id: true,
        },
      });

      res.status(201).json(thread);
    } catch (error) {
      res.status(500).json({ error: "Couldn't create thread" });
    }
  } else {
    res.status(405).json({ error: "Method not allowed" });
  }
}

export default handler;

You can see here that the data is first parsed using Zod and if it's parsed successfully, it gets added to our Supabase database using Prisma. Now let's create the dashboard UI to show all the saved threads to the user.

// src/app/dashboard/page.tsx

import type { Thread } from "@prisma/client";
import { z } from "zod";
import { getServerSession } from "next-auth";
import { authOptions } from "@/pages/api/auth/[...nextauth]";
import { prisma } from "@/lib/prisma";
import { SignIn } from "../actions";
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Dashboard"
}

const ThreadSchema = z.array(
  z.object({
    id: z.string(),
    title: z.string(),
    createdAt: z.date(),
  })
);

async function getDashboardData() {
  const session = await getServerSession(authOptions);

  if (!session?.user) {
    throw new Error("You need to be logged in to access this page");
  }

  const data = await prisma.thread.findMany({
    where: {
      authorId: session.user.id,
    },
    orderBy: {
      createdAt: "desc",
    }
  });
  const threads = ThreadSchema.safeParse(data);

  if (!threads.success) {
    throw new Error("Invalid response from server");
  }

  return {
    threads: threads.data,
    session,
  };
}

export default async function Dashboard() {
  const { threads, session } = await getDashboardData();

  return (
    <>
      {session?.user ? (
        <div className="lg:w-[56%] w-full p-4 my-6">
          <h2 className="text-3xl font-bold w-full bg-clip-text text-transparent bg-gradient-to-b from-zinc-900 via-neutral-800 to-stone-900 mb-4">
            Your Threads
          </h2>
          <div className="flex flex-col gap-4 w-full ">
            {threads?.map((thread) => (
              <div
                key={thread.id}
                className="p-4 bg-zinc-200 rounded-md shadow-md border border-zinc-300/60"
              >
                <a
                  className="text-lg font-semibold cursor-pointer text-zinc-950 hover:underline underline-offset-2"
                  href={`/threads/${thread.id}`}
                >
                  {thread.title}
                </a>
                <p className="text-zinc-700 mt-4 text-sm">
                  created {thread.createdAt.toLocaleDateString()}
                </p>
              </div>
            ))}
          </div>
        </div>
      ) : (
        <div className="flex flex-col items-center justify-center h-screen">
          <h2 className="text-2xl font-semibold text-zinc-100 mb-4">
            You need to be logged in to create a thread
          </h2>
          <SignIn />
        </div>
      )}
    </>
  );
}

Here you can see I'm first fetching all the saved threads for the user using Prisma query. This is a React Server Component since I'm using NExt.js 13. Once the data is loaded, I'm mapping the threads to show them in the dashboard.

Finishing up

Using Next.js (v13) and Supabase with Prisma helped me a lot in moving faster and ship this idea within a weekend. Both Next.js and Supabase have great DX and great documentation. Whenever I felt stuck - the docs were enough to solve my issue (most of the times).
This project isn't a very complex app or an app with a lot of features. But it still won the hackathon category for Best use of AI because the idea was unique and I focused only on the main functionality of adding a lot of features which shadows your app's main functionality. Your goal for a hackathon should be to build an app that shows and implements your idea clearly in a way others can understand and use it :)

Resources & Links

Thanks a lot for reading the blog post!

Creating an animated navbar inspired by Vercel using React (Next.js v13), Framer-Motion, and Tailwind CSS

ashish — Wed, 09 Aug 2023 13:49:17 +0000

While building web apps, I usually like to take inspiration from other sites. I'm always fascinated by beautifully designed websites with subtle yet cool animations. Vercel is one of those sites I really like as a web developer. Also, Vercel's design & frontend team is one of the best out there. So, a few days back while I was deploying one of my apps on Vercel, I noticed there navbar component had a subtle hover animation which felt really smooth. Basically, what was happening was that each navbar link / tab had a background color which would follow the cursor on hover over the navbar. Since, I'm currently building the next version of my personal site (using Next.js v13), I decided to implement it in my site as well. You can think of this article as a guide to creating the navbar yourself! Here's what the navbar will look and work like -

First Steps

I already mentioned earlier that the site is being built using Next.js v13. So, the first thing you would need to do is scaffold a next app using this command. While doing this, you will get prompted about whether you want to add Tailwind to the project, make you're you add it and also make sure you use the app directory and /src folder so that we are on the same page while working -

pnpm create next-app@latest

The next thing would be to install the dependencies required, mainly Framer-Motion in this case -

pnpm i framer-motion

Start the dev server -

pnpm dev

Now that we have our basic project ready, we can start building the navbar!

Building the Navbar component

Let's create our basic styled navbar component first and it to our global layout file in the project. If you're not familiar with what a layout file is - it's basically a new file type introduced in Next.js v13 which can be used to create the layout for your site. By default, Next.js would create a layout file for you in the root of your app named layout.tsx.

Create a /components folder inside your /app directory and create a file named Navbar.tsx inside it.

// src/app/components/Navbar.tsx

"use client";

import { usePathname } from "next/navigation";
import Link from "next/link";

const navItems = [
  {
    path: "/",
    name: "Home",
  },
  {
    path: "/now",
    name: "Now",
  },
  {
    path: "/guestbook",
    name: "Guestbook",
  },
  {
    path: "/writing",
    name: "Writing",
  },
];

export default function NavBar() {
  let pathname = usePathname() || "/";
  
  return (
    <div className="border border-stone-800/90 p-[0.4rem] rounded-lg mb-12 sticky top-4 z-[100] bg-stone-900/80 backdrop-blur-md">
      <nav className="flex gap-2 relative justify-start w-full z-[100]  rounded-lg">
        {navItems.map((item, index) => {
          const isActive = item.path === pathname;

          return (
            <Link
              key={item.path}
              className={`px-4 py-2 rounded-md text-sm lg:text-base relative no-underline duration-300 ease-in ${
                isActive ? "text-zinc-100" : "text-zinc-400"
              }`}
              href={item.path}
            >
              <span>{item.name}</span>
            </Link>
          );
        })}
      </nav>
    </div>
  );
}

This is the basic navbar component we can have. If you don't understand what "use client" at the top of the file is, you need to read the Next.js docs and a little about React Server Components. In short, all react components in Next.js v13 are server components by default which means that they run on the server. So, if you want to use client based hooks like useState or useEffect , you need to make them client components using the line "use client".

Now let's break down the rest of the code. Firstly, I have defined an array of the items I want to have on my navbar. In my case they are, /, /now, /guestbook, & /writing . The next thing you see is our navbar component's function. I'm using the usePathname() hook provided by Next.js to get the active pathname. The next thing is our actual UI code styled using Tailwind CSS. I'm mapping over the navItems array and returning Next.js's in-built Link component for navigation. Notice I'm conditionally setting the text color of the links based on whether the link is active or not. The link activity can be checked by seeing if the path is equal to our active pathname we get from usePathname() hook.

Creating the layout

Now that our basic navbar component is done, let's create our layout file and add the navbar component to it so that each page in our web app has access to the navbar. Look for the layout.tsx file in the root of your app folder and change the code to this.

// src/app/layout.tsx

import "./globals.css";
import NavBar from "@/components/navbar";

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className="bg-gradient-to-tr overflow-x-hidden min-w-screen from-zinc-950 via-stone-900 to-neutral-950 flex min-h-screen flex-col items-center justify-between">
        <main className="p-4 py-24 gap-6 w-full lg:w-[55%]">
          <section className="w-full flex gap-4 justify-start mb-6 p-2">
            <div>
              <img
                src="https://avatars.githubusercontent.com/u/68690233?s=100&v=4"
                alt="avatar"
                className="w-12 h-12 rounded-full shadow-lg grayscale hover:grayscale-0 duration-300"
              />
            </div>
            <div className="flex flex-col gap-2 justify-center">
              <h2 className="mb-0 text-zinc-100 font-bold">Ashish</h2>
              <p className="mb-0 text-zinc-400 font-semibold leading-none">
                Student • Dev • Ailurophile
              </p>
            </div>
          </section>
          <NavBar />
          {children}
        </main>
      </body>
    </html>
  );
}

Let's break down the code. The first thing you need to do is import your Navbar component in your layout import NavBar from "@/components/navbar";. The "@" here is an import alias you can set while scaffolding your app. The next thing you would see is the metadata object. Don't worry if you don't understand what it is, it's used to define the metadata for your pages - for now let's not change it.

The last thing is our actual RootLayout function or global layout (global as it applies to all of your routes). I have added some basic styles for the layout along with an header section with my name and bio on it. The navbar component is added right below it. Now, if you head over to localhost:3000 after starting the dev server, you would be able to see a basic page like this with the navbar on it.

Adding the animations to navbar

Here comes the last step of this guide. We will be adding the hover animations inspired from Vercel to our navbar. Here's what the navbar component will look like after adding the animation code -

// src/app/components/Navbr.tsx

"use client";

import { motion } from "framer-motion";
import { useState } from "react";
import { usePathname } from "next/navigation";
import Link from "next/link";

const navItems = [
  {
    path: "/",
    name: "Home",
  },
  {
    path: "/now",
    name: "Now",
  },
  {
    path: "/guestbook",
    name: "Guestbook",
  },
  {
    path: "/writing",
    name: "Writing",
  },
];

export default function NavBar() {
  let pathname = usePathname() || "/";

  if (pathname.includes("/writing/")) {
    pathname = "/writing";
  }

  const [hoveredPath, setHoveredPath] = useState(pathname);

  return (
    <div className="border border-stone-800/90 p-[0.4rem] rounded-lg mb-12 sticky top-4 z-[100] bg-stone-900/80 backdrop-blur-md">
      <nav className="flex gap-2 relative justify-start w-full z-[100]  rounded-lg">
        {navItems.map((item, index) => {
          const isActive = item.path === pathname;
          
          return (
            <Link
              key={item.path}
              className={`px-4 py-2 rounded-md text-sm lg:text-base relative no-underline duration-300 ease-in ${
                isActive ? "text-zinc-100" : "text-zinc-400"
              }`}
              data-active={isActive}
              href={item.path}
              onMouseOver={() => setHoveredPath(item.path)}
              onMouseLeave={() => setHoveredPath(pathname)}
            >
              <span>{item.name}</span>
              {item.path === hoveredPath && (
                <motion.div
                  className="absolute bottom-0 left-0 h-full bg-stone-800/80 rounded-md -z-10"
                  layoutId="navbar"
                  aria-hidden="true"
                  style={{
                    width: "100%",
                  }}
                  transition={{
                    type: "spring",
                    bounce: 0.25,
                    stiffness: 130,
                    damping: 9,
                    duration: 0.3,
                  }}
                />
              )}
            </Link>
          );
        })}
      </nav>
    </div>
  );
}

Since this code could look a bit complex to some, let's break it down to bits and understand what's happening here.

Firstly, we need to add a few more imports - motion from framer-motion and useState hook from react.
The second thing that's been added is this block of code, it's a simple trick I'm using to ignore the slug of my blog posts so that the active pathname is still /wriiting.

if (pathname.includes("/writing/")) {
   pathname = "/writing";
}

The third thing is our state hoveredPath, it's being used to keep track of the link which is being hovered as we are using framer-motion and not simply css hover property.
The fourth thing that's been added is this code block to our Link component, The onMouseOver property is being used to set the pathname to the link's pathname whenever someone hovers over the link & the onMouseLeave property is being used to set the hovered pathname back to "/" after the cursor leaves the link. This is important as we don't want the background to be stuck on the same link even after we stop hovering over it.

...
onMouseOver={() => setHoveredPath(item.path)}
onMouseLeave={() => setHoveredPath(pathname)}
...

The fith and the last thing added to our code is the motion component that will be used to show the hover animation. If you don't know what motion does, consider reading the framer-motion docs. For now, you can think of it as an animatable component. We are using the motion.div component here as we need a div component to act as the background for our links. You can also see that the motion component is being rendered conditionally whenever item.path === hoveredPath. So, whenever a link is hovered our motion div becomes visible creating the background effect! The motion div is being positioned relative to the Link component and has a z-index of -10 so that it appears below our Link component. It also has a styling of width 100% which would make sure it covers the whole Link component and the transition property which can be used to control the animation. You can play around with the values to see how they work. Don't forget to read the framer-motion docs though.

Note: Please remove all the styles from the Next.js default template from globals.css. Your CSS file should look like this -

/* /src/app/globals.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

With this, our animated navbar is complete and you can test it out in you dev server, Here's what it would look like if you did everything correctly -

Clicking on other links would lead to a 404 as we haven't created the pages for the routes yet. After adding routes for those pages the navbar would work like this -

Conclusion

This might seem like "over-engineering" to some, but to me it's not as I was able to add a simple yet beautiful animation to my earlier boring-looking navbar by adding just a few lines of code.
If you find anything hard to understand or something you don't get, feel free to leave a comment - I'll get back to you. Thanks for reading :)

Free resources that helped me master React as a Self Taught Web Developer

ashish — Thu, 02 Mar 2023 15:51:02 +0000

React? Why?

When it comes to web development and to be precise - JavaScript frameworks / libraries, React.js is always the one that most people think of first. According to State of JS 2022, React is the most used frontend framework by web developers since the last 6+ years. React still continues to be the the first choice of beginners and it’s popularity lies in the fact that when it comes to frameworks being used in production - React outperforms every other framework by usage, so no matter how imperfect it might be, React is not going to go anywhere, anytime soon.

But no matter how good the tech might be, it’s always difficult as a beginner to get started with learning it and crossing the learning curve. The over saturation of content around React and it’s ecosystem contributes to this confusion. There are tons of resources (including the free ones) present right now all over the web for learning React, which is a good thing, but quality should always come before quantity. In this article, I’m writing about the resources that helped me to master React and the tools built around it. I’ll only be writing about the resources which I think beginners are most likely to benefit from and all of the resources are free.

Video Resources / Courses

React in 100 seconds by Fireship

This video by Fireship is the best resource to get a grasp over React basics and get familiar with the way you work using React. The video is concise and to -the-point, a no-nonsense simple introduction to React for everyone.
Free React course by Scrimba

This free course is created by the Scrimba team with one of the best instructors I have learnt from - Bob Ziroll, this course can be done by anyone who has a basic grasp over JavaScript - though, it’s not recommended to dive right into React without knowing JavaScript well. The course is composed of 4 modules and 152 interactive sessions along with 8 projects that you’ll be building alongside learning React.

This course is one of the best courses out there for learning the React - enough to get you started with it. The way of teaching Bob uses is very easy to understand, and Scrimba’s interactive coding sessions make it 100x more powerful than any other course.
Free React beginner course by Kent C. Dodds on egghead.io

Kent is one of the best instructors out there when it comes to React, and it doesn’t matter if you’re a beginner or an intermediate, this course is a fun ride along the basics of React. You are going to enjoy this course for sure and you won’t regret doing it.
The correct way to create a React project, video by Theo

This video is a must for all beginners starting to learn React where Theo has explained why you should not use create-react-app to scaffold a React app and also talks about the better alternatives available for the same.

Articles / Blogs / Other Resources

Awesome list for React on GitHub

This is one of the best places to find out about different react based things and utilities according to your needs. I use it all the time to find out about libraries and other tools to make my React project building process easier and efficient.
React Beta Documentation

Trust me when I say it, the React beta docs are so good that you might actually not need to do any course for getting a good grasp over it. And there’s a reason to it - the React Beta Docs include interactive examples and along with visual diagrams. They also include a lot of challenges to test your understanding on the topics.
Kent’s Blogs on React.js

As I already mentioned before, Kent is one of the person I really admire and I feel like his blogs are a work of art, everything is explained so well as if he was sitting right beside you and explaining the thing, though the topics he writes about might sometimes tend to be advanced.
Overreacted.io by Dan Abramov

This is Dan Abramov’s personal blog, where he writes about React and everything in between. Dan is a core member at React and the creator of Redux. It’s a must read blog to get some in depth knowledge about React.
Blogs on Dev.to about React

Last but not least, the #React tagged blogs on Dev.to really make a wonderful resource for learning and building with React. There are literally tons of Blogs available there and tons more waiting to be written!

Conclusion

I think I shared quite enough resources for any beginner to start their React journey. But, please remember this - No matter how many resources you’re using or how many courses you’re learning from, all of it won’t amount to nothing if you don’t implement what you’re learning on a project. Please, please, please - build as much as possible because that’s the only way to get practical knowledge.

Now as I’m about to end this blog, I hope I was able to provide a valuable resource for the React and the Web Dev ecosystem. In case you find something wrong here or would like to suggest something, please just leave a comment below - I’ll make sure I get to it.

Thank a lot for reading if you made it till here, I really appreciate it ❤️

DevEmbed: Embed your dev.to profile anywhere using widgets - Linode Hacakathon

ashish — Sun, 19 Feb 2023 12:17:50 +0000

What I built

I built a dev.to profile widget generator so that people can showcase their dev profiles on their personal sites or any other site without having to go through all the API stuff themselves! You just need to head over to the site, enter your dev username and then just copy the script code, and put it inside your HTML file - That's it.
The embed includes your profile basic information along with your social links and your some of your latest blog posts as well!

Category Submission:

SaaS Superstars
Wacky Wildcard

App Link

App - https://devembed.asrvd.me
API hosted on Linode - https://deb.asrvd.me/api

Screenshots

Description

The project utilizes Linode VPS for backend API which provides the details needed for creating the widget using the dev.to API. The frontend made using Next.js creates the page and provides a simple script that embeds the page on your site using Iframes.

Link to Source Code

Main Repo Link - https://github.com/asrvd/devembed
Backend Repo Link - https://github.com/asrvd/devembed-backend

Permissive License

The app is licensed under the MIT License

Background

I have seen a lot of people adding their blog posts from dev.to to their own personal sites using the API and it's a time consuming process. I wanted to make the process easy as well as adding more details to it so that people can use the widget to share most of the stuff from their dev.to profile.

How I built it

For the backend, I used a simple python web server made using Flask and used Linode to host the Flask server. While doing so, I learnt a lot about linux commands and using a VPS, connecting with VPS and adding files to it and running your own web server using nginx and gunicorn.
For the frontend, I used Next.js and Tailwind CSS. I learnt a lot about utilizing Iframes to create embeddable widgets and also about creating scripts for widgets.

How SvelteKit makes type-safe data fetching easier and better!

ashish — Tue, 24 Jan 2023 15:47:11 +0000

Introduction

It’s been around a month since SvelteKit v1 was released and I fortunately got enough time to play around with it. In this blog post, I would be writing about the data fetching/loading ways in SvelteKit and how SvelteKit makes it easier along with providing type-safety all the way!

Creating a new SvelteKit app

Let’s start from the basics in case you know nothing about Svelte. I’ll be creating a new SvelteKit app first. You can use this command to do it as well (make sure you opt-in to use typescript when prompted) -

pnpm create svelte@latest // or npm create svelte@latest

Now that we have our project setup, let’s build a new page. SvelteKit uses a file-based routing just like other frameworks like Next.js. Head over to src/routes/+page.svelte in your app. This is the starting point of any SvelteKit app - the Index page. I won’t be creating any more routes as we don’t need them for this blog post. You can learn more about routing from SvelteKit docs. Start the dev server for the app and if you did everything correctly you should be seeing a page like this if you head over to localhost:5173.

Understanding data loading in SvelteKit

Now let’s start with the actual topic of this blog post - data fetching. If you read the SvelteKit docs for data fetching, it states that you need separate files for loading your data which can be created for every route - “A +page.sveltefile can have a sibling +page.js(or +page.ts) that exports a loadfunction, the return value of which is available to the page via the data prop”. Didn’t get it? don’t worry, let’s break it into parts.

So, first of all for every route that you want to load/fetch external data, you need a separate file. For example, for every +page.svelte in your routes where you need external data, you will need a corresponding +page.ts file for loading its data. The second part says something about a loadfunction. A load function is the function that you export from your +page.ts file returning the loaded data. SvelteKit autogenerates the return types for you which can be imported in your component file using $types module. I think it might be making some sense at this point, but let’s see this in action.

Do it yourself

Let’s create a new route todo in our app and create +page.svelte and +page.ts files inside it. I’ll be using dummyjson to mimic an external database.

// src/routes/todo/+page.ts

import type { PageLoad } from './$types';

type todo = {
    id: number;
    todo: string;
    completed: boolean;
    userId: number;
}; // todo type for better type safety

type t = {
    todos: todo[];
    total: number;
    skip: number;
    limit: number;
}; // actual json reponse type 

export const load: PageLoad = async () => {
    const r = await fetch('https://dummyjson.com/todos');
    const todos = ((await r.json()) as t).todos; // we only want to send the todo array as props
    return {
        props: {
            todos
        }
    };
};

<!-- src/routes/todo/+page.svelte -->

<script lang="ts">
    import type { PageData } from './$types';

    export let data: PageData;
</script>

<h1>Todo List</h1>
{#each data.props.todos as todo (todo.id)}
    <div>
        <p>{todo.todo}</p>
    </div>
{/each}

If you copy this code to your editor, you would be able to see some beautiful typescript autocompletion working in here. Let’s try to understand the code.

Understanding the code

First of all I created a +page.ts file inside my todo route and created a load function of the type PageLoad . I have fetched the json response from dummyjson inside the function and returned an array of todos from the response. The type t at the beginning is optional and you may not use it but the type todo is important if you want end-to-end type-safety (also it’s a good practice to keep all the types in a separate file and import them, instead of cluttering the main file).

SvelteKit then generates the types for the load function which could be used in our +page.svelte. In the src/routes/todo/+page.svelte , we first need to import the generated types and then export it as data . The next part is pretty easy if you already know Svelte syntax, we just need to iterated over the array of list and list them down.

If you do everything correctly and then head over to localhost:5173/todo, you would be able to see something like this -

Fetching data server side

So, our data fetching works perfectly fine. You could experiment a bit more with it if you want. But I’ll head over to the last subtopic of the blog which is loading data server side only. In many cases, you would not want your load function to not run client side (because it uses private environment variables, for example, or accesses a database). For such cases, SvelteKit provides another similar way for loading data.

To do so, instead of creating a +page.ts , you’ll just have to create a +page.server.ts and change the function type a bit like this -

// src/routes/todo/+page.server.ts

import type { PageServerLoad } from './$types';

type todo = {
    id: number;
    todo: string;
    completed: boolean;
    userId: number;
}; // todo type for better type safety

type t = {
    todos: todo[];
    total: number;
    skip: number;
    limit: number;
}; // actual json reponse type 

export const load: PageServerLoad = async () => {
    const r = await fetch('https://dummyjson.com/todos');
    const todos = ((await r.json()) as t).todos; // we only want to send the todo array as props
    return {
        props: {
            todos
        }
    };
};

Conclusion

You can learn more about the PageLoad and PageServerLoad types from the docs. If you are new to Svelte and SvelteKit, this might have been a bit harder to understand (maybe) or maybe even some of you wouldn’t like this way of loading data (why do we need to create separate files????). But, believe me, once you start using it, it just becomes natural as your app just gets more organized and I don’t think it’s that bad considering the type-safety you get along with it without using any third party library.

This is it for this blog post, I hope I was able to explain the topic properly. In case you don’t understand something or think something’s not right, feel free to send a comment my way!

Thanks a lot for reading!

I made a full-stack and type-safe personal site using the t3-stack (Next.js)!

ashish — Tue, 18 Oct 2022 18:22:28 +0000

Intro

First of all, thanks a lot for 1000+ followers on Dev.to, I really can’t believe we’ve come this far. I hadn’t even thought that I would make it this far. Thank you so much to all my followers and everyone who reads my content, love you all!

A portfolio site or a personal site is something that you have to build at some point for sure if you’re a web developer and every developer has their own unique way of doing it using unique frameworks. But when it comes to portfolio sites, most of them are just frontend focused with little or no backend but that was not the case for me.

Next.js is always my first choice for building web apps but I wanted a type-safe and full-stack solution for my site, so I decided to use the t3-stack! I’m a big fan of create-t3-app and I’m also a maintainer for it’s repo. This blog is not a tutorial but more like a walkthrough and breakthrough of my personal site.

The Initial Idea

The initial idea I had in my mind was a very minimal site with a minimal navbar that would look more like a sidebar, and the design would be somewhat inspired by leerob’s site. Apart from this, I also wanted my site to display some cool dynamic and real-time data like my Spotify data, my blog posts fetched from dev.to and a guestbook where people could leave messages for me!

NOTE: In case you don’t want to read till end, you can visit the site here and view the source code here. Don’t forget to give a star to the project if you liked it!

The Stack

As I already said, I used the t3-stack for my site which is basically made up of -

Next.js as a framework
Tailwind CSS for styling
Prisma as ORM
tRPC for type-safe APIs
NextAuth.js for authentication

And you’ll be surprised to know that I have used all of these pieces of amazing tech in my personal site!

The Home Page

The first thing that I always work on while building a web app is making it’s index or home page. I already mentioned above what I wanted my Nav Bar to look like and that my design was inspired by leerob.io. Now, it was time to implement it. After spending a lot of hours breaking and building things using Tailwind CSS, I finally made this index page which I love a lot -

The Home Page looks a bit different on mobile version -

The Static Pages

Now the next things I wanted to build were the static pages like /about, /now, and /links. The first one sounds pretty clear that it’s the About Me page. /now has info about what I’m doing these days and /links has all my links listed in one single page.

The first two ages are very heavy on content so I decided to use markdown and tailwind’s typography plugin for styling. I also used showdown to fetch the markdown and turn it into HTML. The code for the above can be found on the site’s GitHub repository.

The links page is generated using the map() function from an object containing info about all the links which looks something like this -

export type Link = {
  name: string;
  url: string;
  value: string;
  icon: IconType;
};
export type Links = Link[];

export const links: Links = [
  {
    name: "Discord",
    url: "https://discord.com/users/784363251940458516",
    value: "asheeshh#4872",
    icon: SiDiscord,
  },
  {
    name: "GitHub",
    url: "https://github.com/asrvd",
    value: "@asrvd",
    icon: SiGithub,
  },
    ...
]

Notice how everything is type-safe, that’s one of the best practices for web developers. Type Safety shouldn’t be optional. IconType is imported from the react-icons library.

The Spotify Stats Page

Here starts the good part, the Spotify stats page is made using fetching my Spotify data like - Currently Playing Song, Top Artists, and Top Tracks which are fetched from last.fm API. I have used SWR for data fetching which makes building type safe data fetching very easy.

I have 3 different API routes for each of them which filter out the response so that I only get what I’m using which also helps making it type-safe easier. The page updates in real time. Here is what the page looks like -

The GuestBook

This is my favorite part of my personal site and I really like the concept. The idea was taken from leerob’s guestbook. I wanted to build something similar where people can leave messages on the site for me and others.

This is where backend stuff comes in like database, tRPC, authentication, and Prisma. I used Planetscale’s free tier for my database. The whole backend is built using tRPC and Prisma, both of which take care of type-safety and have absolutely amazing DX.

Basically, whenever someone visits the guestbook page, they can see all the previously posted messages but they can’t post a message till they are signed in. NextAuth.js makes it very easy to implement auth in Next.js. Once you’re signed in you can send a text message of maximum 100 words which is validates using Zod.

Head over to the guestbook to send your own message here. Here is what the page looks like -

Cmd+K Interface

I also added a Cmd+K interface to my site to make mouse-less navigation easier. It’s made using kbar and styles using Tailwind CSS. Here is what it looks like -

Conclusion

Overall, I really like how the site finally looks and I’m planning to add more pages and cool features to the site too! In case you’re looking for the site it’s deployed using Vercel @ asrvd.me, and the source code is available on the GitHub Repo.

Thanks for reading, see you in the next blog!