[pt-BR🇧🇷] Quinta do Patinho: Construindo um Encurtador de Links com Dashboard ao Vivo

Key Concepts

Encurtador de links, dashboard, acompanhamento de cliques, origem das visitas, CSS puro, JavaScript, Alpine.js, Vibe Code, deploy, Netlify, Vercel, API, login, registro, backend, Supabase.

Criação de um Encurtador de Links com Dashboard Usando Copilot e Alpine.js

A streamer está criando um encurtador de links chamado "Links Abacate" com um dashboard para acompanhar o número de cliques e a origem das visitas. Ela está usando CSS puro e JavaScript, com a biblioteca Alpine.js para o front-end.

Estrutura do Projeto e Backend

O Copilot gerou a estrutura inicial do projeto, incluindo o backend, o index HTML e os arquivos de configuração. Ela expressa surpresa com a escolha do Copilot de usar Alpine.js em vez de React, considerando-o um framework mais leve e "refrescante".

Vibe Code e Deploy

A streamer enfatiza a abordagem "Vibe Code", onde ela codifica de forma descontraída e exploratória, aproveitando a assistência do Copilot para tirar projetos do papel. Ela usa o NPM para instalar as dependências e tenta rodar o projeto. Ela então faz o deploy do site usando Netlify e, posteriormente, Vercel devido a problemas com o Netlify.

Correção de Erros e Simplificação da Estrutura

Após o deploy, o encurtador de links não funciona corretamente, retornando HTML em vez de JSON. O Copilot sugere que a API não está sendo encontrada e propõe simplificar a estrutura e criar uma solução mais robusta para o Vercel. Ele cria um arquivo de configuração para o Vercel e atualiza o código JavaScript.

Testes e Refatoração

A streamer testa as alterações localmente e no site implantado. Ela observa que a nova estrutura quebra o carregamento dos arquivos estáticos e pede ao Copilot para corrigir o problema. Ela também refatora o dashboard, corrigindo um erro na exibição do número total de cliques.

Limpeza e Próximos Passos

Após o encurtador de links começar a funcionar corretamente, a streamer pede ao Copilot para excluir arquivos não utilizados ou repetidos. Ela então cria uma lista de tarefas para os próximos passos do projeto, incluindo a criação de uma página de login, registro de usuários, um backend com banco de dados (usando Supabase) e melhorias no dashboard.

GitHub e Repositório

O projeto é publicado no GitHub, com um README gerado pelo Copilot. A streamer expressa satisfação com a formatação e explicação do README.

Considerações Pessoais e Interações com o Chat

A streamer compartilha suas experiências pessoais, como sua aversão a abacate, sua preferência por trabalhar remotamente e suas reflexões sobre a vida. Ela interage com o chat, respondendo a perguntas e comentários.

Conclusão

A streamer demonstra o uso do Copilot para criar um encurtador de links com dashboard de forma rápida e exploratória. Ela enfrenta desafios e erros ao longo do processo, mas consegue resolvê-los com a ajuda do Copilot. Ela planeja continuar o projeto na próxima live, implementando as funcionalidades listadas na lista de tarefas.