English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 73 lectures (26h 23m) | 11.0 GB
Create 9 different MERN websites, and go from knowing basic HTML, CSS and Javascript to a fullstack web developer
You’re probably here because you have some knowledge of web programming, and know how to use HTML and Javascript to make simple webpages. Or maybe you even have some experience with React, Express or MongoDB? Well in this course, you’re gonna learn not just how to use them alone, but also how they can work together to make a beautiful fullstack website.
This course takes you through 9 different websites, in progressive difficulty. It teaches you how each component of the MERN stack works by itself, and then integrates each component until we have a fullstack website. We’ll also make a user system from scratch, so users can register and log in, and finally we’ll integrate that into a site where users can listen to music and make their own playlists.
Here is what you’ll get out of it
- A look at how to use the command line, for Windows, Mac and Linux
- Knowledge of how to make frontends with React, a modern framework
- Insight into how an API works, and be able to create API backends with Express
- Learn how to use MongoDB to create and store stuff, like users
- How to create a login and register system, that you can use in your own websites
- Learn the difference between authorization and authentication
- Know how MaterialUI and Bootstrap can be used to make the frontend beautiful
- How to deploy your website to the web, and how to setup your own server
What you’ll learn
- NodeJS
- React (for the frontend)
- Express (backend)
- MongoDB (our database)
- PassportJS (login and register system)
- Postman (for backend testing)
- Material UI
- Bootstrap
- Storing pictures and video
- BONUS: Using DigitalOcean to deploy your website
Table of Contents
Introduction
1 Welcome To The Course!
2 A Quick Overview
3 Resources For This Course
React And Node Go Hand In Hand
4 Easing Into The Command Line
5 What Is Node
6 Making Your First React App
7 Adding Substance To Your Page
8 How Hooks Add Dynamics
9 Challenge Which Commands Did We Use
React With Routes
10 Making A New Component
11 Routing In Action
12 Abstracting The Routes
13 Challenge Recall The Library
14 (Optional) Classes vs Functional Components
The Backend
15 Why The Backend Exists
16 Setting Up An ExpressJavascript Backend
17 Making The Backend Responsive
18 Testing With Postman
19 Challenge Do you know your CRUD
Front And Back Together
20 Starting With The Back
21 Communicating With The Backend The Top Components
22 Communicating With The Backend Filling Out The Form
23 Challenge How Would You Test The Backend With Postman
Databases In The Cloud With MongoDB
24 Make Your First Database
25 Creating Models For The Database
26 Interacting With The Model
27 Bringing It To The Frontend The Main Page
28 Bringing It To The Frontend Filling Out The Rest
Your First Complex MERN Website
29 Model Buildup Strategy
30 Preparing The Ground Models
31 Making The Dependent Models
32 A Magnificent Frontend Setting Things Up
33 A Magnificent Frontend The Interface
34 Challenge Implement Your Own Model And Fix The Bug
Remember With Redux
35 How React Passes Around Info
36 How Redux Works
37 An Implementation Of Redux The Backend
38 An Implementation Of Redux The Fantastic Frontend
39 Challenge Implement an item in redux
Making Users
40 How Does The User System Work
41 Using PassportJS With Express
42 Prodding And Testing The User API
43 Users On The Frontend Part 1
44 Users On The Frontend Part 2
45 Users On The Frontend Part 3
46 Restricting Access
47 Making An Admin
48 Testing For Potential Weaknesses
49 Challenge What did we do
The Finale
50 What We’ll Be Doing
51 What We’ll Need
52 Helpful diagrams and images for the finale
53 The css for the finale
54 Starting Out
55 The Preliminary User Interface
56 The User Forms
57 Behind the Admin Curtain
58 Why We Use Cloudinary
59 Interacting With Cloudinary
60 Making The Models
61 Testing The Song CRUD
62 The Song CRUD Backend
63 Testing The Artist CRUD
64 The Artist CRUD Backend
65 Updating The Redux
66 Adding The Admin Interface for SongsArtists
67 Testing The Playlist CRUD
68 Testing User Music
69 User Music Backend
70 User’s Redux
71 User Music Frontend
Conclusion
72 Congratulations!
Extra stuff
73 Bonus Using DigitalOcean To Deploy
Resolve the captcha to access the links!