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

Focused View

Kazi Ariyan,easy Learning

28:10:59

852 View

1. Introduction Project - What You Will Build

1. Introduction Project - What You Will Build.mp4

16:09

2. Need Your Support.mp4

01:20

3. My Mission.mp4

01:23

4. Course Review - It will Inspire me a Lot.mp4

02:39

2. React Fundamentals React Structure, JSX component & Rendering

1. React Introduction.mp4

06:46

2.1 Fundamental Excise Files.zip

2. Fundamental Excise Files - Downloadable Resources.html

3. Create New React App Using Vite.mp4

07:21

4. Project Run And Build Command.mp4

06:33

5. Dive Inside React Project Structure.mp4

14:43

6. Organizing File Folders.mp4

05:09

7. Best VS Code Extensions And Settings For React Development.mp4

06:19

8. Primary Understanding On Component Part 1.mp4

08:59

9. Primary Understanding On Component Part 2.mp4

07:22

10. JSX And Conventions.mp4

09:41

11. JSX Short Hand If else.mp4

04:01

12. JSX Immediately invoked function.mp4

06:42

13. JSX Loop Inside.mp4

05:52

14. JSX Conditional Rendering Using If Else.mp4

08:55

15. JSX Conditional Rendering Using Switch Statement.mp4

04:07

16. JSX Conditional Rendering Using Ternary Operator.mp4

02:42

17. JSX Conditional Rendering Using Logical And And.mp4

03:32

18. JSX Conditional Rendering Using Immidiatly Invoked Function.mp4

03:40

19. Passing Properties to Child Component.mp4

05:13

20. Passing Simple String to Child Component.mp4

05:06

21. Passing Object to Child Component.mp4

05:35

22. Passing Function to Child Component.mp4

02:52

23. Managing Click Event.mp4

05:40

24. Managing Form Submit.mp4

05:07

3. React Routing

1. Applying React Router Dom.mp4

15:15

2. Link And NavLink For Router.mp4

13:37

3. Browser Router VS HashRouter.mp4

05:09

4. Passing Parameter Via Naviagation.mp4

05:45

4. React Hook & State Management

1. [Hook] Meet With Hook.mp4

01:45

2. [Hook] useRef InnerText InnerHTML.mp4

09:58

3. [Hook] useRef Working With Attribute.mp4

05:44

4. [Hook] useRef Working With Input Element.mp4

07:38

5. [Hook] useRef Working With CSS Class.mp4

06:13

6. [Hook] useRef Caching Expensive Computation.mp4

7. [Hook] useState Understading Inside.mp4

08:35

8. [Hook] useState Working With Immutable Object.mp4

08:21

9. [Hook] useState Working With Immutable Array Part 1.mp4

14:15

10. [Hook] useState Working With Immutable Array Part 2.mp4

06:48

11. [Hook] useState Managing Form Like Pro Part 1.mp4

12:32

12. [Hook] useState Managing Form Like Pro Part 2.mp4

11:34

13. [Hook] useEffect understanding arguments and uses.mp4

06:40

14. [Hook] useEffect calling api using promises.mp4

07:00

15. [Hook] useEffect calling api usig async await.mp4

07:09

5. Express JS Fundamental

1. Introduction What is Express Js.mp4

04:01

2. Your First Express Application.mp4

10:23

3. Express js Routing.mp4

06:45

4. Four Topic We Need To Focus.mp4

01:21

5. Understanding Response.mp4

04:17

6. Simple String Response.mp4

05:07

7. Response Status Code.mp4

04:12

8. JSON Response.mp4

04:14

9. Response Download.mp4

04:12

10. Response Redirect.mp4

04:27

11. Response Header.mp4

05:43

12. Response Set Cookies.mp4

04:59

13. Response Clear Cookies.mp4

04:46

14. Working With Request.mp4

01:32

15. Get Request With URL Query.mp4

06:26

16. Working With Get Request Header.mp4

04:15

17. Simple Post Request.mp4

02:48

18. Post Request With URL Query.mp4

03:52

19. Post Request With Header Properties.mp4

05:14

20. Post application-json.mp4

07:42

21. Working With Multipart Form Data.mp4

08:46

22. File Upload.mp4

09:46

23. Middleware.mp4

02:18

24. Application Middleware.mp4

08:05

25. Route Middleware.mp4

03:49

6. MongoDB Fundamental - A NoSQL Database

1. Introduction to MongoDB.mp4

01:41

2. Installing MongoDB and Compass.mp4

06:23

3. Connecting to MongoDB.mp4

08:07

4. Schema and Models.mp4

07:24

5. Create and Save a document.mp4

08:05

6. Find documents in multiple ways.mp4

10:21

7. Query API Select, Sort, Limit, Count Documents.mp4

08:51

8. Complex Query Comparison Operators.mp4

07:58

9. Complex Query And, Or Operations.mp4

05:34

10. Exercise Advanced Query.mp4

06:13

11. Update a document (Way 1).mp4

03:43

12. Update a document (Way 2).mp4

05:38

13. Delete documents in 2 ways.mp4

03:53

7. Build Complete Canva Project From Scratch

1. Start to Build Complete Canva Project - What You Will Build Introduction.mp4

16:09

2.1 Canva Excise File.zip

2. Canva Project Excise File - Downloadable Resources.html

8. Project Setup and Deploy

1. Project Setup and VS Code Extensions.mp4

04:33

2. Project Setup and Deploy Part 1.mp4

09:52

3. Project Setup and Deploy Part 2.mp4

15:53

4. Project Setup and Deploy Part 3.mp4

16:46

5. Project Setup and Deploy Part 4.mp4

12:34

6. Project Setup and Deploy Part 5.mp4

10:56

7. Project Setup and Deploy Part 6.mp4

14:52

9. Setup React Router Dom and Tailwind Css

1. Setup React Router Dom And Tailwind Css Part 1.mp4

10:44

2. Setup React Router Dom And Tailwind Css Part 2.mp4

16:04

10. Canva Home Page Design

1.1 Canva Home Page Design.html

1. Canva Home Page Design.mp4

13:21

11. Register and Login Form Create and Design

1.1 Register and Login Form Create and Design Part 1.html

1. Register and Login Form Create and Design Part 1.mp4

12:26

2.1 Register and Login Form Create and Design Part 2.html

2. Register and Login Form Create and Design Part 2.mp4

16:52

3.1 Register and Login Form Create and Design Part 3.html

3. Register and Login Form Create and Design Part 3.mp4

10:19

4.1 Register and Login Form Create and Design Part 4.html

4. Register and Login Form Create and Design Part 4.mp4

10:39

5. Upload Project to Live Server.mp4

06:09

12. Home Page Create and Design

1.1 Home Page Create and Design Part 1.html

1. Home Page Create and Design Part 1.mp4

11:29

2.1 Home Page Create and Design Part 2.html

2. Home Page Create and Design Part 2.mp4

11:03

3.1 Home Page Create and Design Part 3.html

3. Home Page Create and Design Part 3.mp4

13:01

4.1 Home Page Create and Design Part 4.html

4. Home Page Create and Design Part 4.mp4

15:53

5.1 Home Page Create and Design Part 5.html

5. Home Page Create and Design Part 5.mp4

10:36

6.1 Home Page Create and Design Part 6.html

6. Home Page Create and Design Part 6.mp4

14:50

7.1 Home Page Create and Design Part 7.html

7. Home Page Create and Design Part 7.mp4

13:30

8.1 Home Page Create and Design Part 8.html

8. Home Page Create and Design Part 8.mp4

11:14

9.1 Home Page Create and Design Part 9.html

9. Home Page Create and Design Part 9.mp4

15:41

13. Main Page Sidebar Design

1.1 Main Page Sidebar Design Part 1.html

1. Main Page Sidebar Design Part 1.mp4

12:51

2.1 Main Page Sidebar Design Part 2.html

2. Main Page Sidebar Design Part 2.mp4

13:27

3.1 Main Page Sidebar Design Part 3.html

3. Main Page Sidebar Design Part 3.mp4

15:20

4.1 Main Page Sidebar Design Part 4.html

4. Main Page Sidebar Design Part 4.mp4

12:10

5.1 Main Page Sidebar Design Part 5.html

5. Main Page Sidebar Design Part 5.mp4

04:30

14. Design Sidebar Pop Up Section

1.1 Design Sidebar Pop Up Section Part 1.html

1. Design Sidebar Pop Up Section Part 1.mp4

08:57

2.1 Design Sidebar Pop Up Section Part 2.html

2. Design Sidebar Pop Up Section Part 2.mp4

07:29

3.1 Design Sidebar Pop Up Section Part 3.html

3. Design Sidebar Pop Up Section Part 3.mp4

13:51

15. Setup Main Design Component

1.1 Setup Main Design Component Part 1.html

1. Setup Main Design Component Part 1.mp4

18:40

2.1 Setup Main Design Component Part 2.html

2. Setup Main Design Component Part 2.mp4

19:26

3.1 Setup Main Design Component Part 3.html

3. Setup Main Design Component Part 3.mp4

08:11

4.1 Setup Main Design Component Part 4.html

4. Setup Main Design Component Part 4.mp4

10:36

5.1 Setup Main Design Component Part 5.html

5. Setup Main Design Component Part 5.mp4

10:25

16. Design Functionality Design Component

1.1 Design Functionality Design Component Part 1.html

1. Design Functionality Design Component Part 1.mp4

11:15

2.1 Design Functionality Design Component Part 2.html

2. Design Functionality Design Component Part 2.mp4

17:06

3.1 Design Functionality Design Component Part 3.html

3. Design Functionality Design Component Part 3.mp4

07:51

17. Make Design Rotate Resize Move Indicator

1.1 Make Design Rotate Resize Move Indicator Part 1.html

1. Make Design Rotate Resize Move Indicator Part 1.mp4

09:48

2.1 Make Design Rotate Resize Move Indicator Part 2.html

2. Make Design Rotate Resize Move Indicator Part 2.mp4

13:43

3.1 Make Design Rotate Resize Move Indicator Part 3.html

3. Make Design Rotate Resize Move Indicator Part 3.mp4

06:33

18. Move Html Div Method

1.1 Move Html Div Method Part 1.html

1. Move Html Div Method Part 1.mp4

15:07

2.1 Move Html Div Method Part 2.html

2. Move Html Div Method Part 2.mp4

13:44

3.1 Move Html Div Method Part 3.html

3. Move Html Div Method Part 3.mp4

09:24

19. Resize Html Div Method

1.1 Resize Html Div Method Part 1.html

1. Resize Html Div Method Part 1.mp4

09:12

2.1 Resize Html Div Method Part 2.html

2. Resize Html Div Method Part 2.mp4

05:19

20. Rotate Html Div Method

1.1 Rotate Html Div Method Part 1.html

1. Rotate Html Div Method Part 1.mp4

12:04

2.1 Rotate Html Div Method Part 2.html

2. Rotate Html Div Method Part 2.mp4

11:59

21. Text Add Opacity Add Option

1.1 Text Add Opacity Add Option Part 1.html

1. Text Add Opacity Add Option Part 1.mp4

09:53

2.1 Text Add Opacity Add Option Part 2.html

2. Text Add Opacity Add Option Part 2.mp4

08:40

3.1 Text Add Opacity Add Option Part 3.html

3. Text Add Opacity Add Option Part 3.mp4

13:30

22. Text Padding Font Weight Add

1.1 Text Padding Font Weight Add Part 1.html

1. Text Padding Font Weight Add Part 1.mp4

10:00

2.1 Text Padding Font Weight Add Part 2.html

2. Text Padding Font Weight Add Part 2.mp4

11:44

3.1 Text Padding Font Weight Add Part 3.html

3. Text Padding Font Weight Add Part 3.mp4

09:53

23. Image Added Option

1.1 Image Added Option Part 1.html

1. Image Added Option Part 1.mp4

09:45

2.1 Image Added Option Part 2.html

2. Image Added Option Part 2.mp4

08:19

3.1 Image Added Option Part 3.html

3. Image Added Option Part 3.mp4

06:18

24. User Register Function

1.1 User Register Function Part 1.html

1. User Register Function Part 1.mp4

13:29

2.1 User Register Function Part 2.html

2. User Register Function Part 2.mp4

13:03

3.1 User Register Function Part 3.html

3. User Register Function Part 3.mp4

15:41

4.1 User Register Function Part 4.html

4. User Register Function Part 4.mp4

06:24

5.1 User Register Function Part 5.html

5. User Register Function Part 5.mp4

19:13

25. User Login Function

1.1 User Login Function Part 1.html

1. User Login Function Part 1.mp4

15:55

2.1 User Login Function Part 2.html

2. User Login Function Part 2.mp4

11:48

26. Create Design And Store Database

1.1 Create Design And Store Database Part 1.html

1. Create Design And Store Database Part 1.mp4

13:06

2.1 Create Design And Store Database Part 2.html

2. Create Design And Store Database Part 2.mp4

16:05

3.1 Create Design And Store Database Part 3.html

3. Create Design And Store Database Part 3.mp4

09:52

4.1 Create Design And Store Database Part 4.html

4. Create Design And Store Database Part 4.mp4

11:19

5.1 Create Design And Store Database Part 5.html

5. Create Design And Store Database Part 5.mp4

16:52

6.1 Create Design And Store Database Part 6.html

6. Create Design And Store Database Part 6.mp4

13:04

27. Design Functionality Add and Download

1.1 Design Functionality Add and Download Part 1.html

1. Design Functionality Add and Download Part 1.mp4

13:56

2.1 Design Functionality Add and Download Part 2.html

2. Design Functionality Add and Download Part 2.mp4

13:01

3.1 Design Functionality Add and Download Part 3.html

3. Design Functionality Add and Download Part 3.mp4

14:03

4.1 Bug Fix for Add Text Zindex.html

4. Bug Fix for Add Text Zindex.mp4

03:53

28. Image Save Function Setup

1.1 Image Save Function Part 1.html

1. Image Save Function Part 1.mp4

15:10

2.1 Image Save Function Part 2.html

2. Image Save Function Part 2.mp4

15:45

3.1 Image Save Function Part 3.html

3. Image Save Function Part 3.mp4

09:26

29. Image Upload Function Setup

1.1 Image Upload Function Part 1.html

1. Image Upload Function Part 1.mp4

14:02

2.1 Image Upload Function Part 2.html

2. Image Upload Function Part 2.mp4

15:13

3.1 Image Upload Function Part 3.html

3. Image Upload Function Part 3.mp4

12:59

30. Image Show Function Setup

1.1 Image Show Function Part 1.html

1. Image Show Function Part 1.mp4

09:00

2.1 Image Show Function Part 2.html

2. Image Show Function Part 2.mp4

16:46

3.1 Image Show Function Part 3.html

3. Image Show Function Part 3.mp4

11:57

31. Design Template Show

1.1 Design Template Show Part 1.html

1. Design Template Show Part 1.mp4

17:55

2.1 Design Template Show Part 2.html

2. Design Template Show Part 2.mp4

15:58

3.1 Design Template Show Part 3.html

3. Design Template Show Part 3.mp4

18:05

32. Project Organize Setup

1.1 Project Organize Setup Part 1.html

1. Project Organize Setup Part 1.mp4

11:54

2.1 Project Organize Setup Part 2.html

2. Project Organize Setup Part 2.mp4

15:58

3.1 Project Organize Setup Part 3.html

3. Project Organize Setup Part 3.mp4

18:01

4.1 Project Organize Setup Part 4.html

4. Project Organize Setup Part 4.mp4

04:50

33. User Logout Function

1.1 User Logout Function.html

1. User Logout Function.mp4

04:16

2.1 Protect The Route.html

2. Protect The Route.mp4

03:58

3.1 Show Validation Message For User Login.html

3. Show Validation Message For User Login.mp4

06:19

Description

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

Who is this for?

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

What You Need to Know?

Basic Understanding of JavaScript

Good Grasp of Tailwind CSS

HTML and CSS Knowledge

Basic Command Line Knowledge

More details

Description
Modern React JS, Express JS 2024 Build Complete Canva Project A-Z
Welcome 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!
Who this course is for:
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

User Reviews

Rating

average 0

Total votes0

Focused display

React

Kazi Ariyan

Instructor's Courses

Hi! I'm Kazi Ariyan. I'm a web developer with a serious love for teaching I am a founder of eLe easy Learning and a passionate Web Developer, Programmer & Instructor. I am working online for the last 7 years and have created several successful websites running on the internet. I try to create a project-based course that helps you to learn professionally and make you fell as a complete developer. easy learning exists to help you succeed in life.Each course has been hand-tailored to teach a specific skill. I hope you agree! Whether you’re trying to learn a new skill from scratch or want to refresh your memory on something you’ve learned in the past, you’ve come to the right place.Education makes the world a better place. Make your world better with new skills.

easy Learning

Instructor's Courses

Learn Programing skills, from absolute beginner to advanced mastery. We try to create a project-based course that helps you to learn professionally and make you fell as a complete developer. easy learning exists to help you succeed in life. Each course has been hand-tailored to teach a specific skill. I hope you agree!Whether you’re trying to learn a new skill from scratch or want to refresh your memory on something you’ve learned in the past, you’ve come to the right place.Education makes the world a better place. Make your world better with new skills!Our courses can be watched 24/7 wherever you are. Most are fully downloadable so you can take them with you. You can also view them on mobile devices with the Udemy mobile app.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.