React Node AWS - Build infinitely Scaling MERN Stack App

25h 1m 19s
English
Paid

Master the art of building a highly scalable MERN Stack application for a new startup that is designed to scale infinitely. In this course, you'll learn to create a robust architecture capable of supporting millions of users, perfect for launching a future-proof project.

Tech Stack Overview

This course will guide you through building a full-stack application using the following technologies:

  • Frontend: React and NextJS (React Framework)

  • Backend: Node.js, Express, and MongoDB

  • AWS Services: S3 for file storage, SES for email, EC2 for hosting, IAM for access management, Route 53 for domain management

  • Database: MongoDB Atlas as a Managed Database Service

Project Goals

What You Will Build

  • A scalable startup project inspired by a successful real-world app, allowing multiple users to log in and manage their content.

  • Introduce improvements for scalability and ease of maintenance.

  • Focus on a low-cost operation with user-friendly, engaging features.

Aim of the Project

  • Attract and engage a wide audience.

  • Create a platform for content creators to share and manage their links.

  • Facilitate user actions such as sign-up, post, share, and like.

Project Overview

System Components

  • Implement a robust login/register system using MongoDB Atlas.

  • Utilize AWS S3 for scalable user file storage.

  • Use AWS SES for efficient email sending capabilities.

  • Host the backend and frontend using AWS EC2 within a single instance.

  • Optimize costs with AWS's competitive pricing for scaling and services.

Project Architecture

  • Design a clean, simple, and scalable architecture.

  • Separate backend and frontend for easy development and maintenance.

  • Simplify frontend tasks like data retrieval and display.

  • Maintain a simple backend API for handling data requests and responses.

Course Suitability

  • This course is ideal for developers wanting to leverage their React and Node.js knowledge for building scalable apps.

  • Turn your innovative ideas into reality or support startups with your skills.

Take the first step towards achieving your dream! Join this course and gain the skills to build a powerful, scalable application. Let's turn your vision into reality together!

Course Requirements

  • Basic understanding of JavaScript
  • Basic understanding of React.js
  • Basic understanding of Node.js

Target Audience

  • Web Developers aiming to build professional full-stack applications.
  • Developers focused on scalable application growth.
  • Individuals interested in utilizing AWS services for app development.
  • Anyone starting new projects for themselves or startups.

Learning Outcomes

  • Master React JS and Next JS for frontend development.
  • Develop efficient Node.js APIs for backend services.
  • Build scalable applications using AWS and MongoDB Atlas.
  • Implement SEO strategies in React applications with Next.js.
  • Execute secure authentication and manage user interactions.
  • Design applications with future scalability and clean architecture.

About the Author: udemy

udemy thumbnail
By connecting students all over the world to the best instructors, Udemy is helping individuals reach their goals and pursue their dreams. Udemy is the leading global marketplace for teaching and learning, connecting millions of students to the skills they need to succeed. Udemy helps organizations of all kinds prepare for the ever-evolving future of work. Our curated collection of top-rated business and technical courses gives companies, governments, and nonprofits the power to develop in-house expertise and satisfy employees’ hunger for learning and development.

Watch Online 109 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 109 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: What we will build
All Course Lessons (109)
#Lesson TitleDurationAccess
1
What we will build Demo
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
Unlock unlimited learning

Get instant access to all 108 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription