Aluratube

Este repositório guarda a minha versão do AluraTube, desenvolvido na Imersão React 5.

🪧 Vitrine.Dev
✨ Nome	AluraTube - Imersão React 5
🏷️ Tecnologias	React, JavaScript, Next.js, Styled Components, Supabase
🚀 URL	https://imersaoreact5-xi.vercel.app/

• Marque esse projeto com uma estrela se você gostou

Onde está o Layout base do projeto?

• Link

Detalhes do projeto

O projeto possui as seguintes funcionalidades:

• Visualização de várias playlists criadas pelo usuário.
• Adição de vídeos com uma visualização do preview da Thumbnail.

Os diferenciais deste projeto são:

• Tema claro ou escuro pode ser armazenado em Local Storage, o que faz com que o tema se mantenha o mesmo após recarregar a página.
• O vídeo aparece imediatamente na página após cadastrar no formulário, sem a necessidade de recarregar a página.

Instruções

Crie uma tabela video no Supabase, seguindo a definição escrita no código abaixo:

create table
  public.video (
    id bigint generated by default as identity not null,
    created_at timestamp with time zone null default now(),
    title text null,
    url text null,
    thumb text null,
    playlist text null,
    constraint video_pkey primary key (id)
  ) tablespace pg_default;

Crie na raiz do projeto o arquivo .env com as variáveis do Supabase, seguindo o exemplo abaixo:

NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_KEY=YOUR_SUPABASE_ANON_KEY

É necessário criar um arquivo .env de acordo com o exemplo acima, para que o projeto funcione normalmente.

Executar o projeto

# Execute o projeto
npm install
npm run dev

# Abra o navegador em http://localhost:3000 para ver o resultado

Contribuidores

Pessoa que criou o projeto

|