Green Horizons 🌳

Plataforma dedicada à disseminação de dados, informações e notícias atualizadas sobre Unidades de Conservação Federais no Brasil.

🚀 Tecnologias

• Next.js 14
• React
• TypeScript
• Tailwind CSS
• Shadcn UI
• Leaflet

📋 Pré-requisitos

• Node.js 18.17 ou superior
• npm ou yarn
• Git

🛠️ Instalação

1. Clone o repositório:

git clone https://github.com/seu-usuario/green-horizons.git
cd green-horizons

2. Instale as dependências:

npm install
# ou
yarn install

3. Crie um arquivo .env.local na raiz do projeto:

NEXT_PUBLIC_API_URL=sua_url_api

4. Execute o projeto em desenvolvimento:

npm run dev
# ou
yarn dev

🏗️ Estrutura do Projeto

src/
├── app/                  # Rotas e páginas
├── components/           # Componentes React
├── hooks/               # Custom hooks
├── lib/                 # Bibliotecas e configurações
├── providers/           # Providers React
├── styles/              # Estilos globais
├── types/               # Tipos TypeScript
└── utils/               # Funções utilitárias

📦 Build e Deploy

1. Gere a build de produção:

npm run build
# ou
yarn build

2. Deploy na Vercel:

   a. Crie uma conta na Vercel

   b. Instale a CLI da Vercel:

   npm i -g vercel

   c. Faça login na Vercel:

   vercel login

   d. Deploy do projeto:

   vercel

🔧 Configurações Adicionais

Configurando o Leaflet com Next.js

1. Instale as dependências do Leaflet:

npm install leaflet @types/leaflet leaflet.markercluster @types/leaflet.markercluster

2. Importe os estilos do Leaflet no seu componente:

import 'leaflet/dist/leaflet.css'
import 'leaflet.markercluster/dist/MarkerCluster.css'
import 'leaflet.markercluster/dist/MarkerCluster.Default.css'

Configurando o Shadcn UI

1. Instale os componentes necessários:

npx shadcn-ui@latest init

2. Adicione novos componentes conforme necessário:

npx shadcn-ui@latest add button
npx shadcn-ui@latest add card
# etc...

🚨 Solução de Problemas Comuns

Erro: "window is not defined"

Adicione verificação de cliente nos componentes que usam window:

const isClient = typeof window !== 'undefined'

Erro: "Module not found"

Verifique se todas as dependências estão instaladas:

npm install

Erro: "Port 3000 is in use"

Mate o processo usando a porta ou use uma porta diferente:

npm run dev -- -p 3001

📄 Scripts Disponíveis

• npm run dev - Inicia o servidor de desenvolvimento
• npm run build - Gera a build de produção
• npm start - Inicia o servidor de produção
• npm run lint - Executa o linter
• npm run format - Formata o código com Prettier

🤝 Contribuindo

1. Faça um fork do projeto
2. Crie uma branch para sua feature (git checkout -b feature/AmazingFeature)
3. Commit suas mudanças (git commit -m 'Add some AmazingFeature')
4. Push para a branch (git push origin feature/AmazingFeature)
5. Abra um Pull Request

📝 Licença

Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

👥 Autores

• Seu Nome - GitHub

🙏 Agradecimentos

• ICMBio pelos dados das Unidades de Conservação
• Comunidade Open Source pelas ferramentas utilizadas