Um projeto web interativo demonstrando técnicas modernas de desenvolvimento web, design responsivo e programação orientada a objetos usando HTML, CSS e classes JavaScript ES6, com integração de API para persistência de dados.
Nota Importante
Este projeto ainda não possui um método de build completo. Para que as requisições à API funcionem corretamente, é necessário definir manualmente o token da API nolocalStorage
do navegador antes de interagir com o app.
// Obtenha o token do localStorage (defina manualmente uma vez ou via um script de configuração)
export const API_TOKEN = localStorage.getItem('api_token') || ''
export const API_BASE_URL = 'https://around-api.pt-br.tripleten-services.com/v1'
// Não esqueça de definir o API_TOKEN no console do navegador antes de usar o app
// cole no console do navegador:
localStorage.setItem('api_token', 'SEU_API_TOKEN')
// pressione ENTER
// Recarregue a página
- CSS Modular: Estilos organizados no diretório
blocks
(por exemplo,header.css
,popup.css
) - Design Responsivo: Media queries garantem uma experiência suave tanto em dispositivos desktop quanto móveis.
- JavaScript Orientado a Objetos: Classes ES6 modernas para melhor organização do código:
Card
: gerencia a criação e funcionalidade dos cartões.FormValidator
: administra a validação de formulários.Popup
e suas subclasses: controlam os diferentes tipos de janelas modais.Api
: gerencia todas as interações com o servidor.UserInfo
: controla os dados do usuário.Section
: lida com a renderização de elementos na página.
- Integração com API: Comunicação completa com o servidor para:
- Carregar informações do usuário
- Salvar alterações de perfil
- Carregar cartões iniciais
- Adicionar novos cartões
- Excluir cartões
- Curtir/descurtir cartões
- Atualizar foto do perfil
- Funcionalidades de Popup:
- Abrir e fechar editor de perfil
- Criador de cartões
- Visualizador de imagens
- Validação de Formulários: Validação em tempo real para todos os formulários com feedback visual.
- Elementos Interativos: Adicionar cartões, curtir cartões, remover cartões e visualizar imagens ampliadas.
- Feedback ao Usuário: Indicadores de carregamento durante operações no servidor.
- Qualidade de Código: Configurado com Prettier e EditorConfig para estilo consistente.
- Estrutura principal definida em
index.html
- Estilos globais:
index.css
- Estilos de componentes: diretório
blocks
- Estilos de terceiros: diretório
vendor
- Ponto de entrada:
index.js
(coordena os componentes) - Classes ES6: organizadas em arquivos separados dentro de
components
- Configuração da API:
config.js
- Imagens: diretório
images
- Fontes:
fonts.css
- Clone o repositório.
- Abra usando um servidor local (por exemplo, a extensão Live Server do VS Code) para garantir que os módulos funcionem como esperado.
- Interaja com a página para adicionar cartões, editar o perfil e visualizar imagens.
- HTML5 & CSS3
- JavaScript (Classes ES6, Módulos)
- Programação Orientada a Objetos
- Metodologia BEM
- Design Responsivo
- Integração com API RESTful
- Promessas e Requisições Assíncronas
Enio Borges