Tech Programing


Build MEVN Stack Web App With GraphQL & Deploy | GraphQL, MongoDB, Express.js, Vue.js, Node.js

3 min read

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

00:00 Introduction to GraphQL
07:34 Creating node.js server, connect to MongoDB database, a setup environment variable
19:32 Using GraphQL and make your first Query
26:30 Create query in a separate file and structure it
37:35 Create the first mutation to add club
47:43 Add club to database
52:26 Get all clubs from MongoDB database.mp4
56:52 Delete a club from the database
01:00:36 Get a single club from the database
01:03:03 Mutation to Update a club from MongoDB database
01:07:12 Set Up Vue js Project
01:13:25 Create the first component in Vue js
01:16:21 Install and set up tailwind CSS with Vue js, create form using tailwind
01:25:16 Create a card of club design with tailwind CSS
01:33:16 Make our first query from Vue js front end and get data from GraphQL server
01:47:18 Loop all club in vue js teamplate
01:54:15 Create a mutation to add a new club with Vue js
02:10:12 Delete mutation with GraphQL to delete a document from MongoDB
02:19:36 Update mutation with GraphQL to update a document from MongoDB
02:31:47 Deploy MEVN Stack Web App on Heroku and Netlify

👩🏾‍💻👨🏾‍💻Get source code:

Nodejs MongoDB CRUD:

Explanation of REST API:

#mevn #graphql #api #nodejs #vuejs #mongodb #mevnstack

⭕ Learn Fullstack development ⭕
✔Front-end development
➡️ Web ui ux design –
➡️ Html css basic for beginner –
➡️ CSS Framework project –
➡️ React.js beginner to pro –
✔Back-end development
➡️ PHP Beginner to Pro:
➡️ Node.js Basic to advanced:

⭕ Learn more ⭕
➡️ Linux for beginner
➡️ Gimp Photoshop Photo Manipulation –
➡️ Libre Office Calc –
➡️ Vector Graphics –



mevn stack
node js
express js
vue router
bootstrap vue
vue 3
vue computed
pi node
node js express
npm express
vue axios
npm js
docker node
node cron
laravel vue
nodejs mysql
mongoose npm
vue chartjs
express npm
npm windows
npm mysql
vuejs 3
vue refs
graphql codegen
vue class
docker nodejs
vue next
axios vue
bootstrap npm
graphql api
npm firebase
mongodb nodejs
node server
vue datepicker
react apollo
npm mongodb
vue ui
node postgres
ionic vue
vue apollo
electron vue
node redis
express nodejs
node env
express server
npm redis
npm yarn
vue created
node js w3schools
nuxt vue 3
jquery npm
nodejs ubuntu
xlsx npm
nestjs graphql
express graphql
node 14
nodejs online
vue form
graphql apollo
node 12
mounted vue
node js windows
redis npm
npm got
node alpine
react vue
vuejs computed
vue mixins
react graphql
flutter graphql
nodejs github
quasar vue
apollo react
vue tailwind
postman graphql
chalk npm
react node
concurrently npm
prisma js
npm 7
graphql yoga
pm2 npm
prisma graphql
vue router next
python graphql
nativescript vue
apollo js
node npm
node js backend
golang graphql
django graphql
npm list
github graphql
npm chalk
vue conditional class
vue webpack
graphql python
laravel graphql
node 10
hasura graphql
got npm
vue socket io
graphql example
aws sdk nodejs
npm vue
node media server
django vue
node js interview
vuejs router
pm2 node
react node js
node js developer
router vue
vue jest
npm repository
vue datatable
vue 2
github graphql api
vue 3 router
laravel vue js
aws graphql
socket io node js
tailwind vue
computed vuejs
jwt nodejs
rabbitmq nodejs
vue fontawesome
npm ubuntu
bluebird npm
angular graphql
node mssql
graphql c#
npm colors
cron npm
vue jquery
nodejs docs
next js graphql
graphql php
ubuntu npm
axios vuejs
npm handlebars
installing npm
vue router 4
vuejs axios
docker node alpine
npm mocha
ajv npm



發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *