plataforma-eventos

Sobre

As informações das aulas de um evento são armazenadas no GraphCMS, essas informações contém descrições das aulas e dos desafios, o id dos vídeos das aulas que devem estar presentes no youtube, o instrutor de cada aula e os dados das inscrições.

A aplicação permite o cadastro e o login de usuários e não é possível ter acesso às aulas do evento sem estar cadastrado, ao entrar na plataforma do evento o usuário tem acesso à todas as aulas, onde podem ser práticas, formato de live, possuem data para serem disponibilizadas e cada uma possui um desafio. Também foi trabalhado a responsividade da aplicação para também permitir o acesso a dispositivos móveis.

Aplicação apresentada na segunda edição do Ignite Lab da Rocketseat.

Tecnologias

• TypeScript
• ReactJS
• Vite
• Tailwindcss
• GraphCMS(Hygraph)
• GraphQL Code Generator
• Phosphor Icons
• React Router
• js-cookie
• Apollo Client
• Vime
• React Syntax Highlighter
• React Toastify
• yup
• jose

Veja o arquivo package.json do cliente

Sobre as tecnologias

Listagem das principais tecnologias e porque foram utilizadas:

• Utilização do Vite para a construção de uma aplicação react + typescript pois fornece uma experiência de desenvolvimento mais rápida utilizando o que é de mais atual nos navegadores;
• O tailwind css é um framework de css que traz classes já customizadas que devem ser incluídas diretamente no html, essas classes são colocadas no atributo class/className nos elementos HTML. Com ele é possível construir componentes personalizados sem escrever CSS e ainda conta com suporte para criação de tema claro/escuro;
• Utilização do graphcms ( versão free ) para armazenar o conteúdo e informações do token de autenticação;
• O apollo client permite gerenciar dados locais e remotos com GraphQL;
• O GraphQL Code Generator identifica os esquemas e as operações de query e mutations e gera trechos e tipos de código específicos com base nas operações definidas. Utilizando com o React os códigos gerados para query e mutations são em forma de hooks.
• React Router para lidar com roteamento;
• js-cookie para guardar o token de acesso à plataforma do usuário autenticado;
• jose para gerenciar JSON Web Tokens (jwt);
• yup para realizar a validação dos campos do formulário no momento do cadastro e de login.
• React Toastify para emitir as notificações da aplicação. Atualmente possui notificação de sucesso ao cadastrar usuário e ao entrar após a expiração do token, notificação de erro de validação relativo ao yup como campos obrigatórios e formato de email inválido e erro do lado do graphcms como ao tentar cadastrar usuário com o mesmo email por exemplo.
• Com o React Syntax Highlighter é possível estilizar os blocos de códigos na página web.
• Com o Vime podemos reproduzir um video do Youtube fornecendo apenas o seu id.
• Todos os ícones presentes na aplicação são do phosphor icons.

Instalação

• Pré-requisitos

  • É necessário possuir o git instalado e configurado no computador.

  • É necessário ter um gerenciador de pacotes seja o npm ou yarn.

  • É necessário ter uma conta no graphcms.

  • Criação dos esquemas no graphcms e relacionamentos entre eles:

    • Enumeração Lesson Type:
    • Modelo Challenge:
    • Modelo Lesson: Relacionamento com Challenge: Relacionamento com Teacher:
    • Modelo Subscriber:
    • Modelo Teacher: Relacionamento com Lesson:

    Após a criação dos modelos crie também algum exemplo para depois testar a aplicação.

• Próximo passo

1. Faça um clone deste repositório:

   $ git clone https://github.com/die-goncalves/plataforma-eventos.git
   

2. Instale as dependências:

   # Entre no diretório do repositório clonado
   $ cd plataforma-eventos
   # Instale as dependências do projeto.
   $ yarn #ou $ npm install
   

3. Crie o arquivo .env.local na raiz do projeto com as seguintes variáveis:

   VITE_URI_GRAPHCMS=
   VITE_API_TOKEN=
   VITE_JWT_SECRET=
   VITE_JWT_EXPIRES_IN=
   

   ---

   Agora vamos preencher essas variáveis.

   • VITE_JWT_SECRET e VITE_JWT_EXPIRES_IN diz respeito a criação de tokens jwt (JSON Web Tokens) para o serviço de autenticação. Em VITE_JWT_EXPIRES_IN você pode colocar xm, xh ou xd sendo x o tempo em minutos, horas ou dias respectivamente. Por exemplo, no arquivo env.local ficaria assim para uma data de expiração de 7 dias: VITE_JWT_EXPIRES_IN=7d. Em VITE_JWT_SECRET você pode colocar qualquer valor sem as aspas, eu por exemplo gerei um MD5 Hash de um nome qualquer.
   • GRAPHCMS
     • Crie uma conta em GraphCMS ou utilize uma já criada.
     • Crie um novo projeto.
     • Navegue até Project Settings
     • Copie o valor Content API de Endpoints na variável ambiente VITE_URI_GRAPHCMS=.
     • Em Public Content API crie as permissões como na imagem.
     • Crie um novo token em Permanent Auth Tokens
     • Entre nas configurações do token
     • Copie o valor do token na variável de ambiente VITE_API_TOKEN=.
     • Em Content API do token crie as seguintes permissões.

4. Execute a aplicação:

   $ yarn dev #ou $ npm run dev
   # A aplicação inciará na porta 3000 - acesse <http://localhost:3000>
   

Funcionalidades

• Criar o esquema de banco de dados no GraphCMS.
• Criar um serviço de autenticação utilizando a tabela Subscriber no GraphCMS.
  • Apenas usuários autenticados podem acessar a rota http://localhost:3000/plataform/ e suas rotas internas;
  • Usuários já autenticados são automaticamente redirecionados para a plataforma ao acessar http://localhost:3000/;
  • O cadastro e o login do usuário devem ser feitos na rota http://localhost:3000/.
  • Redirecionamento automático para a plataforma quando o usuário já está logado e para a página de login quando o usuário não está logado e tenta acessar a plataforma.
• Criar Sidebar mostrando todas as aulas disponíveis ou não e diferenciação com link ativo baseado no slug da aula na URL.
• Estilizar a página de desafio, conteúdo que pode conter código, imagem, videos, textos, palavras em negrito e itálico, listas e links.
• Responsividade com largura mínima 360px e máxima de 1440px.

Layout

Visão do projeto

Agradecimento

Licença

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

Autor

Feito por Diego Gonçalves, contato: