Implementing Notes CRUD APIs in React JS with Redux - MERN Stack Tutorial #13

#MernStack #mern #MernTutorial #MernStackProject

MERN Stack Tutorial Series with Redux where we will learn to build an Awesome Full Stack Notes Taking Web App Project.
In this video we will Implement Notes APIs in React JS will perform CRUD Operation, i.e., Create , Read , Update and Delete.

Full Playlist -

Movie App in React JS and Material UI -

Quiz App in React JS and Material UI -

Dictionary App in React JS and Material UI -

00:00 Intro
00:27 Important Message
00:45 Reading Notes
14:28 Creating Notes

25:49 Updating Notes
36:42 Deleting Notes
41:34 Searching Notes
44:58 Outro

[kapilrc]

@ 35:09 In updateHandler -> when dispatch is called, and if there is a failure like duplicate data, but it will navigate to /mynotes, how to do this kind of error handling?

[vaibhav.polska]

If you don't know how to use match.params.id, and this error "error message - TypeError: Cannot read properties of undefined (reading 'params')" try using useParams() hook of react-router-dom, much easier. Great tutorial Roadsidecoder. got to learn a lot just by watching your videos and googling what i did'nt understand.

[kapilrc]

Awesome bro.. in error payload we can write this way
dispatch({
type: NOTES_CREATE_FAIL,
payload: || error?.message
})

[piyushkaware]

while using delete functionality showing error msg Not authorized, no token

[DivyaPrakash-bjzk]

Best bro. Understood react and made it . Thanks roadside coder . I wish I was like you too. One thing I wanted to ask:
How much time it would take me to start having the fast intutions of what I would do to implement a give functionality. Like do i need to do a internship or youttube projects would be sufficient to reach that level. 😅😅

[angelsoto]

@RoadsideCoder I really enjoy your MERN stack tutorial thank you so much. But i'm currently having issues with this part of the video at 9:45 where you get {map: property undefined}, after I add the ? after notes to map it, I then get another error that says,
{ FAILED TO COMPILE }{ 82:12
Module parse failed: Unexpected token (82:12)
You may need an appropriate loader to handle this file type. }
I checked stackoverflow and cant find any solutions, thank you.

[aravindreddy]

Hi when i try ro hot api req my header is passing relatove to current route how to handle this with out base url

[sandeeppetkar]

Hi
for closing the error alert, in ErrorMessage component i'm dispatching one more action and updating error to null in noteReducer.

const ErrorMessage = ({ variant = "info", children }) => {
const dispatch = useDispatch();
const onCloseHandler = () => {
dispatch({
type: NOTE_ERROR_RESET,
});
};

return (
<Alert
variant={variant}
style={{ fontSize: 20, display: "flex", justifyContent: "space-between" }}
>
<strong>{children}</strong>
<p style={{ cursor: "pointer" }} onClick={onCloseHandler}>
Close
</p>
</Alert>
);
};


is it correct way to close the error alert or is there any better way to achieve?
Thanks

[rohanpaul]

Hi,
Are the protected api's not visible in network calls in chrome, e.g., create note?

[mohammedfaseeullah]

A state mutation detected between dispatches it comes, , 😢. Cant delete, and also on updation when i update it gets updated when refresh the screen by my oun, , it doesn't updated by its own refresh... Kindly help me solving, ,,

[vishnusprakash]

can i add an admin to this project and manipulate the user notes ???

[spaceexplorer]

Great Work! Please show the 'star functionality' in upcoming videos

[noorulashkarh]

when i refresh the page in mynotes page the userlogin state is not presisting and it has been removed. so it is taking me to the landing page. What is the solution for this?

[johnpaulpagelerjr.]

Great vids but match and history are depreciated in react-router-dom v6. Replacing useHistory hook with useNavigate is pretty straightforward, but stuck on accessing /:id using useParams hook. Has anyone worked this out?

[iamvinayvk]

Those having problems in getting data on Edit Page i.e. SingleNote.js page can use

const config = {
headers: {
Authorization: `Bearer ${userInfo.token}`,
},
};
const { data } = await axios.get(`/api/notes/${params.id}`, config);

this inside fetching() function

const fetching = async () => {
const config = {
headers: {
Authorization: `Bearer ${userInfo.token}`,
},
};
const { data } = await axios.get(`/api/notes/${params.id}`, config);
console.log(data);
setTitle(data.title);
setContent(data.content);
setCategory(data.category);
setDate(data.updatedAt);
};

401 (Unauthorized ) Error is occurring because our notes/:id route is protected

[msonle]

hi, thank you for the tutorials just want to ask how you would go about displaying the notes without needing to login

[danitaforbes]

I am having so much fun with your tutorial and I am learning a lot. Thank you for that. I have a question. What would make a page work on localhost:3000 but not on localhost:5000? For example, in 3000 the edit feature works perfectly but on 5000 it goes to the json data. Thank you

[bhargovjyotidas]

Awesome content... I have one question.. in notesAction.js while creating notes why we dispatching payload: data.. I think it is not necessary... Please reply

[engineermaxwel]

I came here today thrice just to countercheck If I was getting something wrong But I realized maybe I am not understanding. @RoadsideCoder when you created the Notes model there was how did you pass it back to database

[stevefisher]

These tutorials are so educational, Thank you. I do have an error I am getting when trying to update. [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client. I am guessing its coming from the update action but I can not figure out how to resolve it. Any suggestions ?