superui

SUPABASE Lanzamiento de la Semana 5 Hackathon:

• ✅ Supabase Auth - Autenticación del usuario.
• ✅ Base de datos Supabase: guarde la información de cada componente creado por el usuario.

? Mantenedores:

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

? Video:

• https://streamable.com/j3lxtb.

? Paquetes:

• TURBOREPO: el sistema de compilación de alto rendimiento para bases de código JavaScript y TypeScript.
• ⚡️ Nextjs: el marco React para la producción.
• ⚒️ React 18 - Una biblioteca JavaScript para construir interfaces de usuario.
• ? TypeScript: un superconjunto de JavaScript.
• Supabase - Construye en un fin de semana. Escala a millones.
• ? Chakra UI para DOCS: cree aplicaciones reaccionadas accesibles con velocidad.
• ? Tailwindcss para la biblioteca: construya rápidamente sitios web modernos sin dejar su HTML.
• ? React -icons: una familia de iconos flexible para todos.
• ⬛ Codesandbox Sandpack: un conjunto de herramientas de componentes para crear experiencias de edición de código en vivo, utilizando el poder de Codesandbox.

Empezando:

1. Clon el repositorio:

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

2. Instalar dependencias:

 cd superui
npm install

3. Cree una base de datos Supabase con la siguiente consulta:

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

? Funciones de activación:

Activar la función para agregar usuarios cuando se registre por primera vez:

 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. Copie la clave de API de URL y anon de Supabase desde su base de datos y cree un archivo .env en la carpeta /App con el siguiente contenido:

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=

5. Ejecute el siguiente comando para iniciar el servidor de desarrollo:

npm run dev

¿Y listo?, Ir a Localhost: 3001.

? Licencia:

• Licencia MIT.