adrianhajdin/project_mern_memories

This is a code repository for the corresponding video tutorial. Using React, Node.js, Express & MongoDB you'll learn how to build a Full Stack MERN Application - from start to finish. The App is called "Memories" and it is a simple social media app that allows users to post interesting events that happened in their lives.

Memories

Introduction

This is a code repository for the corresponding video tutorial - https://youtube.com/playlist?list=PL6QREj8te1P7VSwhrMf3D3Xt4V6_SRkhu.

Using React, Node.js, Express & MongoDB you'll learn how to build a Full Stack MERN Application - from start to finish. The App is called "Memories" and it is a simple social media app that allows users to post interesting events that happened in their lives.

By the end of this video, you will have a strong understanding of how the MERN Stack works.

🌟 Become a top 1% Next.js 13 developer in only one course

🚀 Land your dream programming job in 6 months

Setup:

• run npm i && npm start for both client and server side to start the app

project_mern_memories's Issues

Unable to refresh after using search query

After filter the posts, when I try to refresh the page, it keeps loading

Routing problem

if I refresh the page before logging out , then after logging out when I click Sign in button then instead of going to Auth page it directs to posts. I have to refresh the page again to go to the Auth page when I click Sign in. Otherwise its working fine. Please resolve !

Part 3 is not compiling and running

There are the errors I am getting after I open audit report for npm i

npm audit report

node-fetch <=2.6.0 || 3.0.0-beta.1 - 3.0.0-beta.8
Denial of Service - https://npmjs.com/advisories/1556
No fix available
node_modules/node-fetch
isomorphic-fetch 2.0.0 - 2.2.1
Depends on vulnerable versions of node-fetch
node_modules/isomorphic-fetch
fbjs 0.7.0 - 1.0.0
Depends on vulnerable versions of isomorphic-fetch
node_modules/fbjs
react 0.15.0-alpha.1 - 16.4.2
Depends on vulnerable versions of fbjs
node_modules/react-file-base64/node_modules/react
react-file-base64 *
Depends on vulnerable versions of react
node_modules/react-file-base64

Compiled with warnings when running the client

when running the client, i am getting the following error:

Compiled with warnings.

src/reducers/posts.js
Line 3:1: Assign arrow function to a variable before exporting as module default import/no-anonymous-default-export

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

Request failed with status code 404

GET http://localhost:5000/posts 404 (Not Found)

Unsupported platform for [email protected]

i was trying to "npm i" on the server side but it shows me this error. does somebody know what this means?

C:\Users\madar\project_mern_memories\server>npm i

[email protected] postinstall C:\Users\madar\project_mern_memories\server\node_modules\nodemon
node bin/postinstall || exit 0

npm WARN [email protected] No description
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 213 packages from 188 contributors and audited 214 packages
in 66.36s

13 packages are looking for funding
run npm fund for details

found 2 vulnerabilities (1 moderate, 1 high)
run npm audit fix to fix them, or npm audit for details

How do i sort posts in alphabetical order in src/components/Posts/Posts.js ? Any help will be appreciated!!!

Waow! You just keep impressing me every single time

Thanks for this project, Adrian. You just keep waowing me every single time

index.js:1 Warning: Unknown event handler property `onSuccess`. It will be ignored.

index.js:1 Warning: Unknown event handler property onSuccess. It will be ignored.
index.js:1 Warning: Unknown event handler property onFailure. It will be ignored.

Clicking on Edit icon navigates to the particular memory detailed post.

After implementing the detailed post navigation in PART 4, whenever we click on the Edit icon, it navigates to the detailed post instead of populating the content in the form to edit/update.

This issue is also present in the application hosted in PART 4.
https://mernmemoriesjmasterytest.netlify.app/posts

CardMedia not displaying image

Everything worked fine but CardMedia is not displaying image. We can see image if we use inspect element as a long string. but it is not displayed on the page.

Failed to Compile

client/src/reducers/auth.js: Unexpected token (6:31)
5 |

case AUTH:

6 | console.log(action?.data);
| ^
7 | //localStorage.setItem('profile', JSON.stringify({...action?.data }));

moment.js sometimes get glitchy.

It doesn't shows the specific time when user upload the post.

Error after updating post

I completed Part 3, but after I edit my post and press submit an error shows up. However, after refreshing the home page, the post will have been updated.

TypeError: Cannot read property 'length' of undefined:

.Actions must be plain objects. error

@adrianhajdin
Hey when we are dispatching the action in form.js within the handleSubmit i am getting the following error.Actions must be plain objects. Use custom middleware for async actions. It works if i just dispatch it as dispatch(createPost) but fails if i dispatch it as disPatch(createPost(postData))
Pls tell how can i resolve this

TypeError: Cannot read property 'find' of undefined

After updating the post the below error message gets displayed immediately even though the update was successful. The updated post can be seen once the page is refreshed.
Version: Part_6

The error:
C:/Users/project_mern_memories-PART_6/client/src/components/Posts/Post/Post.js:22

19 | const classes = useStyles();
20 |
21 | const userId = user?.result.googleId || user?.result?._id;

22 | const hasLikedPost = post.likes.find((like) => like === userId);
| ^ 23 |
24 | const handleLike = async () => {
25 | dispatch(likePost(post._id));

Could someone please help me with this issue?

Posts take some time to load

I am practising on these tutorials, I am done with the first and second tutorials but I realised that the memories Posts take some time to load (40s to 1min). I don't think it's an internet error. Thank you for checking it out.

TypeError: setCurrentId is not a function

{moment(post.createdAt).fromNow()}
19 |
20 |

21 | <Button style={{ color: 'white' }} size="small" onClick={() => setCurrentId(post._id)}>
| ^ 22 |

23 |

24 | {post.tags.map((tag)=>#${tag})}

Facing this issue anyone can fix this issue?

Client Side Updates

Updates like "updatePost" and "likePost" are not showing on client side unless we reload the page.

push the code to github

hello anyidea how i push the code to github because it's not working to push the client and server to a single branch

Bug in front end

Just see this screen shot to understand what i am talking about

link

I did exactly what was shown in the tutorials ... But then i landed somewhere completely different.
It is just with me or a bug ??
Please suggest me possible steps to resolve.
Thanks

Login page is not coming

Is someone facing this issue. Whenever you logged out and click on the signIn button it just goes to /posts page only. If I refresh the page then it's working fine.
Any idea why this is happening ?

Google Login not working after deploying

Google Login is not working after deploying. I also added the url in the authorized javascript origins then it just loads and then nothing happend. Can anyone guide me ?
The google auth is working on the local system though

Like + Delete don't update until refresh

Thank you so much for this project, I learned so much and am starting to understand the mern stack a lot better. When I click the like or delete buttons on a post they don't work dynamically instead I have to refresh my browser in order for them to update. I've tried to use useEffect and useState in the the Post component to see if I could get it to update but can't get anything to work. I looked at your repo and my code looks exactly the same so I am not sure what I should try next?

TypeError: Cannot read property 'length' of undefined

POST http://localhost:5000/user/signup 404 (Not Found)

Having a hard time understanding this problem.

I have basically everything set up as you:

• Compared all files from server & client to match yours
• I've checked api/index.js, actions/auth.js, whole server/
• No clue what could be happening, been stuck on this same issue for 2 days now

Let me know if you can advise to what could be happening. When I clone your PART_4 branch, everything works.

TypeError: setCurrentId is not a function

TypeError: setCurrentId is not a function
onClick
E:/project1/client/src/components/Posts/Post/Post.js:23
20 | <Button
21 | style={{ color: 'white' }}
22 | size="small"

23 | onClick={() => setCurrentId(post._id)}>
| ^ 24 |
25 |

26 | {post.tags.map((tag) => #${tag} )}

Search not working once the PostDetail logic is implemented

Hello, I have a problem with Search functionality. It works before I implement the logic for post details, but once I do and try to search for a term or a tag, I get a 404 get request error in my console. This doesn't make any sense to me since the logic for post details doesn't overlap with search logic (and I am only talking about opening the post not the recommended post part). I am rather new at web development so this kind of error confuses me a lot. Keep in mind that my code is almost identical to Adrian's so I don't understand why I'm getting this particular error once I implement the logic for post details and before that it all works fine. I'm not sure which part of my code to post here, but if anyone had similar issues or an idea where the error might be coming from, I would appreciate the help!

req.userId = decodedData ? .id;

This (req.userId = decodedData ? .id;) line is producing error in middleware auth.js.
When I remove the ternary operator and do (req.userId = decodedData .id;), it works. Any idea or knowledge about this ?

await written twice

await is written TWICE in line 47 of
project_mern_memories/client/src/actions/posts.js

How to tell if ReactDom is mismatched or copied

I'm working my way through the Pt 1 video and at 39:00, I'm getting the following error when viewing localhost:3000 related to src > index.js >
ReactDOM.render(, document.getElementById('root'),);
/*
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
   */
   I am using react-dom branch 17.0.1 and reactVersion 17.0.0.

----And---
My client Terminal keeps asking if something is already running on port 3000:
/*
Probably client/node_modules/react-scripts/scripts/start.js (pid 28626)
*/

I do seem to have a node_modules folder inside the client, the server, and the root. Should I remove the node_modules? in the root area?

---

I progressed onto calls to the API around 48:00+ and had to install it a few modules that got missed: Axios, react, and react-redux, and @materials-ui/core. I'm getting this error even though I can see the file in my directory:
ENOENT: no such file or directory, open '.../Desktop/memories-project/node_modules/@material-ui/core/esm/index.js'

Not sure if the previous errors are resolved; they do tend to show up when all else is working.

Any help is greatly appreciated.

Tags not accepting

When a tag value is given while creating the memory , and tab is clicked the tag values entered are not persisted and becomes empty.

Check out your issue PART 1 ~ PART 5 here.

Hello, guys.
Appreciate this great videos to Js Mastery.
I made my cloned project following his videos. And modified some issues.
If you got stuck some error, check out my project and read file.
This project is till part 2 yet, so be careful who wants to find debug solution over part 2.

https://github.com/Mauv-hub/JsMastery-MERN-project

Posts update issue

There is a BUG in posts state (from your downloaded github code)
when update a post..
any post is updated and all details on post card change it says a few seconds ago in date created text
but after some time post changes back to the post it was before update
after refresh it bring the new content
(I thought it was error in my code after second part but its also in your repo)

Improvement in the user login and logout

Thank you for the videos. I have two suggestions:

1. When using Google login, there is no server side validation for the token (length < 500). It might be useful to implement the one-time-code flow for Google Sign-In for server-side apps
2. User expiration should be 5 minute from last action in app and not one hour from login (including the server side as well)

unable to fetch and create memories

while inserting wrong login data, form input values clear automatically which is not correct !

while giving wrong credentials on login form. form input values are resetting. any update on it. Thanks

PostMessage validation failed 409 (Conflict)

I just finished Pt 1 video. but somehow it didn't work.
I'm getting the 409 error whenever i click the submit after choosing the file.

PostMessage validation failed: selectedFile: Cast to string failed for value "{↵ name: 'abcd.PNG',↵ type: 'image/png',↵ size: '24 kB',↵ base64: 'data:image/png;base64,iVBOFXH6UHWZ4XkKeLlsdIh... =',↵ file: {}↵}" (type Object) at path "selectedFile"

Error: Invalid hook call

First of all, thanks so much for your videos! Really helpful and I'm learning a ton.

Right now, I'm following your tutorial, and I'm at 11:18 in your second video. I'm sure I have everything that you had up to now.

I'm trying to see the posts in the app, but I keep getting this error.

I can see in the database the submitted post data, so it is able to communicate.

If I change the code in Post.js in the Post component to

const Post = ({ post }) => {
const classes = useStyles();

return(
    <h1>POST</h1>

I can see "POST" times the number of items in the database... I really have no idea what's going on. I tried to see if I have mismatching versions of react, but I don't think that's it.

Any ideas? Thanks in advance for your help!

base64 decoding

First and foremost, amazing project! Thank you so much for showing this MERN project as it has helped me so much with my understanding as a student!

On the server side when I get the callback for the uploaded images base64 gives an extremely large string per image that at times (unless I don't touch vscode) causes a crash if there is a few pictures uploaded and I refresh the page. Is there anyway to shorten it within the fileBase component to make the string decoded so it's not so long? I was looking at the documentation for it and it seems to need an "onDone={this.getFile.bind(this)} " to maybe shorten the string within the <FileBase ........ /> on Form.js? but I cannot for the life of me figure out how to get it to work.
Again, thank you so much for this I subbed to your channel and look forward to more upload from you!

Hey Adrian The fetchpost request not working

So my fetch posts function is not working but if I make a request to the backend in postman it gives the result. the {data}=await fetchPosts() gives undefined This is my actions/posts.js:

`import * as api from "../api/index"

export const getPosts=()=>async(dispatch)=>{
try {
const {data}=await api.fetchPosts()
dispatch({type:"FETCH_ALL",payload:data})
} catch (error) {
console.log(error)
}
}
export const createPosts=(post)=>async(dispatch)=>{
try{
const {data}=await api.createPosts(post)
dispatch({type:"CREATE",payload:data})
}catch(error){
console.log(error)
}
}`

Pls help to fix it

index.js:1 Warning: Unknown event handler property `onFailure`. It will be ignored.

TypeError: Cannot read property 'split' of undefined

Hello everybody!
I followed the toturial on youtube but i can't sign up and i get this error.
TypeError: Cannot read property 'split' of undefined
at auth (file:///home/tiendepzai/web_dev/Memory_app/server/middleware/auth.js:9:47)
at Layer.handle [as handle_request]
I think the problem is in backend!
Can someone help me? :'((

---

And thanks you so much for the toturials!

Cant retrieve data from Backend Server

First of all thanks for your efforts!
Whenever i start my application again or refresh the app, the POSTS which are saved in database are not showing. But when i insert new POST it works fine. In short i have tested few things and came to know that whenever i start my application at localhost the GET method from backend is not called. Please help me.
If you need any code to check than please message

error while connecting to db

[email protected] start C:\Users\Mara\Desktop\MEMORIES_PROJECT\server
nodemon index.js

[nodemon] 2.0.7
[nodemon] to restart at any time, enter rs
[nodemon] watching path(s): .
[nodemon] watching extensions: js,mjs,json
[nodemon] starting node index.js
(node:5772) Warning: Accessing non-existent property 'MongoError' of module exports inside circular dependency
(Use node --trace-warnings ... to show where the warning was created)
bad auth : Authentication failed.

MongoError: E11000 duplicate key error collection: myFirstDatabase.postmessages index: _id_ dup key: { _id: ObjectId('60f97a0f5e160c1d40046961') }

I am getting this error,Can anyone tell me how to overcome this issue?

net::ERR_SSL_PROTOCOL_ERROR

I just clone your project
I change the server connection url to mongodb
& change the client url to loaclhost:5000

I can login with google only but couldnt create any post..it shows 2 error in console..

Error: Network Error
at createError (createError.js:16)
at XMLHttpRequest.handleError (xhr.js:83)

&

xhr.js:178 GET https://localhost:3000/posts net::ERR_SSL_PROTOCOL_ERROR

please help me to fix this

Unable to install @material-ui/lab material-ui-chip-input

Please tell me how to fix this...

npm ERR! Found: @material-ui/[email protected]
npm ERR! node_modules/@material-ui/core
npm ERR! @material-ui/core@"^4.9.10" from the root
project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @material-ui/core@"^1.0.0 || ^3.1.0" from [email protected]
npm ERR! node_modules/material-ui-chip-input
npm ERR! material-ui-chip-input@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\Minha\AppData\Local\npm-cache\eresolve-report.txt for a full report.

deploy server to heroku failed with mongodb atlas

deploy server and got this log error :

Could not connect to any servers in your MongoDB Atlas cluster. One common reason is that you're trying to access the database from an IP that isn't whitelisted. Make sure your current IP address is on your Atlas cluster's IP whitelist: https://docs.atlas.mongodb.com/security-whitelist/

please help thanks

problem with the server side

I am just at the 15:41 min:sec line in the youtube video. I am getting this error. Pls help. Thank you