Skip to content

pheralb/superui

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸ’š Supabase Launch Week 5 Hackathon:

πŸ’– Maintainers:

✌️ Socials
Pablo Hdez GitHub - Twitter
Nacho Aldama GitHub - Twitter
David Huertas GitHub - Twitter
Juan Rojas GitHub - Twitter

πŸ“Ή Video:

πŸ“¦ Packages:

  • πŸš€ 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.

πŸš€ Getting Started:

  1. Clone the repository:
git clone https://github.com/pheralb/superui.git
  1. Install dependencies:
cd superui
npm install
  1. 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:

Trigger function to adding users when register for the first time:

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();
  1. 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=
  1. Run the following command to start the development server:
npm run dev

And ready πŸ₯³, go to localhost:3001.

πŸ”‘ License: