{"id":21413291,"url":"https://github.com/cauandzn/worldtrip","last_synced_at":"2026-04-18T14:31:46.580Z","repository":{"id":136253761,"uuid":"598844275","full_name":"CauanDZN/worldtrip","owner":"CauanDZN","description":"React application of a travel agency.","archived":false,"fork":false,"pushed_at":"2023-02-07T23:11:57.000Z","size":629,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-23T05:15:52.446Z","etag":null,"topics":["javascript","json","json-server","react","reactjs","server","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/CauanDZN.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":"2023-02-07T23:11:12.000Z","updated_at":"2023-04-13T21:30:00.000Z","dependencies_parsed_at":null,"dependency_job_id":"2cf4a348-3080-4a26-8b20-5f089f75ed53","html_url":"https://github.com/CauanDZN/worldtrip","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CauanDZN%2Fworldtrip","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CauanDZN%2Fworldtrip/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CauanDZN%2Fworldtrip/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CauanDZN%2Fworldtrip/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CauanDZN","download_url":"https://codeload.github.com/CauanDZN/worldtrip/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243910762,"owners_count":20367544,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["javascript","json","json-server","react","reactjs","server","typescript"],"created_at":"2024-11-22T18:17:52.807Z","updated_at":"2026-04-18T14:31:41.552Z","avatar_url":"https://github.com/CauanDZN.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Desafio 01 - Interface com Chakra UI\n\n## 💻 Sobre o desafio\n\nNesse desafio, você deverá criar uma aplicação para treinar o que aprendeu até agora no ReactJS\n\nEssa será uma aplicação onde você tem dois objetivos principais. O primeiro é desenvolver toda a interface usando como base o Chakra UI. O outro é que você deve trabalhar o responsivo da aplicação (e é aqui que sua criatividade pode brilhar ainda mais).\n\nVocê vai iniciar uma aplicação Next.js do zero na sua própria máquina e implementar a interface conforme o layout do Figma.\n\nA seguir veremos com mais detalhes o que e como precisa ser feito 🚀\n\n# Se preparando para o desafio\n\nPara esse desafio, iremos reforçar alguns pontos e apresentar algumas libs para te ajudar no desevolvimento.\n\nDessa forma, antes de ir diretamente para o código do desafio, explicaremos um pouquinho de:\n\n- Figma;\n- Chakra UI;\n- Swiper.\n\nVamos nessa?\n\n## Figma\n\nUm ponto muito importante desse desafio que queremos que você exercite é a implementação de uma interface a partir de um layout do Figma, como se você tivesse recebido isso das mãos de um designer.\n\nNesse desafio, você deve implementar o layout das páginas `Web` ****e `Mobile`.\n\nPara utilizar o Figma, não possui muito mistério. Vamos deixar abaixo os passos para criar uma conta, duplicar o layout e exportar imagens.\n\n### Criando uma conta no Figma\n\nPara acessar o Layout da aplicação, você primeiramente deve ter uma conta criada na plataforma do Figma, para isso, você pode [clicar aqui](https://www.figma.com/signup).\n\nEntão, na página de cadastro, você pode logar diretamente com sua conta do Google ou criar uma conta com o e-mail que você preferir.\n\n### Utilizando o Figma\n\nApós criar sua conta, você pode acessar sua Dashboard do Figma, para isso, basta acessar [https://www.figma.com/](https://www.figma.com/) e ele vai te redirecionar para a Dashboard.\n\nCaso ele não redirecione diretamente para a sua dashboard, existe um botão \"Log in\" no canto superior direito da tela, que permitirá você acessar a conta que você acabou de criar e, ao logar, você será redirecionado automaticamente.\n\n### Acessando o layout do app\n\nAgora para duplicar os layouts, basta você clicar no link abaixo. Ele adicionará o Layout à sua dashboard do Figma automaticamente, como uma cópia.\n\n[Desafio 1 Módulo 4 ReactJS](https://www.figma.com/file/8QAkMs3BddatXn2fFseyu4/Desafio-1-M%C3%B3dulo-4-ReactJS/duplicate)\n\n### Verificando estilização\n\nPara verificar a estilização de um elemento, basta selecioná-lo e escolhar na barra lateral direita a opção `Inspect` no menu superior direito. Dessa forma você vai ter a maioria das informações que precisa. Caso precise das distâncias em relação a outros elementos, basta colocar o mouse em cima do elemento que deseja pegar a distância.\n\n### Exportando do Figma\n\nSe você está tendo dificuldades em encontrar o comando `Export` no layout do Figma, siga esses passos:\n\n- Selecione o item que deseja exportar;\n- Na sidebar direita, clique na aba `Design`;\n- Deslize até o final da sidebar para encontrar a opção `Export`.\n\n## Unsplash\n\nComo você pode já ter percebido, o layout que disponibilizamos oferece as imagens apenas para o caso da Europa. Para o restante dos continentes, você vai precisar buscar as imagens desejadas.\n\nE é aí que entra o Unsplash. Sugerimos que você utilize essa plataforma incrível para você conseguir imagens de alta resolução de forma gratuita.\n\nInclusive, todas as imagens disponibilizadas no nosso layout são do Unsplash, por exemplo o banner da página Home.\n\n[Photo by Warren Wong on Unsplash](https://unsplash.com/photos/fNUNt9w3m-Q)\n\n## Chakra UI\n\nComo já visto nas aulas do módulo 4, o Chakra UI é um design system poderoso e que pode aumentar consideravelmente a sua produtividade ao desenvolver interfaces.\n\nComo a lib é muito grande e é inviável que o Diego mostre todas as opções e possibilidades durante a aula, recomendamos fortemente que vocês utilizem a documentação oficial ao seu favor para escolher os melhores componentes para sua aplicação\n\n[Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React applications.](https://chakra-ui.com/)\n\nVamos ver um exemplo para facilitar para vocês. Na página específica do Continente, vemos que temos uma ícone de informação ao final da informação de quantas cidades +100 aquele continente tem.\n\nAlguns componentes que ficariam bem legais nesse caso são:\n\n- [Tooltip](https://chakra-ui.com/docs/overlay/tooltip);\n- [Popover](https://chakra-ui.com/docs/overlay/popover).\n\nDessa forma, utilize a documentação a seu favor e tente aproveitar ao máximo os componentes já criados pelo Chakra UI em vez de tentar desenvolver esses comportamentos manualmente.\n\n## Swiper\n\nPor fim, como o Chakra UI não possui [ainda](https://github.com/chakra-ui/chakra-ui/issues/200) um componente de `slides/carousel`, deixamos como sugestão a lib **Swiper** para implementar essa funcionalidade apresentada na página **Home**.\n\n**React Guide**\n\n[Swiper React Components](https://swiperjs.com/react)\n\n**Exemplos**\n\n[Swiper Demos](https://swiperjs.com/demos)\n\n# Desenvolvendo o projeto\n\nAgora que já falamos um pouquinho dessas coisas que podem te ajudar, vamos dar uma olhada na interface do Figma.\n\n## Web, mobile e responsividade\n\nA primeira coisa que vocês podem perceber na seção superior esquerda é que temos duas versões do projeto: **Web** e **Mobile**\n\nCriamos essas duas versões para vocês treinarem a responsividade. Porém, percebam que criamos apenas uma versão para cada caso (1440px Web e 375px Mobile) enquanto na verdade existem uma grande variedade de padrões de telas. Portanto, caso queira, sinta-se à vontade para criar (no figma e na aplicação) mais versões desse projeto para resoluções diferentes (1920px e 768px são exemplos de padrões interessantes).\n\n## Páginas da aplicação\n\nTemos duas páginas para cada versão da aplicação: **Home** e **Continent**.\n\n### Home\n\nNessa página você tem um Header, um Banner, uma seção mostrando os tipos de viagem e por fim um CTA (call to action) pedindo para você selecionar um dos continentes.\n\nComo há diferentes formas de classificar e dividir o mundo em continentes, sugerimos utilizar:\n\n- América do Norte;\n- América do Sul;\n- Ásia;\n- África;\n- Europa;\n- Oceania.\n\n### Continente\n\nNessa página você tem um Header, um Banner, uma seção mostrando informações do continente e por fim uma seção mostrando as cidades +100.\n\nAs cidades +100 são as cidades que aquele continente possui que estão entre as 100 cidades mais visitadas do mundo. Você pode popular esse campo com dados fictícios, mas caso queira ser o mais realista possível sugerimos se basear nesses dois sites.\n\n[Infographic: The 100 Most Popular City Destinations](https://www.visualcapitalist.com/the-100-most-popular-city-destinations/)\n\n[The 50 Most Visited Cities in the World in 2019 - Big 7 Travel](https://bigseventravel.com/the-most-visited-cities-world-2019/)\n\n## Dados da aplicação\n\nPor fim, os dados da aplicação (continentes e países) serão criados por você durante o desenvolvimento da aplicação. Fique a vontade para montar da forma que preferir pois o foco do desafio é a interface, mas seria uma oportunidade muito legal de você reforçar seus conhecimentos de Fake API e criar do zero uma API com as informações que precisar para a sua aplicação.\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcauandzn%2Fworldtrip","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcauandzn%2Fworldtrip","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcauandzn%2Fworldtrip/lists"}