instagram clone app by youtube - part02

                                         Chapter 11:  Post Schema and Create Post Route

Note: we used upslash.com fro the pics store in the project.

step01: in app.js put it below after connection.on means after connection is established

require('./models/user')

app.use(express.json())

app.use(require('./routes/auth'))

step02:

create post.js in models

                                            Chapter 12:  View all Post Route

We can show all the posts at the screen when the client want 

.populate("postedBy")

by this command - we will get all the details we have posted 

we dont want the email and the password for that what we will do

.populate("postedBy,","_id name")

by this command only id and name will show

                                     Chapter 13:  All Post created by sign in user route

make all the post created by user 

by the specific user

create sign up the user 

create post - for this we login -sign in - we get the token 

copy the token and go to mypost 

router.get('mypost',requireLogin,(req,res)=>{

above change and add the requireLogin then the login user can see the request - it will be in Post.js

                       Chapter 14:  Creating React Js Project for Client and adding React Router

step01: create project - npx create-react-app client

step02: npm install react-router-dom

step03: 

note: everything is done in this chapter but there is the problem that everything is showing 

                       Chapter 15:  Creating sign up and sign in page ui

                       Chapter 16:  Creating profile page ui in react js

                                                   ........................................................................

                                                   ........................................................................

till now : what has not done:::::::::::::::::;

first - all pages are coming at a single page

link at sign in and sign up page below - not already user is not working 

                       Chapter 17:  Creating home Page UI

                       Chapter 18:  Creating Post Page UI

note:

proxy-what does proxy will do 

proxy- it will forward the request which we are making  in this application automatically to localhost:5000 where nodejs server running so we can add this proxy to our package.json now we are fooling our react ,react ,we are making react fool because react will consider that we are making a request to the same domain localhost;3000 but internally our request will forward to the localhost:5000  , so we are folling our react by making the proxy in package.json 

                           Chapter 19:  Working on User Signup by Posting Data 

step01: import useState hook in signup

       import React,{useState} from 'react'

step02: add useState in signup

const [name,setName]= useState("")

const [password,setPassword]= useState("")

const [email,setEmail]= useState("")

step03: give value and onChange for the update - in all input field

<h2>Instagram</h2>

<input type ="text"

placeholder="name"

value={name}

onChange={(e)=>setName(e.target.value)}

Step 04: Now We Will Make a Network Request :

For that make a function  const Post 

Make use of fetch in this to make a network request 

We will Stringify whatever we are sending 

give response with json with .then command 

here finally will be data  with .then command 

const PostData =()=>{

fetch("signup",{

method:"Post",

headers:{

"Content-Type":"application/json"

},

body:JSON.stringify({

name,

password,

email

})

}).then(res=>res.json())

.then(data=>{

if(data.error){

M.toast({html:data.error,classes:"#c62828 red darken-3"})

}

else{

M.toast({html:data.message,classes:"#43a047 green darken-1"})

history.push('/signin')

}

})

}

step: I will call this post when user will click on this button 

- For that i can add onClick  in the button

onClick={()=>PostData()}

Step 05:

Now make a network request with empty email and empty password

When click at Sign up there is an error in console-

Error: Cors Error comes at the console-

We know

our React Server is Running at - localhost:3000

our Server is Running at - localhost:5000

So both the urls are running on different domain 

so if i will send the request from one domain server will allow any request from another domain

so our request is being blocked by this cors policy 

CORS- Cross Origin Resource Sharing

this error can be solved by the npm install package-

after this installation we will be able to successfully send the request 

but we will use this proxy in the package.json

So by this proxy we are making our react application fool - so we are fooling our react app by adding this proxy in package.json 

in the fetch i will remove the localhost:5000

after proxy add when i will sign up and see in console then there will be an error that please add all the fields in the console

add Email Regex - emailregex.com   - javascript code for emailregex copy and give it in the if condition 

                               Chapter 20:  Working on User Signup by Posting Data  

                               Chapter 21:  Uploading Image to Cloudnary

We will work in createPost.js 

and work at cloudinary 

note:

proxy error comes many times in react - so update it in the package.json

note:

agian proxy error comes 

https://github.com/plouc/mozaik/issues/118

remove proxy from package.json

and add this file with code in src

I solved this issue by removing "proxy": "localhost:8080" from package.json and creating a setupProxy.js file in the src folder with the following code:

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};

What Worked:

"proxy": "http://localhost:5000",

"secure":false,

Also add this secure:false -

error:

post is not created first time it is created by fourth to fifth time

error:

sign in not success

SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

problem in chapter 31: implementing comment in reactjs client

in home.js : line no 111

<h6 key={record._id}><span style={{fontWeight:"500"}}>{record.postedBy}</span>{record.text}</h6>

{record.postedBy.name

is giving error

TypeError: record.postedBy is undefined