Olá Mundo!

👨‍💻 Apenas um desenvolvedor front-end apaixonado por fazer coisas belas e úteis (ás vezes nem tanto).

🤔 Quem sou eu?

Tenho 19 anos, atualmente sou desenvolvedor de software, focado em front-end e mobile. Por gostar muito de compartilhar conhecimento, recorrentemente farei postagens aqui, relatando algo novo que aprendi ou que acho interessante. Além do desenvolvimento de software, gosto muito de jogar (infelizmente League of Legends na maior parte do tempo).

🔥 O que eu estou fazendo atualmente?

Atualmente estou trabalhando como desenvolvedor Front-end e Mobile em uma software house em São Paulo , Brasil. Eu desenvolvo projetos incríveis usando tecnologias maravilhosas, como ReactJS, ReactNative, Typescript, GraphQL e outras tecnologias deste ecossistema!

🤝 Como posso me conectar?

Linkedin, Github ou E-mail. Estou sempre aberto a novas ideias e colaborações (haters também são bem-vindos). Se você quiser entrar em contato comigo, sinta-se à vontade para me enviar um e-mail em 7henrique18@gmail.com.

HTML5

CSS3

Javascript

Typescript

ReactJS

Ignite • ReactJS

Desenvolvimento de interfaces web modernas e responsivas usando uma biblioteca modular e escalável.

  • Fundamentos:

    Aprendi sobre a estrutura base de uma aplicação React utilizando ferramentas como Webpack, Babel, Webpack Dev server, SASS, Source Maps, Fast Refresh e descobri conceitos importantes do React como componentes, propriedades, estados e hooks além de aplicar o TypeScript no projeto para adicionar tipagem estática à aplicação.

  • Primeira aplicação web:

    Construí uma aplicação front-end web completa utilizando conceitos e ferramentas importantes do ecossistema como Styled Components, MirageJS, Context API, hooks, Axios e muito mais.

  • Fundamentos do Next.js:

    Aprendi como o Next.js transforma a maneira de desenvolver aplicações front-end e descobri conceitos importantes como SSR e SSG.

  • Back-end no front-end:

    Como o front-end se transformou nos últimos anos com a possibilidade de termos funções back-end (serverless) executando em um ambiente front-end.

  • Front-end JAMStack:

    É muito comum o desenvolvimento de aplicações front-end que não estão conectadas a um único back-end hoje em dia, por isso, aqui entendi o conceito de JAMStack e como conectar o front-end com um CMS.

  • Construindo interfaces do futuro:

    Desenvolvi a interface de um painel administrativo contendo fluxo de autenticação, dashboard, listagem e cadastro usando Chakra UI no Next.js.

  • Data fetching e cache local:

    Utilizei React Query para melhorar a experiência de uso da aplicação criando uma camada de cache de dados entre o front-end e back-end.

  • Autenticação e autorização:

    Aprendi como criar um processo completo de autenticação, autorização e refresh token dentro do React com Next.js permitindo controlar o acesso à rotas e componentes tanto no client-side quando server-side.

  • Performando apps com ReactJS:

    Aprendi como garantir a performance de aplicações com React entendendo como funcionam os algoritmos internos da biblioteca e todo fluxo de renderização de componentes.

  • Testes unitários no React:

    Aprendi como criar testes automatizados de unidade dentro do React garantindo que os componentes e páginas continuem funcionando independente de novas manutenções. Tudo isso usando Jest e Testing Library.

  • Estratégias de deploy no ReactJS

    Conheci as principais estratégias de deploy de uma aplicação ReactJS com e sem Next.js utilizando serviços como Netlify e Vercel principalmente, mas também apresentando outras opções para projetos mais complexos.

E outros...

React Native

Ignite • Trilha React Native

Desenvolvimento de aplicações mobile modernas e reativas tanto para iOS quanto para Android de forma nativa.

  • Fundamentos:

    Aprendi sobre o ecossistema do desenvolvimento mobile com React Native, criar e compreender a estrutura de projetos com a CLI, além de conhecer os principais conceitos por volta da biblioteca como componentes, propriedades, estado, imutabilidade, hooks, estilização e utilização do TypeScript.

  • Expo e Styled Components:

    Tive meu primeiro contato com o Expo, um Framework que nos oferece um conjunto de ferramentas e serviços criados em torno de plataformas React Native que acelera o desenvolvimento, e também aprendi a utilizar o Styled Components para criar interfaces com o conceito de CSS-in-JS, ou seja, que permite escrever códigos CSS dentro do Javascript.

  • Formulários e Navegação:

    Utilizei o React Hooks Forms com a proposta de criar formulários flexíveis, com formas simples de fazer validação e sem renderizações desnecessárias.Além de aprender a criar a navegação entre telas mobile.

  • Async Storage:

    Aprendi a utilizar o Async Storage para armazenar dados no dispositivo do usuário, sendo uma ótima estratégia de armazenamento quando não há muitas regras e relacionamento envolvido, pois o sistema de armazenamento é simples e baseado em chave e valor (key-value), assíncrono e persistente.

  • Contextos e Autenticação

    Aprendi a utilizar Login Social com OAuth Authentication, uma estratégia incrível que permite utilizar os dados do usuário de uma conta já existente, como por exemplo, uma conta Google. A autenticação com Login Social trouxe conforto para o usuário que não precisa criar uma nova conta do zero e pode ir direto para o que realmente interessa que é utilizar o o App. Além de aprender a utilizar a Context API para ompartilhar dados com toda a a aplicação (ou parte dela).

  • Consumindo API:

    Integrei a aplicação React Native com uma API. Compreendi os métodos do protocolo HTTP, lidar com requisições e respostas realizadas a uma API, tudo isso utilizando a biblioteca Axios.

  • Animações:

    Elevei meus conhecimentos sobre o desenvolvimento de interfaces para o próximo nível conhecendo e aplicando na prática ferramentas e técnicas que estarão presentes nas sua aplicações no futuro aplicando boas práticas de UX e Animações.

  • Offline First:

    Implementei a estratégia de Offline First para que algumas funcionalidades da a aplicação funcione sem conexão com internet utilizando um banco de dados local mais robusto.

  • Testes no React Native:

    Testes automatizados é uma excelente estratégia para garantir que componentes e funcionalidades continuem funcionando independente de novas manutenções.

  • Performando Apps:

    Entendi como performar aplicações no React Native entendendo como funcionam os algoritmos internos da biblioteca e todo fluxo de renderização de componentes.

  • Publicação de Apps:

    Aprendi a enviar a aplicação para Android à Google Play Store e o app iOS para Apple Store para disponibilizarmos nossa aplicação para o mundo.

  • Fluxo de CI/CD:

    Busquei automatizar o processo de criação das próximas builds para as nossas aplicações assim que uma nova versão for enviada para o repositório. E para isso, implementei a estratégia de CI/CD, isto é, Continuous Integration e Continuous Delivery.

E outros...

GraphQL

howtographql • node-typescript-helix

GraphQL é a estrela em ascensão das tecnologias de back-end. É uma alternativa popular para REST como paradigma de design de API e está se tornando o novo padrão para expor os dados e a funcionalidade de um servidor web.

Neste tutorial, aprendi como construir um servidor GraphQL inteiramente do zero. Usando as seguintes tecnologias:

  • Node.js - Como mecanismo de execução para nosso servidor.
  • TypeScript - Uma linguagem de programação fortemente tipada que se baseia em JavaScript dando-lhe melhores ferramentas em qualquer escala.
  • fastify - Uma estrela em ascensão no ecossistema de servidores HTTP, muito rápido e eficiente.
  • graphql-js - Usamos a biblioteca principal do graphql como mecanismo de execução para nosso servidor.
  • graphql-helix - Coleção de funções utilitárias para construir seu próprio servidor HTTP GraphQL.
  • Prisma - Substitui os ORMs tradicionais. Usamos o cliente Prisma para acessar seu banco de dados dentro dos resolvers GraphQL.
  • GraphiQL - Uma “IDE GraphQL” que permite explorar interativamente a funcionalidade de uma API GraphQL enviando queries e mutations para ela. É um pouco semelhante ao Postman, que oferece funcionalidade comparável para APIs REST. Entre outras coisas:
    • Gera automaticamente documentação abrangente para todas as APIs disponíveis operações.
    • Fornece um editor onde você pode escrever queries, mutations e subscriptions, com preenchimento automático (!) e syntax highlighting.

E outros...

NodeJS

Construção de arquiteturas escaláveis e simples para a web utilizando uma linguagem flexível e popular

  • Fundamentos:

    Aprendi conceitos do Node.js, como é o seu funcionamento e os motivos pelo qual ele foi criado. Estudei sobre os conceitos e regras por trás de uma API Rest, os métodos HTTPs, os principais códigos de retornos e tipos de parâmetros de uma requisição.

  • Primeiro projeto:

    Criei meu primeiro projeto com Node.js do total zero, colocando em prática todos os conceitos estudados no módulo inicial.

  • Iniciando a API:

    Aprendi a criar aplicações utilizando TypeScript seguindo padrões de código,princípios do SOLID, e conceitos importantes como casos de uso, repositórios, models, streams do Node.js e documentação de APIs com Swagger.

E outros...

Nasagram
Nasagram
Nasagram

Nasagram

Todos os dias uma foto ou vídeo diferente do universo, com uma breve explicação de um astrônomo profissional! Além da consulta de fotos por datas, tente buscar por sua data de nascimento e descubra uma incrível imagem!

  • ReactJSReactJS
  • NextJSNextJS
  • ChakraUIChakraUI
  • TypescriptTypescript
  • APODAPOD
Future Trips
Future Trips

Future Trips

Um simples website para salvar lugares que pretendo visitar, com páginas específicas de cada lugar, com um breve texto descrevendo-o e belas imagens (retiradas do unsplash)

  • ReactJSReactJS
  • NextJSNextJS
  • TypescriptTypescript
  • StyledComponentsStyledComponents
  • GraphQLGraphQL
  • GraphCMSGraphCMS
Cineapp
Cineapp
Cineapp

Cineapp

O Cineapp é para os amantes da sétima arte, que gostam de explorar milhares de filmes e séries, com informações como sinopse, elenco, orçamento e muito mais. Possui filtros por gênero e pesquisas sobre filmes, atores/diretores e séries! Além da função de criar watchlist através da sua conta Google!

  • ReactJSReactJS
  • NextJSNextJS
  • TypescriptTypescript
  • StyledComponentsStyledComponents
  • IMDbIMDb
  • FirebaseFirebase
lui7henrique
lui7henrique
lui7henrique
lui7henrique
lui7henrique
lui7henrique

lui7henrique

Site pessoal para apresentar informações como quem sou, o que estou fazendo atualmente, informações de contato, habilidades e projetos atuais. Além de um blog onde costumo (nem tanto) postar sobre tecnologia.

  • ReactJSReactJS
  • NextJSNextJS
  • TypescriptTypescript
  • GraphQLGraphQL
  • GraphCMSGraphCMS
  • StyledComponentsStyledComponents