jwt-node-vue - GitLite

KO | EN

gitlite — search

#python #hacktoberfest #typescript #llm #golang #android #linux #nodejs #java #windows #awesome #awesome-list #vue #mcp

jwt-node-vue

(★ 97)

Repositório responsável pelo primeiro projeto da série de vídeos: Coding Stuff.

파일 탐색기

최종 버전 다운로드 (.zip)

- - codeql-analysis.yml
  - node.js.yml
- dependabot.yml
- FUNDING.yml
- - launch.json
- - app.js
- .eslintrc.json
- .gitignore
- package-lock.json
- package.json
- server.js
- - .browserslistrc
  - .editorconfig
  - .eslintrc.js
  - .gitignore
  - babel.config.js
  - package-lock.json
  - package.json
  - README.md
.editorconfig
LICENSE
README.md
SECURITY.md

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/glaucia86/jwt-node-vue

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd jwt-node-vue

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

cd backend

이 프로젝트의 관련 파일이 하위 폴더 안에 있어서, 먼저 그 폴더로 이동합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm start

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Série de Vídeos - Coding Stuff: Projeto #01 - Desenvolvendo Aplicação JWT com Node + MongoDB + Vue

[![C-pia-de-Tutorial-Node-js-Express-com-Docker-1.png](https://i.postimg.cc/CKLjkKzX/C-pia-de-Tutorial-Node-js-Express-com-Docker-1.png)](https://postimg.cc/WdCFPTmw)

Repositório responsável pelo primeiro projeto da série de vídeos: **Coding Stuff**.

O objetivo da série é ensinar inúmeros tutoriais e projetos direto ao ponto no meu **[Canal do Youtube](https://bit.ly/youtube-canal-glaucialemos)**!

Nesse primeiro projeto da série do **Coding Stuff!** vamos aprender um pouco sobre como podemos criar aplicações de autenticação usando o JWT com Node.js. Assim sendo, estaremos desenvolvendo uma aplicação E2E (desde o Back-End ao Front) de login e senha, a qual faremos uso do JWT e persistindo no MongoDb.
Após isso, faremos o lado do client usando o Vue.Js.

Ao término do projeto local, estaremos hospedando a aplicação no **[Azure](https://azure.microsoft.com/?WT.mc_id=javascript-12243-gllemos)** tanto no lado do server e client-side!

## ☕ Apoie e Ajude esse Projeto!

Se você curte ou curtiu os vídeos feitos desse curso e deseja apoiar com um valor de um Cafezinho Brasileiro, então sinta-se à vontade em fazer o seu donation no botão abaixo:

<a href='https://ko-fi.com/I3I644UCW' target='_blank'><img height='36' style='border:0px;height:36px;' src='https://cdn.ko-fi.com/cdn/kofi3.png?v=2' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>

## 🚀 Recursos utilizados

- **[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=javascript-12243-gllemos)**
- **[Node.js](https://nodejs.org/en/)**
- **[Vue.js](https://vuejs.org/)**
- **[Postman](https://www.getpostman.com/)**
- **[MongoDB](https://www.mongodb.com/try/download/community)**
- **[MongoDB Compass](https://www.mongodb.com/products/compass)**
- **[Azure CosmosDB](https://azure.microsoft.com/services/cosmos-db/?WT.mc_id=javascript-12243-gllemos)**
- **[Conta - Azure](https://azure.microsoft.com/?WT.mc_id=javascript-12243-gllemos)**
- **[Static Web Apps](https://docs.microsoft.com/azure/static-web-apps/?WT.mc_id=javascript-12243-gllemos)**
- **Libs do Node usadas no Projeto**
  - **[bcryptjs](https://www.npmjs.com/package/bcryptjs)**
  - **[bcrypt](https://www.npmjs.com/package/bcrypt)**
  - **[jsonwebtoken](https://www.npmjs.com/package/jsonwebtoken)**
  - **[mongoose](https://www.npmjs.com/package/mongoose)**
  - **[dotenv](https://www.npmjs.com/package/dotenv)**

## ⭐️ Conta - Azure For Students

Caso você seja um(a) estudante de alguma Instituição de Ensino de Faculdade ou Universidade, poderá criar sua conta no **[Azure for Students](https://azure.microsoft.com/free/students/?WT.mc_id=javascript-12243-gllemos)**. Essa conta te dará o benefício em possuir crédito de USD 100,00 para usar os serviços de maneira gratuita, sem necessidade de possuir um cartão de crédito. Para ativar essa conta, bastam acessar o link ao lado: **[AQUI](https://azure.microsoft.com/free/students/?WT.mc_id=javascript-12243-gllemos)**

## 💻 Série de Vídeos

Os vídeos sairão todas às quintas-feiras no meu **[Canal do Youtube](https://bit.ly/youtube-canal-glaucialemos)**!

Abaixo seguem os links da cada vídeo da série do projeto realizados até o momento _(atualizado semanalmente)_

### **Back-End**

| Vídeo Aula                                                                   | Descrição                                                          |
| ---------------------------------------------------------------------------- | ------------------------------------------------------------------ |
| **[Vídeo 01 - JWT + Node.js + MongoDB + Vue](https://youtu.be/JmUSx5wXU68)** | Estruturação do Projeto                                            |
| **[Vídeo 02 - JWT + Node.js + MongoDB + Vue](https://youtu.be/Vr-UMoAv8pk)** | Desenvolvimento da Rota Default da Api                             |
| **[Vídeo 03 - JWT + Node.js + MongoDB + Vue](https://youtu.be/6u4aM2eT-gg)** | Criando a Conexão da Base de Dados                                 |
| **[Vídeo 04 - JWT + Node.js + MongoDB + Vue](https://youtu.be/VGgseqbWEt8)** | Criando a Classe 'User' e as Regras de Negócio com JWT & BcryptJs  |
| **[Vídeo 05 - JWT + Node.js + MongoDB + Vue](https://youtu.be/-nRSKeT9OkE)** | Criando a Rota 'Register' e a Lógica na Controller                 |
| **[Vídeo 06 - JWT + Node.js + MongoDB + Vue](https://youtu.be/_-3DWpuXXvU)** | Criando a Rota Aprendendo a Depurar a API no Vs Code               |
| **[Vídeo 07 - JWT + Node.js + MongoDB + Vue](https://youtu.be/OckHsZPIRrQ)** | Desenvolvendo o middleware 'Auth'                                  |
| **[Vídeo 08 - JWT + Node.js + MongoDB + Vue](https://youtu.be/6fUcm4aSEjM)** | Desacoplamento de Responsabilidade e Ajustes Importantes no Código |

### **Front-End**

| Vídeo Aula                                                                   | Descrição                                                            |
| ---------------------------------------------------------------------------- | -------------------------------------------------------------------- |
| **[Vídeo 09 - JWT + Node.js + MongoDB + Vue](https://youtu.be/PH-kSpoEpYI)** | Iniciando o Projeto no lado do Front-End com Vue.Js                  |
| **[Vídeo 10 - JWT + Node.js + MongoDB + Vue](https://youtu.be/oLXCKIvOPK4)** | Criando e Organizando as pastas e arquivos no Projeto com Vue.js     |
| **[Vídeo 11 - JWT + Node.js + MongoDB + Vue](https://youtu.be/5VSzUFIAh1U)** | Desenvolvimento da Página de Login                                   |
| **[Vídeo 12 - JWT + Node.js + MongoDB + Vue](https://youtu.be/LtSeR3jy28Y)** | Desenvolvimento da Página de Cadastro                                |
| **[Vídeo 13 - JWT + Node.js + MongoDB + Vue](https://youtu.be/8gG1OwMIDts)** | Inclusão do Pacote NProgress no Projeto (Front-End)                  |
| **[Vídeo 14 - JWT + Node.js + MongoDB + Vue](https://youtu.be/UcKm1ADpWlQ)** | Desenvolvimento Lógica de validação com vuelidate - Tela de Login    |
| **[Vídeo 15 - JWT + Node.js + MongoDB + Vue](https://youtu.be/cQxoBu2rexE)** | Desenvolvimento Lógica de validação com vuelidate - Tela de Cadastro |
| **[Vídeo 16 - JWT + Node.js + MongoDB + Vue](https://youtu.be/hQaDG-oZQ_g)** | Integração do Back-End com Front da tela Register e uso do SweetAlert
| **[Vídeo 17 - JWT + Node.js + MongoDB + Vue](https://youtu.be/XykcWilTg68)**   Integração do Back-End com Front da tela LOGIN                       |
| **[Vídeo 18 - JWT + Node.js + MongoDB + Vue](https://youtu.be/TmGnuRhX_hI)** | Finalização da aplicação no Front - Page Home                        |

### **Migração para Nuvem (Em breve)**

| Vídeo Aula       | Descrição      |
| ---------------- | -------------- |
| **[EM BREVE]()** | Vídeo EM BREVE |
| **[EM BREVE]()** | Vídeo EM BREVE |
| **[EM BREVE]()** | Vídeo EM BREVE |
| **[EM BREVE]()** | Vídeo EM BREVE |

## ❗️ Links & Recursos Importantes

Como dito durante as live codings, sempre estaremos citando links e recursos importantes que direcionarão para: documentações, cursos gratuitos, livros e conteúdos relacionados a Node.js & PostgreSQL. Abaixo, segue uma lista desses recursos, que são considerados leituras, cursos ou livros recomendados:

- ✅ **[Curso Grátis de Vue.Js - Microsoft Learn](https://bit.ly/2PoJVI9)**
- ✅ **[Curso Grátis de Criando Aplicações JavaScript com Node.js](http://bit.ly/2JN0874)**
- ✅ **[Curso Grátis Azure Functions com Node](http://bit.ly/2LlgLHa)**
- ✅ **[Curso Grátis CosmosDB com Node](http://bit.ly/3nd3nT0)**
- ✅ **[Curso de Deploy Automático com SWA + GitHub Actions](http://bit.ly/3odzNxL)**
- ✅ **[Azure para devs JavaScript & Node.js](https://docs.microsoft.com/javascript/azure/?WT.mc_id=javascript-12243-gllemos&view=azure-node-latest)**
- ✅ **[Documentação do Node.js usando o Vs Code](http://bit.ly/354hrYH)**
- ✅ **[Depurando Aplicações Node com Vs Code](https://code.visualstudio.com/docs/nodejs/nodejs-debugging?WT.mc_id=javascript-12243-gllemos)**
- ✅ **[Documentação do Vs Code com Vue](http://bit.ly/2MtXYtT)**
- ✅ **[Documentação Oficial do JWT](https://jwt.io/)**
- ✅ **[Documentação Oficial do ExpressJs](https://expressjs.com/pt-br/)**

## ❓ Tenho Dúvidas... O que Faço?!

Caso tenham dúvidas aos códigos desenvolvidos durante a série de vídeos, sintam-se a vontade em abrir uma **[ISSUE AQUI](https://github.com/glaucia86/jwt-node-vue/issues)**. Assim que possível, estarei respondendo as todas as dúvidas que tiverem!

**(documentação em desenvolvimento)**