This is a code repository for the corresponding video tutorial.

Overview

Memories

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.

Launch your development career with project-based coaching - https://www.jsmastery.pro

Setup:

  • run npm i && npm start for both client and server side to start the app
Comments
  • Server-side error

    Server-side error

    When I run the server side with nodemon index.js`, I got the error like this:

    https://file.io/0FqxDrpjhRH7

    And after changed the script command in package.json node instead of nodemon and run, still got the same error.

    (node:36868) ExperimentalWarning: The ESM module loader is experimental.

    Please kindly teach me the solution.

    opened by best-lucky1030 2
  • Error after updating 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: image

    opened by nonienoa 2
  • Post.js:87 Uncaught TypeError: Cannot read properties of null (reading 'map')

    Post.js:87 Uncaught TypeError: Cannot read properties of null (reading 'map')

    TypeError: Cannot read properties of null (reading 'map') at Post (Post.js:87:1) at renderWithHooks (react-dom.development.js:14985:1) at mountIndeterminateComponent (react-dom.development.js:17811:1) at beginWork (react-dom.development.js:19049:1) at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1) at invokeGuardedCallback (react-dom.development.js:4056:1) at beginWork$1 (react-dom.development.js:23964:1) at performUnitOfWork (react-dom.development.js:22776:1) at workLoopSync (react-dom.development.js:22707:1) at renderRootSync (react-dom.development.js:22670:1) at performSyncWorkOnRoot (react-dom.development.js:22293:1) at react-dom.development.js:11327:1 at unstable_runWithPriority (scheduler.development.js:468:1) at runWithPriority$1 (react-dom.development.js:11276:1) at flushSyncCallbackQueueImpl (react-dom.development.js:11322:1) at flushSyncCallbackQueue (react-dom.development.js:11309:1) at batchedUpdates$1 (react-dom.development.js:22387:1) at Object.notify (Subscription.js:19:1) at Subscription.notifyNestedSubs (Subscription.js:90:1) at Subscription.handleChangeWrapper (Subscription.js:95:1) at dispatch (redux.js:297:1) at index.js:11:1 at dispatch (redux.js:659:1) at posts.js:15:1

    I can not access all the posts, before that it is no issue! TypeError: Cannot read properties of null (reading 'map') Post D:/JsMastery-MERN-project/client/src/components/Posts/Post/Post.js:87 84 | )} 85 |

    86 | <div className={classes.details}>

    87 | | ^ 88 | {post.tags.map((tag) => #${tag})} 89 | 90 |

    ▶ 23 stack frames were collapsed. (anonymous function) D:/JsMastery-MERN-project/client/src/actions/posts.js:15 12 | try { 13 | const { data } = await api.fetchPosts(); 14 | 15 | dispatch({ type: FETCH_ALL, payload: data }); | ^ 16 | } catch (error) { 17 | console.log(error); 18 | } View compiled

    opened by HaominChenn 1
  • Button embedded into ButtonBase makes the Home page fall apart and also makes the edit button unsuable

    Button embedded into ButtonBase makes the Home page fall apart and also makes the edit button unsuable

    Hello,

    In the components/Posts/Post/Post.js file there is a Button embedded into a ButtonBase component that creates a warning and also destroys the Home page where these components are used via the Posts component.

    The warning says this: validateDOMNesting(...): <button> cannot appear as a descendant of <button>

    If I change the ButtonBase to a simple div (it loses a lot of styling) the edit button is still unusable because it registers the parent divs onClick first.

    import React, { useState } from "react"
    import { Card, CardActions, CardContent, CardMedia, Button, Typography, ButtonBase } from '@material-ui/core'
    import ThumbUpAltIcon from '@material-ui/icons/ThumbUpAlt'
    import ThumbUpAltOutlined from "@material-ui/icons/ThumbUpAltOutlined"
    import DeleteIcon from '@material-ui/icons/Delete'
    import MoreHorizIcon from '@material-ui/icons/MoreHoriz'
    import moment from 'moment'
    import { useDispatch } from "react-redux"
    import { useNavigate } from "react-router-dom"
    
    import useStyles from './styles'
    import { deletePost, likePost } from '../../../actions/posts'
    
    const Post = ({ post, setCurrentId }) => {
        const user = JSON.parse(localStorage.getItem('profile'))
        const [likes, setLikes] = useState(post?.likes)
        const userId = user?.result?.googleId || user?.result?._id
        const hasLikedPost = post.likes.find((like) => like === userId)
        const classes = useStyles()
        const dispatch = useDispatch()
        const navigate = useNavigate()
    
        const handleLike = async () => {
            dispatch(likePost(post._id))
    
            if(hasLikedPost) {
                setLikes(post.likes.filter((id) => id !== userId))
            } else {
                setLikes([...post.likes, userId])
            }
        }
    
        const openPost = () => navigate(`/posts/${post._id}`)
    
        const Likes = () => {
            if (likes.length > 0) {
                return likes.find((like) => like === userId)
                    ? (
                        <><ThumbUpAltIcon fontSize="small" />&nbsp;{likes.length > 2 ? `You and ${likes.length - 1} others` : `${likes.length} like${likes.length > 1 ? 's' : ''}` }</>
                    ) : (
                        <><ThumbUpAltOutlined fontSize="small" />&nbsp;{likes.length} {likes.length === 1 ? 'Like' : 'Likes'}</>
                    );
            }
          
            return <><ThumbUpAltOutlined fontSize="small" />&nbsp;Like</>;
        }
    
        return (
            <Card className={classes.card} raised elevation={6}>
                <ButtonBase className={classes.cardAction} onClick={openPost}>
                    <CardMedia className={classes.media} image={post.selectedFile} title={post.title} />
                    <div className={classes.overlay}>
                        <Typography variant="h6">{post.name}</Typography>
                        <Typography variant="body2">{moment(post.createdAt).fromNow()}</Typography>
                    </div>
                    {(user?.result?.googleId === post?.creator || user?.result?._id === post?.creator) && (
                        <div className={classes.overlay2}>
                            <Button style={{color: 'white'}} size="small" onClick={() => setCurrentId(post._id)}>
                                <MoreHorizIcon fontSize="medium" />
                            </Button>
                        </div>
                    )}
                    <div className={classes.details}> 
                        <Typography variant="body2" color="textSecondary">{post.tags.map((tag) => `#${tag} `)}</Typography>
                    </div>
                    <Typography className={classes.title} variant="h5" gutterBottom>{post.title}</Typography>
                    <CardContent>
                        <Typography variant="body2" color="textSecondary" component="p">{post.message}</Typography>
                    </CardContent>
                </ButtonBase>
                <CardActions className={classes.cardActions}>
                    <Button size="small" color="primary" disabled={!user?.result} onClick={handleLike}>
                    <Likes />
                    </Button>
                    {(user?.result?.googleId === post?.creator || user?.result?._id === post?.creator) && (
                        <Button size="small" color="primary" onClick={() => dispatch(deletePost(post._id))}>
                            <DeleteIcon fontSize="small" />
                            Delete
                        </Button>
                    )}
                </CardActions>
            </Card>
        )
    }
    
    export default Post
    

    How can I solve this?

    opened by szaboako 1
  • Automatic scroll to see the last comment scrolls the whole PostDetails page

    Automatic scroll to see the last comment scrolls the whole PostDetails page

    Hello,

    In the CommentSection.jsx there is a part that is meant to make the comment section scroll if there is a new comment (handleClick last line) to make it visible. This function also scrolls the whole page. How can I make it to scroll only in the comment section?

    import React, { useState, useRef } from 'react'
    import { Typography, TextField, Button } from '@material-ui/core'
    import { useDispatch } from 'react-redux'
    
    import { commentPost } from '../../../actions/posts'
    import useStyles from './styles'
    
    const CommentSection = (post) => {
        const classes = useStyles()
        const dispatch = useDispatch()
        const commentsRef = useRef()
        const user = JSON.parse(localStorage.getItem('profile'))
        const [comments, setComments] = useState(post?.post?.comments)
        const [comment, setComment] = useState('')
    
        const handleClick = async () => {
            const finalComment = `${user.result.name}: ${comment}`
    
            const newComments = await dispatch(commentPost(finalComment, post.post._id))
    
            setComments(newComments)
            setComment('')
    
            commentsRef.current.scrollIntoView({ behavior: 'smooth' })
        }
    
        return (
            <div>
                <div className={classes.commentsOuterContainer}>
                    <div className={classes.commentsInnerContainer}>
                        <Typography gutterBottom variant="h6">Comments</Typography>
                        {comments.map((comment, index) => (
                            <Typography key={index} gutterBottom variant="subtitle1">
                                <strong>{comment.split(': ')[0] + ':'}</strong>
                                {comment.split(':')[1]}
                            </Typography>
                        ))}
                        <div ref={commentsRef}/>
                    </div>
                    {user?.result?.name && (
                        <div style={{ width: '70%' }}>
                        <Typography gutterBottom variant="h6">Write a Comment</Typography>
                        <TextField 
                            fullWidth
                            rows={4}
                            variant="outlined"
                            label="Comment"
                            multiline
                            value={comment}
                            onChange={(e) => setComment(e.target.value)}
                        />
                        <Button style={{ marginTop: '10px' }} fullWidth disabled={!comment} variant="contained" color="primary" onClick={handleClick}>
                            Comment
                        </Button>
                        </div>
                    )}
                </div>
            </div>
        )
    }
    
    export default CommentSection
    
    opened by szaboako 1
  • Posts from DB don't load.

    Posts from DB don't load.

    I have the same issue posted by the guy before me The posts in the app do not load from the database. But if I create a new one it shows just fine and it does get inserted in the database. Also when I go to localhost:5000/ I get the message: Cannot GET /

    opened by hafeed06 1
  • 409 conflict error at the end of 'User Actions' of part 3

    409 conflict error at the end of 'User Actions' of part 3

    I'm getting a 409 conflict error at the end of 'User Actions' of part 3. I'm unable to submit posts even though the data shows up correctly in the request payload and the request headers also look good. Anyone else run into this problem? I have a feeling it has something to do with this logic in Form.js and how maybe it's trying to update instead of create?:

    if (currentId === 0) { dispatch(createPost({ ...postData, name: user?.result?.name })); clear(); } else { dispatch(updatePost(currentId, { ...postData, name: user?.result?.name })); clear(); } };

    Any help would be appreciated. Thank you!

    opened by kevinginta 1
  • Login page is  not coming

    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 ?

    opened by VibhuGautam 1
  • POST http://localhost:5000/user/signup 404 (Not Found)

    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.

    opened by Nayandin77 1
  • TypeError: Cannot read property 'split' of undefined

    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!

    opened by ThayGiaoTien 1
  • CardMedia not displaying image

    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. Screenshot from 2021-05-13 13-27-52

    opened by akashdoppalapudi 1
  • React 18.2 -- src/reducers/posts.js   Line 1:1:  Assign arrow function to a variable before exporting as module default

    React 18.2 -- src/reducers/posts.js Line 1:1: Assign arrow function to a variable before exporting as module default

    Im getting the error that /src/reducers/posts.js - cannot export or use anonymous function.

    Can you please offer updated React 18 support or put out resources of how to change/port the changes?

    Is there an update for the arrow functions for the react 18 version?

    export default (posts = [], action) => { switch (action.type) { case 'FETCH_ALL': return action.payload; case 'CREATE': return posts; default: return posts; } };

    opened by cleankicks11 0
  • Does not work, even when copying the full repository

    Does not work, even when copying the full repository

    I finished the tutorial, and went through and verified no spelling errors, and still wasn't working, so I copied the whole repository, from part 6 and ran it... and still doesn't work. Posts don't ever load. My mongoose settings are correct.

    opened by ThomasAurelius 4
  • Owner
    Adrian Hajdin - JS Mastery
    JavaScript Enthusiast & Educator
    Adrian Hajdin - JS Mastery
    Redux-ReduxToolkit Tutorial

    In this repo, I will share my experience regarding redux, react-redux and redux-toolkit

    Anisul Islam 34 Nov 23, 2022
    ⚡️The Fullstack React Framework — built on Next.js

    ⚡️The Fullstack React Framework — built on Next.js

    ⚡️Blitz 12.4k Nov 29, 2022
    ⚡️The Fullstack React Framework — built on Next.js — Inspired by Ruby on Rails

    ⚡️The Fullstack React Framework — built on Next.js — Inspired by Ruby on Rails

    ⚡️Blitz 9.4k Oct 12, 2021
    Code Surfer adds code highlighting, code zooming, code scrolling, code focusing, code morphing, and fun to MDX Deck slides.

    Code Surfer Help to keep this project alive with your support ❤️ Code Surfer adds code highlighting, code zooming, code scrolling, code focusing, code

    Rodrigo Pombo 5.9k Dec 3, 2022
    📚 Learn React + Redux by building a SoundCloud Client. Full tutorial included. Source Code for main tutorial but also extensions included.

    react-redux-soundcloud I wrote a huge tutorial about setting up your own SoundCloud Client in React + Redux. Additonally you can find a real world exa

    Robin Wieruch 282 Oct 16, 2022
    React-tutorial - A React tutorial from Udemy (Academind)

    Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

    Patrick James Nengasca 2 Mar 31, 2022
    Displays crypto-currency API data from CoinGecko. Tutorial code from Fazt Code.

    ⚡ React Native Cryptos React-Native app to display cryptocurrency API data Tutorial code from Fazt Code - see ?? Inspiration below Note: to open web l

    Andrew Bateman 5 Apr 20, 2022
    A Web library to simply integrate Agora Video Calling or Live Video Streaming to your website with just a few lines of code

    Agora React Web UIKit Instantly integrate Agora video calling or streaming into your web application using a React based UIKit for the Agora Web SDK.

    Agora.io Community 29 Nov 23, 2022
    ApidoGitHUB-rocketseat - Makes requests to the GitHub repository API and feeds repository list on the page

    Aula 05 - Primeiro projeto com React Neste projeto foi desenvolvido uma página q

    null 0 Oct 29, 2022
    Koma Human 2 Jun 25, 2022
    Video Tutorial: React Login Input Hooks

    "React Login Input Hooks" ✅ Check out my YouTube Channel with all of my tutorials. Description: This repository shares the code applied during the You

    Dave Gray 47 Dec 1, 2022
    Companion code to the "How to Write a Google Maps React Component" Tutorial

    Google Map React Component Tutorial A declarative Google Map React component using React, lazy-loading dependencies, current-location finder and a tes

    Fullstack React 1.6k Dec 5, 2022
    Source code for my tutorial on how to build customizable table component with React Table and Tailwind CSS.

    React Table + Tailwind CSS = ❤️ Source code for my tutorial on how to build customizable table component with React Table and Tailwind CSS. Both parts

    Samuel Liedtke 141 Dec 1, 2022
    Source Code For the TextUtils React Application from CodeWithHarry YouTube Tutorial.

    Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

    null 152 Nov 29, 2022
    Repo code for the tutorial "How to create a scalable react native app ?"

    react-native-note-tutorial This repo is a demo app that i have built for a tutorial called "how to create a scalable react native app". If you want to

    null 6 Nov 20, 2022
    Anwer Solangi 17 May 6, 2022
    Video conferencing application with screen sharing, participant control and more with SignalWire Video APIs in ReactJS

    React Zoom Clone This React/Node.js codebase implements Zoom's core features using the SignalWire Video SDK and the SignalWire Video REST API. Running

    SignalWire 12 Mar 30, 2022
    A full-screen video component on top of react-native-video

    react-native-fullscreen-video A full-screen video component on top of react-native-video One of the main issues of react-native-video is making video

    Mostafa Moradian 63 Dec 4, 2022
    Resolution switcher adds the ability to select the video quality in video.js player.

    Video.js Resolution Switcher Resolution switcher for video.js v5 Example Working examples of the plugin you can check out if you're having trouble. Or

    Kasper Moskwiak 391 Aug 24, 2022
    Video-chat-app - A React video chat app using WebRTC

    video-chat-app Description Il s'agit d'une application de chat vidéo React utili

    Abdellatif Embarki 3 Jan 11, 2022