superui

Supabase Launch Woche 5 Hackathon:

• ✅ Supabase Auth - Benutzerauthentifizierung.
• ✅ Supabase -Datenbank - Speichern Sie die Informationen der einzelnen vom Benutzer erstellten Komponente.

? Betreuer:

	✌️ SOZIALEN
Pablo Hdez	Github - Twitter
Nacho Aldama	Github - Twitter
David Huertas	Github - Twitter
Juan Rojas	Github - Twitter

? Video:

• https://streamable.com/j3lxtb.

? Pakete:

• Turborepo - Das Hochleistungs -Build -System für JavaScript- und Typscript -Codebasen.
• ⚡️ NextJS - Das React -Rahmen für die Produktion.
• ⚒️ React 18 - Eine JavaScript -Bibliothek zum Erstellen von Benutzeroberflächen.
• ? TypeScript - Ein Superset von JavaScript.
• Supabase - Bauen Sie in einem Wochenende. Maßstab auf Millionen.
• ? Chakra UI für Dokumente - Erstellen Sie zugängliche React -Apps mit Geschwindigkeit.
• ? Tailwindcss für die Bibliothek - Erstellen Sie schnell moderne Websites, ohne jemals Ihre HTML zu verlassen.
• ? React -Icons - eine flexible Ikonenfamilie für alle.
• ⬛ CodesAndbox Sandpack - Ein Komponenten -Toolkit zum Erstellen von Live -Rennen -Code -Bearbeitungserlebnissen unter Verwendung der Leistung von Codesandbox.

Erste Schritte:

1. Klonen Sie das Repository:

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

2. Abhängigkeiten installieren:

 cd superui
npm install

3. Erstellen Sie eine Supabase -Datenbank mit der folgenden Abfrage:

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

? Triggerfunktionen:

Triggerfunktion zum Hinzufügen von Benutzern beim ersten Registrieren:

 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. Kopieren Sie die Supabase -URL & ANON -API -Taste aus Ihrer Datenbank und erstellen Sie eine .env -Datei im Ordner /App mit dem folgenden Inhalt:

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=

5. Führen Sie den folgenden Befehl aus, um den Entwicklungsserver zu starten:

npm run dev

Und bereit?, Geh zu Localhost: 3001.

? Lizenz:

• MIT -Lizenz.