ed-roh/mern-social-media

Complete React MERN Full Stack Social Media App

FullStack Social Media App

Build a COMPLETE Fullstack Responsive MERN App with Auth, Likes, Dark Mode | React, MongoDB, MUI

Video: https://www.youtube.com/watch?v=K8YELRmUb5o

For all related questions and discussions about this project, check out the discord: https://discord.gg/2FfPeEk2mX

mern-social-media's Issues

After entering details on register page there is no response from the server.

At first, I thought this was a server-side error but when I use postman to insert data then there is no problem.
On entering the data from the front end on the register page, the server is not responding with anything and the front end also did not redirect to the login page as per the code logic in Form.jsx.

Error in getting friends

Unable to post pictures from MyPostWidget

When I try to upload the images only the .png format is getting uploaded but not the other formats . I am getting the error ERR_UPLOAD_FILE_CHANGED .

Home Page not open after logging in

My home page doesnt load when I log in. I get this error in the console:

Uncaught TypeError: posts.map is not a function
at PostsWidget (PostsWidget.jsx:41:1)
at renderWithHooks (react-dom.development.js:16305:1)
at mountIndeterminateComponent (react-dom.development.js:20074:1)
at beginWork (react-dom.development.js:21587:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27451:1)
at performUnitOfWork (react-dom.development.js:26557:1)
at workLoopSync (react-dom.development.js:26466:1)

is it necessary to install body parser?

First, this is a great video, thanks for putting so much effort into it.

I do notice some places that can be further improved:

on index.js,

• I think we can replace those two lines that use body-parser to be the following:

  app.use(express.urlencoded({ limit: '30mb', extended: true }));
app.use(express.json({ limit: '30mb' }));

  p.s. bodyParser.json() doesn't have an extended option

• The new recommend algorithm for encrypting is Argon2id now.

reference: https://cheatsheetseries.owasp.org/cheatsheets/Password_Storage_Cheat_Sheet.html#introduction

Error 400 user does not exist

Hello, I followed your tuto step by step but I have an error.
Register is ok
Login give me a 400 response.

As I saw req.body is undefined. I m tryong to connect with postman. Any idea ?

Mongoose forces read/write to "test" collection?

I'm trying to migrate the tutorial to a new project with similar attributes, and part of that process was to use a different Collection name. When I try to insert a new user or record into the Database, it ALWAYS inserts into the "test" Collection, even if I delete it it re-creates it. I've searched everywhere for the "test" field in the code to replace it with my new collection name but having no luck. Anyone have any tips on how to configure this with mongoose?

Cannot add friends

I says friends.find is not a function
friends.find in in the Friends.jsx file
whenever I try to add friend I get the issue

Home Page disappears upon login

Not sure why, but after I login I see the Home Page for about 1/2 a second, then the webpage goes blank.
I've never been able to see the homepage for more than 1/2 a second. Getting a 304 error. I tried clearing my cache, flushing DNS and running security scans. Nothing helps.

I can add myself to a friends list

MUI: The palette mode `Light` is not supported.

Hi, there when I run the client code after cloning this repo the entire application breaks and I have multiple errors in the console. I tried multiple time to run this application but the frontend code breaks everytime.

createPalette.js:275 MUI: The palette mode Light is not supported.
createPalette @ createPalette.js:275
installHook.js:1861 MUI: The palette mode Light is not supported.
overrideMethod @ installHook.js:1861
CssBaseline.js:22 Uncaught TypeError: Cannot read properties of undefined (reading 'primary')
at body (CssBaseline.js:22:1)
at styles (CssBaseline.js:55:1)
at styles (CssBaseline.js:87:1)
at GlobalStyles.globalStyles (GlobalStyles.js:15:1)
at handleInterpolation (emotion-serialize.browser.esm.js:139:1)
at serializeStyles (emotion-serialize.browser.esm.js:253:1)
at emotion-react.browser.esm.js:172:1
at emotion-element-6a883da9.browser.esm.js:36:1
at renderWithHooks (react-dom.development.js:16305:1)
at updateForwardRef (react-dom.development.js:19226:1)
FormLabel.js:45 Uncaught TypeError: Cannot read properties of undefined (reading 'secondary')
at FormLabel.js:45:1
at transformedStyleArg (createStyled.js:209:1)
at handleInterpolation (emotion-serialize.browser.esm.js:139:1)
at serializeStyles (emotion-serialize.browser.esm.js:264:1)
at emotion-styled-base.browser.esm.js:123:1
at emotion-element-6a883da9.browser.esm.js:36:1
at renderWithHooks (react-dom.development.js:16305:1)
at updateForwardRef (react-dom.development.js:19226:1)
at beginWork (react-dom.development.js:21636:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
InputBase.js:68 Uncaught TypeError: Cannot read properties of undefined (reading 'primary')
at InputBase.js:68:1
at transformedStyleArg (createStyled.js:209:1)
at handleInterpolation (emotion-serialize.browser.esm.js:139:1)
at serializeStyles (emotion-serialize.browser.esm.js:264:1)
at emotion-styled-base.browser.esm.js:123:1
at emotion-element-6a883da9.browser.esm.js:36:1
at renderWithHooks (react-dom.development.js:16305:1)
at updateForwardRef (react-dom.development.js:19226:1)
at beginWork (react-dom.development.js:21636:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
FormLabel.js:45 Uncaught TypeError: Cannot read properties of undefined (reading 'secondary')
at FormLabel.js:45:1
at transformedStyleArg (createStyled.js:209:1)
at handleInterpolation (emotion-serialize.browser.esm.js:139:1)
at serializeStyles (emotion-serialize.browser.esm.js:264:1)
at emotion-styled-base.browser.esm.js:123:1
at emotion-element-6a883da9.browser.esm.js:36:1
at renderWithHooks (react-dom.development.js:16305:1)
at updateForwardRef (react-dom.development.js:19226:1)
at beginWork (react-dom.development.js:21636:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
InputBase.js:68 Uncaught TypeError: Cannot read properties of undefined (reading 'primary')
at InputBase.js:68:1
at transformedStyleArg (createStyled.js:209:1)
at handleInterpolation (emotion-serialize.browser.esm.js:139:1)
at serializeStyles (emotion-serialize.browser.esm.js:264:1)
at emotion-styled-base.browser.esm.js:123:1
at emotion-element-6a883da9.browser.esm.js:36:1
at renderWithHooks (react-dom.development.js:16305:1)
at updateForwardRef (react-dom.development.js:19226:1)
at beginWork (react-dom.development.js:21636:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
Button.js:77 Uncaught TypeError: Cannot read properties of undefined (reading 'primary')
at ButtonRoot.ownerState.ownerState (Button.js:77:1)
at transformedStyleArg (createStyled.js:209:1)
at handleInterpolation (emotion-serialize.browser.esm.js:139:1)
at serializeStyles (emotion-serialize.browser.esm.js:264:1)
at emotion-styled-base.browser.esm.js:123:1
at emotion-element-6a883da9.browser.esm.js:36:1
at renderWithHooks (react-dom.development.js:16305:1)
at updateForwardRef (react-dom.development.js:19226:1)
at beginWork (react-dom.development.js:21636:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
createPalette.js:275 MUI: The palette mode Light is not supported.
createPalette @ createPalette.js:275
installHook.js:1861 MUI: The palette mode Light is not supported.
overrideMethod @ installHook.js:1861
CssBaseline.js:22 Uncaught TypeError: Cannot read properties of undefined (reading 'primary')
at body (CssBaseline.js:22:1)
at styles (CssBaseline.js:55:1)
at styles (CssBaseline.js:87:1)
at GlobalStyles.globalStyles (GlobalStyles.js:15:1)
at handleInterpolation (emotion-serialize.browser.esm.js:139:1)
at serializeStyles (emotion-serialize.browser.esm.js:253:1)
at emotion-react.browser.esm.js:172:1
at emotion-element-6a883da9.browser.esm.js:36:1
at renderWithHooks (react-dom.development.js:16305:1)
at updateForwardRef (react-dom.development.js:19226:1)
FormLabel.js:45 Uncaught TypeError: Cannot read properties of undefined (reading 'secondary')
at FormLabel.js:45:1
at transformedStyleArg (createStyled.js:209:1)
at handleInterpolation (emotion-serialize.browser.esm.js:139:1)
at serializeStyles (emotion-serialize.browser.esm.js:264:1)
at emotion-styled-base.browser.esm.js:123:1
at emotion-element-6a883da9.browser.esm.js:36:1
at renderWithHooks (react-dom.development.js:16305:1)
at updateForwardRef (react-dom.development.js:19226:1)
at beginWork (react-dom.development.js:21636:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
InputBase.js:68 Uncaught TypeError: Cannot read properties of undefined (reading 'primary')
at InputBase.js:68:1
at transformedStyleArg (createStyled.js:209:1)
at handleInterpolation (emotion-serialize.browser.esm.js:139:1)
at serializeStyles (emotion-serialize.browser.esm.js:264:1)
at emotion-styled-base.browser.esm.js:123:1
at emotion-element-6a883da9.browser.esm.js:36:1
at renderWithHooks (react-dom.development.js:16305:1)
at updateForwardRef (react-dom.development.js:19226:1)
at beginWork (react-dom.development.js:21636:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
FormLabel.js:45 Uncaught TypeError: Cannot read properties of undefined (reading 'secondary')
at FormLabel.js:45:1
at transformedStyleArg (createStyled.js:209:1)
at handleInterpolation (emotion-serialize.browser.esm.js:139:1)
at serializeStyles (emotion-serialize.browser.esm.js:264:1)
at emotion-styled-base.browser.esm.js:123:1
at emotion-element-6a883da9.browser.esm.js:36:1
at renderWithHooks (react-dom.development.js:16305:1)
at updateForwardRef (react-dom.development.js:19226:1)
at beginWork (react-dom.development.js:21636:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
InputBase.js:68 Uncaught TypeError: Cannot read properties of undefined (reading 'primary')
at InputBase.js:68:1
at transformedStyleArg (createStyled.js:209:1)
at handleInterpolation (emotion-serialize.browser.esm.js:139:1)
at serializeStyles (emotion-serialize.browser.esm.js:264:1)
at emotion-styled-base.browser.esm.js:123:1
at emotion-element-6a883da9.browser.esm.js:36:1
at renderWithHooks (react-dom.development.js:16305:1)
at updateForwardRef (react-dom.development.js:19226:1)
at beginWork (react-dom.development.js:21636:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
Button.js:77 Uncaught TypeError: Cannot read properties of undefined (reading 'primary')
at ButtonRoot.ownerState.ownerState (Button.js:77:1)
at transformedStyleArg (createStyled.js:209:1)
at handleInterpolation (emotion-serialize.browser.esm.js:139:1)
at serializeStyles (emotion-serialize.browser.esm.js:264:1)
at emotion-styled-base.browser.esm.js:123:1
at emotion-element-6a883da9.browser.esm.js:36:1
at renderWithHooks (react-dom.development.js:16305:1)
at updateForwardRef (react-dom.development.js:19226:1)
at beginWork (react-dom.development.js:21636:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
react-dom.development.js:18687 The above error occurred in the component:

at http://localhost:3000/static/js/bundle.js:4492:66
at GlobalStyles (http://localhost:3000/static/js/bundle.js:20892:5)
at GlobalStyles
at CssBaseline (http://localhost:3000/static/js/bundle.js:9899:82)
at InnerThemeProvider (http://localhost:3000/static/js/bundle.js:21050:70)
at ThemeProvider (http://localhost:3000/static/js/bundle.js:20763:5)
at ThemeProvider (http://localhost:3000/static/js/bundle.js:21069:5)
at Router (http://localhost:3000/static/js/bundle.js:77311:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:75643:5)
at div
at App (http://localhost:3000/static/js/bundle.js:45:72)
at PersistGate (http://localhost:3000/static/js/bundle.js:83783:5)
at Provider (http://localhost:3000/static/js/bundle.js:73006:5)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18687
react-dom.development.js:18687 The above error occurred in the component:

at http://localhost:3000/static/js/bundle.js:4492:66
at FormLabel (http://localhost:3000/static/js/bundle.js:11680:82)
at http://localhost:3000/static/js/bundle.js:4492:66
at InputLabel (http://localhost:3000/static/js/bundle.js:13682:83)
at div
at http://localhost:3000/static/js/bundle.js:4492:66
at FormControl (http://localhost:3000/static/js/bundle.js:11040:82)
at http://localhost:3000/static/js/bundle.js:4492:66
at TextField (http://localhost:3000/static/js/bundle.js:18240:83)
at div
at http://localhost:3000/static/js/bundle.js:4492:66
at Box (http://localhost:3000/static/js/bundle.js:21773:72)
at form
at Formik (http://localhost:3000/static/js/bundle.js:33897:19)
at Form (http://localhost:3000/static/js/bundle.js:913:82)
at div
at http://localhost:3000/static/js/bundle.js:4492:66
at Box (http://localhost:3000/static/js/bundle.js:21773:72)
at div
at http://localhost:3000/static/js/bundle.js:4492:66
at Box (http://localhost:3000/static/js/bundle.js:21773:72)
at LoginPage (http://localhost:3000/static/js/bundle.js:1274:74)
at RenderedRoute (http://localhost:3000/static/js/bundle.js:76951:5)
at Routes (http://localhost:3000/static/js/bundle.js:77373:5)
at InnerThemeProvider (http://localhost:3000/static/js/bundle.js:21050:70)
at ThemeProvider (http://localhost:3000/static/js/bundle.js:20763:5)
at ThemeProvider (http://localhost:3000/static/js/bundle.js:21069:5)
at Router (http://localhost:3000/static/js/bundle.js:77311:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:75643:5)
at div
at App (http://localhost:3000/static/js/bundle.js:45:72)
at PersistGate (http://localhost:3000/static/js/bundle.js:83783:5)
at Provider (http://localhost:3000/static/js/bundle.js:73006:5)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18687
react-dom.development.js:18687 The above error occurred in the component:

at http://localhost:3000/static/js/bundle.js:4492:66
at InputBase (http://localhost:3000/static/js/bundle.js:13013:83)
at OutlinedInput (http://localhost:3000/static/js/bundle.js:15911:82)
at div
at http://localhost:3000/static/js/bundle.js:4492:66
at FormControl (http://localhost:3000/static/js/bundle.js:11040:82)
at http://localhost:3000/static/js/bundle.js:4492:66
at TextField (http://localhost:3000/static/js/bundle.js:18240:83)
at div
at http://localhost:3000/static/js/bundle.js:4492:66
at Box (http://localhost:3000/static/js/bundle.js:21773:72)
at form
at Formik (http://localhost:3000/static/js/bundle.js:33897:19)
at Form (http://localhost:3000/static/js/bundle.js:913:82)
at div
at http://localhost:3000/static/js/bundle.js:4492:66
at Box (http://localhost:3000/static/js/bundle.js:21773:72)
at div
at http://localhost:3000/static/js/bundle.js:4492:66
at Box (http://localhost:3000/static/js/bundle.js:21773:72)
at LoginPage (http://localhost:3000/static/js/bundle.js:1274:74)
at RenderedRoute (http://localhost:3000/static/js/bundle.js:76951:5)
at Routes (http://localhost:3000/static/js/bundle.js:77373:5)
at InnerThemeProvider (http://localhost:3000/static/js/bundle.js:21050:70)
at ThemeProvider (http://localhost:3000/static/js/bundle.js:20763:5)
at ThemeProvider (http://localhost:3000/static/js/bundle.js:21069:5)
at Router (http://localhost:3000/static/js/bundle.js:77311:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:75643:5)
at div
at App (http://localhost:3000/static/js/bundle.js:45:72)
at PersistGate (http://localhost:3000/static/js/bundle.js:83783:5)
at Provider (http://localhost:3000/static/js/bundle.js:73006:5)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18687
react-dom.development.js:18687 The above error occurred in the component:

at http://localhost:3000/static/js/bundle.js:4492:66
at FormLabel (http://localhost:3000/static/js/bundle.js:11680:82)
at http://localhost:3000/static/js/bundle.js:4492:66
at InputLabel (http://localhost:3000/static/js/bundle.js:13682:83)
at div
at http://localhost:3000/static/js/bundle.js:4492:66
at FormControl (http://localhost:3000/static/js/bundle.js:11040:82)
at http://localhost:3000/static/js/bundle.js:4492:66
at TextField (http://localhost:3000/static/js/bundle.js:18240:83)
at div
at http://localhost:3000/static/js/bundle.js:4492:66
at Box (http://localhost:3000/static/js/bundle.js:21773:72)
at form
at Formik (http://localhost:3000/static/js/bundle.js:33897:19)
at Form (http://localhost:3000/static/js/bundle.js:913:82)
at div
at http://localhost:3000/static/js/bundle.js:4492:66
at Box (http://localhost:3000/static/js/bundle.js:21773:72)
at div
at http://localhost:3000/static/js/bundle.js:4492:66
at Box (http://localhost:3000/static/js/bundle.js:21773:72)
at LoginPage (http://localhost:3000/static/js/bundle.js:1274:74)
at RenderedRoute (http://localhost:3000/static/js/bundle.js:76951:5)
at Routes (http://localhost:3000/static/js/bundle.js:77373:5)
at InnerThemeProvider (http://localhost:3000/static/js/bundle.js:21050:70)
at ThemeProvider (http://localhost:3000/static/js/bundle.js:20763:5)
at ThemeProvider (http://localhost:3000/static/js/bundle.js:21069:5)
at Router (http://localhost:3000/static/js/bundle.js:77311:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:75643:5)
at div
at App (http://localhost:3000/static/js/bundle.js:45:72)
at PersistGate (http://localhost:3000/static/js/bundle.js:83783:5)
at Provider (http://localhost:3000/static/js/bundle.js:73006:5)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18687
react-dom.development.js:18687 The above error occurred in the component:

at http://localhost:3000/static/js/bundle.js:4492:66
at InputBase (http://localhost:3000/static/js/bundle.js:13013:83)
at OutlinedInput (http://localhost:3000/static/js/bundle.js:15911:82)
at div
at http://localhost:3000/static/js/bundle.js:4492:66
at FormControl (http://localhost:3000/static/js/bundle.js:11040:82)
at http://localhost:3000/static/js/bundle.js:4492:66
at TextField (http://localhost:3000/static/js/bundle.js:18240:83)
at div
at http://localhost:3000/static/js/bundle.js:4492:66
at Box (http://localhost:3000/static/js/bundle.js:21773:72)
at form
at Formik (http://localhost:3000/static/js/bundle.js:33897:19)
at Form (http://localhost:3000/static/js/bundle.js:913:82)
at div
at http://localhost:3000/static/js/bundle.js:4492:66
at Box (http://localhost:3000/static/js/bundle.js:21773:72)
at div
at http://localhost:3000/static/js/bundle.js:4492:66
at Box (http://localhost:3000/static/js/bundle.js:21773:72)
at LoginPage (http://localhost:3000/static/js/bundle.js:1274:74)
at RenderedRoute (http://localhost:3000/static/js/bundle.js:76951:5)
at Routes (http://localhost:3000/static/js/bundle.js:77373:5)
at InnerThemeProvider (http://localhost:3000/static/js/bundle.js:21050:70)
at ThemeProvider (http://localhost:3000/static/js/bundle.js:20763:5)
at ThemeProvider (http://localhost:3000/static/js/bundle.js:21069:5)
at Router (http://localhost:3000/static/js/bundle.js:77311:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:75643:5)
at div
at App (http://localhost:3000/static/js/bundle.js:45:72)
at PersistGate (http://localhost:3000/static/js/bundle.js:83783:5)
at Provider (http://localhost:3000/static/js/bundle.js:73006:5)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18687
react-dom.development.js:18687 The above error occurred in the component:

at http://localhost:3000/static/js/bundle.js:4492:66
at Button (http://localhost:3000/static/js/bundle.js:8559:59)
at div
at http://localhost:3000/static/js/bundle.js:4492:66
at Box (http://localhost:3000/static/js/bundle.js:21773:72)
at form
at Formik (http://localhost:3000/static/js/bundle.js:33897:19)
at Form (http://localhost:3000/static/js/bundle.js:913:82)
at div
at http://localhost:3000/static/js/bundle.js:4492:66
at Box (http://localhost:3000/static/js/bundle.js:21773:72)
at div
at http://localhost:3000/static/js/bundle.js:4492:66
at Box (http://localhost:3000/static/js/bundle.js:21773:72)
at LoginPage (http://localhost:3000/static/js/bundle.js:1274:74)
at RenderedRoute (http://localhost:3000/static/js/bundle.js:76951:5)
at Routes (http://localhost:3000/static/js/bundle.js:77373:5)
at InnerThemeProvider (http://localhost:3000/static/js/bundle.js:21050:70)
at ThemeProvider (http://localhost:3000/static/js/bundle.js:20763:5)
at ThemeProvider (http://localhost:3000/static/js/bundle.js:21069:5)
at Router (http://localhost:3000/static/js/bundle.js:77311:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:75643:5)
at div
at App (http://localhost:3000/static/js/bundle.js:45:72)
at PersistGate (http://localhost:3000/static/js/bundle.js:83783:5)
at Provider (http://localhost:3000/static/js/bundle.js:73006:5)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18687
react-dom.development.js:12056 Uncaught TypeError: Cannot read properties of undefined (reading 'primary')
at body (CssBaseline.js:22:1)
at styles (CssBaseline.js:55:1)
at styles (CssBaseline.js:87:1)
at GlobalStyles.globalStyles (GlobalStyles.js:15:1)
at handleInterpolation (emotion-serialize.browser.esm.js:139:1)
at serializeStyles (emotion-serialize.browser.esm.js:253:1)
at emotion-react.browser.esm.js:172:1
at emotion-element-6a883da9.browser.esm.js:36:1
at renderWithHooks (react-dom.development.js:16305:1)
at updateForwardRef (react-dom.development.js:19226:1)

Someone help me with this i change my mango db and checked it is coonect and logged in successfully but my homepage is blank

Uncaught TypeError: Cannot read properties of undefined (reading 'primary')

I don't know why I am getting this error.
Uncaught TypeError: Cannot read properties of undefined (reading 'primary')
at InputBase.js:66:1
at transformedStyleArg (createStyled.js:179:1)
at handleInterpolation (emotion-serialize.browser.esm.js:139:1)
at serializeStyles (emotion-serialize.browser.esm.js:264:1)
at emotion-styled-base.browser.esm.js:123:1
at emotion-element-6a883da9.browser.esm.js:36:1
at renderWithHooks (react-dom.development.js:16305:1)
at updateForwardRef (react-dom.development.js:19226:1)
at beginWork (react-dom.development.js:21636:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)

There is some problem in InputBase component
The line of code is :
color: (theme.vars || theme).palette.text.primary,

Can anyone explain me the solution?

Cannot read properties of null (reading 'friends')

i got this problem when i trying to add friend someone. but i don't get that when i add friend myself. how can i fix that ?

Problem

I'm learning code with your video step by step... but I don't understand why when I want to insert many it refuses.

Facing An Error When i try to like any post

when i try to like any post , i get an 404 , not found error , i did not found any kind of typo error in frontend , but when i try to test the like route through ThunderClient , i found this error , i'll be thankful to any one who trys to help me solve this error

http://localhost:/assets/${image} how to get the image file in frontend without storing it

here we are trying to get the image file in the front end, but we did not store it on getting the user data, how to this issue, same issue after deployment as well

Add/Remove Icon in Profile Page not in Sync with the FriendList

This is the current state

Apparently, the add/remove icon is not updating even though the logged in user is in the friendlist. The code that handles the button state is here.

isFriend = friends.find((friend) => friend._id === friendId);

There's a couple things to note here.

• For the home page, friendId has the values of all the friends passed one by one and it's used to check the isFriend condition.
• friends stores array of objects of users. These users are friends of the person displayed on the page, which could be the current logged in user or another user.
• find() function returns the first item that matches the condition, and returns undefined otherwise. So, isFriend stores an object or undefind according to the condition.

Now, here's the problem. This code only works for home page, not for the profile page. Here's why.

• For the profile page, friendId has only one value passed into it, which might be loggedInUser id or id of person on profile page.
• friends stores the friends of friendId person. which is expected.
• So, isFriend condition has a conflict. Finding a friend of a person who is the person himself in the friend list of that person doesn't seem like a valid logic. It's like finding yourself in your friend list. It should find the logged in user id in the friend list of that person. That way, it will check whether current user is friend with profile page user.

How do we fixed it? It depends.

For me, I came up with this block of code.

if (friends.map((friend) => friend._id).includes(_id)) { isFriend = friends .filter((friend) => friend._id === _id) .map((friend) => friend._id) .includes(_id); }

if checks whether we're in profile page or not, it doesn't check if we're in home page. It only checks whether we're in profile page or not. isFriend now stores a Boolean value, returned by the includes().

This is the result state

I opened this issue not to flex my solution (pardon me if I sounded like it), but to improve it. If you have any other solution, please let me know, it would be my honor.

New User Not register

Client-side new User Not register. This register form is not submitted.

and
server-side also register form is not submitted and run the server page gives me this error.

::1 - - [20/Jan/2023:11:57:48 +0000] "GET / HTTP/1.1"
304 -
::1 - - [20/Jan/2023:11:57:48 +0000] "GET /static/js/main.152db27b.js HTTP/1.1" 304 -
::1 - - [20/Jan/2023:11:57:48 +0000] "GET /static/css/main.b62ea404.css HTTP/1.1" 304 -

How to run in my machine locally?

I upload files but i cannot add node modules
When i write npm install error happens like this
npm ERR! code ENOENT npm ERR! syscall open npm ERR! path /Users/diyapatel/Desktop/KJSCE/mernsocial-media-master/package.json npm ERR!

Cannot add friend to friend's list

When I click on the add friend's icon, no action takes place

InsetMany

Hello, I have a problem when i try to insert the data and save it throw an error "return callback(new MongoBulkWriteError(err, new BulkWriteResult(bulkOperation.s.bulkResult)));" and "MongoBulkWriteError: user is not allowed to do action [insert] on [test.posts]"
I've tried a lot of things but nothing work even when i copy paste the code. Any idea ?

typeError: Cannot read properties of undefined (reading '63b163ddf70362f01606270c')

this error generated from this line of code
const isLiked = Boolean(likes[loggedInUserId]);

login in problem

deploy on Render, cant enter others' profile page, and cant refresh the page, they all will show NOT FOUND

deploy on Render, cant enter others' profile page, and cant refresh the page, they all will show NOT FOUND.
I just follow the video at the end of EDROH's next video-- MERN React Admin Dashboard, I deployed this one to render after deploying the server, and u will get a URL like this "https://[your service name].onrender.com", and then changed the localhost:3001 to this URL, it deployed success, but I get the issue as the title said.

Guidance Required: Deployment of MERN Stack Application

Hello!

I have been following your excellent series on building a MERN stack application and it has been greatly informative. I've successfully built the application on my local system, and now, I would like to deploy it for wider access.

I am unsure about the deployment process, especially in terms of the right steps to take and the best platforms to use for hosting both the Node.js backend and the React frontend of my MERN stack application.

Could you provide guidance on the following:

1. Steps to prepare the app for deployment (like setting environment variables).
2. Best services/platforms to deploy the frontend and backend (like Heroku, Netlify, AWS, etc.)
3. How to manage continuous integration/continuous deployment from my GitHub repository to the deployment platform.

Your help would be greatly appreciated. Thank you in advance!

Best,
capt-amlan-padhi

Shows wrong friend list on profile page when adding/removing friend, this corrects only after reloading

This is the initial state of profile page. The person logged in here is not a friend of the user who's profile is shown. Hence the friend list is empty.





After I click on add friend. I get the following friend list.





This is the friend list of the logged in user, which is obviously wrong.

Now when I refresh the page, I get the correct friend list.

Can anyone help me with this problem. Is this the only solution or is there any other way around???

400 (Bad Request)

Hello! When I try to log in I get this error: "POST http://localhost:3001/auth/login 400 (Bad Request) Form.jsx:82". I did not change any of the backend code and I connected to mongodb, I even put your predefined users and posts in collections and tried one of them to log in and it is not working. What should I do?

Is the Web Application Deployable

Is the site deployable as the images are not stored in the database, but rather in the assets folder in the server. So if I hosted this application in a hosting platform such as Netlify, will it work and if so then how?

MongoAPIError: URI must include hostname, domain name, and tld Did not connect to server

data and salt arguments required

Hi, when trying the auth/register in postman it brings out this error "error": "data and salt arguments required" kindly help

invalid Hook Call: Hooks can only be called inside of the body of a function component.

I have been having this problem with a few other projects, but when I run the react app I get this

I haven't set up the UI entirely yet, Im at 2:19:00 of the video so the pages should just have the page names currently but I get this error.

"Navbar.jsx:23 Uncaught TypeError: Cannot read properties of null (reading 'firstName')

so I had this issue while following the tutorial after creating the Navbar at @ed-roh 2:47:50

Uncaught TypeError: posts.map is not a function at PostsWidget

I don't understand why am I getting this error although I have written the exact code.

Uncaught TypeError: posts.map is not a function
at PostsWidget (PostsWidget.jsx:41:1)
at renderWithHooks (react-dom.development.js:16305:1)
at mountIndeterminateComponent (react-dom.development.js:20074:1)
at beginWork (react-dom.development.js:21587:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27451:1)
at performUnitOfWork (react-dom.development.js:26557:1)
at workLoopSync (react-dom.development.js:26466:1)

How to start this project on local host

I run 'npm start' this command but it is not working
error: PS D:\Uneeb\git clone\mern-social-media> npm start
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path D:\Uneeb\git clone\mern-social-media/package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open 'D:\Uneeb\git clone\mern-social-media\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\HP\AppData\Local\npm-cache_logs\2023-05-13T19_46_50_952Z-debug-0.log

Add/remove friend and other user profile view not working

Add/remove friend option is not working, on inspecting its saying -- friends.find() is not function and friends.map() is not a function in the Friend.jsx file in the component folder at line 22.
Also viewing other person's profile is not working.

Unable to post picture to myPostWidget

When I try to upload the images only the .png format is getting uploaded but not the other formats . I am getting the error ERR_UPLOAD_FILE_CHANGED .

picturePath has no value, undefined (register form)

import { useState } from "react";
import {
  Box,
  Button,
  TextField,
  useMediaQuery,
  Typography,
  useTheme,
} from "@mui/material";
import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
import { Formik } from "formik";
import * as yup from "yup";
import { useNavigate } from "react-router-dom";
import { useDispatch } from "react-redux";
import { setLogin } from "state";
import Dropzone from "react-dropzone";
import FlexBetween from "components/FlexBetween";

const registerSchema = yup.object().shape({
  firstName: yup.string().required("required"),
  lastName: yup.string().required("required"),
  email: yup.string().email("invalid email").required("required"),
  password: yup.string().required("required"),
  location: yup.string().required("required"),
  occupation: yup.string().required("required"),
  picture: yup.string().required("required"),
});

const loginSchema = yup.object().shape({
  email: yup.string().email("invalid email").required("required"),
  password: yup.string().required("required"),
});

const initialValuesRegister = {
  firstName: "",
  lastName: "",
  email: "",
  password: "",
  location: "",
  occupation: "",
  picture: "",
};

const initialValuesLogin = {
  email: "",
  password: "",
};

const Form = () => {
  const [pageType, setPageType] = useState("login");
  const { palette } = useTheme();
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const isNonMobile = useMediaQuery("(min-width:600px)");
  const isLogin = pageType === "login";
  const isRegister = pageType === "register";

  const register = async (values, onSubmitProps) => {
    // this allows us to send form info with image
    const formData = new FormData();
    for (let value in values) {
      formData.append(value, values[value]);
    }
    formData.append("picturePath", values.picture.name);
    
    const savedUserResponse = await fetch(
      "http://localhost:3001/auth/register",
      {
        method: "POST",
        body: formData,
      }
    );
    const savedUser = await savedUserResponse.json();
    onSubmitProps.resetForm();

    if (savedUser) {
      setPageType("login");
    }
  };

  const login = async (values, onSubmitProps) => {
    const loggedInResponse = await fetch("http://localhost:3001/auth/login", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(values),
    });
    const loggedIn = await loggedInResponse.json();
    onSubmitProps.resetForm();
    if (loggedIn) {
      dispatch(
        setLogin({
          user: loggedIn.user,
          token: loggedIn.token,
        })
      );
      navigate("/home");
    }
  };

  const handleFormSubmit = async (values, onSubmitProps) => {
    if (isLogin) await login(values, onSubmitProps);
    if (isRegister) await register(values, onSubmitProps);
  };

  return (
    <Formik
      onSubmit={handleFormSubmit}
      initialValues={isLogin ? initialValuesLogin : initialValuesRegister}
      validationSchema={isLogin ? loginSchema : registerSchema}
    >
      {({
        values,
        errors,
        touched,
        handleBlur,
        handleChange,
        handleSubmit,
        setFieldValue,
        resetForm,
      }) => (
        <form onSubmit={handleSubmit}>
          <Box
            display="grid"
            gap="30px"
            gridTemplateColumns="repeat(4, minmax(0, 1fr))"
            sx={{
              "& > div": { gridColumn: isNonMobile ? undefined : "span 4" },
            }}
          >
            {isRegister && (
              <>
                <TextField
                  label="First Name"
                  onBlur={handleBlur}
                  onChange={handleChange}
                  value={values.firstName}
                  name="firstName"
                  error={
                    Boolean(touched.firstName) && Boolean(errors.firstName)
                  }
                  helperText={touched.firstName && errors.firstName}
                  sx={{ gridColumn: "span 2" }}
                />
                <TextField
                  label="Last Name"
                  onBlur={handleBlur}
                  onChange={handleChange}
                  value={values.lastName}
                  name="lastName"
                  error={Boolean(touched.lastName) && Boolean(errors.lastName)}
                  helperText={touched.lastName && errors.lastName}
                  sx={{ gridColumn: "span 2" }}
                />
                <TextField
                  label="Location"
                  onBlur={handleBlur}
                  onChange={handleChange}
                  value={values.location}
                  name="location"
                  error={Boolean(touched.location) && Boolean(errors.location)}
                  helperText={touched.location && errors.location}
                  sx={{ gridColumn: "span 4" }}
                />
                <TextField
                  label="Occupation"
                  onBlur={handleBlur}
                  onChange={handleChange}
                  value={values.occupation}
                  name="occupation"
                  error={
                    Boolean(touched.occupation) && Boolean(errors.occupation)
                  }
                  helperText={touched.occupation && errors.occupation}
                  sx={{ gridColumn: "span 4" }}
                />
                <Box
                  gridColumn="span 4"
                  border={`1px solid ${palette.neutral.medium}`}
                  borderRadius="5px"
                  p="1rem"
                >
                  <Dropzone
                    acceptedFiles=".jpg,.jpeg,.png"
                    multiple={false}
                    onDrop={(acceptedFiles) =>
                      setFieldValue("picture", acceptedFiles[0])
                    }
                  >
                    {({ getRootProps, getInputProps }) => (
                      <Box
                        {...getRootProps()}
                        border={`2px dashed ${palette.primary.main}`}
                        p="1rem"
                        sx={{ "&:hover": { cursor: "pointer" } }}
                      >
                        <input {...getInputProps()} />
                        {!values.picture ? (
                          <p>Add Picture Here</p>
                        ) : (
                          <FlexBetween>
                            <Typography>{values.picture.name}</Typography>
                            <EditOutlinedIcon />
                          </FlexBetween>
                        )}
                      </Box>
                    )}
                  </Dropzone>
                </Box>
              </>
            )}

            <TextField
              label="Email"
              onBlur={handleBlur}
              onChange={handleChange}
              value={values.email}
              name="email"
              error={Boolean(touched.email) && Boolean(errors.email)}
              helperText={touched.email && errors.email}
              sx={{ gridColumn: "span 4" }}
            />
            <TextField
              label="Password"
              type="password"
              onBlur={handleBlur}
              onChange={handleChange}
              value={values.password}
              name="password"
              error={Boolean(touched.password) && Boolean(errors.password)}
              helperText={touched.password && errors.password}
              sx={{ gridColumn: "span 4" }}
            />
          </Box>

          {/* BUTTONS */}
          <Box>
            <Button
              fullWidth
              type="submit"
              sx={{
                m: "2rem 0",
                p: "1rem",
                backgroundColor: palette.primary.main,
                color: palette.background.alt,
                "&:hover": { color: palette.primary.main },
              }}
            >
              {isLogin ? "LOGIN" : "REGISTER"}
            </Button>
            <Typography
              onClick={() => {
                setPageType(isLogin ? "register" : "login");
                resetForm();
              }}
              sx={{
                textDecoration: "underline",
                color: palette.primary.main,
                "&:hover": {
                  cursor: "pointer",
                  color: palette.primary.light,
                },
              }}
            >
              {isLogin
                ? "Don't have an account? Sign Up here."
                : "Already have an account? Login here."}
            </Typography>
          </Box>
        </form>
      )}
    </Formik>
  );
};

export default Form;

Messages functionality using Socket.io

I was trying to extend this project by adding messages functionality using socket.io. Can someone help me get started?

Social app

auth/register and login not working

Hello! When I try to log in I get this error: "POST http://localhost:3001/auth/login 400 (Bad Request) Form.jsx:82". I did not change any of the backend code and I connected to mongodb, I even put your predefined users and posts in collections and tried one of them to log in and it is not working. What should I do?

Form.jsx:61 POST http://localhost:5000/auth/register 404 (Not Found)

Hey There,
I'm getting this error while posting Register request from this code:
const savedUserResponse = await fetch(
"http://localhost:5000/auth/register",
{
method: "POST",
body: formData,
}
);

need Help :(

loggin not working

i have this problem can some body help :

Uncaught TypeError: Cannot read properties of undefined (reading '6414c13f932a8a5a100ea491')
at PostWidget (PostWidget.jsx:30:1)
at renderWithHooks (react-dom.development.js:16305:1)
at mountIndeterminateComponent (react-dom.development.js:20074:1)
at beginWork (react-dom.development.js:21587:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27451:1)
at performUnitOfWork (react-dom.development.js:26557:1)
at workLoopSync (react-dom.development.js:26466:1)
6react-dom.development.js:18687 The above error occurred in the component:

at PostWidget (http://localhost:3000/static/js/bundle.js:2707:5)
at PostsWidget (http://localhost:3000/static/js/bundle.js:2969:5)
at div
at http://localhost:3000/static/js/bundle.js:4497:66
at Box (http://localhost:3000/static/js/bundle.js:21778:72)
at div
at http://localhost:3000/static/js/bundle.js:4497:66
at Box (http://localhost:3000/static/js/bundle.js:21778:72)
at div
at http://localhost:3000/static/js/bundle.js:4497:66
at Box (http://localhost:3000/static/js/bundle.js:21778:72)
at HomePage (http://localhost:3000/static/js/bundle.js:714:87)
at RenderedRoute (http://localhost:3000/static/js/bundle.js:76956:5)
at Routes (http://localhost:3000/static/js/bundle.js:77378:5)
at InnerThemeProvider (http://localhost:3000/static/js/bundle.js:21055:70)
at ThemeProvider (http://localhost:3000/static/js/bundle.js:20768:5)
at ThemeProvider (http://localhost:3000/static/js/bundle.js:21074:5)
at Router (http://localhost:3000/static/js/bundle.js:77316:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:75648:5)
at div
at App (http://localhost:3000/static/js/bundle.js:45:72)
at PersistGate (http://localhost:3000/static/js/bundle.js:83788:5)
at Provider (http://localhost:3000/static/js/bundle.js:73011:5)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18687
react-dom.development.js:12056 Uncaught TypeError: Cannot read properties of undefined (reading '6414c13f932a8a5a100ea491')
at PostWidget (PostWidget.jsx:30:1)
at renderWithHooks (react-dom.development.js:16305:1)
at mountIndeterminateComponent (react-dom.development.js:20074:1)
at beginWork (react-dom.development.js:21587:1)
at beginWork$1 (react-dom.development.js:27426:1)
at performUnitOfWork (react-dom.development.js:26557:1)
at workLoopSync (react-dom.development.js:26466:1)
at renderRootSync (react-dom.development.js:26434:1)
at recoverFromConcurrentError (react-dom.development.js:25850:1)
at performSyncWorkOnRoot (react-dom.development.js:26096:1)
ff2cfa4e0d9d374d44ac7d58ca956909.jpg:1 Failed to load resource: the server responded with a status of 404 (Not Found)

info section about project

can you add section like how to run

Uncaught TypeError: Cannot read properties of undefined (reading 'light')

Undefined userPicturePath from PostsWidget

When I deploy the backend, Signup functionality not work in frontend, when I check this in Postman they work properly, but not work in frontend,Please give me suggestion What I do, then they work

jsconfig.json

Hi Ed Roh, I have completed your video and somehow this error continuously pops up in my .code.
Can you teach me how to fix this? TIA

Error: ENOENT: no such file or directory, open 'p4.jpeg/p4.jpeg'

When I try to register a new user and submit a form I got this error.

Server logs say:

::1 - - [23/Feb/2023:10:33:46 +0000] "POST /auth/register HTTP/1.1" 500 199
Error: ENOENT: no such file or directory, open 'p4.jpeg/p4.jpeg'

Also when I inspect the website, I see an error in the Form.jsx file.

Any idea how to fix this issue?

after loggend not acees home page

My home page doesnt load when I log in. I get this error in the console:

Uncaught TypeError: posts.map is not a function
at PostsWidget (PostsWidget.jsx:41:1)
at renderWithHooks (react-dom.development.js:16305:1)
at mountIndeterminateComponent (react-dom.development.js:20074:1)
at beginWork (react-dom.development.js:21587:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27451:1)
at performUnitOfWork (react-dom.development.js:26557:1)
at workLoopSync (react-dom.development.js:26466:1)