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/react/
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
https://www.instagram.com/indiancoders.in/
https://www.linkedin.com/in/indian-coders-774a08239/
#mernstack #mernproject #fullstack #graphql #reactjs #nodejs #javascript