{"id":25738802,"url":"https://github.com/0lostconnection/ajude-rs","last_synced_at":"2026-06-09T22:31:20.528Z","repository":{"id":242142413,"uuid":"808792569","full_name":"0LostConnection/ajude-rs","owner":"0LostConnection","description":"Este repositório contém o código do Desafio de Habilidade do processo seletivo da empresa júnior Cajuí Collab.","archived":false,"fork":false,"pushed_at":"2024-05-31T23:04:16.000Z","size":20081,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-11-19T22:18:52.690Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://ajude-rs.netlify.app/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/0LostConnection.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-31T20:39:39.000Z","updated_at":"2024-06-02T19:25:17.000Z","dependencies_parsed_at":null,"dependency_job_id":"b1fd329f-cbb1-407c-b99b-b727b9d4b1c1","html_url":"https://github.com/0LostConnection/ajude-rs","commit_stats":null,"previous_names":["0lostconnection/ajude-rs"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/0LostConnection/ajude-rs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0LostConnection%2Fajude-rs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0LostConnection%2Fajude-rs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0LostConnection%2Fajude-rs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0LostConnection%2Fajude-rs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/0LostConnection","download_url":"https://codeload.github.com/0LostConnection/ajude-rs/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0LostConnection%2Fajude-rs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34129072,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-09T02:00:06.510Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-02-26T07:35:03.619Z","updated_at":"2026-06-09T22:31:20.510Z","avatar_url":"https://github.com/0LostConnection.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Desafio Cajuí Collab - Ajude RS \n\nEste repositório contém o código do **Desafio de Habilidade** do processo seletivo da empresa júnior [**Cajuí Collab**](https://www.instagram.com/cajuicollab).\n\n## Índice\n- [Desafio Cajuí - Ajude RS](#desafio-cajuí---ajude-rs)\n  - [Objetivo](#objetivo)\n  - [Tecnologias Utilizadas](#tecnologias-utilizadas)\n    - [Design/Prototipagem](#designprototipagem)\n    - [Programação](#programação)\n  - [Protótipo no Figma](#protótipo-no-figma)\n  - [Iniciando pela primeira vez](#iniciando-pela-primeira-vez)\n  - [Devlog](#devlog)\n    - [Planejamento Inicial](#planejamento-inicial)\n    - [Desenvolvimento](#desenvolvimento)\n      - [Prototipagem](#prototipagem)\n      - [Implementação de Código](#implementação-de-código)\n    - [Principais Desafios](#principais-desafios)\n  - [Lições Aprendidas](#lições-aprendidas)\n    - [Aprimoramento de Habilidades Técnicas](#aprimoramento-de-habilidades-técnicas)\n    - [Ferramentas e Tecnologias](#ferramentas-e-tecnologias)\n    - [Gerenciamento de Tempo e Recursos](#gerenciamento-de-tempo-e-recursos)\n    - [Melhoria Contínua](#melhoria-contínua)\n  - [Melhorias Futuras](#melhorias-futuras)\n    - [Refatoração de Código](#refatoração-de-código)\n    - [Melhor Uso do React](#melhor-uso-do-react)\n    - [Acessibilidade e Usabilidade](#acessibilidade-e-usabilidade)\n    - [Otimização para Diferentes Telas](#otimização-para-diferentes-telas)\n    - [Práticas de SEO](#práticas-de-seo)\n## Objetivo\nDesenvolver 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.\n## Tecnologias Utilizadas\n\n### Design/Prototipagem\n- Figma\n- ChatGPT\n- Google Earth Studio\n\n### Programação\n- TeleportHQ\n- React\n- CSS\n## Protótipo no Figma\n[Abrir no Figma](https://www.figma.com/proto/30bSvEYcxWoe0Taim0C7gk/Projeto---Ajude-RS?node-id=1-236\u0026t=2XiUTq0kXg2F8Rmr-0\u0026scaling=scale-down-width\u0026page-id=0%3A1\u0026starting-point-node-id=1%3A236)\u003cbr\u003e\n\u003csub\u003e\nLink curto: \u003ca href=\"https://lost-url.vercel.app/KuuG\"\u003ehttps://lost-url.vercel.app/KuuG\u003c/a\u003e\n\u003c/sub\u003e\n## Iniciando pela primeira vez\n\n### Instalando dependências\n\u003e **Node**\n\u003e ```bash\n\u003e   npm install\n\u003e ```\n\n\u003e **Bun**\n\u003e ```bash\n\u003e   bun install\n\u003e ```\n\n### Iniciando o projeto\n\u003e **Node**\n\u003e ```bash\n\u003e   npm run start\n\u003e ```\n\n\u003e **Bun**\n\u003e ```bash\n\u003e   bun start\n\u003e ```\n\nAgora você poderá visualizar o projeto no seu navegador.\n```\n  Local:            http://localhost:3000\n```\n## Devlog\n\n### Planejamento Inicial\nO 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.\n\n### Desenvolvimento\n\n#### Prototipagem\nA 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.\n\n#### Implementação de Código\nInicialmente, 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**](https://teleporthq.io/), um plugin que permite exportar o protótipo diretamente em código.\n\n### Principais Desafios\nO 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.\n\nApesar 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.\n## Lições Aprendidas\nDurante o desenvolvimento deste projeto, obtive várias percepções valiosas que melhoraram minhas habilidades e processos:\n\n### Aprimoramento de Habilidades Técnicas\n- **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.\n\n### Ferramentas e Tecnologias\n- **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.\n- **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.\n\n### Gerenciamento de Tempo e Recursos\n- **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.\n\n### Melhoria Contínua\n- **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.\n## Melhorias Futuras\n\nPara aprimorar ainda mais o projeto, identifiquei algumas áreas-chave que precisam de melhorias:\n\n### Refatoração de Código\n- **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.\n\n### Melhor Uso do React\n- **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.\n- **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.\n\n### Acessibilidade e Usabilidade\n- **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.\n\n### Otimização para Diferentes Telas\n- **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.\n\n### Práticas de SEO\n- **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).\n- **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.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0lostconnection%2Fajude-rs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F0lostconnection%2Fajude-rs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0lostconnection%2Fajude-rs/lists"}