Modern React, Express 2024 Build Complete Canva Project A-Z
Published 5/2024
MP4 | Video: h264, 1920x1080 | Audio: AAC, 44.1 KHz
Language: English
| Size: 20.10 GB[/center]
| Duration: 28h 11m
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
