2ª Talk Gazin Tech

Sobre   |    Tecnologias   |    Como usar   |    Como contribuir   |    Licença

Sobre

O React-Graphql-Strapi foi desenvolvido para a 2ª edição da talk Gazin Tech squad Beserkers, afim de explicar como funciona o consumo de um serviço de graphql no frontend com REACT.
Utilizei o nextjs para mostrar é consumir o serviço no lado servidor e no lado cliente. Também expliquei alguns conceitos do graphql como a utilzição da extensão do chrome e sobre a parte de cacheamento do apollo.

🚀 Tecnologias

Este projeto foi desenvolvido com as seguintes tecnologias:

NodeJS 💻
Typescript 📘
Strapi
Next JS
Apollo Client

Como usar ? 🤔

É necessário que você tenha algumas ferramentas instaladas antes de clonar este projeto.

• Git
• VSCode ou algum outro editor de sua prferência
• Node.js (recomendado a versão LTS do site oficial)
• Yarn como gerenciador de pacotes.

Vamos começar!! ✍

Abra o terminal e clone o repositório:

# Clone o repositório
$ git clone https://github.com/max10rogerio/react-graphql-strapi

Rodando o backend da aplicação

# Vá para o diretório backend/
$ cd api
# Instale as dependências
$ yarn
# Rode o proejto
$ yarn develop

Neste momento temos a nossa aplicação com o backend e seus serviços em execução, com o backend rodando na porta 3333. http://localhost:1337

Para acessar o admin, entre no endereço: http://localhost:1337/admin

---

Rodando o backend da aplicação

# Vá para o diretório backend/
$ cd web
# Instale as dependências
$ yarn
# Rode o proejto
$ yarn dev

A aplicação irá rodar na porta 3000: http://localhost:3000

Como contribuir

• Faça um fork;
• Crie uma nova branch com a sua feature: git checkout -b my-feature;
• Commit as suas alterações: git commit -m 'feat: My new feature';
• Empurre para o repositório remoto a sua nova branch: git push origin my-feature.

Abra um pull request para analisarmos as mudanças.

Você também pode nos ajudar abrindo issues.

📝 Licença

Este projeto está com a licença MIT. Veja LICENÇA para mais detalhes.

Made with ♥ by Max Rogério 👋 Get in touch!