Esta é uma solução para REST Countries API with color theme switcher challenge on Frontend Mentor
Usuários devem ser capazes de:
- Ver todos os países da API na home page
- Pesquisar por um país no campo de busca
- Filtrar países por região
- Clicar em um país e ver suas informações detalhadas em outra página.
- Clicar nos países que fazem fronteira com o país em questão e ir para a página dos mesmos.
- (Bônus) Trocar entre o tema claro e escuro.
- Solution URL: github
Depois de clonado o repositório basta executar os seguintes comandos
npm install && npm run dev
# or
yarn install && yarn devEm seguida coloque a seguinte url no seu navegador
http://localhost:3000/- Semantic HTML5 markup
- Flexbox
- CSS Grid
- React - JS library
- Next.js - React framework
- Styled Components - Para os estilos
- Axios - Para requisições http
O desafio aqui foi aprender a programar do jeit que o next.js pede. Algumas coisas sçao idênticas ao react outras específicas do framework.
Foi interessante notar algumas diferenças no next.js como por exemplo o acesso ao localStorage. Na parte de recursos úteis há os links de tudo que eu precisei tirar dúvidas para fazer o projeto.
-
localStorage no next.js - Me ajudou a utilizar o localStorage no next.
-
Criando um custom select - Estilizar uma tag select é uma baita dor de cabeça. Então o melhor mesmo é criar o seu próprio select.
-
Criar um campo de busca - Me ajudou a criar um input de pesquisa.
-
Adicionar border-radius na tag <Image/> do next.js - É um pouco diferente colocar bordas arredondadas na tag <Image /> do next.js.
- Website - Gabriel Mascarenhas
- Frontend Mentor - @rialbeg
- Linkedin - @gsamascarenhas