superui

Supabase Launch Week 5 Hackathon:

• ✅ Supabase auth - аутентификация пользователя.
• ✅ База данных Supabase - Сохраните информацию каждого созданного пользователем компонентом.

? Содействия:

	✌ социальные сети
Пабло Хдез	GitHub - Twitter
Начо Альдама	GitHub - Twitter
Дэвид Уэртас	GitHub - Twitter
Хуан Рохас	GitHub - Twitter

? Видео:

• https://streamable.com/j3lxtb.

? Пакеты:

• TurborePo - высокопроизводительная система сборки для JavaScript & TypeScript Codebases.
• ⚡ NextJS - Реактивная структура для производства.
• ⚒ React 18 - Библиотека JavaScript для создания пользовательских интерфейсов.
• ? TypeScript - суперсет JavaScript.
• Supabase - построить в выходные. Масштаб до миллионов.
• ? Чакра пользовательского интерфейса для документов - Создайте доступные приложения React с скоростью.
• ? Tailwindcss для библиотеки - быстро построить современные веб -сайты, не покидая свой HTML.
• ? React -Icons - гибкая семейство значков для всех.
• ⬛ CodeSandbox Sandpack - компонентный инструментарий для создания опыта редактирования кода в прямом эфире, используя мощность CodeSandbox.

Начиная:

1. Клонировать репозиторий:

git clone https://github.com/pheralb/superui.git

2. Установить зависимости:

 cd superui
npm install

3. Создайте базу данных Supabase со следующим запросом:

 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. Скопируйте ключ URL и API Supabase URL и Anon из вашей базы данных и создайте файл .env в папке /приложения со следующим контентом:

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=

5. Запустите следующую команду, чтобы запустить сервер разработки:

npm run dev

И готов?, Перейти в Localhost: 3001.

? Лицензия:

• MIT Лицензия.