Build and Deploy A Modern FULL STACK Blog Application With MERN Stack, GraphQL, React, Typescript
** Important Links **
🚀 Deployed Version https://react-graphql-953e0.web.app/
Note: First Load may take up to 30 seconds as we are using free version of deployment of Render
In this video, we will build and deploy a modern full stack Blog writing application with MERN Stack and GraphQL. We will start by learning the basics of GraphQL, and then we will use GraphQL to create a fully functional article writing application. The application will allow users to create, edit, and delete articled and blogs, and it will also allow users to comment on articles. We will use the following technologies:
👉 MongoDB for data storage
👉 Express for the back-end server
👉 React for the front-end client
👉 GraphQL for data fetching
⏰ Timestamps:
** Course Intro **
0:00 Introduction
2:28 Everything About MERN Stack And This Course
** GraphQL Crash Course **
10:46: GraphQL Crash Course Intro
12:10 Difference Between GraphQL And Rest API
18:14 Building Basic GraphQL CRUD API With NodeJS Express
** Article Writing Application **
54:02 Application Workflow
58:39 Starting Backend
1:08:14 Creating Express Server
1:10:36 Configuring And Connecting To MongoDB
1:19:30 Creating GraphQL API Schemas, Handlers, Resolvers
3:17:24 FIX BREAKING CHANGES!
** Building Frontend **
3:19:20 Creating Frontend With React Typescript MaterialUI
3:29:06 Creating Homepage Design
3:52:06 Building Header Navbar With Material UI
4:10:11 Integrating React Router Dom
4:20:36 Adding Real Data - Integrating Apollo Client To React App
4:24:37 Writing QUERIES
4:33:29 Design Blogs Page
5:5:29 Designing & Building Authentication Form
5:59:53 Integrating Redux Toolkit
6:23:19 Adding User Menu
6:34:30 Designing Article Adding Page Form
7:14:41 Building Profile Page
7:40:29 Designing View Article Page With Comments
9:6:26 Adding EDIT Functionality Of Article
9:29:42 Deleting Article
9:34:02 Working On Optimizations Of Fonts / Styles / Functionality Fixes
** Deployment **
9:23:42 Building Apps For Production And Deploy
By the end of this video, you will have a solid understanding of how to use GraphQL to build a full stack application. You will also have a working example of an article writing application that you can use as a starting point for your own projects.
🔗 References
GraphQL: https://graphql.org/
Apollo Client: https://www.apollographql.com/docs/re...
MongoDB: https://www.mongodb.com/
NodeJS: https://nodejs.org
React: https://react.dev/
Express: https://expressjs.com/
Mongoose: https://mongoosejs.com/
Typescript: https://www.typescriptlang.org/
Follow Me
/ indiancoders.in
/ indian-coders-774a08239
#mernstack #mernproject #fullstack #graphql #reactjs #nodejs #javascript
Watch video Build and Deploy A Modern FULL STACK Blog Application With MERN Stack, GraphQL, React, Typescript online without registration, duration hours minute second in high quality. This video was added by user Indian Coders 27 May 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 11,764 once and liked it 407 people.