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

Learn React.js fundamentals as a component-based library for building interactive front-end interfaces. Explore reusable components, from headers to pages, and how API data enables fast, interactive loading.

Install Node.js and Visual Studio Code. Create a new React app with wit, choose React and JavaScript, then install dependencies to run, develop, and prepare for production.

Run the project with npm run dev to start the development server, then build with npm run build to generate a production distribution folder.

Explore the basic React project structure, including package.json scripts, dependencies and dev dependencies, index.html root, src components like App.jsx and main.js, and how to load components in a single-page app.

Organize your React project by restructuring the source into pages and components, creating assets for images and css, and cleaning unused files. Update the title and enable automatic reload.

Install and configure essential VS Code extensions for React development, including auto close tag, auto import, ESLint, Prettier, React snippets, Tailwind, Postman, Thunder Client, and icons.

Create and use functional components in modern React.js, guided by Visual Studio Code extensions and React snippets to build app and demo components with divs, h1, inputs, and buttons.

Learn to build a React layout by creating and composing four components—header, hero, contact, and footer—importing and rendering them on the home page with images and basic user interface elements.

Explore how JSX enables HTML-like syntax in JavaScript, covering single parent elements, fragments, camelCase attributes, className, self-closing tags, and inline style objects.

Explore JSX shorthand to implement if-else conditions in React.js with a live example, using a marks variable and a ternary operator to render brilliant result or average result.

Learn how to use a JSX immediately invoked function expression in React to evaluate JavaScript with anonymous functions and conditional logic, then render results.

Learn to render lists in JSX by mapping an array of cities into a ul with li items, using map, iteration index as key, and clear data display.

Explore jsx conditional rendering in react, using if/else, switch, ternary, logical &&, and iife to show login/logout buttons based on user status, with a clean, reusable approach.

Learn to implement JSX conditional rendering with a switch statement in React, returning a logout button for true and a login button for false, with a default null case.

Explore JSX conditional rendering with the ternary operator by toggling a status variable to show a log out button or a logging button, demonstrating shorthand if-else in React.

Explore jsx conditional rendering with the logical and operator to show a logout button when status is true, otherwise display nothing.

Learn to use an immediately invoked function expression for conditional rendering in JSX, showing a true status renders a logout button and a false status renders a login button.

Learn how props pass data from a parent to a child in React, enforce unidirectional flow, and keep props read-only with examples using App.jsx, hero, and hero image components.

Pass a string from the parent component to the child component using props, setting a title and description that the child renders as an h1 and a p tag.

Learn how to pass an object from a parent to a child component using props in React, including an item object with name, age, and city.

Learn to pass a function from a parent to a child via props in React and trigger it with a button to display alerts like hello Adam and hello again.

Learn to manage click events in React by using onClick, with arrow or regular functions, and display alerts via a button in a live example.

Learn to handle form submission in React by creating a simple HTML form, preventing default refresh, and using an onSubmit event to trigger an alert or post data.

Explore setting up React Router Dom for a web app, configuring browser router, routes, and path-based navigation to home, about, and contact pages, with a not found 404 handler.

Learn to create a navigation menu with react router dom using Link and NavLink, enable client-side routing in a single-page app, and manage active link styling with isActive.

Compare browser router and hash router in React Router DOM; browser router uses HTML5 history API and URLs, while hash router adds a URL hash and works without server configuration.

pass parameters via navigation using react router dom and receive them with use params, displaying id and name on the about page.

Explore how React hooks enable state management and side effects in functional components, covering useState, useEffect, useContext, and useRef with live examples.

Explore using the useRef hook to manipulate DOM elements in React, accessing innerText and innerHTML via a reference, updating content on click without re-render, and handling multiple refs.

Learn to manipulate a React image element using the useRef hook to load a placeholder, update the src attribute on click, and set height and width with setAttribute.

Learn how to work with the input element using useRef to capture two fields—first name and last name—and display their current values in an alert, with clean, named references.

Learn to use the useRef hook to change a heading's bootstrap classes (text success to text danger) on click by updating the element's classList after importing bootstrap CSS.

Learn how useState in React manages a component's data, triggers re-renders on changes, and updates the UI with increment and decrement actions.

Explore managing complex state with React useState by updating specific object keys using the spread operator, handling multiple object data, and partial updates in a practical example.

Learn to build a simple todo app using React useState with an immutable array, manage input, add items, and render the list with map for dynamic UI.

Learn to manage a list with useState, add items, pass element and index, and remove by index using splice, demonstrating immutable array handling in React.

Master form state management in React using useState by building a clean form with first name, last name, city select, and gender radio buttons, updating data and preparing for submission.

Master useState driven form handling by updating a single form object with onChange, manage first name, last name, city, and gender, and submit with prevent default to log data.

Learn how the use effect hook executes a callback on component mount and when dependencies in its array change, enabling data fetching and controlled re-renders.

Learn how to fetch data with use effect using promises, call a dummy JSON API, convert the response to JSON, and set data to render it.

Demonstrate calling an API in a React useEffect with async/await. Compare with promises, and show fetching, JSON conversion, and updating state.

Explore Express.js fundamentals as a Node.js server-side web framework for REST API development, template engines, and integration with React, plus setup for Node, VS Code, and Postman.

initialize npm and create package.json, install express, and set up index.js with a get route returning hello Express.js. Run on port 8000 and connect to MongoDB.

Define multiple routes in Express using get methods for home, about, and contact pages. Test post, patch, and delete methods with Postman, while the browser executes only get routes.

Focus on mastering request handling, responses, middleware, and database operations in Express.js to build robust routing and server interactions.

Explore how Express.js handles responses by inspecting body, header, status, and cookies, with live Postman examples for HTML and JSON data, and common status codes.

Explore Express.js response types with live examples, and learn to return simple string responses using get and post routes. Use res.send or res.end, and verify behavior with Postman.

Learn to manipulate Express response status codes using res.status and end, handling 200, 401 unauthorized, and 201 created responses with optional messages, via a sample get route.

Learn to handle json responses in express by creating a route and using res.json with a json array of objects (name, city). Verify results with postman and observe status 200.

Master response download in Express.js by creating a route and using the download method to serve uploads/about.jpg for browser or postman.

Explore handling redirects in Express by creating USA and India routes and using the redirect method to route to /india; verify using browser or Postman on localhost:8000.

Learn to manipulate response headers in express with the append method, adding key-value pairs and updating status codes, as demonstrated in a live route with Postman.

Learn how to set cookies in an express response using the cookie method with key-value pairs, test with postman, and verify cookies in the browser.

Clear cookies by using the response clear cookie method to remove named entries like name, city, and age, updating routes and testing with postman.

Explore how to handle get and post requests in Express.js, including headers, URL parameters, JSON bodies, multipart form data, and file uploads.

Learn to handle get requests with URL query parameters in express by extracting first name and last name from the request query and returning a combined response.

Learn how to pass and retrieve header data in a Node/Express app, extracting first name and last name via get requests with Postman and displaying them in the response.

Learn how to implement a post method, test it with postman, send a request to the home route, and display the message 'this is a simple post request'.

Post data via a url query in a post request, extract first name and last name, concatenate them, and display the stored result in the response.

Learn to handle a post request with header properties in express.js by reading username and password from request headers, displaying them in the response view, and testing with postman.

Learn how to post json data to an Express server using body parser, configure json parsing, and echo the json string back in the response.

Learn to handle multipart form data in Express.js using the Malta package, test with Postman, and parse JSON and form fields to respond with stringified data.

Implement file uploads in an Express app by configuring disk storage with destination and filename callbacks, handling multipart/form-data uploads, and saving files to an uploads folder with Postman.

Apply Express middleware to validate requests, enforce authentication and authorization, and set security rules with optional rate limits at both application level and root level.

Explore how to build and apply application middleware in an Express app, using get routes for home, about, and contact, with request, response, and next to control flow.

Create a route-specific middleware for the /about route in Express.js that doesn’t affect home or contact pages. Use the use function to attach it and validate execution with console logs.

Explore MongoDB fundamentals in the modern React and Express 2025 course, learning how a flexible, non-relational document store enables elastic, scalable data storage for cross-platform applications.

Install MongoDB on Windows by downloading the community server MSI, add the bin path to the system environment, verify with PowerShell, then open MongoDB Compass.

Set up an Express.js project and connect it to a MongoDB server using mongoose, creating index.js and logging database is connected on success.

this lecture covers mongo db basics, defining documents, collections, and databases, then builds a mongoose user schema with name, age, is married, salary, and gender, and creates a user model.

Define a user schema and model, instantiate a user with name, age, salary, gender, and status, and save the document to a Mongoose database using async/await.

Learn to manage a user table with Mongoose by importing users.json, inserting data, and querying with find, find one, and find by id in a full-stack setup.

Learn advanced MongoDB queries: filter by is married false, select or exclude fields like name and salary, sort by salary ascending or descending, apply limit, and count documents.

Explore MongoDB complex query operators, including equal, not equal, greater than, greater than or equal, less than, less than or equal, in, and not in, with age and salary examples.

Learn how and and or operators work in complex queries using a find method, matching is married true and age 30; see how the and operator requires both conditions.

Solve advanced query issues by using the or operator to find users older than 40 or unmarried, then select only the name and sort results by name in ascending order.

Update a document in MongoDB by finding a record by id and toggling a field, such as is married, from false to true, then save the changes.

Learn how to update a MongoDB document by id using findByIdAndUpdate, changing age and is married, with runValidators and new property options, then verify the update in the database.

Delete documents in MongoDB using delete one by id and delete many with a condition, practicing selective removal and verification of changes.

Build a Canva clone from scratch using tailwind CSS, React.js, Express.js, and MongoDB, with sign up and sign in, templates, shapes, images, text, and interactive design tools.

Set up a complete Canva-style project with React on the frontend, Express on the backend, and MongoDB as the database, plus Node.js and VS Code with essential extensions.

Set up a full-stack Canva project with React.js, Tailwind CSS, Express.js, and MongoDB; install dependencies, configure npm, and run front-end and back-end concurrently for local and hosting deployment.

learn how to configure a two-project setup with an express backend and react frontend, including dotenv, env configs, cors, nodemon, and npm scripts to run backend and client in development.

Learn to run back-end and fountain servers concurrently with npm run dev, then prepare production and local MongoDB Atlas and Compass connections using env variables for the Canva project.

Demonstrates configuring local and production MongoDB Atlas connections with Mongoose, using env variables, and building and deploying the front end with npm run build and client build.

Learn to build and deploy a complete React Express Canva project by creating a dist folder, serving it with Express, and deploying via var cell using GitHub.

Set up production and local servers, push the Canva project to GitHub, create and connect a repository, and deploy with Vercel using port 5000 and MongoDB Atlas URI.

Set up the front end with Tailwind CSS and React Router Dom, configure local storage, and install icons and carousel for a Canva-style project in a React Express workflow.

Design a Canva-style home page by wiring up react router dom and tailwind css, loading an index page via create browser router, and styling with tailwind utilities.

Design the Canva home page with Tailwind CSS, featuring a centered hero, the 'What you will design today' heading, and sign in and sign up buttons with hover effects.