React Node AWS - Build infinitely Scaling MERN Stack App

25h 1m 19s
English
Paid
April 22, 2024

Master the art of building a highly  scalable real world project using MERN Stack for a new startup that will scale infinitely. I will demonstrate how you could launch a project that will have a solid architecture to grow in future to be used by potentially millions of users.

More

Tech stack

  • We will be using React and NextJS (React Framework) in the client side.

  • We will build an API/server using Node Express MongoDB.

  • We will use AWS services such as S3 for files storage, SES for sending emails and EC2 for cloud hosting IAM for Identity and access management Route 53 for domain management along with custom rules/policy.

  • We will use Mongo Atlas as Managed Database Service in the cloud.

What we will build?

  • Build a startup project inspired by a successful real world app (discussed more in the lectures) where multiple users can login and post/manage contents they submit.

  • While building similar project, we will add few improvements to make it infinitely scalable and easier to maintain

  • Aim for low cost of operation and implement some functionalities to make much easier, fun and engaging for users to use.

Aim of the project

  • Target millions of potentials users to use and engage with our app

  • Users could be anyone.. who finds a course, video or articles online... likes it and wants to share

  • The links they share will also be available in their dashboard for update/delete

  • A user could be someone who is a content creator like me... instructors, youtubers, blog and tutorial writers, book authors etc

  • Users will signup/signin to our app to post/share/like the links/urls

  • Users will do this to get free traffic... to get people's attention... sharing links for free

Overview of the project

  • Login/Register System

  • Need a MongoDB that scale infinitely. We will use Mongo Atlas for this requirement.

  • Need a massive storage system that scale infinitely to store user uploaded image files. We will use AWS S3 (Simple Storage Service) for this requirement.

  • You never have to worry about how to manage millions of user uploaded files... let AWS take care of that! S3 pricing is the lowest in the market for storing infinite amount of data that is readily available worldwide throughout AWS data centers globally.

  • Need robust email service for sending emails for hundreds of thousands of users. We will use AWS SES (Simple Email Service) for this requirement.

  • You never have to worry about how to send email to millions and pay higher price ... let AWS take care of that! their rate of SES is the lowest in the market.

  • We will be using AWS EC2 (Elastic Compute Cloud) for hosting our backend NodeJS API and React/Next JS frontend, all within one instance.

  • Keep the cost as low as possible by using AWS services for storage, email and hosting.

  • The biggest issues of scaling web apps are storage and database scaling. That part will be handled by AWS. So we as a developer don't have to worry.

  • Our aim is to enable just 1 or 2 developer to maintain the entire project and continuously grow in future.

Clean simple and easy to maintain project architecture

  • Extremely simple architecture that is easy to maintain and scale

  • Separate backend API and frontend built with react/nextjs for easy development, code maintenance and deployment

  • Keep the frontend as simple as possible

  • Scenario 1 > You create a page in react to do certain task. For example it fetch the data from your API/Server and put that data on the web page for user to see. Job done.

  • Scenario 2 > You create admin page to create a new post. For example to post the data to your API/Server and show the returned response of either success or error. Job done.

  • Keep the backend API as simple as possible

  • Scenario 1 > You have a GET route. For example '/api/posts'. You will receive a request from react/frontend for getting all posts from database.

  • You pass this request to a controller method. Controller method/function will make a query to database, get all posts and return back to react/frontend. Job done.

  • Scenario 2 > You have a POST route. For example '/api/create/post'. You will receive data from react/frontend to create a new post. You pass that data to a controller method.

  • Controller method/function will save that data in database and return the success response, which will be sent back to react. Job done.

  • This is the logic of our app or basically any web app out there. The cycle of requests/responses. Request from frontend, Response from server.

Are you ready for this course?

  • If you are looking to utilize your existing knowledge of react and node to build a real world app that scales then this course is for you.

  • Based on this project you can build that next big thing that you have always dreamed of. Or you could be using this knowledge to help startups kick off their successful business ideas. The possibilities are endless.

Dream is dream unless you put an effort to make it real. Make your effort by taking this course. I will help you turn your dream to reality. Join me in this course and make it happen!

Requirements:
  • Basic Understanding JavaScript
  • Basic Understanding of React Js
  • Basic Understanding of Node Js
Who this course is for:
  • A Web Developer looking to Build Professional Full Stack / MERN Stack App for Real World
  • A Web Developer looking to Build an App that can Scale Infinitely in Future
  • A Web Developer looking to utilize powerful services provided by AWS
  • A Web Developer looking to start a new project for him/her self or for a new startups

What you'll learn:

  • Learn React JS (Frontend) Web Development
  • Learn to use Next Js - A React Framework for Production Apps
  • Learn Node JS API (Backend) Development
  • Learn to Build Highly Scalable App
  • Learn to use AWS S3 (Simple Storage Service) for File Uploads
  • Learn to use AWS SES (Simple Email Service) for Sending Emails
  • Learn to use AWS EC2 (Elastic Compute Cloud) for Hosting your App in the Cloud
  • Learn to use AWS Route 53 for Domain/DNS Management
  • Learn to use AWS IAM (Identity & Access Management)
  • Learn to write custom rules/policy fo accessing AWS services
  • Learn to use Mongo Atlas as a Managed Database in the Cloud
  • Learn to build SEO React Apps with Next Js
  • Learn to Build Real World Full Stack / MERN Stack Apps from Scratch
  • Learn to Implement Secure JWT Based Authentication System
  • Learn to Perform CRUD (create read update delete)
  • Learn to Resize Image Client Side
  • Learn to implement Rich Text Editor
  • Learn to Implement Infinite Scrolling
  • Learn to Implement View Count and Load More Features
  • Learn to Build Multi User Platform
  • Learn to Implement Mass Email Feature
  • Learn to Build A Robust Web App fro New Startups
  • User Login/Registration/Activation/Forgot/Reset Password
  • Learn to Write Clean Code with Easy to Maintain App Architecture
  • Learn to Build an Application that can Grow Infinitely in Future

Watch Online React Node AWS - Build infinitely Scaling MERN Stack App

Join premium to watch
Go to premium
# Title Duration
1 What we will build 10:22
2 Aim of the project 04:14
3 Application workflow 14:46
4 Finished project demo 14:48
5 Setup react nextjs client 07:49
6 Layout component 07:38
7 Head section 05:16
8 Link component 05:52
9 Nav progress bar 08:37
10 Loading css 09:13
11 Register page 25:28
12 Client folder setup and next steps 04:38
13 Server setup 12:41
14 Routes 06:16
15 Controllers 04:51
16 User schema 15:58
17 Virtual field and methods 16:43
18 More NPM packages 15:56
19 Axios post request 10:24
20 Validation 17:06
21 Mongo atlas 12:28
22 AWS signup 15:16
23 AWS SES for sending email 19:35
24 Register activation email 20:41
25 Register email params 08:14
26 Success and error messages 13:31
27 Async await 06:23
28 Environment variables with nextjs 09:01
29 Activate account - client 21:57
30 Activate account - server 20:27
31 Login - server 19:31
32 Login - client 12:36
33 Local storage and cookie helpers 18:57
34 Save user token in browser cookie 08:07
35 Redirect based on role 11:54
36 Logout and conditional rendering 13:29
37 Express JWT middleware 16:15
38 Auth and admin middleware 08:11
39 User profile - server 16:03
40 SSR and getInitialProps 20:06
41 Auth routes server side 19:31
42 withUser and withAdmin HOC 19:01
43 What's next? 04:15
44 Forgot password - server 21:58
45 Reset password - server 13:31
46 Forgot password - client 19:31
47 Reset password - client 21:33
48 Category schema 08:17
49 Category routes and controllers setup 13:29
50 Trying create category with postman 15:44
51 AWS S3 20:43
52 Uploading images to S3 using form data 36:42
53 Create category - client 38:55
54 Show all categories 20:20
55 Uploading base64 image to S3 14:07
56 Image resize client side and upload 23:10
57 Rich text editor 15:06
58 Link schema 10:59
59 Link validators routes and controllers 14:04
60 Link create and read - server 10:30
61 Steps to create/submit link - client 06:06
62 Submit link page part 1 12:37
63 Submit link page part 2 10:12
64 Submit link page part 3 17:06
65 Submit link page part 4 15:20
66 Submit link page part 5 15:36
67 Single category with links - server 22:19
68 Single category page with links part 1 19:49
69 Single category page with links part 2 24:02
70 Load more 10:59
71 Click count - server 12:54
72 Click count - client 09:30
73 Infinite scrolling 07:51
74 Next steps 04:05
75 Categories read - admin 14:19
76 Update delete buttons and warnings 13:43
77 Update category - server 13:53
78 Delete category - server 03:27
79 Delete category - client 09:51
80 Reset mongo atlas database and AWS S3 12:57
81 Update category - client 29:43
82 All links by user 20:12
83 User dashboard part 1 16:05
84 User dashboard part 2 13:05
85 Update delete link - server 06:58
86 Update link - client 19:25
87 All links for admin - server 08:00
88 All links for admin - client 13:32
89 canUpdateDeleteLink middleware 13:29
90 Delete any link by admin 14:05
91 Update any link by admin 12:05
92 Choose favourite category on user registration - client 08:42
93 Choose favourite category on user registration - server 07:54
94 Mass email to users on new link publish 38:28
95 Update user profile - server 08:34
96 Update user profile - client 16:45
97 Update user in local storage 09:16
98 Most popular / Trending links - server 09:53
99 Most popular / Trending links - client 14:18
100 Click count - client 04:55
101 Most popular link in given category 06:39
102 Head section for SEO 15:44
103 Push code to github 05:34
104 AWS IAM acces 01:25
105 AWS EC2 Instance 08:44
106 Running our projects in EC2 17:45
107 NGINX Configuration 11:27
108 Push code changes to EC2 11:27
109 Route 53 - Add domain 07:50

Similar courses to React Node AWS - Build infinitely Scaling MERN Stack App

React & TypeScript - The Practical Guide

React & TypeScript - The Practical GuideAcademind Pro

Duration 7 hours 22 minutes 54 seconds
FULL Authentication WITH REACT JS NEXT JS TYPESCRIPT

FULL Authentication WITH REACT JS NEXT JS TYPESCRIPTudemy

Duration 6 hours 52 minutes 28 seconds
Youtube clone

Youtube cloneNomad Coders

Duration 15 hours 41 minutes 20 seconds