robsoninocencio / event-platform

Plataforma de aulas

Criar o projeto

https://vitejs.dev/

npm create vite@latest
Project name: event-plataform
Framework: react
Variant: react-ts

Rodar o projeto

cd event-plataform
npm i
npm run dev

Instalar o Tailwindcss

npm i tailwindcss postcss autoprefixer -D
npx tailwindcss init -p

Extensões

https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss https://marketplace.visualstudio.com/items?itemName=csstools.postcss

Configuração settings.json

https://github.com/diego3g https://gist.github.com/diego3g/b1b189063d21b96d6144ca896755be64

Notion - Material Complementar

https://efficient-sloth-d85.notion.site/Material-complementar-86d4ef35af16471ebc3ae3eba1a378e5

Walpapers - Ignite Lab

https://drive.google.com/drive/folders/1mxWnvlqmH7MbVRv2Na9xFNgCQCygM1iR

Figma do projeto

Diego

https://www.figma.com/file/yAX1t6xQtK0V1b7vbK5kIM/Plataforma-de-evento---Ignite-Lab-(Community)?node-id=0%3A1

Robson

https://www.figma.com/file/yAX1t6xQtK0V1b7vbK5kIM/Plataforma-de-evento---Ignite-Lab-(Community)?node-id=0%3A1

Graphcms

https://app.graphcms.com/

CMS = Content Management System

Headless CMS
(GraphCMS): Painel de ADMIN (dados fornecidos atraves de um API REST ou GraphQL)
React que consome ess API do CMS

query / mutation
query = buscar dados
mutation = criar, alterar ou deletar dados

Clonar API do projeto graphcms

rseat.in/lab-graphcms

Apollo

https://www.apollographql.com/docs/react/get-started

npm i @apollo/client graphql

Site que transform svg em componete do React

https://svg2jsx.com/

Tailwind

https://tailwindcss.com/docs/installation https://tailwindcss.com/docs/customizing-colors

Fontes

https://fonts.google.com/specimen/Roboto?query=roboto

Icones

https://phosphoricons.com/ https://github.com/phosphor-icons/phosphor-home https://github.com/phosphor-icons/phosphor-react

npm i phosphor-react

Formatando datas

dayjs ou date-fns

https://date-fns.org/ https://date-fns.org/docs/Getting-Started

npm install date-fns --save

Exemplo de Design System

https://andromeda.rocketseat.dev/?path=/story/docs-colors--page

Player de Video

https://vimejs.com/ ou https://videojs.com/

Instalação

https://vimejs.com/getting-started/installation#react

npm i @vime/core @vime/react
ou se der erro
npm i @vime/core @vime/react --force

Roteamento

npm i react-router-dom

Alternativa de Tailwind com condicional na estilização

npm i classnames

GraphQL Code Generator

https://www.graphql-code-generator.com/

React Query

https://www.graphql-code-generator.com/docs/guides/react#react-query

Apollo and URQL

https://www.graphql-code-generator.com/docs/guides/react#apollo-and-urql

npm i @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/typescript-react-apollo -D
npm i @graphql-codegen/cli -D

npm run codegen