Projeto criado durante o IgniteLab, usando vite, reactjs, typescript, tailwind e graphql. <3

Overview

O projeto Quero Ser Dev virou uma plataforma 🚀

image


Projeto

Plataforma que disponibiliza aulas de reactjs para iniciantes

⚠️ Em 2021, eu havia gravado algumas aulas de ReactJS e decidi disponibilizar para a comunidade de forma gratuita através de uma plataforma onde é possível dar o play nas aulas e assistir aos vídeos. A ideia surgiu, em julho de 2022, ao fazer o projeto do evento IgniteLab da Rocketseat.

Ela já está no ar e você pode acessar aqui: quero ser dev


🧠 Contexto

O objetivo era criar um sistema onde fosse possível disponibilizar tutoriais exclusivos e não listados do canal quero ser dev, para que as pessoas pudessem assistir dentro da própria plataforma e de forma GRATUITA.

Com isso seria possível colaborar para que mais pessoas dessem os primeiros passos na tecnologia. Eu iniciei com tutoriais de ReactJS, pois já eram aulas que eu tinha gravado em novembro de 2021.

A plataforma está no ar com 5 aulas atualmente e vou subir mais em breve. Espero que vocês curtam! Me enviem feedbacks. :)


Tecnologias usadas

Ferramenta Descrição
ReactJS framework web
Vite gerador de projeto de front-end
npm gerenciador de pacotes
GraphQL Ferramenta para fazer consultas e gravações de dados, usada como uma alternativa à arquitetura REST
Typescript Superset de Javascript para tipar os dados
Tailwind Ferramenta para ter mais produtividade ao estilizar a aplicação
Apollo Dependência para facilitar a integração com o GraphQL
Phosphor Dependência com icones super legais
Vime Dependência para disponibilizar o player de vídeo
Date-fns Dependência para lidar com as datas dos cronogramas de aula
GraphCMS CMS para guardar e disponibilizar os conteúdos por meio de consultas e mutações GraphQL
GraphQL Codegen Dependência para gerar hooks e tipos de dados das variaveis das mutations e queries
Vercel Hospedagem para a aplicação, fiz o deploy integrado com o github
Github Hospedagem do código fonte integrado com gerenciador de versionamento

|



Como rodar o projeto localmente

Siga os passos e inclua as informações abaixo:

Passo Comando/informação
Faça o fork botão de forkar
Faça o clone git clone
Instale as dependências após acessar a pasta projeto npm i
Crie as variaveis de ambiente para integrar com CMS VITE_API_ACCESS_TOKEN e VITE_API_URL
Rode o projeto npm run dev

|



😎 Próximos passos mapeados

  • Subir mais aulas no CMS
  • Incluir Testes
  • Revisar acessibilidade
  • Revisar responsividade
  • Criar autenticação da rota de evento
  • login social com github e gmail
  • botão de curtir aula
  • botao voltar na pagina evento
  • Header e menu
  • Sessão pra informações, ferramentas e links



Foi incrível compartilhar essa jornada com você! Qualquer dúvida ou sugestão, chama no contatinho!

Prazer, Simara Conceição!

Gif Yeah

✓ Desenvolvedora na Thoughtworks

✓ Instrutora de programação para iniciantes em instituições que visam reduzir o gap de gênero e de raça na tecnologia: reprograma, PretaLab e Movimento Black Money.

✓ Criadora do Quero Ser Dev projeto que inspira e ajuda mulheres diversas na migração de carreira pra área de tecnologia.

Vamos nos conectar?


Feito com 💜 por Simara Conceição
You might also like...
Project developed using ReactJS, TypeScript, Vite and CSS modules.
Project developed using ReactJS, TypeScript, Vite and CSS modules.

NLW Heat React Project developed at the Next Level Week Heat event held by Rocketseat. This project aims to build the backend of a commenting applicat

Projeto #02 - Ignite ReactJS (Rocketseat)
Projeto #02 - Ignite ReactJS (Rocketseat)

O projeto foi baseado no 4º módulo da trilha ReactJS do Ignite. Além do que foi construído na aula, foi criado um banco de dados com o Prisma, um CRUD de usuários e um sistema de autenticação baseado na aula de autenticação e autorização.

Projeto final do módulo 5 da @resilia-br realizado em ReactJs.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Lista de tarefas Este é o projeto de uma To-Do List que foi feito com Reactjs, utilizando o axios para consumo da API responsável por gerar as tasks
Lista de tarefas Este é o projeto de uma To-Do List que foi feito com Reactjs, utilizando o axios para consumo da API responsável por gerar as tasks

Lista de tarefas Este é o projeto de uma To-Do List que foi feito com Reactjs, utilizando o axios para consumo da API responsável por gerar as tasks,

BlogPrism : A Website for modern blogs. Built with React, Tailwind CSS, moment , SASS and GraphQL .

BlogPrism 📝 🚀 An Online Platform for Modern Blogs About the project: I have built the BlogPrism in order to learn State Management in React, Tailwin

Esse projeto é uma aplicação que exibe os dados climáticos da região do usuário e de cidades escolhidas. Feito com React Native, typescript e outras tecnologias.
Esse projeto é uma aplicação que exibe os dados climáticos da região do usuário e de cidades escolhidas. Feito com React Native, typescript e outras tecnologias.

Weather APP Esse projeto é uma aplicação que exibe os dados climáticos da região do usuário e de cidades escolhidas. Features • Pré Requisitos • Rodan

Projeto desenvolvido para consolidar os conhecimentos de React e Typescript
Projeto desenvolvido para consolidar os conhecimentos de React e Typescript

Gerenciador de Finanças Projeto desenvolvido para consolidar os conhecimentos de React e Typescript. 📚 Descrição Gerenciador de finanças utilizando R

Point of Sale built using Tailwind and Typescript (ReactJs)

POS (Point of Sale) Tailwind TS Hi! This is my POS ReactJs project built using Tailwind and Typescript. If you wanna create your own project like this

Pinterest Clone Built Using ReactJS And GraphQL
Pinterest Clone Built Using ReactJS And GraphQL

Pinterest Clone About The Project There are many good ideas of projects used with the main purpose of learning a technology. A good side project is al

Owner
Simara Conceição
Desenvolvedora de software Inspiro e ajudo mulheres diversas na migração de carreira para área de tecnologia Criadora do canal e podcast quero ser dev
Simara Conceição
Mylexzin é um projeto desenvolvido em ReactJS. A ideia do projeto é criar uma loja de relógio.

Mylexzin é um projeto desenvolvido em ReactJS. A ideia do projeto é criar uma loja de relógio.

Matheus Maia Alvarez 3 Aug 18, 2022
Ecommerce criado com NextJS e Typescript (Em andamento)

Ecommerce - Carlos Amorim Projeto próprio criado para validar e treinar conceitos de NexttJS e Typescript! Será desenvolvido do 0 desde o UI até deplo

Carlos Amorim 6 Jun 3, 2022
Frontend Mentor - Tip calculator app solution Using ReactJS, TypeScript, Tailwind CSS and Vite.js

Frontend Mentor - Tip calculator app solution This is a solution to the Tip calculator app challenge on Frontend Mentor. Frontend Mentor challenges he

null 3 Jul 31, 2022
Clone do spotify usando react.js e consumindo api do spotify

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

GUILHERME ROCHA 0 Dec 28, 2021
Bate papo online usando react.js e firebase

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

GUILHERME ROCHA 1 Jan 11, 2022
Clone da Infeface do Discord usando React js

Discord UI Clone Clone da Infeface do Discord usando React js Este projecto foi feito seguindo as orientações de Gilherme Rodz (da Rocktseat) ?? Pude

Fábio Junik 10 Nov 9, 2022
An open-source storefront in React.js with Next.js. Built for Headless Commerce, using a modern stack with TypeScript, GraphQL, Apollo, and Tailwind CSS.

Next.js Storefront Next.js Storefront: Your open-source frontend starter pack for building performant e-commerce experiences with Saleor. Saleor Check

Saleor Commerce 543 Jan 2, 2023
Remix-graphql - Utilities for using GraphQL with a Remix app

remix-graphql Remix and GraphQL can live together in harmony ❤️ This package con

Thomas Heyenbrock 178 Jan 2, 2023
Hacker News - This project was created using Vite, React, GraphQL and Apollo Client.

Hacker News A application to get your favorites links made using Apollo Client In Progress ?? Table of contents Table of contents ?? About ?? Techs ??

Brenda Profiro 5 Jun 29, 2022
O dt-money é um aplicativo simples para controle financeiro, desenvolvido durante o Ignite da Rocketseat.

dt-finance Sobre o projeto O dt-money é um aplicativo simples para controle financeiro, desenvolvido durante o Ignite da Rocketseat. Formulario: Trans

Bruno Mateus 2 May 12, 2022