Este repositório contém o código do Desafio de Habilidade do processo seletivo da empresa júnior Cajuí Collab.
- Desafio Cajuí - Ajude RS
Desenvolver uma landing page responsiva para promover um projeto de ajuda às pessoas que estão passando por dificuldades no Rio Grande do Sul. O site deverá incentivar doações de itens essenciais e suporte comunitário.
- Figma
- ChatGPT
- Google Earth Studio
- TeleportHQ
- React
- CSS
Abrir no Figma
Link curto: https://lost-url.vercel.app/KuuG
Node
npm install
Bun
bun install
Node
npm run start
Bun
bun start
Agora você poderá visualizar o projeto no seu navegador.
Local: http://localhost:3000
O objetivo inicial era criar um protótipo da landing page no Figma e, em seguida, recriá-la utilizando React. Esta abordagem permitiria um design bem estruturado antes de partir para a implementação do código.
A primeira etapa foi buscar inspirações de landing pages para definir um estilo e uma estrutura visual. Utilizei o Figma para criar o design, empregando grids para garantir uma interface organizada e coerente. Além disso, utilizei a ferramenta ChatGPT para auxiliar na criação do conteúdo textual da página.
Inicialmente, comecei a recriar a landing page do zero utilizando React. No entanto, devido a alguns problemas pessoais, perdi um tempo significativo no desenvolvimento. Para recuperar o atraso, decidi utilizar o TeleportHQ, um plugin que permite exportar o protótipo diretamente em código.
O uso do plugin TeleportHQ facilitou a geração do código, mas trouxe alguns desafios. O código gerado era desorganizado e pouco otimizado, o que exigiu uma revisão completa. Tive que analisar cuidadosamente o código exportado e realizar diversas alterações para que ele ficasse o mais próximo possível do protótipo original.
Apesar desses desafios, consegui implementar a estrutura básica da landing page conforme planejado. Embora não tenha sido possível concluir todas as funcionalidades desejadas, o essencial está pronto e funcional.
Durante o desenvolvimento deste projeto, obtive várias percepções valiosas que melhoraram minhas habilidades e processos:
- CSS e HTML: A experiência de trabalhar com o design no Figma e depois implementá-lo em código reforçou significativamente meu entendimento de CSS e HTML. Aprendi técnicas avançadas de layout e design responsivo, além de melhorar minha capacidade de criar interfaces visualmente atraentes e funcionalmente eficazes.
- Uso de Plugins para Exportação de Código: A utilização do TeleportHQ me expôs às vantagens e limitações dos plugins de exportação de código. Entendi que, embora possam acelerar o processo inicial, a qualidade do código gerado pode exigir ajustes manuais para otimização e organização.
- Figma: Aprimorei minhas habilidades no Figma, especialmente no uso de grids e na criação de designs consistentes. A integração com ferramentas de conteúdo, como o ChatGPT, também se mostrou valiosa para criar conteúdo de maneira eficiente.
- Planejamento e Adaptação: A experiência de lidar com contratempos pessoais durante o desenvolvimento destacou a importância de planejar buffers de tempo para imprevistos. Aprendi a ser mais flexível e a adaptar minhas estratégias para garantir a entrega dos elementos essenciais do projeto dentro dos prazos.
- Revisão e Otimização de Código: A necessidade de revisar e otimizar o código exportado me ensinou a importância de manter um padrão de qualidade no desenvolvimento. Aprendi a avaliar criticamente o código gerado automaticamente e a fazer as alterações necessárias para melhorar a eficiência e a legibilidade.
Para aprimorar ainda mais o projeto, identifiquei algumas áreas-chave que precisam de melhorias:
- Estrutura do Código JSX e CSS: Pretendo refatorar toda a estrutura do código JSX e CSS para reduzir o tamanho e melhorar a organização. Isso incluirá a remoção de código redundante e a simplificação das classes CSS para garantir um estilo mais consistente e eficiente.
- Criação de Componentes Reutilizáveis: Vou aproveitar melhor os benefícios do React, criando componentes reutilizáveis. Isso facilitará a criação repetitiva de elementos semelhantes, como botões, cards e seções da página, tornando o código mais modular e fácil de manter.
- Divisão de Componentes: Dividirei componentes grandes em componentes menores e mais gerenciáveis. Isso não só tornará o código mais limpo, mas também permitirá uma melhor reutilização e testes mais fáceis.
- Melhorias na Acessibilidade: Trabalharei para melhorar a acessibilidade da página, garantindo que ela esteja em conformidade com os padrões WCAG (Web Content Accessibility Guidelines). Isso incluirá a adição de descrições alternativas para imagens, navegação por teclado e melhorias no contraste de cores.
- Responsividade: Otimizarei o site para diferentes tamanhos de tela, garantindo que ele funcione bem em dispositivos móveis, tablets e desktops. Isso incluirá o uso de media queries no CSS e o ajuste do layout e elementos interativos para proporcionar uma experiência de usuário consistente em todas as plataformas.
- Otimização de Conteúdo: Vou otimizar o conteúdo da página para motores de busca, incluindo a utilização de palavras-chave relevantes, meta descrições, títulos e tags de cabeçalho apropriadas (H1, H2, H3).
- SEO Técnico: Implementarei práticas de SEO técnico, como a criação de um sitemap XML, a configuração de redirecionamentos adequados, e a melhoria da estrutura de URLs para torná-las mais amigáveis e descritivas.