superui

Supabase Launch Week 5 Hackathon :

• supabase Auth- 사용자 인증.
• supabase 데이터베이스 - 각 사용자가 만든 구성 요소의 정보를 저장합니다.

? 관리자 :

	✌️ 사회
파블로 hdez	Github- 트위터
나초 알다마	Github- 트위터
David Huertas	Github- 트위터
후안 로하스	Github- 트위터

? 동영상:

• https://streamable.com/j3lxtb.

? 패키지 :

• Turborepo- 자바 스크립트 및 타입 스크립트 코드베이스를위한 고성능 빌드 시스템.
• ⚡️ Nextjs- 생산을위한 반응 프레임 워크.
• ⚒️ React 18- 사용자 인터페이스 구축을위한 JavaScript 라이브러리.
• ? TypeScript- JavaScript의 슈퍼 세트.
• Supabase- 주말에 구축. 수백만으로 확장.
• ? 문서 용 차크라 UI- 속도로 액세스 가능한 반응 앱을 만듭니다.
• ? 도서관 용 테일 윈드 (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. 데이터베이스에서 supabase url & anon api 키를 복사하고 다음 내용이있는 /앱 폴더 에서 .env 파일을 만듭니다.

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=

5. 개발 서버를 시작하려면 다음 명령을 실행하십시오.

npm run dev

그리고 준비?, LocalHost : 3001로 이동하십시오.

? 특허:

• MIT 라이센스.