johnmathews / chatterbox

Supabase starter kit

This starter configures Supabase Auth to use cookies, making the user's session available throughout the entire Next.js app - Client Components, Server Components, Route Handlers, Server Actions and Middleware.

Features · Demo · Deploy to Vercel · Clone and run locally · How to use · Feedback and issues

Features

• Next.js App router ready App Router
  • Client Components examples
  • React Server Components (RSCs) examples
  • Route Handlers examples
  • Server Actions examples
• supabase-js. Supabase's isomorphic JavaScript library.
• Supabase Auth using cookies, making the user's session available throughout the entire Next.js app, for both client and server.
• Styling with Tailwind CSS
• Optional deployment with Supabase Vercel Integration and Vercel deploy
  • Enviroment variables automatically assigned to Vercel project

Demo

You can view a fully working demo at demo-nextjs-with-supabase.com.

Deploy to Vercel

Vercel deployment will guide you through creating a Supabase account and project.

After installation of the Supabase integration, all relevant environment variables will be assigned to the project so the deployment is fully functioning.

The above will also clone the Starter kit to your GitHub, you can clone that locally and develop locally.

If you wish to just develop locally and not deploy to Vercel, follow the steps below.

Clone and run locally

1. You'll first need a Supabase project which can be made via the Supabase dashboard

2. Create a Next.js app using the Supabase Starter template npx command

   npx create-next-app -e with-supabase

3. Use cd to change into the app's directory

   cd name-of-new-app

4. Rename .env.local.example to .env.local and update the following:

   NEXT_PUBLIC_SUPABASE_URL=[INSERT SUPABASE PROJECT URL]
   NEXT_PUBLIC_SUPABASE_ANON_KEY=[INSERT SUPABASE PROJECT API ANON KEY]
   

   Both NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY can be found in your Supabase project's API settings

5. You can now run the Next.js local development server:

   npm run dev

   The starter kit should now be running on localhost:3000.

Check out the docs for Local Development to also run Supabase locally.

How to use

There are a variety of example files for you to copy and build your app with in the starter kit.

Create a Supabase client

Check out the /app/_examples folder for an example of creating a Supabase client in:

• Client Components
• Server Components
• Route Handlers
• Server Actions

Create todo table and seed with data (optional)

Navigate to your project's SQL Editor, click New query, paste the contents of the init.sql file and click RUN.

This will create a basic todos table, enable Row Level Security (RLS), and write RLS policies enabling select and insert actions for authenticated users.

To seed your todos table with some dummy data, run the contents of the seed.sql file.

Feedback and issues

Please file feedback and issues over on the Supabase GitHub org.

More Supabase examples

• Next.js Subscription Payments Starter
• Cookie-based Auth and the Next.js 13 App Router (free course)
• Supabase Auth and the Next.js App Router
• Next.js Auth Helpers Docs

External APIs

ChatGPT

Conversational text, and voice if its able to

Seamless

Facebook's multi-language model. Voice to Voice and voice to text

LanguageText API

Something to handle grammar and spelling in Dutch and other languages

Hosting Decisions

Host on vercel and integrate with Supabase for a backend

System Overview

sequenceDiagram
    participant Client as Client
    participant WebApp as Web App (Backend + Database)
    participant ConvAI as Conversational AI (External API)
    participant TransAI as Translation AI (External API)
    participant GrammarAPI as Grammar API (External API)
    
    Client->>WebApp: User logs in and starts a session. Chooses parameters. 
    ConvAI->>WebApp: AI asks user a question - text and voice
    WebApp->>Client: User read the question
    WebApp->>TransAI: Question is converted to speech
    Client->>WebApp: User speaks an answer
    WebApp->>TransAI: User's spoken answer is converted to text
    TransAI->>WebApp: Send text to WebApp
    TransAI->>GrammarAPI: Send text to GrammarAPI
    GrammarAPI->>WebApp: Send grammar corrections
    WebApp->>ConvAI:Send users response as text

Loading