mfranceschit
English Español Português
← Projetos

Cyber Web

Cyber Web

Sumário

O renovado cyber.cl é a porta de entrada para os eventos da Câmara de Comércio de Santiago, oferecendo aos usuários uma experiência de compra personalizada baseada em seus interesses e marcas favoritas. Os usuários acessaram esta conta unificada através do aplicativo móvel CyberApp.

O novo site foi pré-lançado durante o Travel Sale, onde causou uma forte primeira impressão, e foi totalmente lançado durante o evento Cyber Day em junho de 2024. Durante o lançamento, gerenciou com sucesso mais de 100.000 usuários simultâneos e integrou 1.000 novos usuários por minuto.

Como Arquiteto de Software, desempenhei um papel fundamental no design de uma solução web de alto tráfego. Selecionamos Next.js como framework e AWS para hospedagem, aproveitando SST para empacotar e implantar a solução em ambientes de desenvolvimento e produção. Minhas contribuições abrangeram tanto o desenvolvimento quanto a infraestrutura, incluindo:

Estruturei o projeto usando Next.js e estabeleci padrões de codificação com ESLint, Prettier e hooks de pré-commit.

Automatizei e configurei pipelines de implantação usando GitHub Actions integrado com SST para ambientes AWS.

Desenvolvi o módulo de autenticação usando next-auth, incluindo páginas de login, registro, perfil de usuário e interesses.

Integrei login social com Google.

Implementei o layout do site e o sistema de navegação.

Protegi as rotas de usuário usando middleware.

Construí páginas de onboarding para suportar fluxos de trabalho de criação de novos usuários.

Criei um editor de artigos para geração de conteúdo na página de Magazine.

Aproveitei React Server Components para melhorar o desempenho do sistema.

Realizei testes de estresse antes do lançamento e elaborei planos de contingência para lidar com altas cargas de usuários.

Tecnologias

  • MUI
  • Next.js
  • react-query
  • amplitude
  • React.js
  • react-lottie
  • react-markdown-editor
  • ESLint
  • formik
  • lottie-web
  • react-hook-form
  • react-toastify
  • TypeScript
  • zustand