Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/recheeduardo/calculadora-imc-2.0

Uma releitura do primeiro projeto de site que eu fiz, porém agora utilizando de conhecimentos e tecnologia modernas como o React.js! 💙🤍✨
https://github.com/recheeduardo/calculadora-imc-2.0

Last synced: about 1 month ago
JSON representation

Uma releitura do primeiro projeto de site que eu fiz, porém agora utilizando de conhecimentos e tecnologia modernas como o React.js! 💙🤍✨

Awesome Lists containing this project

README 

        
 💙 Calculadora IMC 2.0 🤍



 E finalmente, aqui está minha releitura do meu primeiro projeto de todos envolvendo programação, a mais atualizada calculadora de IMC utilizando React.js!


 And finally, here's my relaunch of my first ever project involving programming, the most up-to-date BMI calculator using React.js!





# As habilidades que busquei aprimorar neste site



* Aprimiorar minha familiaridade com o principal framework utilizado em mercado de trabalho para o front-end, o React.Js! Usufruindo de suas principais ferramentas de desenvolvimento como o useState e sua estrutura de componentes modularizada.



* Estilização de conteúdo com animações dinâmicas de CSS e formatação de elementos da página utilizando o Flexbox.

  

* Modularização de código e otimização do projeto, gerando assim um desempenho fluido e que satisfaz a experiência do usuário (UX).



* Aprofundar meu conhecimento sobre organização de arquivos e versionamento de código, utilizando o GIT e o Vercel para hospedar a versão final do projeto.



* Mecânicas e técnicas para estilização responsiva de conteúdo, mantendo um código entendível e evitando práticas não recomendadas como verbosidade e código excessivo.



# História

Criar este projeto foi uma tarefa incrível para mim, ao mesmo tempo que sentia a nostalgia de refazer um antigo algorítimo, pude reaprender a como realizar procedimentos específicos em diferentes tecnologias, hábito esse que acredito que auxilia constantemente o próprio programador a criar um entendimento maior sobre o aquilo que está sendo feito!


A proposta do site busca uma abordagem mais simples e direta, com uma disposição de conteúdo simples e amigável para o usuário. Além dos mesmos recursos de cálculo da antiga versão, esta conta com adições que contribuem para uma melhor experiência, como a tabela oficial de classificação corporal exibida após uma operação, cuja informa ao usuário aonde o mesmo se classifica baseando-se no seu índice previamente calculado.
 

Além disso, retornar à tela incial ficou mais fácil, onde utilizando os conceitos de estado do app em React o usuário pode retornar mais facilmente para realizar outro cálculo, evitando recarregamentos desnecessários.



# Exibição do conteúdo do projeto e responsividade:









# • Tecnologias Utilizadas






* Com o React, mudei a abordagem das condições de funcionamento do programa. Ao invés de escutar eventos como no JS, utilizei a verificação de estados de componentes da página, abordagem essa que se mostrou muito mais eficaz para prevenção de erros e manutenibilidade do projeto.

#






* Apenas com CSS básico e boas práticas, foi possível estilizar o conteúdo utilizando reaproveitamento de estilos, variáveis e diversos paradigmas de estilização que corroboraram para um código limpo e entendível.

#






* Aprimorar meus conhecimentos sobre ferramentas de controle e versionamento de código com o GIT foi crucial para que o projeto fosse concluído, pois dessa forma pude me guiar conforme alterações fossem feitas e assim impulsionar meu workflow.



#






* Utilizando-me de experiências prévias com design gráfico, utilizo o Adobe Photoshop para confeccionar elementos e editar preexistentes dentro da minha página web, pois acredito que dessa forma o resultado final cria uma autencidade e estética únicas, algo que agrega para o reconhecimento da sua aplicação.



## Considerações

A ideia original do site foi publicada por mim mesmo no início de 2024, época na qual eu estava começando meus estudos na área de programação, caso queira visualizar a primeira versão deste projeto, clique aqui para dar uma olhada!



##



É isso! caso tenha gostado do projeto, não esqueça de me seguir aqui no meu perfil para conferir os proximos projetos 👊❤