superui

Supabase Launch Week 5 Hackathon:

• ✅ Supabase Auth - Authentification de l'utilisateur.
• ✅ Base de données Supabase - Enregistrez les informations de chaque composant créé par l'utilisateur.

? RETENUSEURS:

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

? Vidéo:

• https://streamable.com/j3lxtb.

? Packages:

• TurborePo - Le système de construction haute performance pour les bases de code JavaScript et TypeScript.
• ⚡️ NextJS - Le cadre de réact pour la production.
• ⚒️ React 18 - Une bibliothèque JavaScript pour la construction d'interfaces utilisateur.
• ? TypeScript - Un sur-ensemble de JavaScript.
• Supabase - Construire en un week-end. Échelle à des millions.
• ? Chakra UI pour les documents - Créez des applications React accessibles avec la vitesse.
• ? TailwindCSS pour la bibliothèque - construire rapidement des sites Web modernes sans jamais quitter votre HTML.
• ? React-Icons - Une famille d'icônes flexible pour tout le monde.
• ⬛ codes et sandpack de boîte - une boîte à outils de composants pour créer des expériences d'édition de code en direct, en utilisant la puissance de codes et boîte.

Commencer:

1. Clone le référentiel:

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

2. Installez les dépendances:

 cd superui
npm install

3. Créez une base de données Supabase avec la requête suivante:

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

? Fonctions de déclenchement:

Déclencher la fonction pour ajouter des utilisateurs lors de l'inscription pour la première fois:

 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. Copiez la touche API URL et Anon Supabase à partir de votre base de données et créez un fichier .env dans le dossier / app avec le contenu suivant:

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=

5. Exécutez la commande suivante pour démarrer le serveur de développement:

npm run dev

Et prêt?, Aller à LocalHost: 3001.

? Licence:

• Licence MIT.