Share Description
In this course, you will :
- Learn how to connect ReactJS with NodeJS, Express & MongoDB.
- Build an entire project from scratch!.
- Refresh the basics about ReactJS, NodeJS, Express and MongoDB.
- Learn how to implement Authentication & Authorization.
- Add File Upload to ReactJS + Node/ Express Applications.
Syllabus :
1. The MERN Stack - Theory
- Understanding the Big Picture
- Diving Into the Frontend
- Understanding the Backend
- REST vs GraphQL
- Connecting Node & React
- Creating our Development Environment & the Development Servers
- Diving Deeper Into the Code
2. Planning the App
- Understanding the General App Idea
- Sketching out the Frontend
- Data & API Endpoints used in our App
- Required SPA Pages for the Frontend
3. React.js - A Refresher
- What is React?
- A Note About The NodeJS Version
- React 18
- Setting Up a Starting Project
- Understanding JSX
- Understanding Components
- Working with Multiple Components
- Using Props to pass Data between Components
- Rendering Lists of Data
- Handling Events
- Efficient Child<=>Parent Communication
- Working with "State"
- More on State
- Fetching User Input (Two-way Binding)
4. React.js - Building the Frontend
- Starting Setup, Pages & Routes
- Adding a UsersList Page / Component
- Adding a UserItem Component
- Styling our App & More Components
- Presentational vs Stateful Components
- Adding a Main Header
- Adding Navlinks
- Implementing a Basic Desktop & Mobile Navigation
- Understanding Portals
- Handling the Drawer State
- Animating the Sidedrawer
- Rendering User Places & Using Dynamic Route Segments
- Getting Route Params
- Adding Custom Buttons
- Adding a Modal
- Rendering a Map with Google Maps
- Continuing without a Credit Card
- Optional: More on the useEffect() Hook
- Adding a Custom Form Input Component
- Managing State in the Input Component
- Adding Input Validation
- Sharing Input Values & Adding Multiple Inputs
- Managing Form-wide State
- Finishing the "Add Place" Form
- Starting Work on the "Update Place" Page
- Adjusting the Input Component
- Creating a Custom Form Hook (useForm)
- Optional: More on (Custom) React Hooks
- Adjusting the Form Hook
- Fixing Minor Issues
- Showing a Deletion Warning
- Adding an "Auth" Page & Login Form
- Adding Signup + "Switch Mode" Button
- Adding Auth Context for App-wide State Management
- Listening to Context Changes
- Adding Authenticated & Unauthenticated Routes
- More Auth Context Usage
5. Node.js & Express.js - A Refresher
- What is Node.js?
- Writing our First Node.js Code
- Sending Requests & Responses
- What is Express.js?
- Adding Express.js
- Understanding the Advantages of Express.js
- How Code Execution Works
6. Node.js & Express.js - Building our REST API
- Implementing Basic Routing
- Adding Place-Specific Routes
- Getting a Place By User ID
- Handling Errors
- Adding our own Error Model
- Adding Controllers
- Adding a POST Route & Using Postman
- Handling Errors for Unsupported Routes
- Adding Patch Routes to Update Places
- Deleting Places
- Finalizing the "Get Places by User ID" Resource
- Setting Up the User Routes (Signup, Login, Get Users)
- Validating API Input (Request Bodies)
- Validating Patch Requests & User Routes
- Using Google's Geocoding API to Convert an Address Into Coordinates
7. Working with MongoDB & Mongoose - A Refresher
- What is MongoDB?
- SQL vs NoSQL
- Connecting React to a Database?
- Setting Up MongoDB
- Creating a Simple Backend & Connecting it to the Database
- Creating a Document with MongoDB
- Getting Data from the Database
- Installing Mongoose
- Understanding Models & Schemas
- Creating a Product
- Connecting to the Database & Saving the Product
- Getting Products
- Understanding the ObjectID
- Useful Resources & Links
8. Connecting the Backend to the Database - MongoDB & Mongoose
- Installing Mongoose & Connecting our Backend to MongoDB
- Creating the Place Schema & Model
- Creating & Storing Documents in the Database
- Getting Places by the PlaceID
- Getting Places by the UserID
- Updating Places
- Deleting Places
- How Users & Places are Related
- Creating the User Model
- Using the User Model for Signup
- Adding the User Login
- Getting Users
- Adding the Relation between Places & Users
- Creating Places & Adding it to a User
- Deleting Places & Removing it From the User
- Getting Places - An Alternative
- Cleaning Up our Code
9. Connecting the React.js Frontend to the Backend
- Initial Setup
- Sending a POST Request to the Backend
- Optional: The fetch() API
- Handling CORS Errors
- Getting Started with Error Handling
- Proper Error Handling in the Frontend
- Sending a Login Request
- Getting Users with a GET Request
- Creating a Custom Http Hook
- Improving the Custom Http Hook
- Using the Http Hook to GET Users
- Adding Places (POST)
- Loading Places by User Id
- Updating Places
- Deleting Places
- Fixing NavLinks & "My Places"
- Final Adjustments
- Useful Resources & Links
10. Adding File Upload
- Building an ImageUpload Component
- Finishing & Using the ImageUpload Component (in a Form)
- On the Backend: Using Multer to Save Files
- Filtering Files on the Backend (Images Only!)
- Wiring Frontend and Backend Up
- Connecting Users to Images
- Serving Images Statically
- Uploading Images for New Places
- Deleting Images When Places Get Deleted
11. Adding Authentication
- How Authentication Works (in a MERN App)
- Hashing the User Password
- Logging Users In (with Hashed Passwords)
- Generating Tokens (JWT) on the Backend
- Optional: More on JSON Web Tokens
- Backend Route Protection with Auth Middleware
- Using & Attaching JWT (Tokens) in React
- Using Tokens to Update and Delete Places
- Adding Authorization
- Authorization on "Delete Places"
- Storing the Token in the Browser Storage
- Adding Auto-Login (Basic Version)
- Managing the Token Expiration Date
- Finished Auto-Login & Auto-Logout
- Creating a Custom Authentication Hook
- Authentication - Summary
- General App Improvements
12. Application Deployment
- Deployment Steps Overview
- Using Environment Variables (Node.js)
- Environment Variables in React Apps
- Preparing API Keys & Credentials
- Building the React App
- Adding Code Splitting to React
- Understanding Possible Deployment Alternatives
- Deploying a Standalone REST API (Example: Heroku)
- Deploying a Standalone React SPA (Example: Firebase Hosting)
- Fixing Style Issues
- Deploying a Combined App
- Storing Files/ Uploads
