React + Node + MongoDB Contact Management System Project | MERN Project (part 2)

แชร์
ฝัง
  • เผยแพร่เมื่อ 21 ก.ค. 2024
  • 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:
    • Build & Deploy a MODER...
    Third Part:
    • Easy MERN Project Depl...
    Support Me:
    www.buymeacoffee.com/codewith...
    Looking for a hands-on project to showcase your MERN skills? This video is your guide! We'll build a full-fledged Contact Management System using React for the frontend, Node.js and Express for the backend API, and MongoDB for data storage. Follow along and learn the fundamentals of building modern web applications with the MERN stack.
    Ready to take your web development skills to the next level? Join us in creating a feature-rich Contact Management System with the powerful MERN stack. This video provides a step-by-step approach, teaching you essential concepts of React component creation, Node.js API development, and MongoDB database interaction. By the end, you'll have a fully functional app and a strong understanding of MERN architecture.
    Install MongoDB in Windows: • Install MongoDB 6.0.6 ...
    MERN Stack Projects: • MERN
    React + Node + MongoDB Connection: • How to Connect ReactJS...
    #mernstack #mernproject #contactmanagement
    Timestamps:
    0:00 Verify User
    17:20 Design Dashboard
    23:28 Design Sidebar
    33:11 Add Contact Form Design
    43:51 API (Endpoint) for Adding Contact to DB
    53:12 Display Contacts (Fetching)
    1:11:53 Edit (Update) Record
    1:32:00 Delete a Record
    1:41:44 Logout Functionality
    1:48:00 Protected Routes
    1:50:10 404(Not found) Page

ความคิดเห็น • 15

  • @janeswan1124
    @janeswan1124 3 หลายเดือนก่อน +1

    Thanks Yousef!

  • @eriikelnino6545
    @eriikelnino6545 หลายเดือนก่อน

    Thank you brother for this beautiful tutorial .. i learnt a lot

  • @vanta1118
    @vanta1118 12 วันที่ผ่านมา

    51:00 contact controller

  • @Meme.stocks
    @Meme.stocks 3 หลายเดือนก่อน

    How many contacts can be created?

  • @831_sohampatra5
    @831_sohampatra5 20 วันที่ผ่านมา

    Kindly share the source code link

  • @jayeshsabale5021
    @jayeshsabale5021 3 หลายเดือนก่อน +1

    In previous video you talk that , i will also show how to deploy project.

    • @codewithyousaf
      @codewithyousaf  2 หลายเดือนก่อน

      check description for 3rd part

  • @oktayaltunkaya9019
    @oktayaltunkaya9019 2 หลายเดือนก่อน +1

    please do more complex mern apps like using state management like react query & redux toolkit stufs

  • @sadmanSafin24726
    @sadmanSafin24726 3 หลายเดือนก่อน

    Sound is very low .

  • @Meme.stocks
    @Meme.stocks 3 หลายเดือนก่อน +1

    Please 😭 give source code

  • @Meme.stocks
    @Meme.stocks 3 หลายเดือนก่อน

    Please give source code 😢

  • @Meme.stocks
    @Meme.stocks 3 หลายเดือนก่อน +1

    But users can upload only one contact?

    • @codewithyousaf
      @codewithyousaf  3 หลายเดือนก่อน

      How many contacts user want he can add.

    • @Meme.stocks
      @Meme.stocks 3 หลายเดือนก่อน

      ​@@codewithyousaf Thank you!