How to make a FULLSTACK CRUD application on MERN stack

Sdílet
Vložit
  • čas přidán 2. 08. 2020
  • 📘New Course: Build full-stack React Typescript applications tsreact.maksimivanov.com/s/ytd
    Today we make a note taking app using MongoDB ExpressJS ReactJS NodeJS (MERN) stack.
    On the frontend we'll use: React, React-router-dom for navigation, React-hook-form to handle forms and Bootstrap for styles.
    On the backend we'll use: ExpressJS, Mongoose to work with mongodb.
    🐦 Twitter: / ivanov_dev
    I write about React and TypeScript there
    Code: github.com/satansdeer/mern-crud
    Curl commands to test the backend:
    - curl -H "Content-Type: application/json" --request POST -d '{"text":"test"}' localhost:4000/create
    - curl localhost:4000/
    Where to find me:
    Discord: / discord

Komentáře • 66

  • @causap
    @causap Před 2 lety +9

    If someone had issues with the input field, this is the solution in the new version of react hook form.

  • @SubhanAli-mb4ny
    @SubhanAli-mb4ny Před 3 lety +2

    yes, this one video I really need to understand how API'S calls, I search a lot of content on the internet, and finally, i found my desired video. thanks a lot, sir .please continue your work.

  • @roberto9369
    @roberto9369 Před 3 lety

    the best tutorial of their type. with modern things like hooks . simple and fast. thanks

  • @ahm1ed2003
    @ahm1ed2003 Před 3 lety

    great and smooth , thanks bro

  • @alvinacosta2312
    @alvinacosta2312 Před 3 lety

    AMAZING!!!!!!!!!!!!!!!!!!!!!!! good job sensei! learned a lot! God bless you

  • @RVKAWAAA
    @RVKAWAAA Před 3 lety

    Thanks my dear friend...i'm a junior mern..and this is very useful!

  • @khandoor7228
    @khandoor7228 Před 4 lety +5

    Nice job Maksim. Request add on to this MERN file upload with multer and S3 bucket.

  • @adend5029
    @adend5029 Před 2 lety +2

    if you're using vscode, you can use the rest client extension to send GET, POST, UPDATE, DELETE requests

  • @nomanshaikh7384
    @nomanshaikh7384 Před 2 lety

    Great! Man. Code goes from beginner to Pro!

  • @sujit_webdev
    @sujit_webdev Před 4 lety +2

    Thank You Maksim for the amazing tutorials! Please upload MERN authentication and a file upload tutorial in React when feasible

    • @satansdeer1
      @satansdeer1  Před 4 lety +1

      I remember doing it a few days ago, please check back

    • @sujit_webdev
      @sujit_webdev Před 4 lety

      @@satansdeer1 ohh ok

  • @edycole5543
    @edycole5543 Před 4 lety +1

    thank you, this tutorial really helped me to learn more about reactjs, request tutorials to make pdf and pdf views, handling mongodb shema for relation one to many, one to one relation collection

    • @satansdeer1
      @satansdeer1  Před 4 lety +3

      Oh, working with pdfs is extremely unpleasant

  • @codingwithanonymous890

    this was short app which was easier to understand as a beginner unlike other mern tutorial making it bit complex

  • @ujjwalsinghal1727
    @ujjwalsinghal1727 Před 3 lety

    Which VS code color and icon theme are you using? Looks cool.

  • @m3mphi5r4r7
    @m3mphi5r4r7 Před 4 lety +3

    Hey , can you do a video for resumable video uploading using graphql. 😃

  • @gunabalang7034
    @gunabalang7034 Před 3 lety

    it's really a bliss

  • @genesistrejo165
    @genesistrejo165 Před 3 lety

    everytime I get this "Cannot read property 'map' of undefined" error from TodoList layout. What can I do?

  • @fear9998
    @fear9998 Před 3 lety +1

    That thumbnail is fucking hilarious..! Methinks someone is a fan of David Firth!

  • @yashmistry1918
    @yashmistry1918 Před 3 lety

    Anyone know how the Ids are being handled for each todos?

  • @jessejulian9069
    @jessejulian9069 Před 3 lety +1

    Whats the difference in creating a react app this way VS the 'npx create-react-app my-app' way of doing it?

    • @ayushbudhwani
      @ayushbudhwani Před 3 lety

      my-app is just the name of the folder in which your react app will be created

  • @tarasitsme5082
    @tarasitsme5082 Před 3 lety +1

    If someone have problem path.split is not a function you should pass register for inputs like {...register("name")} where name is input name

    • @XxJaXxXable
      @XxJaXxXable Před 3 lety

      I do this but u can't update input on load following tutorial

  • @adend5029
    @adend5029 Před 3 lety

    32:00 it looks like you didn’t append the id parameter? But it still worked. Can you explain please?

  • @idevbrandon
    @idevbrandon Před 2 lety

    How can i do the edit form in the same page? anyone help plz?

  • @dingdong7265
    @dingdong7265 Před 2 lety +1

    Can you do one with with mysql instead of mongo?

  • @rangabharath4253
    @rangabharath4253 Před 3 lety

    awesome

  • @alphamackie8456
    @alphamackie8456 Před 3 lety

    Thank you for this tutorial, can you do a role-based authentication mernstack?

    • @shivamvora2285
      @shivamvora2285 Před 3 lety

      czcams.com/video/nPCfL_fuUk4/video.html looks like linkedin clone with firebase as well easy explanation with github repo

  • @roothacks6864
    @roothacks6864 Před 3 lety +1

    Hey, whats the name of the theme???

  • @demawobass
    @demawobass Před 4 lety +1

    is the CRUD operation complete, I don't seem to get where you implemented "DELETE' ?

    • @javier.alvarez764
      @javier.alvarez764 Před 4 lety +1

      lol nowadays we just call it crud even though the delete is no longer use and implemented. Delete function is not used in the corporate world.

    • @gerryjtierney
      @gerryjtierney Před 3 lety

      @@javier.alvarez764 of course it is

    • @peretarrida2374
      @peretarrida2374 Před 3 lety

      I've been searching the "DELETE" where i can find it??

  • @sharathvasudevan8379
    @sharathvasudevan8379 Před 4 lety

    Awesome tutorial. keep going :) Is it possible to implement redux with react hook form ?

  • @for-pete-sake
    @for-pete-sake Před 3 lety +2

    Anyone looking for the backend its @ 18:25

  • @yahubbrain7693
    @yahubbrain7693 Před 3 lety

    Привет, сделай по докеру видео, по docker-compose тоже

  • @makarov.1996
    @makarov.1996 Před 3 lety

    для crud удаление и редактирование забыл, а так супер спасибо!)

    • @satansdeer1
      @satansdeer1  Před 3 lety

      как забыл, всё есть и удалять и редактировать можно!

    • @satansdeer1
      @satansdeer1  Před 3 lety

      а сорян, я думал это к другому видосу 🤣

  • @sorabkumar5733
    @sorabkumar5733 Před 3 lety

    but how can we add option to delete an item

  • @thecse26
    @thecse26 Před 3 lety

    Thanks for the video Maksim, I learned a lot from it! I was wondering if you could release the code to implement the "delete" functionality. I've been trying to implement it myself, but I'm stuck...

  • @rachelmoore5255
    @rachelmoore5255 Před 3 lety

    Provide the code half way through for the complete front end please. Then if we didn't get it all correct, we can still follow along with the backend.

    • @satansdeer1
      @satansdeer1  Před 3 lety

      could you elaborate? i dont get the idea

  • @danielpreza4159
    @danielpreza4159 Před 3 lety

    Thanks a lot Phillip don't know how to pronounce your name, so I'll call you Phillip, you are the best

    • @satansdeer1
      @satansdeer1  Před 3 lety +6

      Daniel has too many syllables, so im gonna call you Tom. Thank you Tom. Comments like yours inspire me to record more great videos ahaha

  • @codewithdevhindi9937
    @codewithdevhindi9937 Před 3 lety

    4:25 just do it with rfce

  • @humayunkabir7925
    @humayunkabir7925 Před 3 lety

    16:25

  • @joematkin2554
    @joematkin2554 Před 2 lety +1

    It's a little outdated now :(

  • @likeset
    @likeset Před 4 lety +2

    Привет Максим, ждём уроки на русском)

    • @satansdeer1
      @satansdeer1  Před 4 lety +1

      для русских видосов у меня другой канал czcams.com/channels/mCRYkYWNOyCg2i_kCNjYAw.html

    • @likeset
      @likeset Před 4 lety

      @@satansdeer1 подписался!

  • @for-pete-sake
    @for-pete-sake Před 3 lety

    Its not a complete CRUD he forgot to make delete Restful api

  • @infusedagency
    @infusedagency Před 3 lety +2

    Dude you're not explaining anything that you do. Slow it down and explain things, it would be way more helpful.

  • @rachelmoore5255
    @rachelmoore5255 Před 3 lety

    Way too fast, your video is so edited that it is almost impossible for someone to try to follow along, and write the code.