TripleTen — Around the U.S.
visualizar projeto: https://rafaguanciale.github.io/web_project_around_pt/
Este projeto consiste na evolução de uma página estática para uma aplicação totalmente dinâmica, utilizando JavaScript moderno e integração com API.
A aplicação permite ao usuário:
- Criar novos cards
- Curtir e descurtir cards
- Excluir cards com confirmação
- Visualizar imagens em destaque
- Editar informações de perfil
- Atualizar avatar
Todos os dados são persistidos via API, garantindo que as alterações permaneçam mesmo após recarregar a página.
Tecnologias Utilizadas
- HTML5
- CSS3
- JavaScript (ES6+)
- Programação Orientada a Objetos (POO)
- API REST
Principais Funcionalidades e Soluções Técnicas
- Cards dinâmicos
- Criados a partir de template HTML
- Renderizados via classe Section
- Dados carregadores diretamente da API
- Sistema de Likes
- Integração com API para curtir/descurtir
- Estado do like sincronizado com o servidor
- Atualização visual baseada no estado real
- Exclusão com confirmação
- Popup de confirmação antes de deletar
- Remoção do card no servidor e no DOM
- Evita exclusões acidentais
- Perfil do usuário
- Edição de nome e descrição
- Atualização de avatar
- Dados carregados e salvos via API
- Visualização de imagem
- Clique no card abre popup com imagem ampliada
- Reutilização de componente via classe
- Formulários com validação
- Validação em tempo real
- Controle de estado dos botões
- Feedback visual para o usuário
Aprendizados Pessoais
Este projeto consolidou conceitos fundamentais e mais avançados de desenvolvimento front-end:
- Organização de código com Programação Orientada a Objetos
- Separação de responsabilidades (SRP)
- Integração com API e tratamento de Promises
- Manipulação eficiente do DOM
- Controle de estado da interface (UI vs API)
- Reutilização de componentes
- Estruturação de projetos escaláveis
Melhorias Futuras
- Desabilitar botões durante requisições (evitar múltiplos cliques)
- Implementar loading states nos formulários
- Adicionar contador de likes
- Melhorar acessibilidade (a11y)
- Animações de transição para popups
- Refatoração para estado mais centralizado