Code With Yousaf
Code With Yousaf
  • Видео 430
  • Просмотров 5 805 681
Build a Shopping Cart with React JS, Context API, and useReducer Hook | Ecommerce Website Tutorial
Learn how to create a fully functional shopping cart for an ecommerce website using React JS, Context API, and the useReducer Hook. In this tutorial, we'll cover how to manage cart state, update quantities, and handle checkout functionality. Perfect for developers looking to build robust ecommerce applications with React.
Source Code:
github.com/YousafKhan1/React-Shopping-Cart
Topics covered:
Setting up a React project with Context API
Creating a shopping cart component with useReducer
Managing cart state and updating quantities
Best practices for ecommerce development with React
Watch until the end to build a complete shopping cart feature for your ecommerce website!
Timestamps:
0:00 Demo
1:43...
Просмотров: 467

Видео

Build React Responsive Portfolio Website | Complete React JS & CSS Website Project Tutorial
Просмотров 1,2 тыс.14 дней назад
Learn how to build a professional responsive portfolio website using React JS and CSS in this complete tutorial! In this project-based tutorial, we'll cover everything you need to know to create a stunning and responsive portfolio website. Source Code: buymeacoffee.com/codewithyousaf/e/250421 Topics covered: Setting up a new React project with Create React App Building a responsive navigation m...
Deploy Your React App on GitHub Pages in 5 Minutes!
Просмотров 34721 день назад
Learn how to deploy your React project on GitHub Pages for free! In this tutorial, we'll cover the step-by-step process of deploying a React application on GitHub Pages. From creating a GitHub repository to configuring the deployment settings, we'll cover it all. Whether you're a beginner or an experienced developer, this video will guide you through the process of sharing your React app with t...
Easy MERN Project Deployment in 2024: Deploy Your Contact Management System for Free on Vercel!
Просмотров 68821 день назад
In this step-by-step tutorial, learn how to effortlessly deploy your MERN (MongoDB, Express.js, React.js, Node.js) project to Vercel in 2024. Follow along as we walk you through the entire process, from setting up your Vercel account to deploying your Contact Management System. Discover the power of Vercel's seamless deployment platform and unleash the full potential of your project - all for f...
how to upload project on GitHub repository from VSCODE? React Project
Просмотров 25728 дней назад
how to upload project on GitHub repository from VSCODE. We will explain you how to use .getignore file to ignore some files and folder in you project while uploading it to GitHub. In this video we will upload React Project to GitHub.com website. How to Push Visual Studio Code Project to GitHub? how to make repository and upload project on GitHub? #github #upload #project #reactjs
React + Node + MongoDB Contact Management System Project | MERN Project (part 2)
Просмотров 1,7 тыс.Месяц назад
Want to learn the powerful MERN stack (React, Node.js, Express, MongoDB)? Build a real-world Contact Management System with this complete tutorial! In this video, we'll walk you through everything, from setting up the project to creating a user-friendly interface and powerful backend functionality. No prior MERN experience needed - perfect for beginners! First Part: ruclips.net/video/FRHpUaADtT...
Build & Deploy a MODERN Contact Manager with MERN Stack
Просмотров 3,3 тыс.Месяц назад
Tired of outdated contact management apps? Build your own sleek and efficient contact manager with this comprehensive MERN Stack tutorial! Second Part: ruclips.net/video/PN3rt-0k1is/видео.html Third Part: ruclips.net/video/-yoyIiuJQBU/видео.html Support Me: www.buymeacoffee.com/codewithyousaf In this video, you'll learn how to: Create a user interface with a modern feel using React and librarie...
Build a Typing Speed Test Game App with React JS (For Beginners!)
Просмотров 617Месяц назад
Want to improve your typing speed and have some fun? In this beginner-friendly tutorial, we'll guide you through building your own Typing Speed Test Game App using React JS! No prior React experience needed! We'll break down everything step-by-step, from setting up the project to tracking your WPM (Words Per Minute), CPM (Characters Per Minute), Mistakes and Time Left. Get ready to challenge yo...
How to Connect ReactJS with NodeJS and MongoDB - MERN Stack Tutorial
Просмотров 2,2 тыс.2 месяца назад
Master the MERN Stack: Connect ReactJS, NodeJS & MongoDB In this step-by-step tutorial, you'll learn how to: Set up a development environment for the MERN stack (React, Node.js, Express.js, MongoDB) Connect your ReactJS frontend to a Node.js backend server Utilize Mongoose to interact with your MongoDB database Build CRUD operations (Create, Read, Update, Delete) for data management This video ...
React Query Tutorial: A Beginner's Guide to Data Fetching
Просмотров 3772 месяца назад
Struggling with managing data fetching in your React applications? Look no further! This video is your one-stop shop for learning React Query, a powerful library that simplifies data fetching, caching, and state management. In this tutorial, you'll discover: What React Query is and its key benefits Setting up React Query in your React project Using the useQuery hook to fetch data from APIs Hand...
React CRUD App: Build it with RTK Query & API
Просмотров 1,1 тыс.2 месяца назад
Struggling to manage data flow in your React applications? This video is your one-stop shop for building powerful CRUD (Create, Read, Update, Delete) functionalities with ease! We'll guide you through using RTK Query, a game-changer from Redux Toolkit, to seamlessly interact with your backend API. In this comprehensive tutorial, you'll discover: The power of RTK Query for simplified data fetchi...
How to Make Weather App using React JS Step by Step Explained
Просмотров 7553 месяца назад
Learn How To Make Weather App Using ReactJS Step By Step Explained | Create Weather App In React www.buymeacoffee.com/codewithyousaf #reactjs #reactProjects #weatherApp In this video we will learn to create a Weather App for Website using React JS. We will get the current weather data from OpenWeatherMap API and display the weather information like Temperature, Weather condition, Humidity and W...
Building a Responsive Sidebar and Navbar with React and Tailwind CSS
Просмотров 14 тыс.3 месяца назад
In this tutorial, we'll walk through the process of creating a responsive sidebar and navbar using React and Tailwind CSS. We'll start by setting up a new React project and installing Tailwind CSS. Then, we'll create components for the sidebar and navbar, and style them using Tailwind CSS classes. #responsiveDesign #navbar #sidebar #ReactJS #tailwindcss
Currency Converter In React JS
Просмотров 2 тыс.3 месяца назад
Welcome to our latest tutorial where we delve into the world of React JS by building a powerful Currency Converter application from scratch! In this comprehensive guide, we'll walk you through every step of the process, from setting up your development environment to deploying a fully functional app. Whether you're a seasoned React developer looking to enhance your skills or a newcomer eager to...
Mastering Authentication: React, Node, MongoDB | Login, Signup, Forgot Password, Protected Routes
Просмотров 26 тыс.3 месяца назад
Mastering Authentication: React, Node, MongoDB | Login, Signup, Logout, Forgot Password and Protected Routes. React Node MongoDB: Complete "Authentication" and "Protected Routes". First we will implement "React-Router-Dom" for Routing then we will implement Registration page design and MongoDB configuration with User Model and API with bcrypt for password hashing. After signup we will start cod...
React Interview Questions: Paint App using React JS
Просмотров 8784 месяца назад
React Interview Questions: Paint App using React JS
Cryptocurrency Price Tracking App Using React. React Project
Просмотров 1,1 тыс.4 месяца назад
Cryptocurrency Price Tracking App Using React. React Project
Save Time: Great VS Code Keyboard Shortcuts For Developers | Tips and Tricks
Просмотров 2104 месяца назад
Save Time: Great VS Code Keyboard Shortcuts For Developers | Tips and Tricks
Login and Signup Page in React JS with Firebase
Просмотров 1,8 тыс.4 месяца назад
Login and Signup Page in React JS with Firebase
In-Depth MERN Tutorial: Building a Bookstore Management System with MongoDB, Express, React, Node.js
Просмотров 13 тыс.4 месяца назад
In-Depth MERN Tutorial: Building a Bookstore Management System with MongoDB, Express, React, Node.js
Food Recipes Search App with React and ChatGPT | Edamam API
Просмотров 9954 месяца назад
Food Recipes Search App with React and ChatGPT | Edamam API
No Backend Needed! Send Emails Directly from React with THIS Trick
Просмотров 6824 месяца назад
No Backend Needed! Send Emails Directly from React with THIS Trick
JWT Authentication Masterclass: Access & Refresh Tokens | Secure Your MERN Stack App
Просмотров 13 тыс.5 месяцев назад
JWT Authentication Masterclass: Access & Refresh Tokens | Secure Your MERN Stack App
CRUD Tutorial using React, Node and MySQL for Beginner
Просмотров 3,8 тыс.5 месяцев назад
CRUD Tutorial using React, Node and MySQL for Beginner
How to Use .env File in NodeJS
Просмотров 2,1 тыс.5 месяцев назад
How to Use .env File in NodeJS
Food Delivery App using React and Bootstrap | Food Ordering Website Design
Просмотров 5 тыс.6 месяцев назад
Food Delivery App using React and Bootstrap | Food Ordering Website Design
React Page Transition using Framer Motion
Просмотров 2,4 тыс.6 месяцев назад
React Page Transition using Framer Motion
Master React by Building a Tic-Tac-Toe Game: Step-by-Step Guide
Просмотров 1,2 тыс.6 месяцев назад
Master React by Building a Tic-Tac-Toe Game: Step-by-Step Guide
React Search Bar with Suggestions and Filter
Просмотров 6 тыс.6 месяцев назад
React Search Bar with Suggestions and Filter
API Call in Redux Toolkit | Fetch Data with Redux Toolkit | Fetch Data using React-Redux
Просмотров 8 тыс.7 месяцев назад
API Call in Redux Toolkit | Fetch Data with Redux Toolkit | Fetch Data using React-Redux

Комментарии

  • @Tempah34
    @Tempah34 5 минут назад

    my friends are about to be sick of me and my bug filled apps🤣🤣🤣

  • @nicosilva9022
    @nicosilva9022 10 часов назад

    Its not a good practice to delete the strict mode wraping your app. The correct way to avoid repetition its by using useRef hook like this: const runOnce = useRef(false) useEffect(()=> { if(runOnce.current === false){ console.log("Only once") } return () => runOnce.current = true },[]) Because useRef will persist the lifetime of the component, meaning that it will continue to be true when the component mount the second time.

  • @arthurkhallifa
    @arthurkhallifa 12 часов назад

    Thanks!

  • @tahirbhai173
    @tahirbhai173 19 часов назад

    thanku so much bht acha kraya ap ny ap or b lecturs bnay krein detail say or smjain bhtar kr k hrr point ko 😊😊😊😊😊😊 baki yy lec bht acha tha keep it up sir

  • @AnupKumar-fy4ub
    @AnupKumar-fy4ub 21 час назад

    helped thanks

  • @victorhugochavesdeoliveira
    @victorhugochavesdeoliveira День назад

    Very helpful, thank you!

  • @demurestlmc8361
    @demurestlmc8361 День назад

    awesome

  • @brownsterring9259
    @brownsterring9259 2 дня назад

    I would like to listen to this but the audio is unbearable

  • @saithonukunoori412
    @saithonukunoori412 2 дня назад

    Why don't we just reload the home component upon deletion rather than using filter

  • @ourpride5630
    @ourpride5630 2 дня назад

    Is here use routing

  • @kumarabhishek3890
    @kumarabhishek3890 2 дня назад

    where can i get the signup.jsx code please tell

  • @sridevim6622
    @sridevim6622 2 дня назад

    How can we add new row, edit, delete row using datatable?

  • @Sachindu1234
    @Sachindu1234 2 дня назад

    l

  • @nagaprakashnagu7596
    @nagaprakashnagu7596 3 дня назад

    I GOT axios NETWORK ERROR ? PLEASE GIVE SOLUTION i tried three more time

  • @himasailagonugunta2758
    @himasailagonugunta2758 3 дня назад

    i am getting cors error .. any help please

    • @codewithyousaf
      @codewithyousaf 3 дня назад

      did you put front-end URL inside Cors()

  • @user-vz8gx2kv4x
    @user-vz8gx2kv4x 3 дня назад

    pls provide source code

  • @sivaprasadreddy6453
    @sivaprasadreddy6453 3 дня назад

    Thank you for valuable time taken this video , you can properly explained this video and also once for very thank you for teaching

  • @ShrutiSharma-zl8yy
    @ShrutiSharma-zl8yy 3 дня назад

    Very nice video. Follow step by step. Your validation is applied without any error. Thanks for the easy explanation ❤

  • @hendoitechnologies
    @hendoitechnologies 3 дня назад

    connect payment gateway part video also

  • @NitinkumarSaini-qb6kz
    @NitinkumarSaini-qb6kz 3 дня назад

    it gives all time undefined ?

  • @abdulwarissherzad9914
    @abdulwarissherzad9914 3 дня назад

    Nice, I am the third person to comment, but it is a perfect video, pls provide a tutorial with TS.

  • @smartdriver2990
    @smartdriver2990 3 дня назад

    Thanks, i like the tutorial

  • @sfayzer
    @sfayzer 3 дня назад

    Good you started to provide the source code

  • @jayconjudemadrid8987
    @jayconjudemadrid8987 4 дня назад

    Is there a source code for this?

  • @girishpandey9976
    @girishpandey9976 4 дня назад

    Nice tutorial and very inspiring. keep it up

  • @oanDuyChinh
    @oanDuyChinh 4 дня назад

    thank you

  • @khalidyt4173
    @khalidyt4173 4 дня назад

    no react strict mode and runing twice creating duplicated user un my database

  • @oktayaltunkaya9019
    @oktayaltunkaya9019 4 дня назад

    thank you sir

  • @user-ko7fu4uy8h
    @user-ko7fu4uy8h 4 дня назад

    bhai bata to deta ki boot strap use kar raha hai

  • @Atahualpa-king
    @Atahualpa-king 4 дня назад

    where you from ovoovovov your pronouns

  • @HassanKhan-ei2wh
    @HassanKhan-ei2wh 5 дней назад

    Amazing video. Simple and precise. Very good work. <3

  • @ijazzqant7321
    @ijazzqant7321 5 дней назад

    Weirdly Enough, i had to do 'index.js' first before the Thunder Client accepting the connection.

  • @fase8729
    @fase8729 5 дней назад

    Thx

  • @shelldonl
    @shelldonl 6 дней назад

    does anyone here know how to change the background color?

  • @user-nk8eb7ku6c
    @user-nk8eb7ku6c 6 дней назад

    I can see the fluctuations in the Time Left, WPM, CPM and in over the time the fluctuations goes crazy how can i fix that.

  • @fase8729
    @fase8729 6 дней назад

    Btw do u have source code

  • @fase8729
    @fase8729 6 дней назад

    Thx for the video but can u speak up more.

  • @azuboof
    @azuboof 6 дней назад

    Can you please share the er diagram please

  • @rogelyncaburnay8294
    @rogelyncaburnay8294 6 дней назад

    Code po nito?

  • @10_AnayShrimali
    @10_AnayShrimali 6 дней назад

    plz send me this in pdf form

  • @debojitsaha7851
    @debojitsaha7851 7 дней назад

    sir what 'users' indicate in then() function ?? please explain!

  • @deltonguivala4888
    @deltonguivala4888 7 дней назад

    You helped me a lottt bro. BIG THANKS.

  • @mohitkaushik21
    @mohitkaushik21 7 дней назад

    Nice 😊

  • @joewatson8357
    @joewatson8357 7 дней назад

    Your voice is so sweet 👌

  • @iSanDStorM01
    @iSanDStorM01 7 дней назад

    why there is only 1 comment

  • @MarvinGuzman-nd8xj
    @MarvinGuzman-nd8xj 8 дней назад

    Why my database (mysql) is returning an image type (buffer) and an array of data not an actual image name? btw the column's data type for that is BLOB.

  • @kumaranupam8301
    @kumaranupam8301 8 дней назад

    booooooo 👎

  • @VipinKumar-sj8ib
    @VipinKumar-sj8ib 8 дней назад

    please provide the souce code

  • @authenticvideocreator8546
    @authenticvideocreator8546 8 дней назад

    thanks for this vide

  • @jaaferklila1375
    @jaaferklila1375 9 дней назад

    where is the code bro