What is ChatterBox?

This is not a real application. It's just an experiment to learn more about Next 13 new features.

What's included?

Next.js features

Loading UI

Next.js 13 introduced a new file convention, loading.js, to help you create meaningful Loading UI with React Suspense. With this convention, you can show an instant loading state from the server while the content of a route segment loads, the new content is automatically swapped in once rendering is complete.

Server components

React Server Components (RSC) allow developers to better leverage server infrastructure. For example, large dependencies that previously would impact the JavaScript bundle size on the client can instead remain entirely on the server, leading to improved performance.

Cache

Per-request caching allows you to cache and deduplicate requests on a per-request basis.

Middleware

Next.js now uses the Rust-based compiler SWC to compile JavaScript/TypeScript. This new compiler is up to 17x faster than Babel when compiling individual files and up to 5x faster Fast Refresh.

Authentication

NextAuth.js

NextAuth.js is a complete open-source authentication solution for Next.js applications.

Style & Components

TailwindCSS

Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file. It's fast, flexible, and reliable — with zero-runtime.

Class Variance Authority

CSS-in-TS libraries such as Stitches and Vanilla Extract are fantastic options for building type-safe UI components; taking away all the worries of class names and StyleSheet composition.

Tailwind Merge

Utility function to efficiently merge Tailwind CSS classes in JS without style conflicts.

Radix UI

An open-source UI component library for building high-quality, accessible design systems and web apps.

Form & Validation

React Hook Form

Performant, flexible and extensible forms with easy-to-use validation.

Zod

Zod is a TypeScript-first schema declaration and validation library. I'm using the term "schema" to broadly refer to any data type, from a simple string to a complex nested object.

Database & ORM

MySQL

Prisma

Prisma unlocks a new level of developer experience when working with databases thanks to its intuitive data model, automated migrations, type-safety & auto-completion.

Deploy & Production

Planetscale

PlanetScale is a MySQL-compatible serverless database that brings you scale, performance, and reliability — without sacrificing developer experience.

Vercel

Vercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration.