Como executar • Tecnologias • Autor • Licença

O Ignite Lab foi um projeto da Rocketseat que ocorreu entre os dias 20 e 26 de junho de 2022, focado em ReactJs/Typescript. Nesse período, os alunos desenvolveram um website, apelidado de Event Platform, cujo objetivo é permitir que pessoas se cadastrem em um evento e assistam as aulas dentro da plataforma.

📌 Acesse a plataforma hospedada no Vercel clicando aqui

• Antes de começar, você vai precisar instalar em sua máquina as seguintes ferramentas: Git, Node.js.

Além disto é bom ter um editor para trabalhar com o código, como VSCode. Se você já utiliza ele, baixe as seguintes extensões: GraphQL, Tailwind CSS IntelliSense, PostCSS Language Support

1. Crie uma conta no GraphCMS e clone o schema fornecido pela Rockeseat clicando aqui.

2. Depois de clonar o schema, abra-o e clique em "project setting" (engrenagem). Em seguida, navegue até "API Access", copie e salve sua "Content API".

3. Após isso, role a página até a seção "Permanent Auth Tokens", edite seu token e crie 3 novas permissões para o model Subscriber:

   • Create Permission -> Model - All -> Read -> Locales -> All -> Stages -> Published

   • Create Permission -> Model -> Subscriber -> Read -> Stages -> Draft + Published

   • Create Permission -> Model - Subscriber -> Create -> Locales -> All

4. Copie e salve o value do seu token.

😮‍💨 Ufa! Essa parte é importante, pois o token do schema disponiblizado não dispõe previamente dessas permissões. Elas são necessárias para que o cadastro de usuários possa ser realizado na página Subscribe, além permitir que a página Event tenha acesso as Lessons(aulas) publicadas!

😉 Por falar em Lessons, esse schema ainda não contém aulas cadastradas. O que acha de criar uma nova?

🤝 Uma dica: Para cadastrar as aulas, você terá que acessar o Content. Agora é com você!

Clone esse repositório

$ git clone https://github.com/alissonlimabr/Ignitelab-reactjs

Abra o projeto em seu editor de código (preferível VSCode). Em seguida, inicie o terminal e acesse a pasta da aplicação

$ cd event-plataform

Crie seu arquivo DotEnv com o nome ".env.local" na raiz da pasta. Depois, insira as seguintes informações no corpo do arquivo:

VITE_API_URL="suaContentAPI"
VITE_API_ACCESS_TOKEN="seuToken"

Instale as dependências do projeto

$ npm install

Execute o a aplicação

$ npm run dev

Pronto! A aplicação será aberta na porta 3000. Acesse:

http://localhost:3000

As seguintes ferramentas foram usadas na construção do projeto:

• ReactJS
• React Router Dom
• GraphQL Code Generator
• TypeScript
• GraphCMS
• Appolo
• Vercel
• Vite

_{Alisson Lima}

Esse projeto é licenciado pelo MIT.