Imersão React no desenvolvimento de projeto baseado no YouTube.
Tecnologias | Projeto | Layout | Instalação | Funcionalidades | Licença
Esse projeto foi desenvolvido com as seguintes tecnologias:
Projeto usando a framwork React para criação criação de um site siumlado o YouTube, utilizando de ferramentas como Supabase como banco de dados e o style-components para estilização das páginas javascript.
Você pode visualizar o layout do projeto através DESSE LINK. É necessário ter conta no Figma para acessá-lo.
O arquivo package.json especifica as dependências em suas respectivas versões, para instalar basta ter o NodeJS instalado ou o NPM e executar o seguinte comando na raiz do projeto:
npm install
Após a instalação de todas as depêndências execute o seguinte comando para iniciar o projeto:
npm run dev
Para preparar o banco de dados acesse o site da Supabase e crie uma conta, indico que utilize sua conta do github.
Após será necessário criar uma tabela Video, contendo as colunas: id, created_at,
titulo, url, thumb e playlist.
Lembrar de desativar a opção "Enable Row Level Security (RLS)" e ativar a opção "Enable Realtime":
Por fim save!
Agora configure as credências no projeto nas páginas: src/Components/RegisterVideo/index.js e no src/services/videoService.js:
Alterando as seguintes variáveis:
-
Basicamente o site apresenta uma lista de playlists recebida a partir dos dados no supabase que age como o banco de dados da aplicação porém de forma online;
-
Possui um mecanismo de pesquisa funcional;
-
Na parte de estilização temos a opção de tema Light e Dark;
-
E a função de cadastro de novos vídeos com possibilidade para três tipos diferentes de playlists.
Esse projeto está sob a licença MIT.
Projeto construido durante a Imersão Alura