π Supabase Launch Week 5 Hackathon:
- β Supabase Auth - User authentication.
- β Supabase Database - save the information of each user-created component.
βοΈ Socials | |
---|---|
Pablo Hdez | GitHub - Twitter |
Nacho Aldama | GitHub - Twitter |
David Huertas | GitHub - Twitter |
Juan Rojas | GitHub - Twitter |
- π Turborepo - The High-performance Build System for JavaScript & TypeScript Codebases.
- β‘οΈ Nextjs - The React Framework for Production.
- βοΈ React 18 - A JavaScript library for building user interfaces.
- π Typescript - A superset of JavaScript.
- π Supabase - Build in a weekend. Scale to millions.
- π Chakra UI for docs - Create accessible React apps with speed.
- π¨ TailwindCSS for library - Rapidly build modern websites without ever leaving your HTML.
- π React-Icons - A flexible icon family for everyone.
- β¬ CodeSandbox Sandpack - A component toolkit for creating live-running code editing experiences, using the power of CodeSandbox.
- Clone the repository:
git clone https://github.com/pheralb/superui.git
- Install dependencies:
cd superui
npm install
- Create a Supabase database with the following query:
create table components (
id bigint generated by default as identity primary key,
user_id uuid references auth.users not null,
title text check (char_length(title) > 3),
description text,
code text,
inserted_at timestamp with time zone default timezone('utc'::text, now()) not null
);
create table public.users (
id uuid not null primary key, -- UUID from auth.users
email text,
raw_user_meta_data text
);
π¨ trigger functions:
create or replace function public.handle_new_user()
returns trigger as $$
begin
insert into public.users (id, email)
values (new.id, new.email,new.raw_user_meta_data);
return new;
end;
$$ language plpgsql security definer;
create trigger on_auth_user_created
after insert on auth.users
for each row execute procedure public.handle_new_user();
- Copy Supabase URL & Anon api key from your database and create a .env file in the /app folder with the following content:
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
- Run the following command to start the development server:
npm run dev
And ready π₯³, go to localhost:3001.