Programador Web
Me chamo Romeu e sou Programador Web. A sua visita aqui é sempre bem-vinda! Preparei esta página para compartilhar todos os meus conhecimentos em Programação Web, apresentarei tudo de maneira descontraída e agradável. Aproveite para explorar!
Atualmente, estou disponível para oportunidades de trabalho no modelo CLT e também para projetos como freelancer. Se você ou sua empresa está em busca de um desenvolvedor comprometido e apaixonado por tecnologia, entre em contato — será um prazer colaborar!
![[object Object]](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FreactLogo.f7801d4a.png&w=3840&q=75){kind=small}
![[object Object]](/_next/static/media/typeScriptLogo.8d6c1f4b.svg){kind=small}
![[object Object]](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FjavascriptLogo.571fc2f8.png&w=3840&q=75){kind=small}
![[object Object]](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FhtmlLogo.74db43ca.png&w=3840&q=75){kind=small}
![[object Object]](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FcssLogo.aeeb7342.png&w=3840&q=75){kind=small}
![[object Object]](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FtailwindcssLogo.a3a51636.png&w=3840&q=75){kind=small}
![[object Object]](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fnextjs.8457abf4.png&w=3840&q=75){kind=small}
![[object Object]](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FnodejsLogo.7d585fcc.png&w=3840&q=75){kind=small}
![[object Object]](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FpostgresqlLogo.bd06f3c5.png&w=3840&q=75){kind=small}
![[object Object]](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FmysqlLogo.90bc35f0.png&w=3840&q=75){kind=small}
![[object Object]](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FdrizzleLogo.b22db56b.png&w=3840&q=75){kind=small}
![[object Object]](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FprismaLogo.6c6118f2.png&w=3840&q=75){kind=small}
![[object Object]](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FexpressjsLogo.441645bd.png&w=3840&q=75){kind=small}
![[object Object]](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FfastifyLogo.e2e6eb82.png&w=3840&q=75){kind=small}
![[object Object]](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FgitLogo.b7fa0f4f.png&w=3840&q=75){kind=small}
Projetos pessoais
Nota: A API dos projetos a seguir estão hospedadas na plataforma Render (plano gratuito), o que significa que elas podem hibernar quando ficarem inativas. Nesse caso, o primeiro acesso após a hibernação pode demorar alguns minutos.
Acesse - Nossa Cidade
A Nossa Cidade foi pensando para ser uma plataforma digital que fornece informações úteis sobre cada ponto comercial da cidade mapeada, oferecendo diversos recursos para conectar clientes e comerciantes.
Muitas vezes, quando precisamos comprar algo, acabamos recorrendo direto aos apps de compras online — pela praticidade e rapidez. Mas e se o que você procura estiver disponível na sua própria cidade, por um preço justo e pronto para levar na hora? Será que vale mesmo a pena esperar dias por algo que poderia estar logo ali, do lado?
A Nossa Cidade é uma plataforma focada no comércio local, impulsionando as vendas da sua região e conectando comerciantes aos clientes próximos.
O que já desenvolvi na plataforma Nossa Cidade
- ✔API construída em NestJS, organizada em camadas (core, domain, infra, http, entities...), seguindo boas práticas de arquitetura inspiradas em DDD e SOLID.
Repositório no GitHub - ✔Banco de dados PostgreSQL integrado via Drizzle Kit, com schema modular e 31 tabelas bem organizadas. Baixar Estrura do banco de dados PDF
- ✔Sistema de autenticação seguro com hash de senhas e tokens JWT RS256 — assinatura assimétrica que aumenta a segurança, já que a chave privada nunca é exposta.
- ✔Upload de imagens usando o serviço UploadThing.
- ✔Sistema de e-mails utilizando Nodemailer para notificações, recuperação e redefinição de senha.
Front-end
- ✔Aplicação construída em Next.js com estilização via Tailwind CSS, garantindo performance, componentização e responsividade. Repositório no github
- ✔Estrutura de pastas bem organizada em
src, facilitando manutenção e escalabilidade do projeto:- 📁 actions
- 📁 app
- 📁 assets
- 📁 components
- 📁 constants
- 📁 context
- 📁 enums
- 📁 hooks
- 📁 lib
- 📁 providers
- 📁 schemas
- 📁 utils
- ✔Header do dashboard desenvolvido com alta complexidade e foco em usabilidade, servindo como ponto central de navegação.
- ✔Conjunto de páginas implementadas para diferentes fluxos:
Dashboard: painel principal com visão geral.
Prices: exibição de planos e preços.
Business Point: listagem de pontos comerciais e página de detalhes.
Register Business Point & Register Details: cadastro completo de pontos comerciais.
Save Image & Update: gerenciamento de imagens e atualizações.
Showcase: apresentação de conteúdos e destaques.
Mapa City: mapa interativo com geolocalização.
User: inclui My Business Points e Profile.
Auth: fluxo completo com Sign In, Sign Up,Confirm Email e Forgot Password. - ✔Controle de autenticação e preferências utilizando cookies e localStorage.
- ✔Uso de React Query (useQuery) para gerenciamento de requisições, oferecendo cache automático, sincronização em tempo reale melhor experiência do usuário em chamadas assíncronas.
- ✔Integração com ferramentas de mapa e localização:
Geolocator: obtenção precisa da localização do usuário.
MapLibre GL: renderização de mapas vetoriais de alta performance.
Leaflet: biblioteca leve para mapas interativos, ampliando a experiência de navegação.
Acesse - My Design System
Este é um Design System pessoal, criado com o objetivo de demonstrar minhas habilidades no desenvolvimento e documentação de bibliotecas de componentes utilizando React, Tailwind CSS e ferramentas modernas. O projeto não é destinado para uso em produção, mas está disponível para exploração e testes.
O Design System foi desenvolvido em formato de monorepo, o que facilita o gerenciamento de pacotes e dependências em um único repositório.
O intuito principal foi realizar o ciclo completo de criação de um Design System — desde a concepção visual no Figma até a implementação e publicação no npm. Por enquanto, o sistema conta com dois componentes base button e input.
Confira a documentação no NPM ou no Repositório
Design no Figma
O projeto conta com:
- 📦
Changesets: utilizado para versionamento semântico e geração automatizada de changelogs, garantindo maior controle e consistência nas publicações.
- ⚙️
Workflows do GitHub Actions: configurados para executar processos automáticos como testes, build e publicação de pacotes.
- 🚀
Deploy no npm: distribuição direta e automatizada do pacote, permitindo fácil instalação em outros projetos.
Acesse - Shopping Store
Shopping Store é uma plataforma de e-commerce especializada em celulares, onde coloquei em prática muitos dos meus conhecimentos. Na loja, você pode explorar uma variedade de modelos de celulares, adicionar seus favoritos ao carrinho e finalizar a compra.
É importante mencionar que algumas funcionalidades introduzidas no e-commerce ainda não foram exploradas em sua totalidade. Por exemplo, o sistema de notificação atualmente só envia alertas quando um comprador tenta realizar uma compra, mas não a finaliza, lembrando-o de concluir a transação. Ainda pretendo explorar mais, tanto este sistema de notificações quanto outras funcionalidades, expandindo-as para outras áreas do e-commerce.
Você pode acessar o Repositório para saber mais.
Sobre a API da Shopping Store
- ✔Desenvolvida em Node.js com Fastify, sem uso de frameworks completos, mas aplicando os princípios de DDD e SOLID para manter o projeto escalável e organizado.
Repositório no Github - ✔Uso de Redis para cache, otimizando a performance de respostas e aliviando a carga do banco de dados.
- ✔Sistema de autenticação seguro com hash de senhas e JWT para controle de sessões.
- ✔Integração com o Stripe como gateway de pagamento, para gerenciamento de cobranças e planos.
- ✔Sistema de notificação em tempo real utilizando WebSocket com a biblioteca Socket.io.
- ✔Banco de dados PostgreSQL com ORM Prisma, garantindo tipagem e queries seguras.
O projeto conta com:
- ⚙️
Workflows do GitHub Actions: configurados para executar processos automáticos como build, testes unitários e e2e.
- 🧪
Testes automatizados: cobertura de unitários e end-to-end (e2e) no backend com Vitest e Playwright. No frontend, os testes são feitos com Vitest e MSW para Mock.
Front-end
- ✔Aplicação construída em Next.js com estilização via Tailwind CSS, garantindo performance, componentização e responsividade.
Repositório no Github - ✔Gerenciamento eficiente de dados assíncronos com TanStack Query, otimizando requisições e cache.
- ✔Animações suaves e interativas com Framer Motion, elevando a experiência do usuário.
- ✔Persistência de sessões e preferências por meio de cookies, garantindo personalização.
- ✔Notificações elegantes com React Toastify, proporcionando feedback visual claro ao usuário.
- ✔Comunicação em tempo real utilizando Socket.IO Client, essencial para interações instantâneas.
- ✔Gerenciamento global de estado leve e performático com Zustand, aplicado ao carrinho de compras.
- ✔Testes robustos com Vitest, MSW e Playwright, cobrindo cenários unitários e de ponta a ponta (e2e).
