Esse projeto foi feito com a intenção de praticar Next utilizando GraphQL / GraphCMS.
Os Pings no mapa são gerados de forma dinâmica através do GraphCMS sendo integrados ao mapa do Leaflet.
As rotas dos pings também são geradas de forma dinâmica através do GraphCMS, sendo um slug único (Nome da localidade) usado para criar de fato a rota.
O ambiente para utilizar Jest foi desenvolvido mas apenas alguns pequenos testes foram feitos utilizando a React Testing Library :)
Veja o projeto Online em: MapTheUFO
Esse projeto foi feito utilizando as seguintes tecnologias:
- ✔️ React
- ✔️ Next
- ✔️ TypeScript
- ✔️ GraphQL
- ✔️ GraphCMS
- ✔️ Styled Components
- ✔️ Leaflet
- ✔️ ESLint
- ✔️ Prettier
- ✔️ Jest / RTL
Esse projeto envolve muitas variáveis ambientes, tenha certeza de que você as possui antes de tentar executar!
- Clone o repositório
git clone git@github.com:PatrickMoraisN/MapTheUFO.git- Mude para o diretório do repositório
cd MapTheUFO- Instale as dependências
npm install- Crie um arquivo
.env.localna raíz do seu projeto e adicione as variáveis ambientes
# GraphQL / GraphCMS
ENDPOINT_GRAPHCMS=YOUR_GRAPHCMS_ENDPOINT
GRAPHQL_TOKEN=YOUR_GRAPHQL_ACCESS_TOKEN
# MapBox
NEXT_PUBLIC_MAPBOX_API_KEY=YOUR_MAPBOX_ACCESS_TOKEN
NEXT_PUBLIC_MAPBOX_USER=YOUR_MAPBOX_KEY
NEXT_PUBLIC_STYLE_ID=YOUR_MAPBOX_STYLE_KEY
- Inicie o app
npm run devTa tudo pronto! Abra em localhost:3000 para ver o app!
Patrick Morais
