safak / youtube Goto Github PK

I was following the tutorial and did everything you did, but after successfully deploying to Heroku, when I open the app it just shows a white screen, I checked the Heroku logs, there are no errors but on the browser console I get

I searched google and stack overflow but no solution worked, how can I fix this?

The (req,res) in "/login/success" appears to be undefined. could you help?

router.get("/login/success", (req, res) => { if (req.user) { res.status(200).json({ success: true, message: "successfull", user: req.user, // cookies: req.cookies }); } });

Hello safak, i tried to run " npm install " but gives the following error:

npm ERR! Response timeout while trying to fetch https://registry.npmjs.org/react (over 30000ms)

npm ERR! A complete log of this run can be found in:
npm ERR! /home/blaise/.npm/_logs/2021-07-24T07_00_36_423Z-debug.log

can you help me as i am new to github and react js? i am studying on your youtube-mern-social-app

I have ran into two errors around the timestamp of 23:00.

Error 1
xhr.js:177 GET http://localhost:3000/posts/timeline/608f0498b0e4571414a04042 500 (Internal Server Error)
I did research and found that this is an error on the server side of the application that relates. I looked at my posts request and this is what I have (copied it from your github to make sure)

router.get("/timeline/:userId", async (req, res) => { try { const currentUser = await User.findById(req.params.userId); const userPosts = await Post.find({ userId: currentUser._id }); const friendPosts = await Promise.all( currentUser.followings.map((friendId) => { return Post.find({ userId: friendId }); }) ); res.status(200).json(userPosts.concat(...friendPosts)) } catch (err) { res.status(500).json(err); console.log(err) } });

Error 2
Uncaught (in promise) Error: Request failed with status code 500. I have a feeling once I get this situated, that should work as well. Any help would be greatly appreciated.

anybody have any tips to get rid of the 500 error? Cart/Admin Dashboard/navbar work just fine but loading in the homepage just does not work

So i'm doing the tutorial but after doing the token verification, the app just crashes and i can't do anything else.
Here's the code from verifyToken.js:

const JWT = require('jsonwebtoken');

function verify(req, res, next) {
const authHeader = req.headers.token;
if (authHeader) {
const token = authHeader.split(" ")[1];

    JWT.verify(token, process.env.SECRET_KEY, (err, user) => {
        if (err) res.status(403).json('Token is not valid');
        req.user = user;
        next();
    })
} else {
    return res.status(401).json('You are not authenticated');
}

}

module.exports = verify;

And here's the error i'm getting all the time:

const authHeader = req.headers.token;
                       ^

TypeError: Cannot read properties of undefined (reading 'headers')
at verify (C:\Users\Toni\Documents\scripting\Webs\animeflix\api\verifyToken.js:4:28)
at Object. (C:\Users\Toni\Documents\scripting\Webs\animeflix\api\routes\users.js:9:20)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object. (C:\Users\Toni\Documents\scripting\Webs\animeflix\api\index.js:9:20)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
[nodemon] app crashed - waiting for file changes before starting...

while clicking on login button in register page it does not go to login page

I've just cloned the repo, installed dependencies of both api/client with yarn and then yarn started them.

As soon as localholst:3000 opens, I face this error :

First off, amazing video. I have learned a lot so far. Second, I'm at time 1:42:00 in the video and finished creating the drop-down menus for the product filters (ProductList.jsx). The select boxes are styled correctly, but the options are not. I cannot figure out how to get the visual padding of the options (i.e. White, Black, Red, etc.). They are all very close together vertically. I tried styling the options constant (flex boxes, margin, and padding) but I can only seem to change the font, not the area surrounding the font.

Here's my ProductList.jsx file:

import styled from "styled-components"
import Navbar from "../components/Navbar"
import Announcement from "../components/Announcement"
import Products from "../components/Products"
import Newsletter from "../components/Newsletter"
import Footer from "../components/Footer"

const Container = styled.div``;

const Title = styled.h1`
    margin: 20px;
`;

const FilterContainer = styled.div`
    display: flex;
    justify-content: space-between;
`;

const Filter = styled.div`
    margin: 20px;
`;

const FilterText = styled.span`
    font-size: 20px;
    font-weight: 600;
    margin-right: 20px;
`;

const Select = styled.select`
    padding: 10px;
    margin-right: 20px;
`;

const Option = styled.option`
`;

const ProductList = () => {
    return (
        <Container>
            <Navbar/>
            <Announcement/>
            <Title>Dresses</Title>
            <FilterContainer>
                <Filter>
                    <FilterText>Filter Products:</FilterText>
                    <Select>
                        <Option disabled selected>Color</Option>
                        <Option>White</Option>
                        <Option>Black</Option>
                        <Option>Red</Option>
                        <Option>Blue</Option>
                        <Option>Yellow</Option>
                        <Option>Green</Option>
                    </Select>
                    <Select>
                        <Option disabled selected>Size</Option>
                        <Option>XS</Option>
                        <Option>S</Option>
                        <Option>M</Option>
                        <Option>L</Option>
                        <Option>XL</Option>
                    </Select>
                </Filter>
                <Filter>
                    <FilterText>Sort Products:</FilterText>
                    <Select>
                        <Option selected>Newest</Option>
                        <Option>Price (asc)</Option>
                        <Option>Price (desc)</Option>
                    </Select>
                </Filter>
            </FilterContainer>
            <Products/>
            <Newsletter/>
            <Footer/>
        </Container>
    )
};

export default ProductList;

Here's a screenshot of the options within the select filter:

Here's a look at the correct display posted by Lama Dev at 1:41:46:

I recently deployed to Heroku , Every route works fine until except socket.io and /api/upload on index.js
.I got this Error
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined. I Copied the exact code from index.js from this github to my local file.

Herokku gives this eroor:

code=H13 desc="Connection closed without response" method=POST path="/api/upload" status=503```

sometimes like this
```at=error 
code=H12 desc="Request timeout" method=POST path="/api/upload" status=503```

./src/pages/Home.jsx
Attempted import error: '../components/Categories' does not contain a default export (imported as 'Categories').

Following the tutorial on my localhost mongodb (MongoDB 4.2.17 Community) and "mongoose": "^6.1.8", I cannot update newly registered user by PUT request:

http://127.0.0.1:8080/api/users/61f75a28fe1972fb27963879
JSON body:

{
    "description": "New desc",
    "userID": "61f75a28fe1972fb27963879"
    
}

I can fetch the very same user however, using GET http://127.0.0.1:8080/api/users/61f75a28fe1972fb27963879.

To avoid any typos, I just copied the code snippet from github:

router.put("/:id", async (req, res) => {
    if (req.body.userId === req.params.id || req.body.isAdmin) {
      if (req.body.password) {
        try {
          const salt = await bcrypt.genSalt(10);
          req.body.password = await bcrypt.hash(req.body.password, salt);
        } catch (err) {
          return res.status(500).json(err);
        }
      }
      try {
        const user = await User.findByIdAndUpdate(req.params.id, {
          $set: req.body,
        });
        res.status(200).json("Account has been updated");
      } catch (err) {
        return res.status(500).json(err);
      }
    } else {
      return res.status(403).json("You can update only your account!");
    }
  });

But still get:
"You can update only your account!"

Appreciate your hints.

Hello, Safak! In the Map app, sometimes, an error comes up that says Proxy error: Could not proxy request /favicon.ico from localhost:3000 to http://localhost:8800. Any idea how to solve this? Sometimes, the error doesn't show up at all.

Also, Registering isn't working and I cannot figure it out for the life of me. I've triple checked your code. Please Help!

i tried to change the url completely with the "localhost" not 5000 but on port 3000, apparently i tried both none of it work

In the netflixClone (this file specifically) there is:

 headers: {
            token:
              "Bearer "+JSON.parse(localStorage.getItem("user")).accessToken,
          },

I am trying to use that instead of putting the accessToken directly but couldn't figure out how to. I read docs but if I am getting it right then I have to assign the actual token to user.accessToken in the same file. That does not make much sense to me.

I have ran into two errors around the timestamp of 23:00.

Error 1
xhr.js:177 GET http://localhost:3000/posts/timeline/608f0498b0e4571414a04042 500 (Internal Server Error)
I did research and found that this is an error on the server side of the application that relates. I looked at my posts request and this is what I have (copied it from your github to make sure)

router.get("/timeline/:userId", async (req, res) => { try { const currentUser = await User.findById(req.params.userId); const userPosts = await Post.find({ userId: currentUser._id }); const friendPosts = await Promise.all( currentUser.followings.map((friendId) => { return Post.find({ userId: friendId }); }) ); res.status(200).json(userPosts.concat(...friendPosts)) } catch (err) { res.status(500).json(err); console.log(err) } });

Error 2
Uncaught (in promise) Error: Request failed with status code 500. I have a feeling once I get this situated, that should work as well. Any help would be greatly appreciated.

C:\Users\KING\Documents\blackmarket\api\node_modules\express\lib\router\route.js:202
throw new Error(msg);
^

Error: Route.put() requires a callback function but got a [object Undefined]
at Route. [as put] (C:\Users\KING\Documents\blackmarket\api\node_modules\express\lib\router\route.js:202:15)
at Function.proto. [as put] (C:\Users\KING\Documents\blackmarket\api\node_modules\express\lib\router\index.js:510:19)
at Object. (C:\Users\KING\Documents\blackmarket\api\routes\user.js:11:8)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object. (C:\Users\KING\Documents\blackmarket\api\index.js:5:18)
[nodemon] app crashed - waiting for file changes before starting...

while putting the header using postman

not displaying datagrid

my data grid not displaying 
`import * as React from 'react';
import { Container } from '@mui/material';
import { DataGrid, GridRowsProp, GridColDef } from '@mui/x-data-grid'


function UserList() {
    
      const columns = [
        { field: 'id', headerName: 'ID', width: 90 },
        {
          field: 'firstName',
          headerName: 'First name',
          width: 150,
          editable: true,
        },
        {
          field: 'lastName',
          headerName: 'Last name',
          width: 150,
          editable: true,
        },
        {
          field: 'age',
          headerName: 'Age',
          type: 'number',
          width: 110,
          editable: true,
        },
        {
          field: 'fullName',
          headerName: 'Full name',
          description: 'This column has a value getter and is not sortable.',
          sortable: false,
          width: 160,
          
        },
      ];
      
      const rows = [
        { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
        { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
        { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
        { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
        { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
        { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
        { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
        { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
        { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
      ];

      return (
        <Containers x={{height: 350}}>
          <h1>Single items:</h1>
          <DataGrid
        rows={rows}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}
        checkboxSelection
        disableSelectionOnClick
      />
        </Containers>
      );
    }

export default UserList`

Hi,

I've been following 2 of your videos about the API + the client.

Now I'm following the 3rd where you combine the two into fully functional social media app.

I am having trouble with this endpoint of the API:

::ffff:127.0.0.1 - - [22/Jun/2021:23:02:27 +0000] "GET /api/posts/timeline/60d2614e9375bbce8a755302 HTTP/1.1" 500 2

For some reason it doesn't work, I've checked other endpoints they seem to work fine, I have this in my 'posts.js':

// Get timeline
router.get("/timeline/:userId", async (req, res) => {
  try {
    const currentUser = await User.findById(req.params.userId);
    const userPosts = await Post.find({ userId: currentUser._id });
    const friendPosts = await Promise.all(
      currentUser.followings.map((friendId) => {
        return Post.find({ userId: friendId });
      })
    );
    res.status(200).json(userPosts.concat(...friendPosts));
  } catch (err) {
    res.status(500).json(err);
  }
});

I've tried this from the react app, from the browser and from Postman, this endpoint just returns a 500 error.

In the browser I am seeing this message:

Uncaught (in promise) Error: Request failed with status code 404

Because of this I cannot apply the useEffect on Feed

useEffect(() => {
    const fetchPosts = async () => {
      const res = await axios.get("posts/timeline/60d2614e9375bbce8a755302");
      setPosts(res.data);
    };
    fetchPosts();
  }, []);

It automatically crashes my react app.

Any idea how to fix this?

Maybe include README to reference your essay: https://dev.to/safak/social-media-app-using-mern-stack-4ic6

at minute 48, you can do more than 2x send request to postman, but in mine it can only be once for the second time Error: connect ECONNREFUSED 127.0.0.1:5000

router.post("/login", async (req, res) => {
try {
const user = await User.findOne({ username: req.body.username });
!user && res.status(401).json("Wrong credentials!");
const hashedPassword = CryptoJS.AES.decrypt(
user.password,
process.env.PASS_SEC
);
const password = hashedPassword.toString(CryptoJS.enc.Utf8);
password !== req.body.password &&
res.status(401).json("Wrong credentials!");
res.status(200).json(user);
} catch (err) {
res.status(500).json(err);
}
});

You cannot accept payments using this API as it is no longer supported . Please refer to https://stripe.com/docs/payments for accepting payments.
This is the error i am getting.

I am creating new app looks like yours. But sometimes I need to see how your pages working. I want to see it in demo version to understand the how it functions working.

I followed everything but multiple selection in the movie list is not working on my end,
I even copied your code but I have the same problem

Firstly, thank you for an amazing YouTube tutorial "React Admin page", its exactly what I need, but my data comes from MySQL so I'll need to find videos on that later. Anyways, back to my question, for some reason I am getting an error on the Top Bar section and I cannot figure out how to fix it. One thing for sure, when I use <NotificationsNone /> I get a hook error on the browser. Which I don't think it's that. It's just throwing all kinds of errors. However, when I replace that code with just text, like "hello", it shows on the browser without any issues. I am including pictures to show you what's happening.

Do you know what could be causing this?

Really appreciate your time on this.

along with ufw allow "Nginx Full" you need to run sudo ufw allow ssh otherwise you won't be able to connect using ssh after ending the current session.

in requestMethod, we get the value of the TOKEN from localStorage
but when we clear localStorage or open in another browser such as Incognito window
requestMethod throw an error
Uncaught TypeError: Cannot read properties of null (reading 'user')
at Module../src/requestMethod.js (requestMethod.js:4:1)

I think a condition must be added to affect an empty string to the TOKEN if the localStorage is Empty

when I click on send button in contact form it gives this error
Uncaught TypeError: Cannot read property 'store' of undefined
at Object. (vendors.js:3042)
at Object. (vendors.js:3867)
at o (content-script.js:1)
at Module.76 (content-script.js:138)
at o (content-script.js:1)
at Object.70 (content-script.js:138)
at o (content-script.js:1)

at n (content-script.js:1)
at Array.t [as push] (content-script.js:1)
at vendors.js:1[](url)

Hello, I am facing the below issue can you please help

https://stackoverflow.com/questions/71361256/ouath-social-logins-in-react-js-and-nodeexpress-with-different-sub-domains

Ads

I was following your series of mern ecommerce app and saw that you missed out the Register Page.

My questions are:

• Is there any valid reason for doing it.
• If yes then please inform us.

It will be easy for us to create the Register page cuz its similar to login. But do we need to ?

TypeError: Cannot read properties of undefined (reading 'likes')

How can i fix this status of 400 error?

This is related to https://www.youtube.com/watch?v=7WwtzsSHdpI

The snap-scroll effect works fine in Firefox, but in chrome, whenever scroll up or down, one section is always 'skipped'. Tried using --webkit but no luck. Scrolling works correctly even in chrome with arrow key press, drag of scroll slider etc., but not with mouse wheel scroll.

Related question on stackoverflow https://stackoverflow.com/questions/67845873/react-snap-scroll-not-functioning

in verifyToken page
const verifyTokenAndAdmin = (req, res, next) => { verifyToken(req, res, () => { if (req.user.isAdmin) { next(); } else { res.status(403).json("You are not alowed to do that!"); } }); };
isAdmin is not defined how can I fix this, please help

https://youtu.be/f6DMahgkhCk

heroku deployment isu

e

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
at processTicksAndRejections (node:internal/process/task_queues:96:5) {
code: 'ERR_HTTP_HEADERS_SENT'
}

In
"React Node.js Social Media App Tutorial - MERN Stack App Full Course w/ Hooks - Context API' youtube video

https://youtu.be/pFHyZvVxce0?t=8400 at this time, there are status 500 warning...

and no image like 1231241234ad.png uploaded at public/images folder.

after I failed to add this image by clicking "share" button, all the images break and posts blow away.

console also say

How can I fix this problem?

\youtube-chat-app\socket\index.js:36
io.to(user.socketId).emit("getMessage", {
^

TypeError: Cannot read property 'socketId' of undefined

I have deployed the backend to Heroku and frontend to Netlify. But in Netlify production, the backend server is not working, though it is working fine in local dev server.

Hi,
One of the slider images is not working.

https://i.ibb.co/XsdmR2c/1.png

May I ask where you are getting these images? I want to put more images in the slider functionality.