Modern React, Express 2024 Build Complete Canva Project A-Z

Build Full Stack Canva Application Project with React.js, Node.js, Express.js and MongoDB From Concept to Creation

What you'll learn

Build Complete Canva Project

React js Fundamental

Express js Fundamental

Functional Component,

MongoDB Fundamental

Design Total Application with Tailwind CSS From Scratch

Use Middleware for Protected Routes

Setup Image Upload Function to Cloudinary

User Register and Login Setup

Move Element Function Setup

Resize Element Function Setup

Rotate Element Function Setup

Text Add Opacity Add Option

Text Padding Font Weight Add

Image Added Option

Data Store in MongoDB

Requirements

Basic Understanding of JavaScript

Good Grasp of Tailwind CSS

HTML and CSS Knowledge

Basic Command Line Knowledge

Description

Modern React JS, Express JS 2024 Build Complete Canva Project A-ZWelcome to the ultimate journey in Full-Stack development! Modern React JS, Express JS Build Complete Canva Project comprehensive course, you'll dive deep into the world of modern web development by building dynamic, interactive Canva applications from scratch.Whether you're a seasoned developer looking to expand your skillset or a newcomer eager to learn the ropes, this course is designed to equip you with the knowledge and tools necessary to create stunning, feature-rich web applications.What You'll Learn:Foundations of Full-Stack Development: Gain a solid understanding of the core technologies driving modern web applications, including React.js, Node.js, Express.js, and MongoDB.Building with React.js: Master the art of building dynamic user interfaces using React.js, the industry-leading JavaScript library for building user interfaces.Server-Side Development with Node.js and Express.js: Learn how to create robust, scalable server-side applications using Node.js and Express.js, and harness the power of asynchronous JavaScript to handle requests efficiently.Data Management with MongoDB: Explore the world of NoSQL databases and learn how to leverage MongoDB to store and manage your application's data with ease.Integrating Canva into Your Projects: Unlock the full potential of Canva's design capabilities and learn how to seamlessly integrate it into your web applications to create visually stunning user experiences.From Concept to Creation: Follow along as we take a concept from ideation to implementation, guiding you through every step of the development process, from planning and design to deployment and optimization.Why Take This Course:Hands-On Learning: Dive straight into practical, real-world projects that reinforce key concepts and allow you to apply what you've learned in a tangible way.Expert Guidance: Learn from industry experts with years of experience in Full-Stack development, who will provide you with valuable insights and best practices every step of the way.Portfolio-Ready Projects: Build a portfolio of impressive, fully-functional web applications that showcase your skills and expertise to potential employers or clients.Community Support: Join a vibrant community of fellow learners, where you can collaborate, share ideas, and receive support as you progress through the course.Whether you're aspiring to become a Full-Stack developer, enhance your existing skillset, or bring your creative ideas to life, this course will empower you to build Full-Stack Canva applications with confidence and precision. Enroll now and embark on your journey to becoming a Full-Stack development master!

Overview

Section 1: Introduction Project - What You Will Build

Lecture 1 Introduction Project - What You Will Build

Lecture 2 Need Your Support

Lecture 3 My Mission

Lecture 4 Course Review - It will Inspire me a Lot

Section 2: React Fundamentals React Structure, JSX component & Rendering

Lecture 5 React Introduction

Lecture 6 Create New React App Using Vite

Lecture 7 Project Run And Build Command

Lecture 8 Dive Inside React Project Structure

Lecture 9 Organizing File Folders

Lecture 10 Best VS Code Extensions And Settings For React Development

Lecture 11 Primary Understanding On Component Part 1

Lecture 12 Primary Understanding On Component Part 2

Lecture 13 JSX And Conventions

Lecture 14 JSX Short Hand If else

Lecture 15 JSX Immediately invoked function

Lecture 16 JSX Loop Inside

Lecture 17 JSX Conditional Rendering Using If Else

Lecture 18 JSX Conditional Rendering Using Switch Statement

Lecture 19 JSX Conditional Rendering Using Ternary Operator

Lecture 20 JSX Conditional Rendering Using Logical And And

Lecture 21 JSX Conditional Rendering Using Immidiatly Invoked Function

Lecture 22 Passing Properties to Child Component

Lecture 23 Passing Simple String to Child Component

Lecture 24 Passing Object to Child Component

Lecture 25 Passing Function to Child Component

Lecture 26 Managing Click Event

Lecture 27 Managing Form Submit

Section 3: React Routing

Lecture 28 Applying React Router Dom

Lecture 29 Link And NavLink For Router

Lecture 30 Browser Router VS HashRouter

Lecture 31 Passing Parameter Via Naviagation

Section 4: React Hook & State Management

Lecture 32 [Hook] Meet With Hook

Lecture 33 [Hook] useRef InnerText InnerHTML

Lecture 34 [Hook] useRef Working With Attribute

Lecture 35 [Hook] useRef Working With Input Element

Lecture 36 [Hook] useRef Working With CSS Class

Lecture 37 [Hook] useRef Caching Expensive Computation

Lecture 38 [Hook] useState Understading Inside

Lecture 39 [Hook] useState Working With Immutable Object

Lecture 40 [Hook] useState Working With Immutable Array Part 1

Lecture 41 [Hook] useState Working With Immutable Array Part 2

Lecture 42 [Hook] useState Managing Form Like Pro Part 1

Lecture 43 [Hook] useState Managing Form Like Pro Part 2

Lecture 44 [Hook] useEffect understanding arguments and uses

Lecture 45 [Hook] useEffect calling api using promises

Lecture 46 [Hook] useEffect calling api usig async await

Section 5: Express JS Fundamental

Lecture 47 Introduction What is Express Js

Lecture 48 Your First Express Application

Lecture 49 Express js Routing

Lecture 50 Four Topic We Need To Focus

Lecture 51 Understanding Response

Lecture 52 Simple String Response

Lecture 53 Response Status Code

Lecture 54 JSON Response

Lecture 55 Response Download

Lecture 56 Response Redirect

Lecture 57 Response Header

Lecture 58 Response Set Cookies

Lecture 59 Response Clear Cookies

Lecture 60 Working With Request

Lecture 61 Get Request With URL Query

Lecture 62 Working With Get Request Header

Lecture 63 Simple Post Request

Lecture 64 Post Request With URL Query

Lecture 65 Post Request With Header Properties

Lecture 66 Post application-json

Lecture 67 Working With Multipart Form Data

Lecture 68 File Upload

Lecture 69 Middleware

Lecture 70 Application Middleware

Lecture 71 Route Middleware

Section 6: MongoDB Fundamental - A NoSQL Database

Lecture 72 Introduction to MongoDB

Lecture 73 Installing MongoDB and Compass

Lecture 74 Connecting to MongoDB

Lecture 75 Schema and Models

Lecture 76 Create and Save a document

Lecture 77 Find documents in multiple ways

Lecture 78 Query API Select, Sort, Limit, Count Documents

Lecture 79 Complex Query Comparison Operators

Lecture 80 Complex Query And, Or Operations

Lecture 81 Exercise Advanced Query

Lecture 82 Update a document (Way 1)

Lecture 83 Update a document (Way 2)

Lecture 84 Delete documents in 2 ways

Section 7: Build Complete Canva Project From Scratch

Lecture 85 Start to Build Complete Canva Project - What You Will Build Introduction

Lecture 86 Canva Project Excise File - Downloadable Resources

Section 8: Project Setup and Deploy

Lecture 87 Project Setup and VS Code Extensions

Lecture 88 Project Setup and Deploy Part 1

Lecture 89 Project Setup and Deploy Part 2

Lecture 90 Project Setup and Deploy Part 3

Lecture 91 Project Setup and Deploy Part 4

Lecture 92 Project Setup and Deploy Part 5

Lecture 93 Project Setup and Deploy Part 6

Section 9: Setup React Router Dom and Tailwind Css

Lecture 94 Setup React Router Dom And Tailwind Css Part 1

Lecture 95 Setup React Router Dom And Tailwind Css Part 2

Section 10: Canva Home Page Design

Lecture 96 Canva Home Page Design

Section 11: Register and Login Form Create and Design

Lecture 97 Register and Login Form Create and Design Part 1

Lecture 98 Register and Login Form Create and Design Part 2

Lecture 99 Register and Login Form Create and Design Part 3

Lecture 100 Register and Login Form Create and Design Part 4

Lecture 101 Upload Project to Live Server

Section 12: Home Page Create and Design

Lecture 102 Home Page Create and Design Part 1

Lecture 103 Home Page Create and Design Part 2

Lecture 104 Home Page Create and Design Part 3

Lecture 105 Home Page Create and Design Part 4

Lecture 106 Home Page Create and Design Part 5

Lecture 107 Home Page Create and Design Part 6

Lecture 108 Home Page Create and Design Part 7

Lecture 109 Home Page Create and Design Part 8

Lecture 110 Home Page Create and Design Part 9

Section 13: Main Page Sidebar Design

Lecture 111 Main Page Sidebar Design Part 1

Lecture 112 Main Page Sidebar Design Part 2

Lecture 113 Main Page Sidebar Design Part 3

Lecture 114 Main Page Sidebar Design Part 4

Lecture 115 Main Page Sidebar Design Part 5

Section 14: Design Sidebar Pop Up Section

Lecture 116 Design Sidebar Pop Up Section Part 1

Lecture 117 Design Sidebar Pop Up Section Part 2

Lecture 118 Design Sidebar Pop Up Section Part 3

Section 15: Setup Main Design Component

Lecture 119 Setup Main Design Component Part 1

Lecture 120 Setup Main Design Component Part 2

Lecture 121 Setup Main Design Component Part 3

Lecture 122 Setup Main Design Component Part 4

Lecture 123 Setup Main Design Component Part 5

Section 16: Design Functionality Design Component

Lecture 124 Design Functionality Design Component Part 1

Lecture 125 Design Functionality Design Component Part 2

Lecture 126 Design Functionality Design Component Part 3

Section 17: Make Design Rotate Resize Move Indicator

Lecture 127 Make Design Rotate Resize Move Indicator Part 1

Lecture 128 Make Design Rotate Resize Move Indicator Part 2

Lecture 129 Make Design Rotate Resize Move Indicator Part 3

Section 18: Move Html Div Method

Lecture 130 Move Html Div Method Part 1

Lecture 131 Move Html Div Method Part 2

Lecture 132 Move Html Div Method Part 3

Section 19: Resize Html Div Method

Lecture 133 Resize Html Div Method Part 1

Lecture 134 Resize Html Div Method Part 2

Section 20: Rotate Html Div Method

Lecture 135 Rotate Html Div Method Part 1

Lecture 136 Rotate Html Div Method Part 2

Section 21: Text Add Opacity Add Option

Lecture 137 Text Add Opacity Add Option Part 1

Lecture 138 Text Add Opacity Add Option Part 2

Lecture 139 Text Add Opacity Add Option Part 3

Section 22: Text Padding Font Weight Add

Lecture 140 Text Padding Font Weight Add Part 1

Lecture 141 Text Padding Font Weight Add Part 2

Lecture 142 Text Padding Font Weight Add Part 3

Section 23: Image Added Option

Lecture 143 Image Added Option Part 1

Lecture 144 Image Added Option Part 2

Lecture 145 Image Added Option Part 3

Section 24: User Register Function

Lecture 146 User Register Function Part 1

Lecture 147 User Register Function Part 2

Lecture 148 User Register Function Part 3

Lecture 149 User Register Function Part 4

Lecture 150 User Register Function Part 5

Section 25: User Login Function

Lecture 151 User Login Function Part 1

Lecture 152 User Login Function Part 2

Section 26: Create Design And Store Database

Lecture 153 Create Design And Store Database Part 1

Lecture 154 Create Design And Store Database Part 2

Lecture 155 Create Design And Store Database Part 3

Lecture 156 Create Design And Store Database Part 4

Lecture 157 Create Design And Store Database Part 5

Lecture 158 Create Design And Store Database Part 6

Section 27: Design Functionality Add and Download

Lecture 159 Design Functionality Add and Download Part 1

Lecture 160 Design Functionality Add and Download Part 2

Lecture 161 Design Functionality Add and Download Part 3

Lecture 162 Bug Fix for Add Text Zindex

Section 28: Image Save Function Setup

Lecture 163 Image Save Function Part 1

Lecture 164 Image Save Function Part 2

Lecture 165 Image Save Function Part 3

Section 29: Image Upload Function Setup

Lecture 166 Image Upload Function Part 1

Lecture 167 Image Upload Function Part 2

Lecture 168 Image Upload Function Part 3

Section 30: Image Show Function Setup

Lecture 169 Image Show Function Part 1

Lecture 170 Image Show Function Part 2

Lecture 171 Image Show Function Part 3

Section 31: Design Template Show

Lecture 172 Design Template Show Part 1

Lecture 173 Design Template Show Part 2

Lecture 174 Design Template Show Part 3

Section 32: Project Organize Setup

Lecture 175 Project Organize Setup Part 1

Lecture 176 Project Organize Setup Part 2

Lecture 177 Project Organize Setup Part 3

Lecture 178 Project Organize Setup Part 4

Section 33: User Logout Function

Lecture 179 User Logout Function

Lecture 180 Protect The Route

Lecture 181 Show Validation Message For User Login

Who want to become MERN Stack Developer.,Students studying web development or related fields,Freelancers looking to expand their service offerings,Add This Experience in Work Portfolio,University Project Assignment