Gabriel Toledo

Desenvolvedor Front-End Atuação com

Sobre Gabriel Toledo

Sou um profissional desenvolvedor de sites, aplicações e app, plenamente realizado na área.

Desenvolvedor Web há 8 anos, sendo mais de 4 anos com ReactJS. Nesse tempo aprendi que não basta ser excelente na codificação, também é necessário ser alguém que possa compartilhar conhecimento com a equipe, pois crescer em conjunto é a forma mais eficiente de melhorar a capacidade de um projeto, tornando a entrega contínua uma realidade para qualquer equipe.

Acesso ao CV

Projetos

Os projetos abaixo são exemplos de melhorias ou novidades tecnológicas que pude levar para as empresas que trabalhei.

Intranet PUC-Campinas

Desenvolvimento de uma nova interface para o sistema web interno, uma plataforma robusta que contém todos os microsserviços utilizados por docentes e funcionários

Bootstrap 4 CSS

Javascript

jQuery

ASP.Net

Microsserviços

about-image
about-image

Problema a se resolver

Plataforma anteriormente desenvolvida em 2008, sem acessibilidade, navegação complicada e travamento frequente no carregamento.

Minha atuação

Desenvolvi toda a interface, os serviços são carregados dentro da interface somente com a interação do usuário.

Benefícios da implementação

Organização na plataforma, ferramenta para criação de assinatura de e-mail, publicação de comunicados (CRUD de posts), o modo escuro melhorou o trabalho de colaboradores que passavam suas noites nesse sistema.

App dos alunos PUC-Campinas

Desenvolvimento do novo App dos Alunos PUC-Campinas.

React Native

Expo

Typescript

Styled-Components

API Rest

Maps

Push Notification

Game

Acessar link do projeto
about-imageabout-imageabout-imageabout-imageabout-imageabout-image
about-imageabout-image

Problema a se resolver

O app anterior havia sido desenvolvido em 2014 e já não estava compatível com os novos OS.

Minha atuação

Responsável por todo desenvolvimento com React, trabalhei junto aos desenvolvedores back-end, que me forneciam APIs, entre outros recursos do sistema interno.

Benefícios da implementação

A adesão ao app foi enorme, passou a ser um diferencial durante a pandemia. O app conta com consulta de notas, disciplinas, notificações push, acesso ao portal, biometria, geolocalização para indicar as salas de aula do aluno, modo escuro e um game.

Portal de notícias Konkero

Migração do portal de notícias financeiras 'Konkero', de Wordpress para um front-end em NextJS.

NextJS

ReactJS

Typescript

Apollo

GraphQL

Wordpress

SASS

AMP

Acessar link do projeto
about-image
about-image

Problema a se resolver

Era um site Wordpress como back-end e um front com PHP separado do WP, todas as páginas criadas eram adicionadas em seu .htaccess, então estava inviável continuar com o projeto desta forma.

Minha atuação

Trabalhei nesse projeto desde a criação dos protótipos até a entrega final, onde criei componentes ReactJS, paginas server side, paginas estáticas e queries do GraphQL.

Benefícios da implementação

Esse site foi comprado pela FinanZero para aumentar o peso da marca com fluxo orgânico. Logo após a implementação, o ranqueamento e os acessos melhoraram consideravelmente, com isso, a FinanZero também se beneficiou.

Blog FinanZero

Migração do blog WordPress da FinanZero para NextJS. Criado template AMP no NextJS, desenvolvido um revalidador de cache no CloudFront/NextJS, para atualizar o cache após a publicação de um novo post no WordPress, implementação de um interpretador de blocos Gutenberg para componentes React.

NextJS

ReactJS

Typescript

Apollo

GraphQL

Wordpress

SASS

AMP

Acessar link do projeto
about-image
about-image

Problema a se resolver

O blog da FinanZero dependia do Wordpress para seu carregamento, com isso, o SEO e performance estavam sendo penalizados.

Minha atuação

Criação de componentes ReactJS, paginas server side, queries GraphQL e Sintetizador de voz para a leitura dos textos, como forma de acessibilidade.

Benefícios da implementação

Aumento no ranqueamento dos posts, maior acesso ao blog pelo público alvo e a possibilidade de publicação de Stories

Plataforma FinanZero

Atuação com a plataforma de marketplace de empréstimos, desenvolvendo mecanismos dinâmicos, estruturas de metadados, back for front, formulários, entre outros. Ambiente contendo projetos React Hooks e React Class Components, NodeJS e GoLang

ReactJS

Redux

Stylus / SASS

Javascript

PWA

Webpack

Metadados

API Rest

Acessar link do projeto
about-imageabout-imageabout-imageabout-image
about-imageabout-imageabout-imageabout-image

Minha atuação

Desenvolvimento de features correspondentes as novas regras de negócios trazidas pelo Product Owner. O time era responsável por 5 projetos

O que trouxe de novo?

Desenvolvimento de um Service Worker para gerenciamento de cache e atualização imediata dos scripts do SPA, no browser do usuário, a cada novo release ou hotfix da aplicação

Testes técnicos

Projetos criados como etapas técnicas em processos seletivos

Plataforma de filmes com MicroFrontend

Aplicação ReactJS para o teste da Kenlo. Representa um site com listagem de filmes de uma API publica. Criado com microfrontend baseado em Webpack, Module Federation

Webpack

Module Federation

Javascript

Typescript

Axios

SASS

Acessar link do projeto
about-image
about-image

Desafio

Criar uma aplicação com estilo livre usando Micro-Frontend usando React mais algum framework de sua escolha, onde a parte superior deve ser um menu e a parte inferior o corpo deve consumir uma a API de sua escolha. Desenvolver 1 interface com 2 projetos, utilizar o module federation do webpack

Estrutura

O projeto header-app consiste em uma aplicação react somente com o menu, na configuração do Webpack a aplicação é externalizada em http://localhost:3001/remoteEntry.js. No projeto kenlo-test-movies, onde contém o container da aplicação (sem o menu), é feita a captura da aplicação remota.

Teste técnico: Transfeera

O objetivo era transformar o design sugerido, em um sistema funcional na web, integrando-o com a biblioteca JSON Server junto com o JSON fornecido.

Custom Hooks

Antd (Ant Design)

Javascript

Typescript

Axios

SASS

Cypress

Metadados

about-imageabout-image
about-imageabout-image

Desafio

Simular um back-end para a aplicação. O sistema devia incluir funcionalidades de listagem com filtros, inclusão, edição e remoção de Favorecidos de pagamento

Estrutura

Utilização de metadados para construção dos fields e inputs. Os componentes foram criados em nível de micro-componentes para que as variações pudessem ser aplicadas, sem impedir a reutilização de cada componente.