https://github.com/kaykeeb3/country

Projeto sobre desenvolvido durante o evento do codante, esse projeto tem como intuito de compreender as novas features do Next 13
https://github.com/kaykeeb3/country

next react tailwind typescript

Last synced: about 4 hours ago
JSON representation

Projeto sobre desenvolvido durante o evento do codante, esse projeto tem como intuito de compreender as novas features do Next 13

• Host: GitHub
• URL: https://github.com/kaykeeb3/country
• Owner: kaykeeb3
• Created: 2023-07-11T16:31:41.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-07-11T16:37:50.000Z (over 1 year ago)
• Last Synced: 2024-05-08T18:33:12.665Z (6 months ago)
• Topics: next, react, tailwind, typescript
• Language: TypeScript
• Homepage: https://country-app-tau.vercel.app
• Size: 50.8 KB
• Stars: 5
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# [🌍 Lista de Países usando Next.js](https://codante.io/mini-projetos/lista-de-paises-nextjs)

Explore o poder da versão 13 do Next.js criando uma lista de países utilizando a API [REST Countries](https://restcountries.com/).

## 🔨 Requisitos

- Utilize a [API REST Countries](https://restcountries.com/) para obter os dados dos países.

- Utilize o Next.js na versão mais atual para construir a estrutura do projeto e gerenciar as rotas da aplicação.

- Garanta que sua aplicação se comporta bem em celulares, tablets e desktops.

- Implemente a funcionalidade de exibir uma lista de países, mostrando sua bandeira e seu nome em português.

- Ao clicar em um país, você deverá exibir em uma nova rota a página de detalhes do país

  - Exiba a capital, população, continente e região e as línguas faladas no país.

  - Exiba o número da população em números simplificados, _por exemplo: 1.000.000 deve ser 1M e 1000 deve ser 1K._

  - Exiba uma lista dos países que fazem fronteira com o país exibido. Ao clicar em um dos países que fazem fronteira, redirecione para a página desse país.

- Faça o deploy da sua aplicação e submeta no [Codante](https://codante.io/mini-projetos/lista-de-paises-nextjs)

## 🔨 Desafios extras para quem quer ir além

- Implemente uma sessão de "países que falam a mesma língua", abaixo dos "países que fazem fronteira".

- Implemente uma busca na lista de países.

## 🔍 Dicas

- Estude sobre React 18 e Server Components.

- Utilize um framework CSS, como Tailwind, para ganhar agilidade na implementação.

## 🎨 Design Sugerido

Temos uma sugestão de design no Figma. Mas sinta-se livre para utilizar a criatividade e fazer o seu próprio design.

🔗 [Link do Figma](https://www.figma.com/file/suvmja6210ggZOO6Cpehjl/Mini-Projetos---Codante.io?type=design&node-id=1316-4&t=b5wBErhDdCzTdDl6-0)

![image](https://github.com/codante-io/mp-lista-de-paises-next/assets/6475893/5f35397c-f71e-4319-90b1-2ba970600a88)

## 👉🏽 Sobre esse mini-projeto

### Tecnologias sugeridas

**NextJS 13**

- `Server Components`

- `Data fetching`

- `Nested layouts`

- `Routes`

- `pages.tsx`

- `layout.tsx`

- `error.tsx`

- `loading.tsx`

### Pré-requisitos

- `React`

- `HTML, CSS, JavaScript`




### Veja o Projeto

- [Visite o projeto online](https://country-app-tau.vercel.app/)