GET AHEAD- Full stack MERN Web App Code to Cloud

Udemy

Learn how to develop a responsive e-commerce app and acquire the skills to secure, launch, and scale it on cloud platforms such as Heroku and Netlify.

Online

₹ 2499

particular

details

                                    Medium of instructions
                                    English

                                    Mode of learning
                                    Self study

                                    Mode of Delivery
                                    Video and Text Based

Introduction

Introduction
10,000 feet view - Sneak peek
Lecture 2: Before Getting Started

Project Kickoff and Setting up the bases

Project Kick off
Project Installs
Tools and Extensions
Building the UI Layout
Bootstrap Integration
Navbar Design
Styling Navbar
Design Project Logo/Brand
Design Dynamic Component
Designing Footer Component
Sign up with Github and Integration
Sign up with Netlify, Setting up CI / CD for the front end project.

Design the Project Landing Page for our App

Intro - Setting up the Landing Page
Sprucing up the Landing Page
Design a background for Landing Page
Designing the Dish Menu
Integration with Typed component
CI/CD - Deploy to Netlify

Catalog Design

Intro to Catalog Design
Carousel Design
First Steps to API Driven Design
Intro to MongoDB on Cloud
API integration with Mongo
Designing our First API
Designing our First Mongo model
Designing API Error Handling Semantics
API - Create a Dish Category
Introduction to input validation on APIs
API End point - Retrieve Category By Id
Design API Endpoint to create a dish resource
Enhance API to work with binary data - upload dish image
API Input Data validation and Error Handling
API Endpoint to Fetch All Dishes
API Endpoint to retrieve dish photo
API Code Integration with Github
API Deploy to Cloud - Heroku
UI - API Integration - Setting up AXIOS
UI - API Integration - Getting Dish Data
UI-API Integration - Presenting Dish detail as Card Component
API Endpoint to Filter Dishes By Category
Dish Filtering on UI
Adding Event Handling to Filter Dishes
Display Filtered Dishes
Designing a Spinner Component for our app
Design Adding dishes To Cart
Design Notification Component to our App
Deploy to Cloud - Heroku
Deploy to Netlify - Connect Two Clouds

Cart Component Design

Cart Component Design
Quick Detour - CORS Review, Key element of distributed app
CORS Review - Continued
Cart Management on Browser
Cart Component - Unauthenticated View
Cart Component - Unauthenticated View Continued
Cart Component - Render Cart
Cart Component UI Event Handling
Cart Component - Notification Integration
Deploy to Netlify

Protecting your App - Integration with Auth0 identity platform

Intro to auth0 - sign up
Design of Sign In and Sign out Flows
Integration with Navbar
Auth0 integration with Netlify - CI/CD
Spinner Integration
Auth0 - Sign In Flow
Auth0 User Profile
API Endpoint - User Creation
API Endpoint User Creation - Testing
UI - User Creation on First Login
UI - Exactly Once User Creation
Auth0 API Security - JSON Web Tokens, Protecting your backend APIs
API Integration with auth0 security
UI - Auth0 - API Integration
CI / CD - Deploy to Heroku and Netlify

Back to Cart - Authenticated view

Cart Component - Integration with auth0
UI - Responsive Design
Responsive Design , Favicon Design and UI Changes
CI / CD - Deploy to Netlify

Preparing for Checkout

API Endpoint - Address Capture
Mongo Model Update
Form Design - Address Data
API Integration with Address Form Prefill
API Integration Address Form Prefill - Continued
API Integration Address Save / Update
CI/CD - Deploy to Heroku and Netlify
Spinner Integration

Payments Workflow Design

Intro to Stripe and Stripe Signup
Stripe Integration
Testing Stripe Integration
API - Create Order
Testing Create Order
End-End Testing - Order Creation
End-to-End Testing Order Creation - Continued
Order CANCEL Flow
Stripe Webhook - ORDER Fulfilment
Stripe Webhook - ORDER Fulfilment - Continued
ORDER Fulfilment - Messaging
Tiny Url Service - Sign Up with Bitly
Bitly Integration with the App
API Testing - ORDER Fulfilment
API Security - Testing with JWT Tokens from auth0
E-2-E Testing ORDER Fulfilment
API Dealing with ABANDONED Orders
API Testing - ABANDONED Orders
E-2-E Testing ABANDONED Orders
CI / CD - Deploy to Cloud
Testing ORDER , Payment Flows on Cloud
Responsive Design

Order Management Workflow

Designing ORDER Component
API - Retrieve user specific ORDERS
UI Integration with API
Display ORDERs in Accordion Component
Protected Routes, Forced Authentication
UI - ORDER Component Design
UI - ORDER Component Design Continued ..
UI - ORDER Component Design Continued
UI - Responsive Design
De-selecting ABANDONED Orders
CI / CD - Deploy to Cloud

Order Management Admin Interface

Intro - ADMIN Interface
ADMIN Profile , Retrieve ORDERS
Implementing API Security with JWT Tokens
Implementing Authorization - embedding SCOPEs in JWT tokens
Display ADMIN Orders, Implement Filter Logic
Implement Filter Orders on STATE
API Implement ACCEPT Orders Flow
UI Integration - ACCEPT Flow
UI Testing ACCEPT Flow
CI/CD - Deploy to Cloud

Order Refund Flow

API - CANCEL Order
Testing CANCEL Order
REFUND Stripe Webhook event
UI Integration - CANCEL Flow
E-2-E Testing CANCEL Flow
CI/CD - Deploy to Cloud

Order State Refresh - On Demand, Pull Model

Intro to Stripe CLI , ORDER Status Mongo Model Creation
Refine ORDER Management Workflow
API Testing
UI Integration, Stripe Idempotent Requests
Retrieve ORDER by Id
UI Integration with multiple flows
CI/CD - Deploy to Cloud
Validating the Deploy on cloud
Validation of ORDER State refresh

Real Time Messaging - Web Sockets , Push Model

Intro to Web Sockets and Integration with API server
Intro to Web Sockets readiness on the React client
Sending Real time messages from server to client
Display Notification on UI; Deploy to Cloud
Validation of Web sockets messaging between Netlify and Heroku

Design Admin Section

UI - Creating Dish Category
Form state and data handling - Formik and Yup
E-2-E Testing
Design Admin Links panel
Form Design for Adding Dish
UI Integration with API
E-2-E Testing - Create a Dish
Image preview, upload with Formik
Testing Dish Creation with image data
Display Admin on Navbar
CI/CD Deploy to cloud
Spruce up the UI - Bug Fixes
Protecting ADMIN APIs with JWT SCOPED tokens
E-2-E Security Implementation , Testing , Deploy to Netlify
Validation on Cloud

Design Search Functionality

Intro to Search
Navbar integration with Search API
Designing Search output Component
CI/CD - Deploy to Cloud

NFR: Responding to operational downtimes

Defining Health Check API
UI Integration with Health Check API
UI - Design Offline component
Testing Offline Scenarios
CI/CD - Deploy to Cloud

NFR: Security

Proxying requests, code minification
CI/CD Deploy to Cloud
Stripe Signature Verification
Quick Bugfix for webhooks
CI/CD - Deploy to Cloud

NFR: Performance - Need for Speed

Intro - http caching, compression
Caching - Deep Dive
Harnessing Object Caching with Node-Cache
Harnessing http Compression
CI/CD - Deploy to Cloud

NFR: Consent Management

Intro to Consent Management
CI/CD - Cloud Deploy

NFR: Rate Limiting - Prevent DoS Attacks

Intro to Rate Limiting
Rate Limiting Validation
CI/CD - Deploy to Cloud

NFR: System Hardening

Intro - DB Access hardening, Principle of Least Privilege
Auth0 Hardening - UI and API Access
Final Testing
Quick Bug Fix

Conclusion

Thank you and Keep Rocking!!

Popular Courses

Popular Platforms

Popular Searches

GET AHEAD- Full stack MERN Web App Code to Cloud

Online

₹ 2499

Quick Facts

Course overview

The highlights

Program offerings

Course and certificate fees

Fees information

certificate availability

certificate providing authority

Who it is for

What you will learn

The syllabus