Mô tả

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.

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!

Bạn sẽ học được gì

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

Yêu cầu

  • Basic Understanding JavaScript
  • Basic Understanding of React Js
  • Basic Understanding of Node Js

Nội dung khoá học

17 sections

Introduction

5 lectures
Are you new to JavaScript React and NodeJs?
00:33
What we will build
10:21
Aim of the project
04:13
Application workflow
14:45
Finished project demo
14:47

React / Next Js Client

9 lectures
NOTE: Demo project
00:18
Setup react nextjs client
07:48
Layout component
07:37
Head section
05:15
Link component
05:51
Nav progress bar
08:36
Loading css
09:12
Register page
25:27
Client folder setup and next steps
04:37

Node Js API

10 lectures
Server setup
12:40
Routes
06:15
Controllers
04:50
User schema
15:57
Virtual field and methods
16:42
More NPM packages
15:55
Axios post request
10:23
Validation
17:05
Mongoose version
00:11
Mongo atlas
12:27

Starting with AWS

2 lectures
AWS signup
15:15
AWS SES for sending email
19:34

Login / Register / AWS SES

13 lectures
Register activation email
20:40
Register email params
08:13
Success and error messages
13:30
Async await
06:22
Environment variables with nextjs
09:00
Activate account - client
21:56
Activate account - server
20:26
Login - server
19:30
Login - client
12:35
Local storage and cookie helpers
18:56
Save user token in browser cookie
08:06
Redirect based on role
11:53
Logout and conditional rendering
13:28

User / Admin Access

6 lectures
Express JWT middleware
16:14
Auth and admin middleware
08:10
User profile - server
16:02
SSR and getInitialProps
20:05
Auth routes server side
19:30
withUser and withAdmin HOC
19:00

Password Forgot / Reset

5 lectures
What's next?
04:14
Forgot password - server
21:57
Reset password - server
13:30
Forgot password - client
19:30
Reset password - client
21:32

Categories / Uploads / AWS S3

10 lectures
Category schema
08:16
Category routes and controllers setup
13:28
Trying create category with postman
15:43
AWS S3
20:42
Uploading images to S3 using form data
36:41
Create category - client
38:54
Show all categories
20:19
Uploading base64 image to S3
14:06
Image resize client side and upload
23:09
Rich text editor
15:05

Links

12 lectures
Link schema
10:58
Link validators routes and controllers
14:03
Link create and read - server
10:29
Steps to create/submit link - client
06:05
Submit link page part 1
12:36
Submit link page part 2
10:11
Submit link page part 3
17:05
Submit link page part 4
15:19
Submit link page part 5
15:35
Single category with links - server
22:18
Single category page with links part 1
19:48
Single category page with links part 2
24:01

Load More / Click Count / Infinite Scroll

4 lectures
Load more
10:58
Click count - server
12:53
Click count - client
09:29
Infinite scrolling
07:50

Category Update / Delete

8 lectures
Next steps
04:04
Categories read - admin
14:18
Update delete buttons and warnings
13:42
Update category - server
13:52
Delete category - server
03:26
Delete category - client
09:50
Reset mongo atlas database and AWS S3
12:56
Update category - client
29:42

User can Update / Delete

5 lectures
All links by user
20:11
User dashboard part 1
16:04
User dashboard part 2
13:04
Update delete link - server
06:57
Update link - client
19:24

Admin Update / Delete Access

5 lectures
All links for admin - server
07:59
All links for admin - client
13:31
canUpdateDeleteLink middleware
13:28
Delete any link by admin
14:04
Update any link by admin
12:04

Profile Update / Mass Email / AWS SES

6 lectures
Choose favourite category on user registration - client
08:41
Choose favourite category on user registration - server
07:53
Mass email to users on new link publish
38:27
Update user profile - server
08:33
Update user profile - client
16:44
Update user in local storage
09:15

Trending Links / View Count

5 lectures
Most popular / Trending links - server
09:52
Most popular / Trending links - client
14:17
Click count - client
04:54
Most popular link in given category
06:38
Head section for SEO
15:43

AWS IAM / EC2 / Route 53 and Deployment

9 lectures
Push code to github
05:33
AWS IAM acces
01:24
Resource to Install Node in EC2
00:06
AWS EC2 Instance
08:43
Running our projects in EC2
17:44
Code Block for NGINX configuration
00:13
NGINX Configuration
11:26
Push code changes to EC2
06:34
Route 53 - Add domain
07:49

BONUS

1 lectures
Other courses you may like
01:00

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.