Meus conhecimentos como programador Front-End
React
- Função e Classe: Explica os dois tipos de componentes.
- Propriedades (props): Passagem de dados de pai para filho.
- Ciclo de Vida - Métodos de ciclo de vida do componente.
- Renderização Condicional - Renderização de componentes baseada em condições.
- Composição vs. Herança - Composição combina componentes simples - herança usa classes base para estender funcionalidades.
- useState: Gerencia o estado interno de um componente funcional.
- useEffect: Executa efeitos colaterais após a renderização do componente.
- useContext: Acessa o valor de um contexto React sem precisar de `props`.
- Custom Hooks: Hooks personalizados para reutilizar lógica de componentes.
- useMemo: Memoriza valores calculados para evitar recomputações desnecessárias, melhorando a performance.
- useCallback: Memoriza funções para evitar re-criações desnecessárias.
- useRef: Permite a criação de referências mutáveis que persistem entre renderizações.
- useMutation: Parte da biblioteca react-query e é usado para lidar com operações que alteram dados
- Props: Dados passados de pai para filho (imutáveis)
- Local vs. Global State: Estado local gerenciado dentro do componente vs. estado global gerenciado por bibliotecas como Redux ou Zustand
- Imutabilidade: Prática de não modificar diretamente os objetos de estado, mas criar novos
- React Context: Compartilhamento de estado entre componentes sem prop drilling
- Zustand: Gerenciamento de estado
- Parâmetros de URL: Extração e uso de parâmetros da URL
- Lazy loading de rotas: Carregamento sob demanda de componentes de rota para otimizar o desempenho
- Contexto de roteamento: Utilização do contexto do roteador para acessar informações de roteamento em qualquer componente
- Gerenciamento de formulários: Controle do estado e lógica dos formulários
- Zod para validação: Biblioteca para validação de esquemas, tipos de dados e controle de erros
- Axios: Biblioteca popular para fazer requisições HTTP, com suporte a interceptadores e configuração fácil.
- React Query - Biblioteca para gerenciamento e sincronização de dados com suporte a caching, background updates e query invalidation.
- CSS-in-JS Styled-components: Biblioteca que permite escrever CSS dentro de arquivos JavaScript/TypeScript
- Framework CSS TailwindCSS: Framework utilitário para estilização rápida e responsiva
- CSS Modules: Estilização modular onde cada componente tem seu próprio arquivo CSS, evitando conflitos de nomes
- SCSS/Sass: Pré-processador CSS que adiciona funcionalidades como variáveis e aninhamento
- PostCSS: Ferramenta para transformar CSS com plugins, como autoprefixer e minificação
- Entendimento de como fazer build e deploy de aplicações React com Nextjs
- Componentes Reutilizáveis: Modularidade e reutilização de componentes
- Divisão de Responsabilidades: Single Responsibility Principle (SRP)
- Testes: Escrevo testes End-2-End e unitários com Vitest, Cypress e Playwright
- Consistência de Código: Manter um padrão de codificação consistente através do uso de linters, formatação automática (como Prettier) e convenções de codificação.
- Acessibilidade: Garantir que os componentes e aplicações sejam acessíveis para todos os usuários.
- SOLID: Conjunto de princípios para design de software que promove a criação de sistemas modulares e de fácil manutenção. Inclui Princípio da Responsabilidade Única, Princípio da Abstração, e outros.
- DDD (Domain-Driven Design): Abordagem de design de software focada na modelagem do domínio de negócio e na criação de uma linguagem comum entre desenvolvedores e especialistas do domínio.
- Clean Architecture: Estrutura arquitetural que enfatiza a separação de preocupações e a independência de frameworks, permitindo que o código seja mais flexível e fácil de manter.
- Scrum: Metodologia ágil que utiliza sprints e reuniões diárias para promover a entrega incremental e contínua de software, facilitando a adaptação rápida às mudanças e a colaboração entre equipes.
- JavaScript: Domínio da linguagem de programação essencial para desenvolvimento web, incluindo ES6+.
- TypeScript: Experiência com o superset de JavaScript que adiciona tipagem estática, melhorando a robustez e manutenção do código.
- Assíncrono: Utilização de Promises, Async/Await e técnicas de manipulação de código assíncrono.
- Padrões de Projeto: Aplicação de padrões de design em JavaScript para criar código modular e reutilizável.
- Manipulação do DOM: Uso eficiente de métodos para interagir e manipular o Document Object Model.
- Event Loop: Compreensão do funcionamento do loop de eventos no JavaScript, incluindo a execução de tarefas assíncronas.
- Hoisting: Conhecimento sobre elevação de variáveis e funções e seu impacto no código.
- Module System: Uso de módulos ES6 (import/export) para organizar e estruturar o código.
- Type Inference: Aproveitamento da inferência de tipos do TypeScript para reduzir a necessidade de anotações explícitas.
- Estrutura Semântica: Uso de elementos semânticos como header, footer, article, e section para melhorar a acessibilidade e SEO.
- Formulários: Criação e validação de formulários utilizando elementos como input, select, textarea, e atributos de validação.
- Atributos Globais: Uso de atributos globais como class, id, data-* para identificar e manipular elementos.
- Tabelas: Estruturação de dados tabulares utilizando table, tr, td, th, e thead.
- Imagens e Mídia: Inclusão de imagens, vídeos e áudio usando img, video, e audio com as melhores práticas de acessibilidade.
- Links e Navegação: Criação de links e menus de navegação utilizando a e elementos de navegação.
- Meta Tags: Uso de meta tags para definir metadados, incluindo responsividade, SEO e informações de página.
- Layout Responsivo: Uso de media queries e técnicas de design responsivo para garantir que as páginas funcionem bem em todos os dispositivos.
- SEO: Aplicação de técnicas de SEO on-page para melhorar a visibilidade nos motores de busca.
- Integridade e Segurança: Uso de atributos como rel="noopener noreferrer" e outras práticas para melhorar a segurança das aplicações web.
- Next.js: Framework para renderização do lado do servidor e geração de sites estáticos
- Experiência com ferramentas como ESLint, Prettier.
- familiaridade com a metodologia ágil Scrum Baixar portfólio SCRUM
- Svelte 5: Framework reativo moderno com foco em performance e simplicidade, utilizando runes para gerenciamento de estado reativo.
- SvelteKit: Framework full-stack baseado em Svelte, com suporte a SSR (Server-Side Rendering), roteamento baseado em arquivos e APIs integradas.
- Svelte Runes: Sistema de runes ($state, $derived, $effect) para gerenciamento reativo de estado, substituindo o sistema de reatividade anterior.
- Server Load Functions: Experiência com funções de carregamento no servidor (+page.server.ts, +layout.server.ts) para buscar dados e realizar operações server-side.
- Form Actions: Implementação de ações de formulário server-side para processamento seguro de dados.
- Hooks Server: Trabalho com hooks.server.ts para interceptação de requisições, identificação de marketplace multi-tenant e injeção de contexto.
- Componentes Svelte: Desenvolvimento de componentes reutilizáveis com props tipadas, slots e eventos customizados.
- Playwright: Experiência profissional com testes end-to-end (E2E) em aplicações SvelteKit e Next.js, cobrindo fluxos críticos como checkout, autenticação e navegação.
- Testes E2E: Criação e manutenção de testes automatizados com ambiente isolado, garantindo confiabilidade das entregas em produção.
- Vitest: Framework de testes unitários para componentes e funções, com suporte a TypeScript e cobertura de código.
- MSW (Mock Service Worker): Uso de MSW para mockar requisições HTTP em testes, permitindo testes isolados e determinísticos.
- Testes de Integração: Experiência em testar integrações entre frontend e backend, validando fluxos completos de dados.
- Arquitetura Multi-Tenant: Experiência profissional trabalhando em plataforma de e-commerce multi-tenant, onde cada marketplace possui seu próprio domínio e configurações.
- Identificação por Domínio: Implementação de lógica para identificar marketplace através do hostname, injetando contexto em todas as requisições.
- Isolamento de Dados: Garantia de isolamento de dados entre diferentes tenants, sempre filtrando queries por marketplace_id.
- Configurações Dinâmicas: Trabalho com configurações específicas por tenant, como temas, logos e funcionalidades customizadas.
- Performance Multi-Tenant: Otimização de queries e cache considerando o contexto multi-tenant, garantindo performance mesmo com múltiplos marketplaces.