Superui

💚 Supabase Launch Week 5 Hackathon:

• ✅ Supabase Auth - User authentication.
• ✅ Supabase Database - save the information of each user-created component.

💖 Maintainers:

📹 Video:

• https://streamable.com/j3lxtb.

📦 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

2. Install dependencies:

cd superui
npm install

3. 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
);

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();

4. 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=

5. Run the following command to start the development server:

npm run dev

And ready 🥳, go to localhost:3001.

🔑 License:

• MIT License.