Aqui está o README atualizado com a informação sobre a fonte de dados utilizada:
Este é um projeto Next.js iniciado com create-next-app
.
Este projeto utiliza as seguintes tecnologias incríveis:
- Next.js: Um poderoso framework React para produção.
- TypeScript: Para desenvolvimento JavaScript com segurança de tipos.
- Tailwind CSS: Um framework CSS utility-first para desenvolvimento rápido de UI.
- Axios: Um cliente HTTP baseado em promessas para o navegador e Node.js.
- Material-UI: Um popular framework de UI para React.
A estrutura do projeto é a seguinte:
app
|-- globals.css
|-- layout.tsx
|-- page.tsx
components
config
node_modules
public
|-- data.json
.eslintignore
.eslintrc.json
.gitignore
next.config.mjs
package.json
package-lock.json
postcss.config.mjs
README.md
tailwind.config.ts
tsconfig.json
Primeiro, execute o servidor de desenvolvimento:
npm run dev
# ou
yarn dev
# ou
pnpm dev
# ou
bun dev
Abra http://localhost:3000 com o seu navegador para ver o resultado. 🎉
Você pode começar a editar a página modificando app/page.tsx
. A página atualiza automaticamente conforme você edita o arquivo. 🔄
Para saber mais sobre Next.js, confira os seguintes recursos:
- Documentação do Next.js - aprenda sobre as funcionalidades e API do Next.js.
- Aprenda Next.js - um tutorial interativo de Next.js.
Você pode conferir o repositório GitHub do Next.js - seu feedback e contribuições são bem-vindos! 😊
A maneira mais fácil de fazer deploy do seu app Next.js é usar a Plataforma Vercel dos criadores do Next.js.
Confira nossa documentação de deploy do Next.js para mais detalhes.
Este projeto inclui uma funcionalidade que permite aos usuários selecionar um país, em seguida um estado associado, e finalmente uma cidade. Isso é implementado usando ReactJS/NextJS com Material-UI para os componentes de UI.
- Seleção de País: Usuários podem selecionar um país de uma lista dropdown.
- Seleção de Estado: Com base no país selecionado, o próximo dropdown lista os estados daquele país.
- Seleção de Cidade: Com base no estado selecionado, o dropdown final lista as cidades daquele estado.
Os dados para países, estados e cidades são fornecidos pela API Countries Now.
- Material-UI: Para o framework de CSS e componentes de UI.
- Axios: Para buscar dados de uma API ou arquivo JSON local.
- Fase Atual: A fase atual do projeto levou aproximadamente 6 horas para ser concluída. Esse tempo incluiu a configuração inicial do projeto, a busca e integração com a API, além da montagem e estilização dos componentes. O tempo foi necessário para garantir que todos os componentes funcionassem corretamente e estivessem devidamente integrados e testados.
Com esta configuração, você pode gerenciar eficientemente seleções em cascata para países, estados e cidades usando React, Next.js e Material-UI. 🎉