Projeto Web Desenvolvidor em Nextjs, simulando o sistema de vendas do McDonald's

Um sistema para agendamento de serviços de barbearias.

Criação de um Website portfolio

O site tem como objetivo facilitar a compra de determinado produto. O usuário tem a opção de selecionar o produto desejado e, ao adicioná-lo ao carrinho, poderá ver o valor da compra. Ao finalizar a compra, o usuário poderá adicionar informações como tipo de pagamento e se deseja receber o produto em casa ou retirá-lo. Caso opte por receber em casa, basta preencher as informações de entrega e confirmar a compra. As informações da compra serão então enviadas para o WhatsApp da empresa.

Uma aplicação moderna de lista de contatos construída com as últimas features do Angular, demonstrando boas práticas e padrões atuais de desenvolvimento.
Este projeto tem caráter educacional e faz parte do meu aprendizado em Angular.
Objetivo do Projeto
Demonstrar proficiência em desenvolvimento Angular moderno, implementando:
Standalone components (sem NgModules)
Zoneless change detection
Estratégias de cache e otimização
Formulários reativos complexos
Design system próprio
Features Implementadas
Sistema de Cache Inteligente
Cache no localStorage com expiração de 5 minutos
Atualização em background sem bloquear UX

Formulários com UX Avançada
Validação em tempo real
Feedback visual imediato
Radio buttons customizados para categorias

Busca Otimizada
Filtro por múltiplos campos
Debounce implícito
Performance com track by id

Design System Próprio
Cards com animações progressivas
Avatares com iniciais
Tags coloridas por categoria

UI/UX Design Princípios Aplicados
Feedback Imediato: Spinners, validações em tempo real
Consistência: Design system uniforme
Eficiência: Cache e otimizações
Acessibilidade: Semântica HTML, contraste adequado

Componentes UI
Cards com animações em cascade
Sistema de tags por categoria
Botões de ação com ícones
Formulários com validação visual

Aprendizados Este projeto foi desenvolvido para explorar:
Angular sem Zone.js
Estratégias de cache real-world
Padrões de formulários complexos
Nova sintaxe de templates
Performance optimization
Dados: Foi utilizado a API mockAPI para realizar a integração e exibir os dados.