Giga Stack ✨

The most Twitter influenced stack you've ever seen
DashboardGitHub

Features

Inspired by T3 stack and Shadcn Taxonomy project, I created this example of experimental edge stack full of sweet and fancy features for you to play with. Shout out to a bunch of open source solutions on the GitHub which I combined here.

Next.js

Next.js 13 with App Directory, edge runtime. React server components

tRPC

End-to-end typesafe APIs. Best DX for writing full-stack with Next.js (and more)

Clerk (Auth)

User Management, authentication, very nice API, security

Drizzle ORM

"If you know SQL, you know Drizzle ORM", TypeScript, db push with drizzle-kit

PlanetScale

MySQL, branching, JS Serverless Driver

Shadcn/ui

UI components built using Radix UI and styled with Tailwind CSS.

Fetching

In this implementation you have 2 API clients. One for RSC and one for Client components. Syntax for both are the same, with all typescript hinting features.

To make a RSC api call:


  import { api } from "~/lib/api/server";
  
  export default async function ServerComponent() {
    const data = await api.route.stuff.fetch();
  }
Example (watch the code):

Hello Test RSC TRPC Call

To make a Client api call:


  "use client";

  import { api } from "~/lib/api/client";
  
  export default function ClientComponent() {
    const { data, isLoading } = await api.route.stuff.useQuery();
  }
Example (watch the code):

Loading...

Mutation:

The idea is simple - mutate on client and refresh the route on success


  const router = useRouter();

  const { mutate, isLoading } = api.route.stuff.useMutation({
    onSuccess() {
      router.refresh();
    },
  });

Play with demo dashboard or
see project code on GitHub

DashboardGitHub