All language subtitles for [English (auto-generated)] Build a COMPLETE Fullstack Responsive MERN App with Auth, Likes, Dark Mode _ React, MongoDB, MUI [DownSub.com]

hey guys this is Ed Rowe today we are

going to be building this complete full

stack responsive social media

application using myrn from complete

scratch this social media application

will consist of a register page with

complete validation along with

functionality to upload a user image for

our profile we can register and we can

then use what we registered to sign in

and we can enter our home page and on

our home page we have a very clean

looking website that we can have we have

a number of different widgets we have

the user information everything about

our current user that's signed in we are

able to make posts over here some posts

as well as add an image for this post we

can edit delete and actually make the

post and we can see the post that we

have created and then we can also see

the users news feed of all the posts

that have been created from there then

we can also actually like and dislike

any posts that we want

we can view the comments as well and

from there for each post we can add a

friend if we would like and the friend

list will be updated over here we can

add any amount of friends and we can

remove them if we want to and then from

here we can go to any of the users that

we see over here we can click on their

page and now you can see this person's

friends he doesn't have any friends

sadly then we have the ability for that

person to write a post and then we can

see their user post as well you can see

their likes you can add them as well and

go back you can go to this page and then

from here we can change from light mode

to dark mode and vice versa and more

importantly everything is going to be

completely fully responsive so we can

see the exact same website on smaller

screens with modified adjustments for

everything most importantly everything

on this page all the information that

you see on this page is all coming from

backend apis that we create from scratch

which are retrieving information from

the databases that we also created

so everything from API calls for the

information that we set the user

interface that we create everything is

coming from data that we have added and

completely configured the technologies

that we'll be using will include the

mernstack which is represented by

mongodatabase express.js react and node

and more specifically for the front end

we will be using react as our framework

react rather for navigation formic and

yup for form and form validation Redux

toolkit for our state management with

Redux persist to store in local storage

and react drop zone for image uploads

for the back end we are going to be

using node.js as our runtime express.js

as our backend framework Mongoose for

managing our database Json web

token for authentication and multer for

file uploading now this tutorial is the

complete package with everything built

but even with all this this tutorial is

dedicated for both beginners who are

looking to practice their project

building skills and placing this project

into your portfolio but also dedicated

for experienced developers who are

looking into building and learning about

best practices and various different

Tech that may be used at your job or

provided for your clients as a tech lead

in the industry I will be create trading

from complete scratch explaining

everything as I go while using best

practices and Enterprise level packages

so you can get up to speed and familiar

with industry standards lastly like all

my other applications this website uses

free images sourced from unsplashed

meaning it is all free to use and the

website is completely designed all by me

so you don't have to worry about any

copyright issues be free to use parts or

even the whole project for your

portfolio hope you enjoy let's get

started so to start building our backend

we are going to be using node.js so

nodejs is a JavaScript runtime built on

Chrome's V8 JavaScript engine which

basically means we can use JavaScript in

the laptop or computer that you are

using I have node installed but feel

free to go to the description link below

follow these instructions to install

node on your machine and then you can go

to npx package we're going to install

this particular package so we can run

npx commands so you can run npm I MPX

and after that I want you to go to

visual studio code and you can install

this particular text editor but you can

install whatever text editor you want so

I've already done these three steps just

make sure you have these things

installed that I'm going to be in vs

code I'm going to open up the terminal

and I'm going to run a few commands the

first one is I'm going to

run

mkdir server so we're creating a file

called server or a folder called server

and I'm going to do CD server so we go

into that particular folder and here I'm

going to run some npm commands so npmi-g

node mod

I'm going to install this so what we're

doing is we're installing node men

globally so we have access to installing

or running our node

through a live service so it refreshes

every time we save

and then we're also going to run a lot

of different packages in this folder so

we're going to run npmi

Express

for our library

body parser to process the request body

be Crypt or password encryption

course for cross-origin requests

dot EnV for environment variables

grid FS Dash

let me spell that correctly create FS

stream

for file upload

as well as multir and multer grid

FS storage so we can upload our files

locally and then we're going to have

helmet Force request safety

Morgan for logging

Json web token for authentication and

Mongoose for mongodb access

after you have that make sure you type

this correctly and we're going to be

installing all those packages and we're

going to be waiting for that to finish

packages have installed I'm going to run

some one more command it's going to be

npm and knit Dash

why

and once we have that that will set up

our package Json in this folder and if

you open up your folder directory you're

going to see package Json you're going

to see node modules in here

now don't worry about this vs code

folder this is my own separate

preference settings that I added but you

can just ignore this

and so in our package Json file I'm

going to add one line of code so under

main actually it doesn't really matter

just as long as it's a property you're

going to write type

colon module

so this is so we can use

things like import statements instead of

require statements

it's your preference I'm just going to

have that I'm going to do a new file add

an index.js

and inside our index.js

actually let me close the terminal so we

have more space

we're going to run area we're going to

add a lot of import statements so that

we can install our packages so I'm going

to import Express from

Express like so import body parser from

body parser

import Mongoose and as you can see

your intellisense will tell you what you

can import and when you have this option

you should just click on it or hit enter

and it automatically types it for you

it's very convenient so I highly

recommend you use it it also prevents

bugs because you won't be able to

mistype it it'll automatically do it for

you to the proper package that comes in

so cores

from cores in this case

the intellisense wasn't showing so

import dot EnV

from dot EnV

import motor

that one popped up

and then import helmet

from helmet

import Morgan from Morgan

and

a few native packages I'm going to

import which is import path

from

path so this comes with node already so

you don't need we didn't have to install

this

and I'm going to import file URL to path

from URL so this will

these two will allow us to properly set

the paths when we

configure directories later on

all right and then from here I'm going

to create a comment and I'm going to say

configuration so this will include all

the middleware configurations as well as

different package configurations so

middleware is basically something that

runs in between

different requests basically

little like basically functions that run

in between different things

it's just a fancy term

and then from here we're going to do

const file name equals file URL to path

and we're going to do import.meta dot

URL

so this

configuration is so we can grab the file

URL

and it's specifically when you use

um the modules

so for example when we did this module

we actually need to use these

this configuration so we grab we can use

directory name which is the next name

we're going to create const their name

equals path dot their name

under underscore file name

so this is only when you use the type

modules

next we're going to Dot enp.config

and we're going to invoke that so we can

use dot EMV files

then we're going to do const app is

equal to express

so we invoke our express application so

we can use our middleware so we're going

to app.use

express.json

and invoke that

and then app.use

helmet

and invoke that

app.use helmet

cross

origin resource policy

and I'm going to put the policy

of cross origin

like so

and then I'm going to do app.use Morgan

and passing common

app.use

body parser

Json and we're going to have a limit of

30 megabyte so we don't have any issues

and we're going to do extended

colon Troop

and then we're going to do app.use body

parser.url

encoded I'm going to set a limit

of 30

megabytes as well

extended

golden true

a lot of these settings are on the

website so

you can find all these packages and

their separate GitHub repo and you can

see what a lot of these configurations

kind of do

the next thing is going to be app.use of

course

so this will invoke our cross origin

resource sharing policies

and finally we're going to do app.use

slash assets

express.static

path dot join

underscore underscore

their name

and in here

I'm going to comma and set this

as public

slash assets

and I close these parentheses like this

so what here what this is right here is

doing is going to set the directory of

where we keep our Assets in in our case

it'll be the images that we store so

we're going to store this locally in a

real live production app we would want

to store it in an actual storage file

directory or a storage a cloud storage

like S3 but in this case we're going to

want to keep things simple because this

is going to be a long course we want to

make sure we store this locally and

that'll help simplify a lot of the

things that will happen

and so next thing is we're going to set

up the file storage

configurations as well so we're going to

do const storage equals malter dot disk

storage

and we're going to set the destination

and we're going to set that as a

function

Rec file CB or the params

and all we have to do is pass CB no

comma public slash assets

colon like this

and then we're going to set file name

function

wreck

file

CB like so

CB null file dot original

name

so a lot of these configurations are

coming from the package instructions so

basically I got all of this information

from

the GitHub repo of malter

so this is how you can save your files

so anytime someone uploads a file onto

your website then it's going to say

destination it's going to be saved into

this particular folder

and then from here we're going to say

const upload is equal to multi

curly braces storage so that will help

us

save it and anytime we need to upload a

file we're going to be using this

variable

and from here we're going to actually

set up our Monger database

so we're going to go to mongodb.com

which is in the link in the description

below and we're going to hit start free

to set up our account and we're going to

be signing this up

and once you sign up I'm going to hit

create your Atlas account

after it loads it's going to ask you to

send a verification email

and already set up my email and verified

it so I'm going to hit continue

just going to fill this out

it doesn't really matter

other

test

for language JavaScript we're going to

hit finish

and we're going to hit free so we're

going to create a free

database cluster we're going to go down

you're going to choose the one that's

very close to you I'm going to choose

Oregon

go down here

everything should be left to default

after that

we're going to hit create cluster

and this all should be free

all right and then from here you're

going to see this security quick start

so we're going to fill this out real

quick so we're going to say dummy user

dummy user123

I'm going to create the user

and then from here I'm going to hit my

local environment and I'm just going to

hit add my current IP address what this

will allow you to do is be able to

connect to the database from your IP

address so later on you can change these

settings you can make it everything

different if you want

and go to database

close this

let's close it so now you can go in you

can see that you have browse collections

you can see that this will be the

location of where you have your database

and your information on those databases

and if you wanted to change your network

access so is over here database access

as well this is for the user so you can

set whatever you want in these two

settings but we've already set it up so

we're pretty much good to go

and from here I'm going to go to connect

I'm going to hit connect your

application

and I'm going to go in I'm going to copy

this guy

right here

and I'm going to create a DOT EnV file

in our server folder dot EnV

and I'm going to write underscore

URL

equals

in quotation we're going to put

everything that we have over here

and we do have to add our password so

I'm going to be doing that off screen

have added the password to the URL

I'm going to add Port equals 3001.

we're going to have the front end

running on Port 3000 and the backend

running on Port 3001 that's what this is

for we're going to save that we're going

to close this

I'm going to open this up

and we're going to now be setting our

mongoose

so from here I'm going to create another

comment I'm going to say mongoose

setup

and I'm going to say const Port is equal

to

process.env dot port

and if it doesn't work we're going to

say the port should go to 601.

so this is a backup just in case if this

port doesn't work for some reason we're

going to have that

and then we're going to do mongoose

dot connect

and now what we're doing is we're going

to connect to

the actual database from the node server

and we're going to use

our URL that we just created

and we're going to pass and use new you

RL parser

and we're going to also pass use Unified

top

ology

and then on the next slide

I'm going to say dot then

so this is what's going to happen after

we connect we're going to app.listen and

we're going to put our port

and we're going to do a callback

function we're going to say console.log

server

port

and we're going to give

our Port that we just wrote just to make

sure and confirm that we are sending

that

I'm going to keep that and we're going

to add a catch just in case if we have

an error

I'm going to say console.lag error

did not connect

so save it

and now we can open up our terminal and

we can try and running it

use new URL parts to not support oh

that's because this should be parser so

make sure you have the r at the end so

I'm going to save it and it's going to

restart and now we can see our server is

being run on this particular

Port perfect

server setup there's actually one thing

we should be doing before we jump in and

writing our apis and that is we can take

a look at the final build or we can take

a look at mocks whatever you have and

you want to see how you're going to

organize your data models what data

models are are ways of organizing your

data in nice succinct categories and

making sure they are separate from each

other and we can make relations between

each other we're going to be using

DB which is a little more freeform

compared to

SQL type database where everything is

about relations but still it's important

to try and organize your data beforehand

so that when you go into code you have a

very good structure and you can save so

much time by doing this so if you take a

look at this build we want to categorize

into few things there's a few things you

would notice is that we can organize it

via user this was pretty fairly obvious

but this is a user and they're going to

have a location associated with them the

occupation some number of views

impressions as well as their social

profiles so this is one data model that

we can keep as well as posts

is another one we have a user we have

their description of the post whether

they're friends or not with the post and

the user profile as well and the image

number of likes and comments like that

so what we want to do is we can take the

chart you can use whatever chart you

want or you could just write it straight

up in the code

you want to be able to organize

everything via different objects and

relations so for example user we're

going to have an ID first name last name

a list of friends email password

the link to the picture

location occupation the number of views

Impressions I'm going to do the same

thing for post as well so this is a lot

of things that you kind of want to look

at beforehand and make sure you

structure this so that you know how to

keep your models clean if you don't do

this you're going to waste so much time

refactoring your models and trying to do

all this

this this will save you so much time and

from here you also want to make sure you

know what the relations are so for

example friends arrays of object

meaning we want to be able to create

an array of these type of objects within

the friends list so we're going to have

an array of this type of objects so an

array of ID first name last name picture

path occupation location now there is a

couple things that are up for your

interpretation to figure out whether you

want to do it this way or another way so

for example what I could have done with

the friends is I could have put an array

of IDs so I get a list of arrays of IDs

that refer back to itself because

friends

could be a user as well

so we can instead put friends of IDs

however mongodb always suggested to

prefer to keep sub-documents whenever

you can so that allows you to have

information more easily accessible

and you only want to do referrals of IDs

if you need to so this is just a little

bit more of an advanced tip but this is

how you would structure your database

you're going to have to continue making

this I've already created all the

relations so I'm going to link this in

the description below but these are all

the relations a little crazy but it's

pretty self

explanatory but the picture path was

going to refer to the images this is

where all the images are located same

with the friends they have a picture

path same with the post they also have

picture paths as well

and then user ID is going to refer to

this user so there's a lot of relations

between but it's

very nice to keep this mapped out

beforehand before you code so it gives

you a very good idea of how you write

the code I know this is a lot of talking

a lot of thinking but this saves you a

lot of time and this gives you a good

overview of how you set up your database

and it's very important to do that

beforehand

really don't understand this right now

that's okay we're going to be referring

this diagram as we create these models

so let's actually now we can jump back

into our code

here I'm going to close the terminal so

you can see better and the first thing

we're going to do is we're going to

tackle authentication and authorization

which is going to be arguably the

hardest part of this application so now

there's a difference between

authentication and authorization

authentication is basically when you

register and then log in that's

authentication authorization is when you

want to make sure someone's logged in so

you can perform certain actions so only

users that are logged in can get their

list of friends

or they can only get their list of posts

if they're logged in so things like that

is what you would use authorization for

so we're going to start with

authentication so we're going to go down

here and we're going to write

our auth register function so under file

storage I'm going to go down

and then write app.post

actually let me write a comment over

here and I'm going to say routes

with files and I'll show you what that

means so app.post is going to have a

path of auth Slash register

so if they want to register you're going

to call this API from the front end

and we're going to say upload

dot single and we're going to name this

picture

and then comma register

so let me explain what's Happening Here

so typically you have a route and this

is the route that we're going to hit

from there we're going to use a

middleware oh I spelled this wrong so

this would be picture we're going to do

upload.single picture so what this will

do is we're going to upload our picture

locally into the public slash assets

folder and this is what's called a

middleware because it's in between

and occurs before our actual logic so

this is what's the logic of saving our

user into our database and all the

functionality relevant to register but

this is a middleware function that we

can run before it hits that endpoint so

this is what we do

and we're going to be creating this

register controller as well

and with that we're going to make sure

we're going to now treat this function

this is this function is actually called

a controller is what people term it but

basically this is the logic of the

endpoint and we're going to create an

import that represents that so we're

going to import register

from

slash dot slash controllers slash auth

dot JS so we haven't created this file

yet so I'm going to open up the Explorer

and in our server folder I'm going to

create a new folder called as

controllers

and I create new file in that

controllers folder and this is going to

be called off JS so typically this is

how you organize your code

using these kind of methods

and in here we're going to import a

number of things we're going to import

bcrypt

let me close this

from decrypt so this will allow us to

encrypt our password we're going to

import JWT

from Json web token so this will give us

a way to send a user a web token that

they can use for authorization

and then we can do import user from dot

dot slash models slash user.js so we

have not created this user model

and so let's go to our models so we're

going to create a new folder called

models

and inside this folder we're going to

create a file called user.js

so now this is where we can actually use

the information that we created with

this schema so we have this basically uh

entire object that we want to place in

here so we're going to be doing that

slowly so I'm going to import Mongoose

from

Mongoose so this will help us set up our

model

I'm going to call this const user schema

equals new mongoose

dot schema like so and we're going to

pass in an object

so now this is kind of close to what you

write with an object except there's some

parameters that we're going to be

setting so for example we're going to

set first name we're going to say type

string

require equals true

Min of two Max of 50. so

what this will do is that we're going to

have a first name that has these

properties so it's going to be a type of

string

and it's has to be required with a

minimum of two values and a maximum of

50 values so we can set what we want for

this user and have validation checks if

we wanted to to confirm that this is a

case

and then we're going to do the same

thing with the last name so I'm just

going to copy this over

and call this

last name

we're going to do the same thing with

email

and we're going to say Max of we're

going to get rid of the Min and we're

going to say unique

is true so you cannot have duplicate

emails

and that would make sense

I could apologize for the typos but

these should be required with the D

so make sure you have that and then

we're going to continue on we're going

to say

we're going to copy the same thing we're

going to have password type string that

should be required to be true and the

minimum of five now normally you would

have much more configurations for

password but we're just going to keep it

simple

I'm going to copy this down say picture

path

type string this is not required we can

just say default is empty string

and then we can have friends

and this should be a type of array

default of empty array

and we're going to have location

string

occupation string

viewed profile

number

impressions

number

and then that should be good

for our first object

so we're going to have this as our main

object but we're also going to put comma

after this object

and we're going to put timestamps

colon true so this will give us like

automatic dates for when it's created

when it's updated things like that it's

kind of kind of convenient

we're not going to really use those but

just to show you and then from here I'm

going to say const user equals mongoose

dot model

user and we're going to put user

actually let me it's Capital user schema

so when you create a mongoose model you

want to create this Mongoose schema

first

and then we pass it into mongoose.model

and we pass it into user and that should

be how you go about it and we're going

to do export default user

now if you look at this this closely

aligns to the object we created right

here so this is going to be

are Mongoose schema so this is why this

is very important later on if you mess

this up your data is all messed up so

we're gonna have to reset the data

you're gonna have to redo everything and

you're going to refactor just waste a

lot of time give you lots of headaches

so that's why it's important to set up

your model beforehand

and then with that we're going to go

back to our auth folder or auth file and

we're going to continue writing this so

I'm going to say register user

and I'm going to create our register

function that we were originally doing

so we're going to do export cons

register async Rec res

and we're going to do a callback

function like this

so now let me explain this is this has

to be asynchronous because we're going

to be calling database and when

you make a call to database that's

going to be asynchronous so it's

essentially like an API call that you do

from front end to backend then back into

a database and Rec res so this will

provide us with the rec request body

that we get from the front end

and the response is what we are going to

be sending back to the front end so this

provides us those type of

functionalities and express provides

this by default

and then we're going to have a try catch

block so we're going to do try catch

error like so

and we're going to attempt to do this

logic in here

and then from here I'm going to do const

first name last name email password

picture path friends

location

I spelled friends wrong with I

occupation

and we're going to grab this from the

rec.body

so basically we're just structuring

these parameters from the request body

so on the front end we're going to have

to send an object that has these

parameters or

arguments as you call it and you're

going to grab this and use this in this

function so right now we haven't created

the front end

um we can do this and set this up

so that in the future when we create the

front end we can basically take it so

here we're going to do cons salt

and we're going to await B Crypt

dot gen salt so what this is going to do

is we're going to create a random salt

provided by B Crypt so this is basically

encryption and we're going to use this

salt to encrypt our password so we're

going to take

another variable I'm going to call this

password hash and we're going to await

decrypt

dot hash and pass in our password

and provide the salt

so to encrypt our password so that the

password is not exposed we can create a

salt pass it in and hash this together

so we get the password hash with that

and in here we're going to use const new

user equals new user we're going to pass

in

in

object in here and this is where we're

going to create our user so now just FYI

the way this register function will work

is that we're going to encrypt the

password we're going to save it and then

after we save it when the user tries to

log in we're going to provide the

password or they're going to provide the

password we're going to solve that again

and we're going to make sure that's the

correct one and we're going to give them

a Json web token so that is exactly the

flow that we are looking at and we'll

cover this shortly

and so I'm going to pass in first name

in here last name

actually we can copy all of this to make

this easier

so I'm gonna replace all that first name

last name email password but the

password is going to be the password

hash so we don't even store the real

password in there

we're gonna have Patrick picture path

friends location occupation

and

we had viewed profile so this we're just

going to give it some dummy value so

this we're not actually writing the

functionality we're just going to give

it some random value

in here

so the for the sake of Simplicity

because this is a pretty big project

already so we want to simplify it so

we're going to have Impressions and I'm

going to copy this math.floor

math.random

times a thousand so it's just going to

give it a random number between 0 or 1

through 10 000.

and then after that we're going to do

const saved user and we're going to

await new

user.save

so we're going to save this user

and we're finally going to use the res

argument that's provided by

Express and we're going to do res dot

status

201

dot Json

saved user

so what we're doing is we're going to

send the user back if all of this

doesn't error out

we're going to send the send the user a

status of 201 which is the status code

meaning something has been created so

make sure you understand the status

codes you can look those up but

you want to send the user back the

correct status we're going to create a

Json version of the saved user so that

the front end can receive this response

and just as a front-end engineer you

always want to look at and make sure

they're getting the correct response so

this is a lot of where back end

Engineers need to spend a lot of time

making sure the data coming back from

the back end is correct and in the

proper structure that the front end can

use otherwise it creates much more work

for the front end as well as well as

backend if you have to refactor this

so in this case we're sending back the

exact save user in the correct format

and the front end will also use the same

format as well now if you work at some

companies they're going to have

different naming conventions and that's

okay it's just kind of annoying

but if you have the same naving

commissions you can use the exact data

that's being sent from the back end so

that would be perfect otherwise you're

going to have to find ways to write code

that will convert it

and then from here in our catch function

we're going to write res dot status

500 so this is what happens when

something goes wrong we're just going to

send the front end a status code of 500

with an error message of whatever the

mongodb database has returned so that's

what this is particularly doing in this

case

so if there's an error front end is

going to get this error message with the

status code of 500.

and with this we have the register

complete there was one thing to note

make sure you use your intellisense and

then

you would realize I spelled b Crypt

wrong so I had an extra R so make sure

you erase that so we save it and what

I'm going to do is what I opened up is a

separate

front end package I already have the

front end deployed and ready and it's

running

the back end is what we're currently

working on so what we're going to do is

we're going to write

this form out and we're going to make

sure our endpoint works and before we do

that let me make sure that I have this

clear I added this folder off screen

this is the assets folder with all the

images that we use for this website so

make sure you have this

input into your server so it works it is

in the GitHub repo it's in the link in

the description below so make sure you

place this in the proper folders so you

will have access to the images and now

if you go over here we're going to write

sum name something like that or actually

let's call this fake person and we're

going to say fake location fake

occupation

give it some random picture from our

images so I'm just going to give one of

the random images I'm going to say fake

person at gmail.com

and add a password we're going to

register

and what's going to happen is if we

check our Network tab

I've already made several calls before

but if you check we have a payload that

sends all this information we can see

the response it gives us or in the

preview tab over here so make sure you

see the network tab this is where you

can see all your API calls and you can

see all the information the backend is

giving you as you can see we have email

first name last name and all the values

that we've set but also the timestamps

with this created ID updated that and as

well as an underscore ID that we did not

create so mongodatabase creates a random

unique ID for every model or every data

that we create

and we can see that we've created this

perfectly and then we go to

mongodatabase and you can check over

here to see if you have your data so we

can go the browse collections

and then we can see the users I've

already created one before off screen

and then you can see the one we just

created this is how it looks like now

they say object ID but this is basically

a string this is everything that we need

and we created our user successfully

that now we can go back to our index.js

and now we are going to work on our

login information so the first thing I

want to do is I'm going to go to the top

and I'm going to write import auth

routes from

double quotation dot slash routes slash

auth Js

so we have not created this this is

going to be a route folder where we have

the path and the routes for every type

of feature so in this case it would be

auth feature

and the reason why we didn't do it for

this particular one this should normally

be in that route file this is what you

would consist of for those route files

the reason why we don't have that is

because we need the upload

variable right

underneath or right above we need to set

this in the index file that's why we

cannot move this into its separate file

so that's why we have this separate

section only when we need to upload a

file for the other routes we can keep

them separate so we can save routes

and over here we're going to say app.use

slash auth and we're going to pass in

auth routes

so this will help us set up routes

routes and keep our files organized and

clean

and now if I go back I'm going to close

everything over here

and I'm going to open up our directory

we're going to go to server we're going

to create a new folder and we're going

to call this

routes

excuse me routes like that and then in

here I'm going to create a file called

auth.js

and this is where we're going to create

the routes so we're going to first

import Express

from

Express

then I'm going to import

login which is going to be a controller

which we have not created dot dot slash

controller slash auth Js

and we are doing we're going to set up

our router

this piece of code will allow Express to

identify that these routes will all be

configured and it allows us to have

these in separate files to keep us

organized so instead of doing app.use

we're doing router.post instead

so we're going to do logging comma login

and we're going to do export default

router

now here I've not specified auth

like here in this case this would be

auth register but when we do this route

we have slash auth

that identifies that this will be prefix

onto login

because we are using auth routes here so

anytime we specify here this is going to

be auth login not just slash login so we

have that set up and now we can finally

go back to our controllers file and this

is we're going to be setting our login

function

all right and then from here we're going

to go below the register and we're going

to say logging in

and we're going to create a function

export const login equals async

Rec res

and we're going to do a try

catch block again

error

and we're going to copy the catch error

from before because that's going to be

the same thing

now you can customize the error messages

for this simple app we're not going to

do that

and here we're going to destructure

email

and password

from rec.body

so we're grabbing the email and password

when the user tries to log in

and we're going to say const user await

user oh

don't forget the equal sign

oh wait user dot find one

email colon email

so here what this is doing is we're

going to use Mongoose to try to find the

one that has the specified email and

I'll bring back all the user information

over here

and we're going to say if the user does

not exist we're going to return

res dot status 400 Dot

dot Json and say message

user

does not exist

so this is what happens when the user

cannot be found so if they put an

improper email this is the this is going

to return the error right here

and then next we're going to say is

match so this is going to determine if

we match the password so the way we do

this is we're going to use bcrypt

to compare

password they just sent

and the user password

that's been saved inside the database

and they're gonna both use the same salt

so what's going to happen is going to

use the same salt to compare whether

those two turned out to be the same hash

and we're going to say if is match is

not true we're going to return res dot

status again

just going to copy this over

and instead say invalid credentials

this is how you validate whether the

user is writing the correct user and

password or correct email and password

then we're going to do a const token so

this is where we're going to use

jot tokens

so we're going to sign this

with the ID

the user

ID

and we're going to pass in

a secret string

and we're going to write this

secret string

over here

and we're going to write that in our EnV

file

so in our EnV file we're going to do jot

Secret

I believe that's how it's spelled

yeah jotsecret so we're going to go back

to our DOT EnV file and what you're

going to do is this could be anything

you want so there's going to be some

some super

hard string to guess

but to be fair this could be any type of

string

as long as it's not guessable so

typically you probably don't want to use

that kind of string but you want to make

sure your string is a secure one that

you can keep

and then with that we're going to do

user.password we're going to delete the

password so it doesn't get sent back to

the front end we just want to make sure

that's kept safe and we're going to do

res dot status 200

dot Json

passing token and then user

like so

and with that we have our logging Now

set up now just FYI typically when you

work at a company

you're going to have either two

situations that happen either there the

company is going to be using a third

party

authentication which is most likely

they're going to have some kind of

different

authentication being handled by some

third-party company who's very good with

security which is way more secure than

something like this

and generally those are preferred in

production level application for big

companies because

authentication is really big and there's

lots of ways to hack this

an alternative is they either have a

they have a team that will

do the authentication themselves and

they will make sure everything is secure

so those two are usually what happens at

real companies this is a very basic

setup you cannot verify that this will

be very secure for many use cases

but this is the basic way of how

authentication works so this is very

good to understand what's happening when

you register and then you log in it

gives you some kind of token or some

kind of validation and then you the user

can use that to sign in and that is used

as verification

this now that we have the login function

complete we can go back to our website

we can say fakeperson gmail.com

but then the password we can say login

and as you can see we can now see the

home page

now if you see we have a lot of

different red Network meaning they're

they're failing because we have not

created these endpoints and the front

end is sending all these endpoints as

well so when you take a look at this

login

this is going to be the payload the

email on the password and then the

preview is going to be token

user is going to send back the user

information to the front end so this is

what's being sent back to the front end

and as you can see with the login home

it's taking us to this page because we

successfully logged in perfect

the authentication being set up now we

have to worry about authorization so

authorization is basically when the user

is logged in they have functions or they

can do things that a non-logged in users

can do so they can hit API endpoints

that a normal user would not be able to

and the way to do this is we're going to

create a new folder

in server and we're going to call this

middle

middleware

and in this middleware folder we're

going to create a folder called

let's see auth Js

if I can do this properly oh that's JS

there we go and in here we're going to

import a few or import

JWT

from

Json web token

and we're going to create a function

called export const verify

token

equals async

we're going to have Rec res and one

optional parameter called next so this

next parameter will allow us to have the

function continue and I'll show you what

that means

but let's write this first so we're

going to have try

and then catch

I'm going to pass an error

and like before we're going to write the

same error

as usual to just keep it simple but in a

real application you want to make sure

you handle all these errors properly it

just takes too much time to do it

in this project

so here we're going to do try in here

we're going to say let token equals

wreck dot Heather

and we're going to pass in authorization

so what we're doing is from the request

from the front end we're grabbing the

authorization header and that's where

the token will be set on the front end

or the front end will be setting this

and then we can grab it in the back end

through this

key

and if token does not exist

we're just going to say return

res dot status

403

dot send access denied so basically this

handles a case where the token doesn't

even exist so that means they're not

even sending it

and then if token

dot starts with

Bearer

so we need to make sure it starts with

the bearer token or Bearer string and

we're just going to grab token.slice

from 7 to tokens dot length and we're

going to trim

left

like so actually this should be singular

so token

and we're going to have that

so what this is doing is basically

we want the token to be starting with

Bearer so again this is going to be set

on the front end and we're going to take

everything

from the right side of this Bearer so

the token will be placed after

a space in the bear so that's what

that's how we're grabbing the actual

token

and then from here we're going to

actually this is where we're actually

going to check with JWT when we created

it earlier so we're going to do JWT

verify

the token and we're going to pass in

our jot

Secret

like so

so this is where again we're using that

secret string that you don't want other

people to know

and we're going to say

rec.user is going to be verified

and then finally we're going to run the

next function so for middleware this

next function is what we have to use so

that the next one will proceed to the

next step of the function

now the way you would use this we're not

going to use it just yet we have no apis

to put this but typically for example if

you were to set it on this particular

route you can put it

before this or you can put it after this

but you just always want it before the

last logic and you can say verify token

like this

so if you wanted to protect this route

then you would have this verify token

function middleware

for the register

but because this is the register

function we don't want they're not

verified yet they don't have a username

so we don't want to put that there but

for the routes that we create

in the following moments we will need

verify token so that is author

authorization for you

with all that being done now we can go

I'm going to close all this we're going

to go back to our index.js and now we're

going to create the user's routes now

before we write the routes let me

discuss what those user routes will

represent so if I go over here

the user route we're going to need one

user route where we grab the particular

user and also if we go to an individual

page we should be able to grab that

user's routes as well or user's

information so we're going to have to

make that versatile enough so we can

grab any user

via probably just their ID

and then from there we're also going to

have get user friends so we want the

friends list as well

and then finally we want one more route

where we can add or remove friends so

there's three routes we want to create

under user route so if we go back to our

code

in this index.js we're going to set up

a separate routes for our app

for our Express router to use so in this

case we're going to do users

and then comma user routes like so

make sure you capitalize the second r

and then up here we're going to import

user routes

user routes from dot slash routes slash

users.js

and then we're going to go

to our routes folder we're going to

create a new file call this users.js

and in here we're going to import a

number of items I'm going to import

Express from Express

import

we're going to import preemptively the

controllers which we have not created

we're going to call this get user get

user friends

add remove

friend

if we get the capital and then from

dot dot slash controllers slash users.js

and we're also going to import verify

token

which is what we created

verified token

from dot dot slash middleware slash

auth.js

that's going to be this particular guide

that we created export cons verify token

you sure that's important now we have

everything we need so we're going to do

const rather equals Express

dot rather

and we're going to create read the read

routes the read routes represent routes

where we grab information we're not

actually saving anything to the database

we're not updating or changing anything

in the database so that's what a read

route is so if you are familiar with

crud which is create read update delete

the read is the r part

now with the users we're not going to

follow crud to the T

because we want to keep the

functionality Limited

so we can have a limited application so

we don't have to go through the entire

application if we have all those

features it's going to take forever and

forever but I want to get through the

main routes so here we're going to say

slash ID

comma verify token

comma get user so what's happening is

since we created this particular route

with users

this route is going to be users slash

sum ID so this syntax represents

if the user or the front end is sending

a particular user ID over here we can

grab this ID and call

our database with that particular ID So

This Is How We Do query strings from the

front that's what it's called you can

put a query string that will grab the

particular ID

and then we're going to have router.get

and do colon slash ID slash friends

we're going to verify token

get user friends like so

this will basically just this will get

the user and this will just grab the

user friends if we need to call this

separately

and then here we're going to have one

more and we're going to say update

we're going to say rather dot patch this

time because this is an update function

update function you want to use patch

instead

and in here we're going to pass an ID

again

but this time we're going to do friend

ID so we need both the current user who

is logged in and the friend ID of who we

want to add or remove as part of our

friend

and just note this is more like Facebook

where you have friends you have a friend

list you can remove them less like

Twitter where you have followers and you

follow them

so keep that in mind

so add remove friend and we're going to

just do export default

router so that Express knows

we're going to save this

and now we're going to set up our

controllers which is where all our logic

is going to be so we're going to create

a new file we're going to call this

users.js in controllers

and in here we're going to import user

actually

our intellisense is showing where the

model is coming from and we're going to

do

read

and we're gonna

create our first

function called get user

async Rec res

and creative function

now we're going to do try catch

and we're going to Res dot status 404

Json

message

error.message

we're going to have an error

this should be

like that

and in here

we're going to grab the ID from the

rec.param so like the query string we

can grab the ID from that particular

string

and we can use

that particular ID to grab

the information of the user that we need

and for this get user this is all we

need we just need to send back to the

front end

everything

relevant to this user after we found it

so this is all we need to do for this

particular function

and then from here we're going to do

export const get

user friends

and this is going to be the next

function

this will grab all the user friends

related to the ID that you specified

so again we're going to copy const ID

Rec params like this

paste it in

and I'm also going to find the user as

well

and from here I want to grab the friends

which we are going to use

promise.all because we're going to make

multiple

excuse me make multiple API calls to the

database

so we're going to do that by doing

userfriends.map

grab each ID

that the user has and we're going to do

user find by ID

and grab all the information from the

friend IDs

and with that we're going to make sure

that we can format this in the proper

way for the front end

so we're going to do friends.map

and we're going to pass in

and set up all the information that we

need to set so that front end will need

so in this case we kind of wanted to

modify our schema a little bit before we

send it back to the front end

and we're going to give it all these

parameters

picture path

and I'm just going to copy this

because

we are just going to return an object

with all those things that we just

grabbed

so now our four friends are all

formatted we have all the users all the

information that we need

and we're going to be sending this

to the front end

or matted friends like so

I did forget to do a try catch block

here so I'm going to do try

I'm going to cut everything in here move

it inside I'm going to catch

error like so and I'm just going to copy

the same error that we did before

now I'm going to save it save it once it

saves prettier we'll format

and then finally we're going to do the

update like so

and we're going to do add remove friend

so this one's kind of long so we're just

going to do export const add remove

friend and I'll show you

how

we can grab our user friends as needed

so I'm going to do try

catch

error again

to Res dot status 404 pass it in and

then from here we're going to do const

ID friend ID so we're grabbing both

those

we're going to grab the user using a

weight

user dot find

by ID and passing an ID so we're

grabbing the current user

as well all their all that information

but also we want to grab the friend

information so we're going to do

user.find by

ID and then passing in friend

ID

so now from here we're going to have to

do some

kind of tenuous logic a little bit

but we can make it work so users.friends

we're going to see

if the friend ID is included in the main

user's friend's ID

if so if they're included we want to

make sure

they are removed so if the friend is

already

if the friend ID is already part of the

main user's friends list we want them to

be removed and we do that by doing

user.frends

dot filter and we're going to pass in ID

and we're going to say ID does not equal

to friend

ID

so filter function again is a JavaScript

function where we can just say we're

going to copy this basically the same

array anytime this is not equal to that

so we're basically removing when ID is

equal to friend ID

and then we're going to say friends dot

friends

okay so sorry friend singular dot

friends so this friend has to you have

to remove their

the user from

their friends list so we do that by

using the same filter function except

we're just going to set this as ID

like so

so we're grabbing we're checking if the

current ID in this friend list is equal

to that one

and if so we're going to remove them

all right so now if they're not included

we're gonna

add them to the friend list by doing

user.friends.push friend ID and we also

want to do it from the friend as well

push ID

so essentially we're adding both of them

so we're doing what Facebook is doing if

one of them removes each other then both

of them will be removed the same with

the opposite one of them adds them it

gets added to both

so we're going to do a weight user.save

a weight friend dot save to make sure we

save this updated

like updated list

and then what we're going to do is we're

going to format it once again because we

want the friends list to be formatted as

we did before so we're going to grab all

of what we had from get user friends so

we're copying

line 19 through 26.

we're going to go down paste it

and we're gonna

have everything everything yeah

everything should be basically the same

so we're just going to get

user.friends.map we're going to call

each of the users we're just going to

grab it and then format the friends to

the front end so that the front end can

use it

now we're going to do 200

Dot

Json

formatted friends

and we're going to pass that in

and we're going to save it and now we

should be able to

have users grab users get their friends

list be able to add and remove so we're

gonna

our user routes all taken care of we're

going to go back to index.js and we're

going to handle the final set of routes

which is going to be the posts so we're

going to do app.use

slash posts in our index

file again

and I'm going to say post routes

and we're going to make sure we import

those so

if we go up I'm going to do import post

routes from

dot slash routes slash post dot Js

from a file we haven't created

and what I need

we need a routes with files so when we

create the post we need to allow the

user to be able to upload a picture and

that's why we need to create

post route over here so we're going to

say app.post

slash posts

and I'm going to give it a middleware

verify token again

and I'm going to make sure we import

that

if you noticed

when I was writing it the intellisense

came up so if you see this you want to

make sure you click it so that the

import comes in as well

all right so now going back to it I'm

going to do upload single that picture

and what this is doing is that when we

send from the front end the picture

image

this will grab the picture property so

this is the property that you're setting

so if you set picture and that's where

the image is actually located in the

HTTP call

then this will grab it and upload it

into the local that's what this is

particularly doing so you can change

this to whatever you want make sure

whatever from the front end

that aligns with the same property

and here we're going to do create post

and that's going to be a controller that

we're going to be setting as well

so we haven't created that yet so I'm

going to do import

post from

dot slash controller

slash post.js

like that

and then from here we can now go to our

routes we're going to create a new file

we're going to call this post dot Js

and here I'm going to import a number of

items import Express

from Express actually I don't want that

I want it to be lowercase

I don't want it to come from Express

and here I'm going to import get feed

posts get user posts like post so these

are controllers we have not created dot

dot slash controllers

slash post.js

and I'm going to import verified token

and this time the intellisense popped up

so we have the import we're going to say

router it's equal to Express dot rather

like before

and I'm going to set up read

and I'm going to set up update

and in the read I'm going to do route

doc router.get

slash

comma verify token

comma get feed posts

so this is going to grab the user feed

when we're on the home page the home

page is going to curate all the posts

actually it won't curate it's just going

to take every single post that exists in

the database and I'm just going to give

you every single one and obviously in

the production level app you want this

to be curated you'll have an algorithm a

very sophisticated algorithm nowadays

they're using Ai and machine learning to

make sure those feeds are relevant and

providing value for the advertisers and

things like that too but this is

basically

just sending all the feeds for our case

is to keep it simple and we also need a

second route

and this one is going to be

involving user ID

because we want to grab only the user

this relevant users post only

so that's relevant to if you go to the

final app build and if I click Steve

Ralph

it's only going to grab his post and in

his case he only has one post this will

show only his post on his page

if you go back this is going to show

every single post that we have in the

database

so that's the difference

and then from here we're going to do

rather.patch

and we're going to say slash colon ID

slash like

verify token

oops verify token

and then do like post

so this is for liking the post and

unliking it

and that represents obviously right here

you can see that it gets selected it

goes up and down

and it gets saved if you liked it

so I'm going to save that and now we can

go to our controllers we can create a

file called post.js and this is where

we're going to write our controllers

like we did before

so the post is a little more complicated

than the users but we should be able to

make through so we're going to import

post from

dot dot slash models

slash post

.js now we have not created this model

so we're going to do that

I'm going to open up our directory we're

going to go to the models folder we're

going to create a new file post Dot JS

and again we can refer back to our data

model and these are all the properties

that it has it has

its own ID so this is something we don't

have to specify this is either generated

by mongodb user ID is going to be the

user who posted it so we need a

reference then the first name last name

location as well

and then the description represents the

actual description of the post as well

as the path to the user because we have

the user image and then the picture

uh picture URL as well

as well as the likes so the way we store

the likes is going to be a little more

complicated we're going to have an

object

and in this object we're going to have a

reference of who liked it and it's just

going to represent a Boolean so this is

going to be an object and I'll show you

how this will be mapped out and the

comments is just going to be array of

strings now normally you would have

comments you could create another model

if you wanted to be more specific for

example each comment could have the

number of its own likes like on YouTube

you can have a comment and that can be

liked and that can have its own reply so

you would create a separate model for

that but in our case we have a very

simple idea which is just posting the

string we I did that because it makes it

simpler

but typically if you're trying to make a

real social media application you

probably want to separate that into

model so again data modeling is kind of

like you have to kind of know a little

bit it's a little bit more advanced so

if you don't fully understand how to go

about correctly it's a lot of trial and

error and then you start to see

different patterns

so I'm going to show you how the both

the likes and comments are set up

because that's those are the two most

complicated things here but everything

else is pretty self-explanatory

and with that let's jump into it so

we're going to do import mongoose from

mongoose

we're going to do a const post schema

I'm going to say Mongoose dot schema

like we did before we're going to pass

into the object we're going to say user

ID

and we're going to say type is string

required is true

I'm going to copy this and we're gonna

copy paste over here we're going to say

first name

last name

and over here we're going to say

location

actually this one doesn't have to be a

string or required we can just say

string like that

description should be a string picture

path should be

a string

because that's just a URL same with user

picture path so this represents a

profile image

it's going to be string likes is going

to be

a map so now typically you use an object

but this is going to be a map that's how

mongodb saves it and we're going to have

a value of Boolean

so all we need to do is check if the

user ID exists in this map and the value

is going to be true always if it exists

so if you like it you're going to add to

this map

if you don't like it you're going to

remove that map and the reason why I did

not use an array where I could store it

an array of strings of the user ID

strings to see if they liked it or not

but

if you use a map it's much more

efficient it's just more performant in

this case it won't make a deal because

there's not that many likes but if you

have

someone who has like 20 000 likes you're

gonna have to go through and loop

through every single one until you find

the ID that you're looking for

otherwise in our case we can just go

straight in an object so it's a

dictionary in python or whatever

um

it's basically o of one if you

understand those uh

of it's O of n versus o of one is what

you kind of

have to think of it

but anyways we're going to do comments

we're going to say type array we're

going to say default is going to be an

empty array

so the default value for comments is

going to be empty array and then here

I'm going to add one more

object this is just going to be time

stamps

sure so we have the timestamps here as

well

and

just like we do this is just basically

the Mongoose template so we do mongoose

dot model we say post and we're going to

do Post schema like so and we're going

to do export default post and now we

have our post model

and then from here we can go back

and we can continue writing the

functions

so I'm going to have a crate

functions

so this is going to be export cons

create post so this is going to handle

the function that we created on the

index.js file this will actually have an

image getting passed through

to the middleware

but obviously it doesn't make it past

the middleware because the middleware

handles the picture here in this point

this is just the logic of creating the

post

and okay I don't want to forget the try

and catch block so try catch

error

and we're going to say res dot status

409

for when we error out here I'm going to

say jot Json say message error

that message

so we have an error handling

so we can do user ID description

path so this is all that the front end

is going to send us

we just need a description we just need

the user who's posting it and the

picture

URL that the users or a picture

of the post image that they want

I'm going to say cons user is going to

be a weight user dot find by ID

and as you can see I imported the user

just now

because I forgot to import that and

we're going to have user ID like so

so we want to make sure we grab the user

information

and then we're going to create our new

post into our database using new post

like this

so we're going to say user ID first name

and the first name is going to be user

first name like so

last name same thing user dot last name

location

with user dot location

description

user picture

path and that comes from the user as

well because they have the profile image

and then we're also going to pass in the

post picture path which is just going to

be picture path

the likes is just going to be an empty

object because it starts with zero likes

if and again like I mentioned you're

going to have some ID over here and it's

going to look like this

so this determines if someone's liked it

or not if they're not listed that means

they have not liked it

and comments going to be an empty object

as well

and then here we're going to say

a weight new post dot save to make sure

we save that

into the mongodb

we're going to say con post

equals await post dot find

so basically we save the post we're

going to make sure we grab the post then

we can return it

because we want to be able to save

everything that's needed and by doing so

we can grab it just to make sure

and once that post is done

actually sorry sorry this is not

actually grabbing this particular post

this is grabbing all the posts

because once we add this post we need

all the posts to be returned to the

front end so the front end has a list of

the updated posts so now the news feed

is updated with that person's post

so you always have to consider what to

return and how the front end is going to

be affected by that return and that's

where a lot of a lot of people

see front end as something easy but this

is where things get hard because you

have to consider what the back end is

sending you you have to format that

and make sure that when the back end

sends you the information you're going

to have to update the front end

accordingly

so a lot of time

the hard parts of a big Enterprise

application is going to be dealing with

the apis how they're sending it and how

you're grabbing it and how you're

formatting it and sometimes you have

different restrictions because of that

and you know that's where things get

hurry

just a point

and then from here we're going to have

read

and we're going to handle the get feed

post function so now this is going to

grab all the posts of everyone so we can

have basically something that rep

represents

like uh news uh news feed

for a user

so again we're going to try

catch error

and this actually let's

change that we're going to copy this

409 is for the error of creating it here

we're going to give a 404.

and what we're going to do

is I'm just going to grab the post

because this is basically grabbing the

news feed

so we're going to do the same exact

thing and in this case we're doing 200

201 represents you created something 200

is just a successful request so this is

how we did a get feed very easy

and similarly pretty easy is going to be

get user feeds or get user posts

I'm going to say async wreck res

and this is going to be pretty similar

so I'm just going to copy the try catch

block like so

but instead what I want to do is grab

the user ID

rec.params

and we're going to do away post.find we

want to pass in user ID inside the post

and send the posts back

so we can just

but this is singular

to be consistent

so this will only grab the user feed

post because by using find just sending

the user ID it'll only match the post

that have this requirement

and then finally the last one is going

to be read which is probably the hardest

part

so we're going to have an update comment

and we're going to have export const

like post async Rec res

and inside here I'm just gonna

paste everything that we have

just so I don't have to

rewrite this

so I'm going to delete that I'm going to

keep this blank so I can write that

later

this is all good

and now here we can do the like so we're

going to grab the ID from the rec params

so we can grab the particular user

or actually grab the

relevant post

then we're also going to grab the user

ID

this time from the rec body because

that's how we'll be sending it from the

front end

so the ID comes from the query string

user ID comes from the body of the

request so we're going to say const the

body or post sorry

fix that const post is equal to await

post dot find by ID and we're going to

pass an ID like this

const is liked equals post dot likes dot

get

where we're passing in user ID like so

so this what this is going to do is

we're going to check in the likes that

if the user ID exists if the user ID

exists that means that post has been

liked by that particular person

and if so

we're going to say if is liked we're

going to say post dot likes dot delete

user ID

so again like I said there is an object

that includes a list

or as the keys is going to have all the

IDS

and if that exists we're going to delete

it

and if it doesn't exist we're going to

say

post.likes.set we're going to set user

ID to true

so again

deletes if it already exists sets it if

it doesn't exist

and then finally we're going to do const

updated post we're going to say await

post dot find by ID and update

and we're going to pass in ID

pass in likes of post dot likes

so this is how we're going to update

a specific post so we pass an ID we're

going to pass in likes to our new post

that we have been modifying so this is

going to be

the list of likes that we modified

and we're going to say new is going to

be true so we just want a new object

and we're going to say status 200 and

we're going to pass in the updated post

once we have that

so this

to recap we're grabbing the post

information we're grabbing whether the

user has liked it or not

and if it is liked we're going to delete

the user if it

is non-existent then we're going to set

it

and finally depending on what this post

thought likes is we're going to update

our post by finding it first and passing

it the new likes

there's a lot to take in and then

finally we pass in the updated post so

that we can update the front end

and just remember we always have to

update the front end once you hit the

like button

so this is how you clarify it on the

front end

all right that was a little bit of a

handful but we have now completed

our backend we have all the routes we

have everything we basically need

and we have most of the information

going to be set so then we are almost

ready for the front end

with that let's open up our terminal and

it seems like we have an error because

if I go back I go to let's say

users controllers users.js

we have the typo

I'm going to put user.js we should save

it

I'm going to start it and now it's

running

and after that if we go we can see the

front end if I refresh it I get all the

information that we need now we don't

see the post we don't see the friend

list because

this is the only person that exists on

this platform so what we're going to do

is we're going to go back if you'll see

the link in the description I have a

link to the data section of this app

but basically I have this folder called

Data

and I have a file called index

file called index.js

and what I'm going to do I'm going to

copy over from you can copy it from the

repo I'm going to paste it this has

a lot of mock data that will pass in

fake information about the user about

different users so we don't start with

the bank blank slate

so to do this and to pass this in this

is just a data file so we're going to go

to our index.js file

and we're going to import some of those

things in here so I'm going to import

user

from

slash models we need to pass in the

models

make sure we have the dot JS as well

we're going to import post

using intellisense and then we're also

going to import

users and posts from

the data file or data folder we created

JS like so

so that exists over here there's a user

section there's also

a post section down there

and what we're going to do is when we

start this up we're going to manually

inject this information and we're going

to do that

doing user dot insert

many

we're going to pass in users

and then post dot insert many

posts now what you have to be careful of

is that you only want to

add this data

one time

so right here

I'm going to save it

and it's going to insert all the data

but if I save it again it's going to

restart it's gonna

add duplicate information so I'm going

to comment this out so only when I need

to I'll use it

let's save it now if I go to mongodb

before we go and check I'm going to

refresh

and we when we refresh

we should be able to see

all the documents that exists

all right and then as you can see we

have six pieces of information these are

different posts and then we go to users

we have 10 different users

perfect so that's how you can manually

input data into the database just

for you know like use usability purposes

you want some fake data so that you can

actually use the app

and so if I go to my app now and I

refresh the page now we should be able

to see

all our posts

and what we can do we still don't have

friends for this person but we can add

friend like that we can add them as well

we're going to add them as well and we

can go and click onto that particular

user we can see their friends

we can see their friend list which is us

and then we can see their posts as well

we can like it

and such

all right so if you go here there is a

bug that I just found so if I hit this

it's going to break that's because if

you go to the Post model I accidentally

had a plural for the types so we're

going to delete that I'm going to save

this

and if I go back to my database I

want to

I'm going to delete both of these

because it's going to mess up the data

so as you can see

if you have a bug sometimes you have to

redo it so you have a fresh fresh

collection so I'm going to delete both

of these

by dropping them

and I'm going to re-insert

this information right here

so I'm going to uncomment this out

save it

and then you comment it out again you

can save it now the information should

now be there if you hit refresh

and there you go and if we refresh it

[Music]

and because I have an application or

I have persist storage

and so I have to recreate the user

application big

a patient

I'm just going to add a random user fake

person make sure this is spelled

correctly

fake person we're gonna register and

we're gonna

log in again

and now we should see the comment all

right perfect

sorry for the mistakes

there we go we have a friends list we

have everything all set up

with the back end everything's good

everything works we can now finally move

on to the front end

that we have everything set up on our

back end we have all the entire folder

completed out now we can start finally

on our front end so I'm going to go back

I'm actually just going to close a bunch

of these folders so we can keep this

clean

close all of this and we're just going

to have our terminal open up like this

and what I'm going to do is I'm going to

go into the Parent Directory

we're going to write MPX create react

app client however if you do not have

MPX installed

I will write the command where you can

install it so since we have node

installed we can run this so

npmi-g MPX so if you don't have MPX

installed just type that command and

it's going to install the MPX package

for you so I'm just going to delete that

and I'm going to run npx create

react.client

and we're going to wait for that to

finish

that's installed we're going to go into

our client directory

and we're going to be installing a

number of packages so I'm going to be

installing react Redux Redux being the

most popular Enterprise level State

Management tool in an at Redux JS slash

toolkit

toolkit being a very easy way to use

Redux it's a wrapper around Redux that

makes it very very easy and highly

recommend as the main State Management

library that you can use and then I'm

going to use Redux persist so that you

can store the state selectively store

State into local storage if you need to

so if we want to save our user and token

information into local state so that

when the user closes the tab and they

come back the information is still there

in the browser

and then react Drop Zones so this is a

component that will handle

file upload and file handling on the

front end so we can send it to the back

end

dot EnV for environment variables formic

for form handling and then yup with

validation

react router Dom at six for handling

react rather

different routes and different pages and

finally material UI so material UI has a

number of packages that we need to

install

first is going to be at mui material at

emotion slash react

at emotion styled

at m-u-y slash icons material

we're going to hit enter I'm going to

wait for that to install

and then one thing I want to get out of

the way is I'm going to open up or

explore I'm going to go to server I'm

going to go to public and then see the

assets

I'm going to click on the LinkedIn and

the Twitter

I'm going to click both

I'm going to copy

and Insider client in our public I'm

going to create a folder called assets

and I'm going to paste it here

we're going to be needing these two

images on the front end and this makes

it very convenient

I'm going to close these

and then go back to our source and in

here I'm going to be deleting a number

of files set up tests report web vitals

logo SVG

app.test.js

app.css we're going to be deleting all

these files

we're going to go to index.js after

we're going to delete this comment and

the function invocation

and as well as the import of report web

vitals

save that go to app.js I'm going to

delete everything in the header

lowercase this app

delete this logo

and we should be good to go for here

I'm going to import some Google fonts so

I'm going to go to fonts.google.com

which is in the link in the description

below and we're going to search up a

font called Rubik

Rubik is a pretty nice balanced font

which is a Sans serif

and provides us with a little bit of a

different Unique Style than you know the

regular ones you see like open sense

so we're going to grab

400 500

and 700.

we're going to open up this tab and

we're going to see at import we're going

to copy everything in between the styles

copy that

go into our index.css

we're going to delete everything in here

and we're going to do we're just going

to paste everything we copied

and in here I'm going to write some

CSS just this is the only CSS we're

going to be writing globally so we're

going to HTML comma

#root

dot app

and we're going to do hate height 100

percent

width of hundred percent and a font

family

of Rubik

I'm gonna give it a Sans serve as backup

and we're going to be saving that

that we're going to add one more file to

client

and this is going to be called

Js

config dot Json

and what we're going to do is we're

going to add compiler

options

and do base URL

and we're going to add this as Source

directory and we're going to do

include

colon

source and now what this is doing is

that when you import different files

into other files you can just do

you can just start from source

that means when we code it up it's

pretty simple to understand it makes our

lives a little bit easier so we're going

to save that and close that

and

the next thing we want to talk about is

our react Redux file folder architecture

and react router setup so the way we're

going to set this up is we're going to

set it up based on scenes or essentially

how the UI looks so in this case if I go

back to the completed application we're

going to have a home page like this

then we're also going to have a separate

page called we're going to call this

profile page as well and then if you log

out

this will be the login page and we're

also going to have a nav bar which is

going to be a separate thing because it

exists globally

and then we're also going to have

components that are shared and inside of

each one we're going to have these

things I'll call these widgets so the

widgets you saw with the posts a single

post will be its own widget we're going

to have the user widget you're going to

have the friend list widget

as well as like that

but we're also going to organize via the

pages as well and the way we're going to

do this is we're going to create a new

folder

we're going to call this

scenes

and we're going to create a folder

called home page

another folder called

login page

folder called profile page

file called

navbar

and a scene is called widgets

so these home page login page navbar

profile page these are

basically portals into which we set up

the layouts or sections where we set up

the layouts for our components

then we're going to have another folder

outside the scenes folder called

components so these are components that

we can reuse throughout so if any time

we're we're using a component that's

going to be used in multiple locations

we can put this into components they're

going to be separate idea from widgets

and then finally we're going to have

another folder called State and this is

where we're going to have our Redux and

toolkit information and that's going to

be separate as well to keep your data

and the component separate is usually

ideal sometimes you have to connect them

together but in this case it's very nice

to have them separate so we're going to

have an index.js over here

just to set these things up I'm going to

create an index.js in our home page

actually this should be jsx just FYI the

difference between JS and jsx is that

jsx represents comp files that have

components react components in them

but it's just more of a syntactic sugar

what that means is just it just a

different way to identify what file has

components other files don't and in here

we're just going to do const

home

page capitalized

and I'm just going to do return

and I'm just going to say div

I'm just going to put a div in here and

say home page

I'm going to do export default home page

so right now I am just setting up the

skeleton just so we can

have a non-error when we import it so

I'm going to do this I'm going to copy

this

create another one in the login page

like this paste it I'm going to

select both of those I'm going to change

this to

login page same thing

over here

and copy and paste it

index.js or actually

jsx

we're going to paste it

I'm just going to call this profile page

with capitalize doesn't really matter

this will be a temporary and we're going

to do the same thing for navbar

as a temporary placeholder

so we're gonna

do that nav

bar

like so I didn't save this one so I'm

going to close all of these

and now we should be

pretty much set for our layout

and with this we're going to go to our

app.js file I'm going to close this and

actually we can just delete the import

from App CSS because we deleted that and

we're going to be importing a number of

items so we're going to import

browser router

navigate

routes

and Route all from react router Dom

and then we're going to import home page

from the scene we created and by the way

this is the whole purpose of the JS

config Json this allows us to reference

scenes instead of having to do a lot of

relative Imports just like that

so this makes it very convenient in many

cases this is not that important over

here but in other cases this will be

quite useful keeps it very clean and

then we're going to import login page as

well

and then import profile page from that

then I'm going to go into our component

I'm going to write const mode

equals

use

all right and then from here I'm going

to go into our component

and I'm going to go into our between our

div I'm going to put browser router

like so close it

so we can use our routes

and we can set up our routes as well

I'm gonna have that and we're going to

put our route

of path equals

slash and we're going to say element

is going to be login

page

and I'm going to close this route so

this will essentially be our login page

so that's the page people will

come back I'm going to copy and paste

this

one I'm going to say this should be

slash home

and in here it's going to be

home page

and we're going to do this one more time

and we're going to set this for each

profile so this one is going to be a

little different we're going to say

profile slash user ID so this is a param

that we can set so if a profile if you

go to profile slash to whatever user ID

then you can hit this route

and we're going to say profile page

so and then that will be how we set our

routes

now let's actually set up our

Redux toolkit state

so I'm going to go into the state folder

into index.js and I'm going to be

importing create

slice from reduxjs toolkit

const initial state is what I'm going to

be setting up

this essentially will be the state that

will be stored in our Global state so

this type of information this basically

this data will be accessible throughout

our entire application and we can grab

it anywhere we want so we don't have to

pass in

State and properties down to different

components

now again I really highly recommend

Redux and toolkit

if you're using Redux you should always

use toolkit now and

among all the State Management libraries

I know

what was it recoil was a real call I

forgot or no Joe Tai

one of those is getting a lot of

popularity personally I still recommend

Redux simply just because

Redux is just proven for a long period

of time most people know Redux they

might know the old way but the toolkit

simplifies a lot of these things for you

and makes it so easy

and I'll show you that a lot of the

boilerplate is just kind of gone

so here I'm going to be setting up our

entire state so I've already written out

the actions and reducers and all the

state logic over here so we're going to

keep all the information we're going to

start with this and I'll explain these

actions as we go

so we're going to have mode

of light

so this is going to represent dark mode

and light mode and we're going to

configure it globally

then we're going to have user we're

going to start with null

token that's going to be null so this is

all the auth information we're going to

store and then posts

it's going to include all the posts that

we need

and then we're going to have export

const auth slice equals create slice

like so and then in here we pass in the

name of auth to represent the auth

workflow and then initial state

essentially we're passing an initial

State into initial state

and then finally we do reducers so this

is our actions so essentially you can

think of this as functions

that's basically yeah these are

functions these are functions that

involve modifying the global State

that's the only difference in this in a

regular function I'm not sure why people

always use fancy terms to describe it

but these are just functions that do

what you need

and so the first thing we want to create

is going to be set mode and this will be

changing

from light mode to dark mode so we're

going to have state DOT mode

equal to State DOT mode

if that is equal to light

we're going to change it to dark

and if not we're going to change it to

light so essentially if it's dark we're

going to move it to light if it's light

it's going to move it to dark that's all

this is doing

and the Redux if you come from Redux

Redux has this idea of you can't change

this state directly you always want to

replace the object as opposed to

directly modifying the state

toolkit has this built-in Library called

imer this is the one thing I might not

agree with but basically you can act

like you modify the state directly even

though under the hood this is not what's

happening but essentially this is state

DOT mode represents the previous

condition and then what you set it to

will be the new state when you call this

function

all right and then set login

we'll have state and action so action is

going to be just like functions this is

where you set

they call it payload but it's basically

just the params or arguments for the

function that's what all that means

and then from here we're going to say

state.user is going to be equal to

action.payload

dot user so in our payload this is the

parameter we're sending a user parameter

from this function

and then we're going to say state.token

will be action.payload

.com so basically these this includes

all the arguments so action.user

action.token

action.payload.useraction.payload dot

token so those are just parameters we're

going to do this something similar for

set log out just a little bit different

and we're going to say state

and all we're going to do here

state.user equals null

state DOT token equals no so when you

log out when you hit the logout button

we're just going to reset this to have

nothing in there

and we're going to have set friends

so this will set the friends

into our local state because we need to

keep this information

and what I'm going to do is check if

state.user

if the user already exists

we're going to set state.user dot

friends

and we're going to be setting the

friends

inside our state

as long as the user already exists

otherwise we're just going to say

console Dot

error user friends non

existent

and then from there we're going to say

set posts

State action

and inside here we're going to say state

DOT post equals action dot payload dot

post so as you can see these functions

are pretty straightforward like set log

out we're just emptying it out set post

we're just going to set the post

these are simple functions that modify

our state as we need

and I've already done this beforehand so

these are the functions that we kind of

need and I'll explain them when we

actually use them so state.action

so sorry state.posts or step post

this one is the most complicated one

we're going to say updated posts so what

we're going to do is we're going to grab

our list of posts

map through each one and if post dot I

underscore ID is equal to the

current

post

ID that we're sending into this function

we're just going to return

action.payload

DOT bus so we're going to return the

post that we want

so we're only going to return the

relevant post otherwise

we're going to return what we currently

have so we only update with

the post the updated post that we

changed

and it's coming from the back end we're

only going to be

setting that particular post everything

else we leave

as it currently is so I'll explain this

when we

actually do it it'll make more sense

this is kind of complicated so we're

just going to say updated post

state.puss will be the updated post

and then from here this is part of Redux

toolkit all we have to do

is we're just going to repeat

our um

our actions

and we just have to write every single

one of them except posts set post

equals auth slice dot actions

and we're going to export default auth

slice dot reducer

and this is basically our entire State

this will be all

the logic that we'll need for the entire

application for Redux

and then finally

we just have to configure a few things

specifically more so for

persist it but we're going to set the

reducer inside our index.js file

so over here I'm going to import auth

reducer

from

dot slash date

so we're going to export the reducer we

just created then we're going to import

configure store

from reduxjs toolkit we're going to

import provider

from react Redux

and we're going to import a number of

things

this is when you use Redux persist only

so if you're not using Redux persist you

don't have to really do this but this is

specifically for Redux

persist

persist reducer we're going to have

flush

rehydrate

pause

so this kind of it is kind of weird to

do this

Purge

register

and we're going to do that from Redux

Dash persist

and then we're going to import

storage

from Redux Dash persist live storage and

finally we're going to import persist

gate

now Redux persist I think I mentioned it

before

but this is so we can save

all the state so all of this information

will be stored in local state meaning

anytime the user like closes the tab or

closes the browser that information will

still be stored in there the user

information will still be there the only

way they can get rid of it is if they

clear their cache

and this is good for certain things if

you want to keep the information

storage is an alternative that will have

information saved for that particular

session but if you close the tab that

information will go away

but local storage is perfect for this

use case so now I have to resign in

so the way we set this up we're going to

set up persist config we're going to set

key

of root

comma storage comma version colon one

like so

and we're going to say const persisted

reducer

and we're going to say persist reducer

and persist config comma auth reducer

so we're going to have the reducer

persisted

and then from here I'm going to set the

store using configure store

and pass and reducer with persist

bid

reducer

and we're going to set the middleware

get default

middleware so if you're wondering where

I'm getting all this information I'm

getting a lot of this from both Redux JS

toolkit

in combination with Redux persist they

have documentation on what to exactly

write and that's what I'm doing it's not

like I know

toolkit that well in terms of like

setting these parameters up it's just

there is a set of code that I wrote down

and I'm just following it

and this is to ignore some kind of

warning that they have if you don't if

you're using persist

so we're gonna pass in everything that

we had over here

so I'm just going to copy this

paste it in here

and those will be

our ignored actions

and then finally we can just go

to our provider

and inside our provider store equals

store

we can pass in our app

and then for persist to work

persist gate

inside of here we're going to pass in

loading equals null

persister equals persist

store

like that

now I know what you're thinking there is

still at least amount of boilerplate you

still have to configure all this you

only have to do this once but once you

configure it you're good there is

another state management Library I

forgot the name but it's getting a lot

of popularity the only thing I'm

cautious about using one of those

libraries is that

right now when you have some basic

application maybe you have

you know you don't really need too much

functionality and you don't have a lot

of use cases

then those State managements are

perfectly fine you can get by and have

even less code than this and it's

perfect for those but be careful of

those people who are hyping some of

those packages they're not considering

they're not going in they're not

creating production level applications

where you have all these weird edge

cases this happens a lot you when you

have a big application you get into

these weird little

specific edge cases and it becomes a

headache to work around now Redux has

been around longer and this is why

having using older libraries sometimes

as long as it's good enough

they are usually the desired package to

use and I highly recommend Rio because

it's been there for a while a lot of the

use cases has been created for example

like persist storage using local storage

this has been refined make sure there's

no bugs and this is why you would use

something like Redux overdose other

State Management tools yes you can get

up and running faster with some of those

other tools but toolkit makes it easy

enough that it's worth using so that you

can always scale your application as

much as you want later on if you ever

have a need for it so this is why I

highly recommend stay away from those

highly opinionated people saying Redux

is gone things like that it's just

chances are they haven't tried it they

haven't tried a lot of these packages

they just kind of say what they feel

like at the moment and they want to

speak their opinions

with that setup we're going to create

our theme file in our source directory

so I'm going to create a new file call

It theme Js

so right here if you go to the link in

the description below I'm just going to

copy these color tokens that we have

from the file so you can get these I

don't want to spend the entire time just

writing and typing these I feel like you

guys might be bored so you can just go

to the file and copy these directly or

if you want you can pause the video and

just look at this right here

so we have primary these colors

note we start from 50. same over here we

have gray from 0 10 50 100.

and then from here I'm going to set the

mui theme settings feel free if you want

to skip this section you can

copy all of those but I will do this

part manually so I can explain a few

things as I go so I'm going to say theme

settings

I'm going to say mode

in parens and return

and in here I'm going to say palette

this so this is going to set up material

UI theme so by doing this we can set the

default colors for material UI themes so

it makes it easier for us to configure

what we need and so we're going to have

two settings

like I mentioned with mode

of

dark

and if it is dark so we're going to do a

ternary operator if it is dark we're

going to set

these particular settings

so I'm going to say palette

values for dark mode

and then we're going to do primary

I'm going to say dark is going to be

color tokens dot primary 200.

main is going to be color

tokens primary

500

I'm going to set light is going to be

color tokens primary

800. so now these are values that I've

set kind of you know I've tested it

chosen colors that I feel like looks

good and match well together so this is

what I'm doing

we're going to say color tokens so

instead of me constantly typing this I'm

just going to copy color tokens dot Gray

and I'm going to put bracket 100 like so

I'm going to do main paste it 200.

medium Main

we need a lot of Shades of Gray for this

idea 300

medium

color tokens Gray 400.

light

color tekken's gray 700.

here I'm going to set the background as

well I'm going to say default it's going

to be color token suck gray 900

comma alt color tokens Dot

Gray 800.

and with this I'm going to save it

actually it's not going to Auto format

because we still have

an error so what I'm going to do is I'm

going to finish up this ternary operator

and I'm going to copy all of these

values inside

and I'm going to

manually change this one so I'm going to

say for light mode

this is going to be 700

500

and then 50.

and this is going to be 700

500.

400

300.

50

this is going to be 10.

and zero so now if you notice if you're

curious what these color settings are

dude they're kind of like inverted a

little bit so you have

almost inverted colors I didn't manually

go through and test them see which one

looked the best together

and then I'm going to put typography now

we're going to set the type of cover key

settings over here so we're going to set

font family

and I'm going to do Rubik

Sans

Sans serif

I'm going to be joining these together

with the comma

I'm going to set the font size of 12

and I'm going to set the H1 settings

and I'm going to copy the font

family.join like so

and then host in font size of 40 comma

and from here I'm going to just

copy and paste this several times

and we're going to set each one for

different font sizes we're going to keep

the fonts the same but we're just going

to change the font size

this will be H3 I'm going to set this to

24. we're going to set this H4 this will

be 20.

H5 is going to be 16.

H6 is going to be 14.

and that is our material UI theme

settings so if you take a look you can

take a look and double check all the

values you have in the finalized repo I

have a link to this as well

and then from here we're going to do

we're going to go back to app.js and

we're going to configure some of our

settings for our theme so we created the

theme settings but we have not placed it

in the components yet

so that is going to be what we're going

to do so but we're going to import a few

things first

we're going to import use Memo from

react

import use selector

from react

Redux

import c s s Base Line theme provider

from

at mui slash material

import create theme

from at mui

slash material slash

styles

and then finally we're going to import

theme settings from the file we just

created

and that's going to be from dot slash

theme

and then from here above our return

we're going to do const mode and we're

going to be grabbing the mode that we

have from our state

so the way we do that is we're going to

do state

dot mode so this will help us grab

the value we created in our initial

state

so if we ever want to grab information

from the store we just have to use U

selector grab the state in the correct

reducer

and it's pretty much there it's very

easy to use so con Steam

will be used memo

and we need to pass in create theme

and this is one of those things we just

have to do once for each app so theme

settings we're going to pass in mode

comma and we're going to put mode in

Brackets

so this will set up our theme we have

yet to pass it into

material UI yet and that's what we're

about to do so we're going to pass in

theme provider

and we're passing in a property into

theme

we're going to wrap this around the

routes

and now we should have our theme

configured for material UI and then one

thing we want to add is CSS Baseline

this is not really relevant to the theme

but it's going to reset our CSS to basic

CSS so if you ever heard of CSS reset

this is essentially what it's doing from

Material UI they have their own version

so

this makes it very convenient to reset

our CSS

we have most of everything set up let's

actually open up our terminal

and we're going to run npm run start

and we want to confirm everything's

working so we don't have any errors when

we start it

so when you open it up you can go to

localhost

refresh it you can open up your

uh what was it the console in your

browser you can use command Alt

command alt I to open it with the

shortcut

or if you're on a PC you can use Control

Alt

I and that will open up see if you have

any errors this is good if you see

something like this so this is all we

need we just want to make sure this is

running up and running so we can go on

to the next step

so I'm going to go back to our code I'm

going to close the terminal so you guys

can see

I'm just going to close all these tabs

out just to be more clear and I'm going

to go to

our client folder go to Source

components

and I'm going to create a new file I'm

going to call this

Flex between

oops not a folder a new file

and call this Flex between

jsx

so here I'm going to import a component

from Material UI

so at mui material import styled

from mui system

and I'm going to create a component

called Flex between equals styled box

and close it so if you've ever never

seen the syntax I don't use this too

often

but this is very good if you're reusing

CSS as a component now

you can use style component this is

essentially called style components and

you can name this component as you want

as if it's another component and you can

just pass in CSS properties in here and

in this case we're going to display of

flex justify content of space between

align items of Center

by doing this this allows us to reuse

this set of CSS properties

through different areas and this one

we're going to be using this quite a bit

it's very useful to have something like

this so we can align things and flex

things into the proper locations

and with that now we can go and create

our nav bar so navbar will be the first

thing we create so here we're going to

go to the navbar component and I'm going

to import a number of items

we're going to import use state

from react

and I'm going to import

box

from mui material

and in here I'm going to import a lot of

different components so I'm just going

to type all of this out so I'm going to

do box

icon button

input base

typography

select

menu item

form control

use theme

and use media query

let me go down I'm going to import icons

now so

if you're curious material UI

icons

and go over here

you can see this is where you can find

the icons you can grab the icon if you

want right here and then search this is

very useful

otherwise you can just follow along

because I already have the icon set up

so I'm going to write search

comma message comma dark mode comma

light

mode notifications

help menu

and then close

and we're going to say from

at mui icons material

and finally we're going to import use

dispatch

and then use selector

from react Redux

import

set mode from State as well as set log

out

import use navigate

from react router Dom and finally we're

going to import Flex between

like so

a lot of things

we needed to import but we're going to

be using a lot of these things to create

this

complete navbar

so we're going to be creating a number

of states and a lot of things over here

so we're going to create is mobile menu

toggle

and set is menu

is mobile

actually let me spell that correctly

make sure you spell that correctly

and this

is going to be the value to determine if

we want to open up the mobile menu when

it's in small screens

and we can use this to toggle it on and

off

and then we're going to create this

batch equals use this batch so this is

something you need to use so you can

dispatch actions from the reducers then

we're going to say const navigate

equals use navigate

then we're going to do a const user

equals use selector

use select or if I spell that correctly

yeah and then we're gonna

grab

the user information

then we're going to grab

or we're not going to grab we're going

to set a variable called is non-mobile

screens

and we're going to be using use media

query so this is a hook built into

material UI that allows us to determine

if the current screen size of the user

is below this Min width or higher than

Min width so it's an easy way to use a

media query inside of react

and not have to use like media query

that you normally would in CSS

and so we go like this we have our Min

width everything's set and I'm going to

say

and the final thing we're going to set

is the theme

and we're going to be using the

so basically this theme will allow us to

if we go back to our theme JS file

we can use any of these colors that

we've set

and as long as we specify for example

theme dot palette

dot neutral dot main will give us this

color if it's in dark mode

otherwise it can give us this color if

it's in light mode so it's very

convenient to use this because it

already automatically determines

the color based on the particular mode

so this is why we use these type of

colors

and so the first thing I'm going to get

is neutral light

I'm going to say theme dot palette

dot neutral

dot light

so it is kind of annoying that you have

to write a lot of

this stuff but it makes it very nice and

clean if you configure these variables

before you write it inside the jsx

so I'm going to have a dark one

I'm going to copy this

theme dot palette

and I'm going to say we're going to get

the background

theme.palette dot background dot default

and then we're going to do primary light

so we're going to do that theme.palette

dot primary dot light

and then we're going to const Alt

is equal to theme.palot dot background

Dot

so these are colors that we'll be using

and then finally we're just going to set

the full name

this is a convenience variable and we're

going to set this as user DOT first

name

and then

user dot last name

so this gives us

the full name access right here

and then from here we're going to go to

our jsx and we're going to Define some

variables here so I'm going to do Flex

between

and inside the flex between I'm going to

set padding of one REM

and six percent

and a background color

of Alt

so again we're using this reusable

component this has all those properties

by default and we can configure

different

CSS properties like we normally do with

material UI and just FYI material UI has

these box components like this one

so that allows us to pass in any type of

CSS properties and then use them as a

component property

so instead of patting colon

this value we're doing padding equals

string and we're passing in values so

it's very nice to use

but this is only available to the Box

component if you use other components

like button component you cannot do the

same thing you have to pass it into a

property called SX and pass it in as a

property of an object within that and

I'll show you when we use that so it'll

makes a lot of sense and from here I'm

going to use flex between again because

we want to set

particular

navbar Gap as well

now if you go back and you look at our

built component I'm just going to sign

in real quick

just to show you

seems like I did not let's

I'm going to resign this in fake

location fake occupation

set a user

I'm going to say fake

person at gmail.com fake person

register

make sure everything works okay

I'm gonna say fake person at gmail fake

person that we're gonna log in and we're

good to be logged in

and I just wanted to show you the nav

bar like this so I have this if you see

my other videos I have this total

pesticide Chrome extension very useful

to see what's happening in terms of flex

and the displays so if you look at this

nav bar we have a div and these two are

separate so we're doing Flex between to

show that these items are separate and

among this we have another Flex box in

here so you can see that these are all

flexed within a flex already same with

over here

so we're going to do that

so this is going to be

the logo so this we're just going to

typography

passing in socio

pedia Within

and inside I'm going to set font weight

of bold

I'm going to set a font size

of clamp one REM 2 REM

2.25 REM so now if you're

unfamiliar clap is a function you can

use in CSS that determines a minimum

a minimum value for a font

a maximum value for the font and a

preferred value so it will always try to

be 2 REM but the screen size gets too

small we're going to go to one RM if it

gets too big it's going to set 2.25 REM

it's very useful for fonts

you can probably use it for width as

well it's just more useful for fonts

then we're going to set the color as

primary which is kind of a light blue

color and we're going to set on click

and when you click this logo technically

you generally want to navigate to the

home page and that's what we'll do with

react router

and then we're going to set at SX so

like I mentioned this is where you can

put CSS properties if you have a

situation where you're passing in pseudo

properties this is where you're going to

have to do it so in this case when you

hover we're going to add some Styles so

we're going to give it a color a primary

light and give it a cursor

of pointer

we're going to save that that gives us

our logo

and below this and we're going to say if

it's

non-mobile screens

we're going to give it the search bar so

if it is above mobile screens we're not

going to show this or if it's sorry if

it is a Mobile screen we're not going to

show this

so we're going to do Flex between

I'm going to close this

like so

make sure that's closing tag

and inside this Flex between

we're going to have a background

color of

neutral light

give it a border radius of 9 pixel

Gap

of three REM in between the values I'm

going to give it a padding of 0.1 REM

and 1.5 REM so this is a shorthand this

means the zero point REM

on top and bottom and 1.5 REM left and

right so if you have two values

it oops

it reflects

top and bottom and then left and right

so that's a shorthand

and inside this I'm going to put input

base

I'm going to put placeholder of search

so that will give us a search value

and we're going to close this we're

going to say icon button

and inside here I'm going to give it a

search

value which is basically the icon I'm

going to save this

and everything gets fermented

and below this Flex between

I'm going to create another comment I'm

going to say

desktop nav

and below this this will be navigation

dedicated towards non-mobile screens so

I'm going to say is non mobile screens

again and we're going to put a ternary

operator we're going to give this Flex

between

and make sure we close that

and I'll fill this in a little bit

and for now I'm just going to put icon

button

as a secondary

just so we can have this Auto formatted

and close this and then I'll fill this

in

in here we're going to give it a gap of

two REM

I'm going to say icon button

on click

and I'm going to dispatch set mode so

this

is going to be the button for our light

and dark mode

so this is the dispatch of the action

that will change the mode

in our Redux so if I go back here this

will change the light to dark and dark

to light

so if I go back here I'm creating an

icon button and so if the theme dot

palette

dot mode

is equal to dark

what we are going to do is going to have

a ternary operator we're going to set

the dark mode

icon

and do SX font size

so so font size just represents the size

of

the icon over here or icon yeah

and then inside the second option we're

going to pass in light mode

and I'm going to copy this SX over here

and in this case we're going to set this

as color

of dark

and then font size of 25 pixel

we're going to save that

so again we're using Redux to flip the

switch for the dark and light mode and

we can change the dark and light mode

and then from here I'm going to say

message

which is another icon and actually I'm

going to be copying this SX equals font

size because I'll be repeatedly using it

same with the closing tag so I'm copying

that

so I'm pasting that for messages we're

going to do the same thing for

notifications

close that same with help

close that and then we're going to

create a form control so this is going

to be for the drop down at the top right

where we can see the user that's logged

in as well as the logout button

and here I'm going to give it a value of

Ed row

actually this value should be full name

right and then here I'm going to say

select

and inside here I'm going to give it a

value of full name

and give it some CSS properties with SX

we're going to say background color

of neutral light

a width of 150 pixel

border radius

of

0.25 REM

padding of 0.25 REM 1 REM

so again a shorthand for 0.25 REM top

bottom one REM left and right

and we're going to do

um

we're going to select within so the way

we select within the CSS class we're

going to Target a specific class name

in material UI

and you can do that by going into a

specter you can search inside it to see

which class you want to Target and

occasionally you have to do this it's a

little annoying

but once you find this class name you

want to fix we can change it like this

give this a 3 REM like so and then from

here I'm going to set and Dot mui select

Dash select Focus

I'm going to say colon I'm going to say

background color of neutral light

okay and then last thing we want to do

is input

input going to be

slash input base

so we're going to pass in an input of an

input component of input base and inside

the select we're going to say menu item

value a full name

so this is not actually going to be like

a select component where we're actually

selecting from the drop down we just

have a button when essentially this is

just a button within a drop down because

the only thing you can select is the log

out which will take us to another page

but this is what we're using

we're going to say this is going to be

full name as a value

and I'm going to set menu item

and I'm going to say on click

we are going to dispatch

set log out

so when you click this menu item

of log out it'll take us

and log out from our page

so it seems like I do have some kind of

error

let's see

and it seems like it starts from here

okay

we can see colon like this so make sure

when you look at this you can see why

it's not saving most likely you have

some kind of syntax error and that's

where I found it

so I'm going to save it now we're

prettier is not yelling at us

and finally we have the icon button

and inside the icon button I'm going to

say on click

pass this in set is

mobile menu toggled

and we're going to say is menu

is mobile menu

toggle so we're just going to flip it

so this is going to pop up an icon of a

menu when you are in small screens

so that's what it's doing over here

and then below this we're going to

create the mobile nav

and in here I'm going to say if it is

non-mobile screens so basically if it is

a Mobile screen

and if is mobile menu

toggled so basically when you click the

menu

item it should open up a box that will

close it all right a box that will have

the icons in there

and so this since it's a gonna be a

mobile in front of everything we're

going to give it a position of fixed

and we want this to take up the entire

height

probably a width of like you know 300

pixel 500 pixel around there

so we're going to set this to the right

we're going to set it to the bottom as

well so it takes up the entire page as

well as give it a height of 100 percent

we're going to give it a z index of 10

so it's in front of everything give it a

Max width

of 500 pixel

Min with

of 300 pixels and we're going to give it

a background color

of the background color that we set

earlier at the top of the component and

then we're going to give a close icon

after it as the first thing in our model

and in here I'm going to say display

of flex so I'm not going to use

the flex between component because I

just want to justify content to be Flex

end so this is specific so we don't we

cannot use our reusable component

and we're going to give the padding of

one REM

and inside this

I'm going to go back up I'm going to

just copy this where you have the menu

toggle and we're going to just be

using that

in our icon button

so I'm just going to hit enter I can do

on click and pass in our close icon

like so

and below that I'm going to create menu

items

so this is going to reflect closely to

what we have

earlier it's just going to be slightly

different but

I'm not going to make it reusable

because there's some

minor differences so it's not worth

going through the pain of trying to

make it reusable so I'm going to copy

all this

let's see and we're going to go down to

menu items

and I'm going to paste it all over here

so I copied everything from where the

light mode stuff happens

so if I go over here

I essentially copied

everything actually let me redo this so

I copied everything at the beginning

from the flex between in the desktop nav

and I'm just going to pretend you didn't

see that so

Let's uh

delete this right here

and in this menu item I'm going to

repaste it with the flux between

and we're gonna just modify some things

here so we're going to give it a display

of flex

we're going to do Flex Direction

of column so what that means is that

we're gonna

have it flexed up and down as opposed to

left and right this time we're going to

do Justified content of Center

so that we Center it vertically and we

Center it horizontally as well with

align items

and we're going to give it a gap of 3

REM instead

we're going to save that

and everything should

be good

I'm also going to set this icon button

to

font size just so just in case we have

the correct size

everything else let me double check

should be

exactly the same

I think even this is going to be the

same with 3rm

yeah

and with that we have our nav bar I know

there's a lot of moving pieces

let me zoom out so you can see

everything you have the menu items you

have mobile menu you have a close icon

you have the mobile nav and then you

have the desktop nav you have

all the different theme colors

and the logo and the search a lot of

things going on but this is probably one

of the bigger components that we are

going to be creating

this I want to see the nav bar for the

time being I'm going to add it to home

right here so I'm going to do

I'm going to select this I'm going to

hit box

so we're going to import box from

Material UI

and right here inside the box I'm going

to import navbar

like so using intellisense

and I want to check if this is working

on our live site so this is our

completed site but let's look at our

live site so now we added this to the

home page so we have to go to the home

page to see it

and we are waiting it for it to compile

compiled successfully and now you can

see

we have light dark mode we have

everything with our nav bar complete we

have a drop down we can log out if we

want to so perfect everything is working

as expected

you want to show

what it looks like when you're on mobile

screens it'll remove the search bar

everything will be

come this and you can open this up close

it as well

so that is everything and it's working

as expected

and with that I am now going to be

creating the login page and the register

page so if we look at the completed

application

I'm going to log out I'm going to show

you this is our login page so we'll have

a form but using the same form if you

click don't have an account sign up here

you can see that we have this form

set up so we can register over here so

we can go back to login we can go back

to sign up over here and we're going to

be reusing some of the same components

so going back to the code I'm going to

close all this again

go to login page

and in here I'm going to import the

number of items

so I'm going to import box

I'm going to import

typography use theme use media query

and inside of this I'm going to use

const theme use theme so we can grab our

colors again and I'm going to do const

is non-mobile screens we're going to use

media query like so and passing Min

width of a thousand

pixel like we did before

and inside here I'm going to use box

and

I'm going to create a few things so

actually

I'm going to copy a few things from the

nav bar because we have the sociopedia

value over here so I'm going to just

copy this

typography and we're just going to

modify a few things

so

in here I don't really need it on click

because we don't need to navigate with

this typography

and then from here I'm going to remove

the color

the primary action we can keep that we

can say font weight of bold a font size

of 32 pixel we don't need a hover

because we don't need to click on it

and around this typography I'm going to

kit box like so

and I'm going to say width of a hundred

percent

give it a background

color

of theme dot palette

dot background dot Alt

I'm going to give it a padding of one

REM

six percent

so one REM top top and bottom six

percent left and right

text align

of Center so we Center the text

we can save it that should include the

text at the top

and then

after this I'm going to create another

box

and this will be the form box

essentially and inside this box I'm

going to set the width

if it is

non-mobile screens we are going to be

setting with a 50 otherwise we want to

set it to 93 again these are just values

that I tested around looks the best I'm

going to set a padding of two REM

a margin of 2 REM Auto and by the way

I'm using root em so REM

this is based on the root size of the

font

and by doing this this allows us to have

consistency across different browsers

and font sizes so that's why I'm using

REM instead of other

values and occasionally we still need to

use pixels here and there but if you can

use REM might as well use it

we're going to have a border radius of

1.5 REM I'm going to give it a

background color

of theme dot palette

background dot Alt

and inside this box I'm going to set

typography

like so

give it a font weight of 500 a variant

of H5 SX

of margin bottom 1.5

REM as text

and then here I'm going to write a text

this is for just the description welcome

to socio

media the social

media for

socio paths

and that will have our layout set up and

inside this box I'm going to create a

form component that I did not create yet

and what I'm going to do is I'm going to

import

form from dot slash

form

this is again a component I have not

created so I'm going to go into the

login page folder I'm going to create a

new file call it forum.jsx

my apologies I have not closed the

Explorer so I'm going to do that and in

this form

this is going to be where we do all the

register functionality

so this there's going to be quite a bit

of things to do in this component

but a lot of it is pretty

self-explanatory and self or

straightforward I would say

but I'll walk you through everything so

import use state from react

we're going to go down I'm going to

import a number of items from Material

UI so I'm going to import box button

text field

use media query

typography

and use theme

and then from at m-u-y slash material

and also I'm yeah I'm going to import

edit outlined icon from at mui icons

material edit outline just for that

particular icon

and then I'm going to import formic

which is going to be

what we use for our form Library

then import

everything as yep from

yep

which is our validation Library

we're going to import use navigate

because we need to be able to navigate

when they register

and login

we're going to import use dispatch

because we're going to use react Redux

to store our user information we're

going to import set login once the user

sets

their login page

then we're going to import drop zone so

we can drop a file or let the user put

in the image so that they can upload the

file as well

and then also we're going to import Flex

between because we're going to be using

that component quite often

and that should be our Imports

so in here I'm going to create the

schema so these are the yup validation

schema so this will determine the shape

of how the form library is going to be

saving this information so I'm going to

say register schema yup dot object dot

shape

shape

and I'm going to pass in all the values

for our schema and we're going to have

first name

last name

email

password

location

occupation

and picture

and for the values

I'm going to do yep

dot string

required

and required

and I'm going to have this for pretty

much every single one of these values

since

I'm not going to spend the time to

validate everything perfectly this will

make it just easier for us to deal with

at the time being

and the only one that's going to be

different is going to be email because

we already it's already configured for

us

by yup so we don't actually have to do

anything and that's why I

M setting up this particular one

acquired true so basically what this is

doing is that when we validate our

inputs to make sure for example they

don't put something

that isn't correct for a first name if

you put like a

weird symbol

or something else it's going to show an

error if and also if you don't have

anything in that value

you're going to have a required value

error that pops up so that's what this

is kind of doing

same with this if it's going to say if

you don't have a correct email address

it's going to say invalid email and if

it's empty it's going to show required

so depending on which error is prevalent

it's going to run that

and also we're going to have a login

schema and we're going to set yup

Dot object.shape

like so

and I'm going to pass in email

the same thing as well

and same thing with password

so login is going to be like a stripped

down version of the register schema so

we can reuse some of the values

and in here we're going to do const

initial

values register

so now

while the schema set up the validation

this setup this sets up the initial

values so I'm just going to do first

name

empty string like so

and so I'm just going to copy this so I

can just write last name paste email

based password

and then paste it location

occupation

picture

and then finally we're going to do the

same thing for

login

so we're going to have

email paste it password

paste it

and then after all that we can now

create our form component

so we're going to make sure we do export

default form make sure we don't forget

that

and in here I'm going to create a number

of states so I'm going to do page type

and I'm going to set page

type like so I'm going to say use state

oops and it's going to be login

so we're going to have a situation where

we set the page type to be login or

register so we're going to display a

different form depending on this state

and then here I'm going to grab the

palette from use theme

we're going to set up this batch like

we've done before

then we're going to import

not import but use navigate so we can

navigate to different pages

we're going to do is non-mobile

and we're going to use the same

media query we did before

so min

with and this one's going to be 600

pixel because we have a different

criteria for this one

so I'm just going to set it like that

and finally just to make it convenient

because we'll be using this number of

times we're going to say page type it's

going to be equal to

login actually that there should be

triple equal

and that's going to be a variable of is

login it's just to shorten it makes it

easier same thing with is register

just makes it very clear

and concise

and by the way

this is a more advanced topic but naming

is one of the hardest things in

programming

is login when you have a Boolean

it's almost so nice to keep it with a

prefix of is

so if you can try to prefix a Boolean

with is that will show you that this is

going to be a specific Boolean it helps

with naming keeps it very simple if

Boolean always starts with is I know

some people do like has something and

then they change there is

I personally like it if it always is

because you can clearly see when

something is a Boolean

and or not a Boolean

and with that I'm going to create a

function

before we write the Java uh the jsx

I'm going to create a skeleton for

handle form submit and this is going to

be asynchronous

I'm going to give it a value of values

on submit props now these arguments are

going to come from formic and I'll show

you where we are going to be using it

but for now we're just going to keep it

empty

and I'm going to return

the formic component

like so

and inside the format component

this is where I do on submit and pass in

the handle form submit

function that I just created

and also I'm going to set the initial

values

I'm going to set is login

initial

values login and initial values register

so if we're on the islogin page we're

going to initialize our values with the

login component or login object that we

created otherwise we do register

and we're going to kind of do the same

thing for the validation schema so if I

go down

I write validation schema we pass in is

log in

login schema redo register schema

like so

and this is very convenient I like how

this is set up for formic we have the

initial values validation schema it's

pretty simple to use now there's a weird

part of the syntax and it's going to be

right here so I'm going to create

uh curly braces I'm gonna put

parens

with another curly braces

and I'm going to pass in a number of

values

in here so values errors touched handle

blur

handle change

handle

submit

actually no

handle submit like so set field value

and reset form

it seems like it's giving me some kind

of error over here I'm not exactly sure

why

what is that saying

and in here

so we have

we have reset form so like this I want

to do Arrow function like that so make

sure you're getting this

you're correcting this syntax the the

syntax can be a little wild right here

but these values allow you to use them

inside

your components and your form so it

makes it very nice to use

and with this we want to add a form

HTML tag

I'm going to do on submit

equals handle submit so what formic is

essentially doing is grabbing the handle

forms submit and passing it in our

formic so you can pass it into our on

submit function

so once we have that now we can do all

the form stuff inside this like normal I

know this is a little bit of funky

syntax but

you know

sometimes you have to react hook form

has its benefits but also has some other

downsides but I won't get into it so we

have box

so

and inside the Box

we can do display of grid so we're going

to use a grid

for this section

and we're going to set a gap of 30 pixel

meaning you have a gap between items of

30 pixel and I'm going to set a grid

template columns

and we're going to do repeat

of 4 comma min max

of zero

one fractional unit

and this will be our grid template

columns

A Min

Max

so what this is saying is that we're

going to split our grid into four

sections and it's going to be a minimum

of zero so if it gets too small it's

going to shrink all the way to zero

otherwise we're going to split this into

equal fractions of four

so if you take a look on the final

application we're basically splitting

this into four sections

so one two three four one two three four

one two three four one two three four

same with over here

and you know what I could have split

this into two you could split this into

two if you wanted

but I'm keeping it as four so I'm going

to set this as SX

and passing in and

div

so what we're doing is we're trending

we're targeting any divs

of this as a child component so anything

or child class so anything right below

it as div we're going to add a property

of grid column

capitalized like that

and if it is non-mobile meaning wider

screens we're going to say undefined

but if it is mobile we're going to say a

span of four

so essentially when we specify our text

field we're going to give that these

guys a grid column span of maybe like

two for example right here these will be

two

on larger screens

but when you get smaller to a Mobile

screen these are going to become a span

of four so they'll take up their own

entire width so that's why I am doing

this particular section so you don't

have to use mobile uh media queries

aside from this one and it makes a very

clean code without much complications

foreign

of text field with is register so in

this case if it's on the register

if it's on the register page we're going

to have a number of components over here

and we're going to write our first input

which is going to be text field

so that's like the input component from

Material UI

I'm going to close it but I'm going to

pass in a number of parameters over here

so I'm going to say label a first name

I'm going to say on blur we're going to

pass in the handle blur so this right

here these values are going to handle

the situation when you click out of a

input

on change

will handle the situation when you're

typing in this we're going to give it a

value of values.firstname

and then I'm going to say name is going

to be first name so we sync it to the

correct value in the initial value so

this has to align with the name you are

setting down here

not the label this is just the display

of the text

and then we're going to set the error to

be a Boolean of touched that first name

so basically if the first name has been

touched or not and we're going to do the

same thing with Boolean errors DOT first

name

so we want to check if it has been

touched or if there is an error then

this will show that we have an error for

this particular

text field

and we're going to do the similar things

with helper text and we're going to do

touched.firstname

and errors that first name

so what this is going to do is if it has

been touched

but we have an error we're going to be

showing the error otherwise we will show

that it's been touched or if it hasn't

been touched as well so this will show

the helper text

when we need to

and then finally we can do SX grid

column and give it a span of two for

this as I mentioned

in larger screens it's going to have

span of two

in smaller screens this is going to

override this guy

with the span of four

and now I know there's a lot of

properties over here but it's very nice

because you can just copy and paste it

like this multiple times and all we have

to do is change the values so if I go

like this I want to change this to last

name and then from here I can do command

D select all of these guys change it to

last

and then that's our next input

so it's very convenient

I'm going to do the same thing

this is going to be

location and this one's going to be

occupation

so I'm going to set this

one as location

same with the name

actually I'm going to change the last

name command D change all of these to

location

and then finally I'm going to do this

for

label and occupation

Dot

change the last name as well

this should be occupation

and then from here I did forget that we

need to change this to span of four

because these take up their own line

and I'm going to save that

and then finally

we're going to have to deal with the box

of

you know inputting profile image so this

one is going to be a little more intense

so we're going to say

we're going to give this

a grid column

of span of four like we did before with

a border of one

pixel solid

natural palette

neutral dot medium

so again this is a shorthand

of border with one pixel and it's a

solid line with this color so that's a

shorthand for borders

we're gonna do border radius

of 5 pixel

a padding of one REM

and inside this box now we're going to

use a component from Drop Zone

this is where we can have an automatic

configuration so we can

pass in files and have validation as

well so we're going to say accepted

files

is going to be dot jpeg comma dot jpeg

dot PNG or comma.png

so it will only accept that particular

file aside I think it might not be

working I'm not entirely sure I've had

weird scenarios where it doesn't

properly accept those but here we're

going to set multiple to false so that

means you cannot set multiple files we

just want only one image at most

and then from here we're going to set on

drop so this is going to be the Callback

function of what we do with the files

once a user drops it in here so we're

going to pass in the septed files

and in here we want to set field value

and we're going to set this as picture

comma accepted files zero

so what this is doing is

since

these text field is different we want to

set the set field value

for a specific formic input being

picture

we can use the set field value to set

those values if we need to and in this

case since we're using Drop Zone we need

to set this value manually

and up here we have a callback function

and again this is going to have some

weird syntax and this time is from drop

zone so we're going to pass in get root

props

and then get input prompts

so we can use those props

and pass it within

the jsx inside of here so I'm going to

give it the box like that

and we're going to do some styling over

here

and what I'm what I need to do is I'm

going to pass and get root props now

this is something you have to do with

drop zone so you're basically just

passing the props that they give you

passing it into the immediate div that's

underneath

and then from here I'm going to put the

Border I'm going to give it

2 pixel dashed

with the palette

primary dot Main

so this is another border shorthand and

we're doing pad one REM

SX of and we want to Target the hover

so when we hover over it we want to

change the cursor

to pointer

like so

it's all a bit of funky syntax going on

but

it's just this one section where we pass

in files

so it is acceptable so input we're going

to pass and get input

props

we're going to invoke it and we're going

to close this input

and inside of here

I'm going to do values.picture

and then I do a paragraph tag saying add

picture here

so if essentially the values doesn't

exist for the picture we're going to

display this text

otherwise what we're going to do is

we're going to show

show the name of the image that's been

added

so values.picture.name

like so

and then we're going to pass and edit

outlined icon

and that is essentially our drop zone so

now let me go back and I'll show you

what we have created so this is how it

originally looks add picture here

because there's no value we're showing

this

but once we add some kind of image

it will show the image name and they'll

show an edit icon and we can change it

if we want to again

so that is our drop zone so that's all

we have to do for our Drop Zone

so now there's a lot of HTML tags so be

very careful of where you put this so

you have Drop Zone you have box you have

an empty tag you want to go

after this guy

but in between the Box

and I'm going to create a couple more

text Fields actually so I'm going to go

up I'm going to copy this occupation

so now this is in the section if you

look if you remember closely

this part is enclosed just for the

register section

so this is for register

but this section is going to be the

section for both login and register so

that's going to be email

so this one is going to be email

and this is going to

have to also change the email as well

like that

and then I'm going to copy this

and paste it one last time and this is

going to be password

and the one difference here with the

password we want to to be hidden so we

can do tap type password and it'll hide

the value

I'm going to change the email as well

all of these we're going to do password

and then finally

with this we have

our closing box so underneath the

closing box

right here

I want to create the buttons section so

this will be the register button and the

text below it to switch between register

and login so I'm going to create another

box over here

I'm going to say button

and inside this button I'm going to give

it some properties this is going to be

full width

a type of submit

SX of margin

to REM 0.

padding of one REM

background color

of palette

primary dot Main

give it a color of palette

dot background dot Alt

and we're going to say and hover

colon color

palette

primary

dot Main

so

and inside this button I'm going to do

is login

with login as the text if it's a login

and register if it's not

and I'm going to do another typography

so this is a link below to switch

between login and

register

and in here

I'm going to set on click

and we're going to set page type

from islogin

it is login then we're going to set

register otherwise we are

gonna have it log in

and then reset form so now when we

switch between register and login

it's good to clean up

the inputs that they already have or

else you'll have some bugs and then

inside this we're going to have SX of

text decoration and we're going to set

underlined

for this one we're going to give it a

color of

palette

primary dot Main

and we're going to say and colon hover

and we're going to give it a cursor

of pointer when we hover over it and

give it a color of palettes

dot primary

dot light

save that and inside the typography over

here

I'm going to do is login

then we're going to have a text of don't

have an account question mark signed up

here

and if

you're on the register page we're going

to have already have an account

login here

[Music]

and that should cover most of everything

that we have for this

now the only thing missing is going to

be the logic when you click on register

or login

so that is going to be handled because

of button type submit and anytime you

have a button type submit inside the

form it's going to

run the handle submit function of this

so on submit so we're going to run this

and the handle submit essentially is

this handle form submit function that we

created earlier

so what we're going to do is we're going

to go in and we're going to pass

the logic in that we want so if

we are on the is login page we want to

run

some functionality that will call our

back end that we have created for

logging in

and we haven't created this function yet

so it's a login function with on

submit props so we are going to pass

that in and if it is is register

we're going to do the same thing with

the register function values

now it keeps auto typing it for me but

we're going to create these functions so

on submit props

we're going to be passing it into these

so the first function we're going to

create is going to be the register so

I'm going to register const register

async values comma on submit prompts

and in this

we're going to create

something with form data

and we're going to use form data

normally you have the value so every

value that we've created inside the text

field these values will show up

essentially in this value and these

values get passed into the register

function

which we are using

so typically we normally could just use

that and pass it into our request body

itself

but because we have a picture image

we're going to have to use this thing

called form data

from the JavaScript API so this I'm just

going to write this allows

us to

send form info with image

and what we have to do is we're going to

create this is essentially like an

object but we have to

add it in a special way so let value in

values

so meaning we're gonna

go through Loop through every key value

in this object

and we're going to append it to the form

data

like so now I know this is

unconventional but when you have an

image this is one way to send the image

through the request body

and this will cycle through all the

values added to form data

and the one thing we need to append

actually

is going to be

the picture path

and the picture path is essentially

going to be the name

so that is identified by if you go back

to our server

and we create the assets so p1.jpg that

is the name of the file and that's going

to be our path

and we need to append this manually

because we add the images that's how

it's going to be working

and then finally with that we can do

saved user response

to save whatever is returned from the

back end we're going to do a fetch call

to call an API

and do HTTP local

host

colon 3001 because that's what we set

the port to and we're going to do

register

like so

and inside here I'm going to create an

object and it's a method colon post

and we're going to give it a body of

form data

so we are now sending this form data to

this particular API call

and I'm going to say const saved user

and I'm going to do a weight saved user

response dot Json I'm going to invoke it

so whatever we get we're going to save

it over here we're going to make it into

a parsable form with DOT Json

and with that information we want to

make sure

our form is reset and that's why we are

passing an on submit props this comes

from

formic and that's why we're continually

passing it in and we want to do a reset

form

this provides the number of functions

with formic

and if saved user so if we successfully

succeeded getting the user we're going

to say set page type to be login

otherwise we're not going to re-navigate

so this is going to be our register

function and then we're also going to

create the login as well

and I'll demonstrate all of this very

shortly

once I have this complete

and this is going to have the same

arguments

and I'm just going to copy this over

save the user response

and instead the saved user response

we're going to have logged

in

response

like so

and instead of this being registered

this is going to be login

and we're going to set of headers

of content

type since we're not doing the form data

Now application slash Json

and hit a comma and inside the body I

can just do Json Dot stringify

and pass the values in directly because

it's formatted automatic or formatted in

the correct way already

we're going to con logged in is equal to

logged in response dot Json

and we're also gonna

reset form as well when we log in

and if

that API call has succeeded and the user

successfully authenticated we're going

to dispatch

and we're going to set login

with user logged

in.user like this token logged in dot

token

now if you remember where this is coming

from this is coming from

our Redux state so if you go set log in

we are setting the user and the token

inside our state inside our store

now if you know this action.payload

if you want to pass it into the payload

um or sorry if I go back to the form you

have to pass it into an object with the

user like this just keep note of it this

is the one Quirk of Redux toolkit that

you can see but once you understand it

pretty convenient

and once you have that we're going to

navigate

to the home so you should be able to

successfully authenticate

and with this let's double check our

terminal make sure we don't have any

errors so we're good and we're going to

go to our site

and I am going to navigate to the home

page

or not the home page but the login page

so we don't have an account created here

so I'm going to write don't have an

account I'm going to say fake man and I

know there's a warning over here

controlled input that's because we're

kind of switching between but this is

non-relevant I hate to ignore a warning

and I don't do that often but this is

one of the situations where it doesn't

affect anything

and I'm going to say fake

location in California

fake

fake

con man

I'm gonna put a random image

let's just say

let's say I look like this person okay

and then I'm going to put fake man

gmail.com and then fake man that's the

password

the register and it seems like we do

have an error so let's double check and

actually I know why

the reason why is we are not running our

server

at some point I closed it so I'm going

to create another terminal so I'm going

to do CD dot dot so I go to the parent

and now I can go into the server file

I'm going to run npm run start

let's make sure this is running and then

we also have our information so we can

try registering again and then we have

something successful perfect we have the

user coming back in

you can ignore that because we already

fixed that so we're going to say fake

man gmail.com fake man as well just note

that we don't have any validation checks

so this is case sensitive for the email

but typically you want to change that

then we have login

and now we can now log in perfectly

one thing to note is if you have the

Chrome Redux Dev tools extension which

is available in Brave and chrome and I

know there's probably a Firefox version

as well you can go to the Redux Tab and

you can see the state you can see all

your current state as well I know it's a

little hard to see I'm not entirely sure

to how to create make this bigger but

you can see that we have the user

information that we saved in as well as

a token

and just to note we have this saved in

our local storage and if you're ever

curious what's stored in the local

storage you can go to the application

tab on their local storage you can click

your current browser and you can see

that we have all of these stored in our

local store because of Redux persist

there's one last thing I want to

configure for authentication now that we

have the user and the tokens we can go

to app.js

and in here I'm going to do const is

auth meaning whether they're

walked in or not which is determined via

use selector

and we're going to grab the state

we're going to grab the state DOT token

so if the token exists we are

authorized so we can add this to our

routes

so

in The Element Section I'm going to put

is auth

with home page and if it doesn't

or if you're not authenticated we're

going to do navigate

using that component from

react router and we're going to navigate

to

the login page

actually this should be closing Tech

and we're going to do the same thing

over here for the profile page

colon like so

and I did not close that

and I believe that's correct there's one

extra one okay

so basically now the home and the

profile user are protected you need to

set the token now someone could

obviously just set the local storage and

make sure they have some random token in

this case but even then those routes are

protected so it doesn't really matter if

they can do that so this is just a UI

more of a UI visual thing so that they

can't access these page and they'll just

navigate them back to the login page if

they go to it directly

and with that the authentication and

authorization authorization is complete

now the next thing on our list is going

to be the home page and the layout so

we're going to be working on each of

these widgets as I call them

one by one

but before we start creating our first

widget we are going to create a

component and this is going to be called

widget

wrapper

Dot jsx

so like before this widget wrapper is

going to be a style component so I'm

going to go to flex between

copy the Imports

paste it

I'm going to create widget wrapper

and it's going to equal styled box

and theme like so

and pass in an object and in here we're

going to give it a padding of 1.5 REM

1.5 REM

0.75 REM

1.5 Ram

so this is a shorthand if you didn't

know

this represents

top

right bottom

left so it goes clockwise so if you have

four values for padding

you can add four values to represent

each side it's quite handy so you don't

have to specify different padding for

each side

then from here I'm going to say theme

dot palette dot background dot alt so if

you're using style components you can

pass the theme over here and grab the

value

and also by the way I'm missing a

missing friends right there

and then from here I'm going to do

border radius

and it's going to be 0.75 REM

and finally I'm going to export default

widget

wrapper

so this will wrap our widget give us a

base

styling for every single widget

including like the Border radius and the

color so it'll help us

build some of these wedges a little

faster

okay and then the next thing we're going

to be building

is going to be a user image widget so

user

user image

jsx like so

and in here we're going to import box

from

at mui slash

material

I'm going to do const user image

is equal to

image size

equal to 60 pixel

and in here

I'm going to just return

a box

let me export default first before I

forget

and in here we're going to have a width

of size and a height of size

so we have default height and width if

we don't specify

and then we're going to add

an image tag

and in here we're going to have style is

equal to object fit

cover so it takes up the entire space

as necessary and it does

crop it as necessary so in a way if you

have your images that are centered like

all the important information is in the

center object fit cover is a perfect fit

because it does crop the side if it

needs to fit the dimensions

we're gonna have a board of radius of 50

so this is the circle so essentially

this user image is going to be the

profile image that you see for each user

which is just going to be that Circle

and we're setting the width of size

height of size

in alt of user and the source of HTTP

slash localhost

three thousand

and one assets

slash image

so this will grab the profile image as

needed for each of the profile users

and this is just a convenience component

that we can reuse

so we're going to save all those close

them

and now I'm going to go to

our directory and I'm going to go under

widgets

I'm going to create a new file called

user

widget.jsx so this user widget

is going to be this right here so we're

going to create this first and by the

way user image represents these guys

widget wrapper represents just the

styling of each widget

so that's what each one does

and so in our user widget

we're going to do some imports so we're

going to import

and let me close this

we're going to import a number of icons

so we're going to import manage accounts

outlined

edit outlined location

on outlined

work outline

outlined

and all from at mui slash icons material

from here I'm going to import

box from mui material

in addition to typography

divider

and use theme

then we're going to import user image

that we just created

as well as import Flex between

and we import widget wrapper

and as you can see again with the source

configuration in JS config we can grab

the route via components because we

start from the source we do components

user image so we can always start from

here as opposed to just doing relative

Imports like this and that will give us

what we need but this is much more

cleaner more effective

and then from here I'm going to import

use selector

from react Redux

I'm going to import use effect

from react as well as

use state

and I'm going to import use navigate

from react router Dom

and below this I'm going to do const

user widget is equal to

user ID picture

path

and in here I'm going to do I'm going to

add some state so I'm going to add user

set user

use state

null

so this is how we're going to grab the

user

from the back end

and save it for our use and then we're

going to do const palette

is equal to use theme

const navigate as you can click use

navigate

const token is going to be use selector

and we're going to grab from the store

and then we're going to grab oops I

don't know why that did that

and then from here I'm going to grab

colors from the theme so dark equals

palette

dot neutral

dot dark

I'm going to just copy this so I'll have

to write

too much so I'm going to const medium

equals palette dot neutral medium

and then const main is equal to palette

on neutral Main

and again this is all coming from the

themes file you can check all those

colors out

and

here in our user widget when we enter

this particular page we want to grab the

user information so we're going to call

the API to grab this user

so the way to do that you can do const

get user is equal to async

like so

and we're going to make an API call so

we're going to call this response a

weight fetch

and we're going to pass in http

colon slash localhost

3001 users slash

user

oops user ID

I'm going to put a comma

comma and then I'm going to do

an object method

get

and then headers

with authorization

colon

Bearer

token

so now if you remember why we are doing

this is if you go back

to our server we go to

middleware we go to auth you can see in

our authorization

we are writing Bearer in our

authorization header

and we are taking everything behind it

which is the token

that is how we grab the token and then

we verify the jot token

so this is what's happening over here

and with that

go into the next line we're going to say

const data is equal to a weight

response.json

and we're going to set user as data

it also occurred to me that instead of

sending the user you can set the user

and actually no no this is correct this

is correct don't worry about ignore what

I said

use effect

and what we're going to do in this use

effect is we're going to grab get user

we're going to invoke that

I'm going to hit with an empty array

I'm going to do es lint

disable line

react hooks exhaustive

depths

sometimes I really hate when eslint

tells you that you have exhausted depths

you're missing this but a lot of times I

don't use exhaustive

dependencies

but anyways what this means is that when

you enter this page

and because this is an empty array

get user will be called when you enter

or when you render this component the

first time so on this page get user will

be called because this component gets

rendered

and this is how you make that API call

and so we also need the if user does not

exist we need to return null so if we

don't have a user we don't return

anything for the user widget yet

because it will error out because what

we're going to do next is going to

destructure

items from the user it's like this and

we're going to grab properties from it

so first name last name

location

occupation

viewed

profile

impressions

and Friends

so if we didn't have this it's going to

error out if user doesn't exist and it

always doesn't exist until the user gets

back information so it's always going to

show an error

but with this this will be fine

typically you would have a loading

component by the way you would have a

loading component while the user is

waiting

but to make it simple we're not going to

handle all the loading States

all right and then with this we're going

to use our widget wrapper and this is

the purpose we're always just going to

wrap our widgets with this to make it

more convenient

it doesn't save too much code but

enough because we use it enough

and so we're going to write the first

row

so here

we're going to do Flex between so

actually before I go

doing that

Let's ignore this

before I do this

you can see this is going to be the

first row so I'm going to turn on this

this will be the first row this will be

the second third

fourth sections and as you can see we're

using Flex for each one of these this is

flex

this is split into two and then you can

place these together and then this will

be left aligned over here this is flex

between right here

these two this element right here

over see like you see where I'm circling

and this one is flexed between

and then these two are flexed between

in this particular div

so a lot of flex is going on

but

pretty

pretty self-explanatory once you get the

hang of it

so Flex between we want to do a gap of

0.5 REM so there's a space

a padding bottom of 1.1 REM

and on click

we want the user to be able to navigate

to the profile page if they click on it

we have not created the profile page but

I am just going to write this

just for now

and we'll handle the profile page

later on

and by the way I have a PB so in

material UI you have some shorthands

with padding and margin because you use

it so frequently so PB can represent

padding bottom so you don't have to type

the entire thing

and then from here we're going to do

Flex between Gap

of

one REM

and inside here I'm going to use user

image

and put an image of

picture path

like so

and then I'm going to play the Box

and inside this box I'm going to say

typography

with the variant

of

H4

color of dark

font weight of 500

SX

of

and colon hover

and we're going to do color colon

palette

primary dot light

I'm going to do cursor

of pointer

I'm going to close this typography and

inside here I'm going to write first

name

and last name so that will be first and

last

and then finally below this I'm going to

do typography

give it the friends

dot length so to show number of friends

that they have

friends and we're going to give this a

color of medium

and then finally I'm going to have an

icon that says manage accounts I

outlined and we're going to close that

and after that I want to add a divider

between

our first row and our second row

our second row

will be here

and this one is going to be a little bit

simpler so we're going to do box with a

padding of one REM for top and bottom

zero for left and right

then we're going to add a box with a

display of flex

align items

of Center

and the gap of one REM

margin bottom of 0.5 REM note that this

is a little different from Flex between

we don't have Justified content

with space between we don't want to use

that

so that's why I'm manually writing it

and from here we're going to do location

on outlined we're going to do a font

size

of large

and we're going to give it SX of color

and a main a color of Main

actually let me do a self-closing tack

and then right here I'm going to do

typography with the color of medium

I'm going to put location

over here

and close it

I'm going to copy this

and place the box over here

and we don't need the margin bottom this

time

change this to work

outline

outlined

and then change the location to

occupation

so that is our second row

then we have the Third

row

and in here we're going to have a box of

padding one REM zero once again

and I'm going to do Flex

between

margin bottom of 0.5 REM and see how

useful flux between is we've been using

this multiple times and it saved us a

lot of typing

so typography is going to be over here

we're going to say who's viewed your

profile

and I'm going to have a color of

medium actually this should be in curly

braces not in quotes

so I'm going to copy this

and I'm going to give it a font

weight of 500

I'm going to do viewed profile

and in here the color should be main

this time

and then from here I'm gonna

copy everything in between I'm going to

do Flex between

here

and inside I'm gonna

paste what I had

and we're just going to change the text

it's going to be impressions

of your post

and this should be

impressions

there's a lot of typing for this so

we're just going to Breeze through

everything so we're going to do fourth

row

so the final rope we're going to do a

box with a padding of one REM top and

bottom and zero left and right

and in here I'm going to do typography

with the font size of one REM color of

main font weight of 500 margin bottom of

one REM

I'm going to write social profiles

and I'm going to write Flex between

give it a gap

and we're going to do a gap of one

oops

one REM

margin bottom of zero point

five REM

then I'm going to do Flex between

with a gap of one REM once again

I'm going to put an image tag

with the source

and we're going to do dot dot assets

slash Twitter dot PNG

so we're going to Source the image that

we

manually placed into the front end

and then we're here we're going to do a

box

with the typography

in color of Maine and the font weight of

500.

and inside here I'm going to write

Twitter

and below this typography

I'm going to do color equals

medium

I'm going to do social network

and then below this I'm going to write

edit outlined

the SX of color colon Main

like so so that is our first social icon

so I'm just going to give it some space

so we can distinguish

section

and we're going to do this one I'm going

to just paste everything

I'm going to give it a gap of one REM no

more in the bottom

and in here this should be LinkedIn this

time

with an ALT of LinkedIn

here this should be LinkedIn

as well and this should be

Network

platform

like so

and with that our user widget is now

complete

so now we want to input this into the

right location so I'm going to go to

home page go to our index and this is

where we will write

an input our user widget

but before that

let's actually

add a few things

let's add a variable for is non-mobile

screens because this is going to be

responsive

and I'm going to say use media query

import that

and I'm going to set

A Min

Dash with oops Min Dash with

of a thousand pixels

and I'm going to grab user information

of ID and picture path

using use selector

make sure you import it and we're going

to do state

dot user to grab it from the reducer

and in here I'm going to set up some

layout stuff so I'm going to do box

and I'm going to add some properties

inside

I'm going to add width of 100 percent

padding

of two REM six percent

display

that if it's none

mobile screens

we're going to give it a flex

otherwise we're going to do block

so that means when we display for big

screens that's why you can have three

widgets in a row whereas

on smaller screens we're just going to

have them on top of each other

and then we're going to set a gap of 0.5

REM

and justify content

with space between

and below this I'm going to create a box

with flex basis

is non-mobile screens we're going to set

it to 26 percent

and undefined so these are values that I

arbitrarily decided looked pretty nice

and in this box I'm going to set

user

widget which

does not seem to be exporting let me

make sure

I did I on the export user widget go

back to that file we're going to write

export default

user widget

that's why right now I can finally

import it like this

there you go

and the user widget requires a few

properties so user ID

lowercase and underscore ID is what

we're passing down with the picture path

of the picture path that we grabbed

from the store

so that is how we set up our user widget

now before we go on to the next

widget building it let's actually finish

up the layout on this home page so here

I'm going to write box

and I'm going to do Flex

basis

and actually I'm going to just copy this

over

from there

and paste it and change this to 42

percent

again arbitrary value values that I

found looks nice

and we're going to set is non-mobile

screens

we're going to give it a margin top of

undefined meaning it does not have any

margin top

for desktop but if you're on smaller

screens we need to give it a margin top

of two REM because now they're stacked

on top of each other and you need some

margin

when you're dealing with it

all right so we're going to close this

and in here we're going to add some

widgets but just not yet

and we're going to add another layout

element and this will only pop up

for desktop screen so your friends list

will only show

on desktop

as well as the advertisement so we're

going to have a box of flex basis

of 26 percent

and we're going to be closing this box

so we're going to fill out what these

widgets are going to be

as we go through

if I actually take a look

I see that I have made a mistake with

this this is a line left to right so if

you go back

you want to move manage accounts

outlined on line 77 after the flex

between 178

so move it after that and then also

if we go all the way down to line 143

this Flex between

line 143

should be placed all the way up right

below manage accounts outlined

now if you look back now everything's

fixed we're missing some dividers

actually

so if I go back after divider

second

and then third

will now have dividers everything should

be aligned perfectly there we go

as you can see I make some mistakes I'm

only human

but always you can just double check

with the UI you always want to make sure

as you go along you're double checking

what you have

next thing we're going to create is

going to be

this component we're going to call this

the my post component and you you will

be able to write things you'll be able

to add an image just like we did before

with the component we can add it and

then we can hit post

and it should add a post at the very

bottom so as you can see we just add

this

so we're going to go back to our code

we're going to close this

and inside of box

I'm going to write

post

I'm going to write my post

widget with picture

path of picture

path like so

and I'm going to import

my post

widget

from scenes widgets

my post widget

we have not created it yet so let's do

that so we're going to create a new file

my post widget Dot jsx

inside this component

and close this first inside this

component I'm going to import a lot of

icons

edit outlined

delete outlined

attach should make sure you don't

have all these errors

attach file

outlined GIF box outlined

image

I need to spell this correctly

image outlined

mic

outlined more

her rise outlined

last one's kind of weird so from at m u

i icons material

so a lot of icons

and then from here I'm going to import a

lot of material components box being the

first one

and then import

divider

typography

input base

use theme

button

icon button

use media query

and save it and I'll align

I'm going to import Drop Zone from react

to drop zone

import Flex

between

okay well

intellisense fix my error for me and I'm

going to import user image

import widget wrapper

and then we're going to import use state

I'm going to import use

dispatch

as well as use selector

and then import set

posts from State

so a lot of things to import we have a

lot of things to do for this component

so I'm going to create const my post

widget

is equal to picture path

I'm going to create a bunch of state so

I'm going to do const dispatch use

dispatch

const

is image set is image so this is going

to represent the switch whether if

someone has clicked the image button to

open up a place to drop an image if they

want to for the posting so we're going

to start with false

and then from here I'm going to do

another state this will be the actual

image if they actually drop it so I'm

going to set image there

and then we're going to start with null

then I'm going to do const Post set post

with use state of empty string so this

will represent

this will represent the actual post

content of description

and then we're also going to do palette

so we're grabbing

our colors once again

then we're going to grab

underscore ID from our store

from the user so use selector

state

with state DOT user

so this will be something we can send to

the back end so we know who's posting

the content

and then curse token

view selector will be used

to authorize this user to call this API

state DOT token so

and we're going to give it

is non-mobile screens variable so we can

use a use media query

so I'm going to pass in Min Dash width

1000 pixel

const medium main equals palette

dot neutral

dot medium mean

const medium is going to be palette

neutral dot medium like so

so now we have all our state we have all

our colors it's a lot of things going on

over there

but we should be good

now before we do anything we're going to

create the function that handles our

post and makes the API call so I'm going

to do const handle post async

and here we're going to use form data

again because we are passing an image so

we have to use it one more time so form

data like so so we can pass the image

and we're going to append manually

some properties and values so I'm going

to append

let me spell form data correctly append

user ID

underscore

ID

and then I'm going to do form data dot

append

with description

I'm going to pass in post like so

I'm going to do if image

so if there is an image we are gonna

deform data dot append

to the picture

key

we're going to pass the image

so if you remember

just as a summary just as a reminder of

what

it's doing if you go down with the post

section we have upload.single picture so

it's grabbing the picture key that we're

adding in this

certain scenario and it's uploading this

specific image right here

so just as a reminder to see show you

what it's actually doing so form data

append

picture

path so in addition to the image we need

the image

name as well so that will determine the

path of the image

and then after that we're going to do

const response await Fetch and we're

going to pass in

http

colon slash localhost

3001 slash posts like so

I'm going to do comma I'm going to give

it a method

of post

with the headers

of

authorization

and a better

token like so

I'm going to do body of form data

so that will be particularly our

response and we're going to do cons post

equals awaitresponse dot Json

and from here I'm going to dispatch set

posts

and give it a post

value

I'm going to do set image of null

and set post of empty string so this

will basically reset

all the state that we have once we make

an API call

so this will keep our list of posts

this will send the post information to

the back end

and the back end will return our list of

updated posts if you remember that

and just FYI when you're

and this is why it's so important when

you look at this when you're building

this application you have a set of mocks

you have to know as a front-end

developer

and as a backend developer as well you

have to plan beforehand because I've

seen this happen a lot where you kind of

you waste a lot of time because you

consider things like when you go to this

page we want to get the list of posts

right here so you're going to make an

API call you're going to get a list of

friends you're going to get this as well

but it's hard to remember what you want

to do when

you update some information and What

needs to change

so for example if I remove this person

as a friend

it's hard to remember that you need to

change this as well so you need when you

add this you need the updated friends

list coming from the API so you can

update that

same with this if you

if you have this post or like if you add

this post right

when we added this post we need a return

of

either the newly updated post and we can

just add it to our current list or we

can get the entire list of the posts and

just replace this list of posts right

here so you always have to consider

before you build the application how

you're going to set up the data

before

you make the API call and then after the

API call you have to consider what's

going to happen on the front end

of what changes it might sound fairly

obvious but when you get in the thick of

things it's very easy to forget that you

might need an updated version of all

those and things like that can take a

lot of time if you don't plan ahead

and it's happened to me quite often

so that's why a lot of times a lot of

front-end work ends up being handling

API requests

it takes a long time dealing with

updates and changes and things like that

and trying to sync with the back end

there's a lot of complexity there and

you shouldn't underestimate

those problems

anyways a little bit of a rant

here we're going to return

I'm going to add a widget wrapper

and in here I'm going to add a flex

between

with a gap of 1.5 REM

and inside here I'm going to say user

image with the image of picture

path

and we're going to have this

self-closing so this is the circle with

the profile user and then we're going to

do input base

and inside actually this should be

self-closing

we're going to have a few properties in

here

so we're going to have a placeholder

with what's

on your mind dot dot

and then on change

we're going to give it a event and we're

going to say set posts should be e dot

Target dot value so this input should be

updating the set post state that we

created and the value should be post

so it's a controlled input and we're

going to do SX

give it some styling so width of 100

takes up the entire width of the parent

component

and then we're going to do background

color

with palette

dot neutral

dot light with a border radius

of 2 REM

and a padding

of one REM to REM

1 REM top bottom 2 REM left right

and then after this Flex between we're

going to have is image so basically if

they click the image they want to add an

image to the Post

this will open up this div so we're

going to give it a box

I'm going to close it give the Box some

properties so I'm going to do grid

column

of span 4.

actually no sorry we don't need a grid

column

we can just say border radius

a 5 pixel

give it a border

of one pixel

solid and give it a medium

color

with a margin top of one REM

padding all around of one REM

inside this box I'm going to give it a

drop zone so another

fun little file dropping area

and what I could do is I can go back to

our form component and we can just

actually just copy the Drop Zone

because a lot of it will kind of be the

same there will be needed some

modifications so I'm going to just paste

that

I'm going to save it so we have it

aligned

this is good

instead of set field value we're going

to change this to set image

oops

set image and I'm going to pass accepted

files 0 in there

and inside here I'm going to put flex

between

and wrap this box around

the Box get root props border

this is all good one REM curse pointer

we want to give this a width of 100

percent

the input is good

instead of edit outline icon it should

just be edit outlined

instead of values.picture we're going to

say image

dot name

instead of values.picture it's going to

be

exclamation image

and then instead of picture it's going

to be add image

so

everything is pretty clean

and then

let me check

So Below this box I'm going to add

an image

and I'm going to add an icon button here

because this time we're going to add a

trash icon if they want to remove

the image

so we're going to do on click

and we're going to do set image null

in SX

of width

15 percent

and we're going to have a delete

outlined

so this will give a trash icon if we put

an image there

and that is our drop zone so we're gonna

have a box we're going to close it

and then from here we're going to have a

little divider and say SX

margin

of 1 0.25 REM 0.

Excel and we're going to close this

and then finally we're going to create

all the icons below

so I'm going to say Flex between

and another Flex

between over here with a gap of zero

point

two five REM

on click

set is image

exclamation is image

so this will turn off

and open the image drop zone

I'm going to put image outlined

with the SX of color colon medium Main

I'm going to have that self-closing

here I'm going to put typography

close that and inside the typography I'm

going to put color of medium Main

SX of

and colon hover

colon with a cursor

of pointer

a color of medium

and in here I'm going to put image

all right after the first closing Flex

between and before the second one

I'm going to add a section where it's if

it's

non-mobile screens because when it gets

small all the icons get smashed together

so we want to be able to address that so

I'm going to put

this to address the situation

and I'm just going to add a

closing tag here so we don't have any

syntax issues for now

we're going to add a flex

between give it a gap of 0.5

0.25 REM

and inside here I'm going to create GIF

box outlined with an SX of color colon

medium Main

I'm going to close it

and then I'm going to say typography

with color

medium

Main

clip

as well

I'm going to copy

and paste

all four of these

so this instead of GIF box I'm going to

do attach file

outlined

I'm going to put attach mint

in here this one's going to be Mike

outlined and we're going to do

audio

I think that's actually it clip

attachment audio okay yeah I added one

too many

so these won't have any functionalities

for the sake of time

but we'll keep going so we're going to

have gap of 0.25 REM and inside here

because

there's not enough space on smaller

screens we're just going to add one icon

and this is going to be more

Horizon

outlined SX

of color

medium Main

and close that

so this will be three dots instead

and once we have that we have one last

thing we want to address is going to be

the button of posting

so the button

will have a value of post

inside it

and by the way this is within Flex

between

and this is going to start with disabled

exclamation post and we're going to say

on click equals handle post

so the handle post

function that we created earlier will

address this situation and then from

here we're going to do SX

pass in color with palettes

dot background dot Alt

with the background color

of palette

dot primary dot Main

order radius

of 3 REM

and with that we have essentially our

my post widget all completed and it's

already placed into the right location

so let's check it out so this is a

completed app

okay so we do have module has no exports

so it seems like

I did not export it again okay

I need to remember to always export

export default my post so I'm going to

refresh it now you can see what's

happening here so let's check

so test

let's add our image

we're going to post it

and everything works so now we don't

have the my posts widget so we have not

placed the posts but we are making an

API call and we're getting the list of

posts as well when we return it so it's

working as expected perfect

next thing we're going to create is

going to be the posts widget and the

singular post widget so we're going to

have the plural version of the widgets

so that's going to have all the posts

and the singular post widget for each

one of these so let's get started so I'm

gonna go into

the widgets folder and we're going to

create posts

file post okay if it would let me type

posts

widget Dot jsx

I'm going to create another file called

post

widget.jsx

so I'm going to have those two open

close all of these and we're going to

start with plural posts

and we're going to start importing so

we're going to import use effect

from react

import use dispatch

and use selector

then I'm going to import set posts from

State

and import post

widget

from dot slash post widget

which is something we'll create and

Export as well

so here I'm going to create our

component posts

widget

equals

user ID

is profile

equals false

so those are the arguments that we have

and just so I don't forget I'm going to

do export default post widget like so

make sure I don't forget that

in here I'm going to do const dispatch

use dispatch so we can use Redux

then we're going to do cons posts and

grab

store

the store list of posts

like so and then grab the token as well

so use selector

and grab the token

all right so we're going to make two

different API calls over here

the reason why we're doing that is

because of this tag is profile so the

post widget

is going to do two things

on the home page it's going to grab all

the user all the posts from anybody

and that's going to be the API call

regarding

if you go down to the routes and you go

to post that's going to be all of these

posts so get feed posts so that's what's

going to happen on the home page

however if you go to the profile page

meaning a specific users page

we're going to call get user posts so

we're going to address both of these

situations

so the first thing we're going to do

we're going to get posts

like so with async

and then we're going to make a API call

it's a const response

equals await fetch

we're going to do HTTP colon localhost

colon 3001 slash post

this will grab all the posts

give it a method of get

and headers with an authorization

colon

of Bearer

and token inside like we did before to

validate the API call

and then we're gonna

make it

usable with response.json

and once we get the response we're going

to get dispatch

we're going to set the posts

value

inside our store

with the data that we got back

so that is going to be our get post

now we're going to copy this entire

thing and we're going to do the same

thing for get user post

but the

URL is going to be slightly different so

after post we're going to do slash

user ID

slash

posts

and this should be a template string

this time

so I know it's a little bit of funky

syntax we have user ID slash posts let's

actually make sure that's correct

so yeah post slash user ID slash post

probably gonna get rid of that but we're

going to keep this for now

you could probably get rid of this like

extra slash post it's kind of redundant

but up to you

so from here we have set post we're

going to do exact same thing afterwards

so in here I'm going to do use effect

I'm going to do if is profile

we're going to make

the get user post API call otherwise

we do the get posts call

which is pretty straightforward

and I'm going to give this an empty

array so it only calls once

so we're going to do eslint disable cool

online

react hooks

exhaustive

depths

get rid of that annoying warning

and under here we're going to return

empty fragment

but all we're going to do is with the

posts that we get we're going to create

a component for each post

so inside of here I'm going to do

parens in the bracket and we're going to

destructure a number of items from each

post so ID user ID first name

last name

description

location

picture path

user picture

path

likes and then comments

and then from here

I'm going to return

our post widget

and we're going to pass in a lot of

different props

so I'm going to copy this entire thing

I'm going to select all the commas with

command d

hit equals

put curly braces and we're going to

write each one individually and also we

need a key as well

so react doesn't give you a warning so

you're just going to pass it as ID

and here I'm going to change this to

post ID

and then we're going to change this to

post

user ID

this should be underscore

this should be user ID

and actually instead of first name last

name we're going to put name

and we're going to pass in

first actually dollar sign curly braces

first name space

last name

we're going to have description

and then

location

picture path

user picture path

likes and then

comments

and that should be all the values that

we're going to use for our post widget

and I made sure the export

so from here I'm going to go to our post

widget now and fill this out so we have

a number of imports here

import chat bubble

outline outlined

and then from here I'm going to import

favorite

border outlined

favorite

outlined so these are icons for liking

and then share outlined

and then from here I'm going to import

number of component

from Material UI

so import box

divider

icon button

typography and then use theme

I'm going to save that then I'm going to

import Flex between

I'm going to import friend

from components slash friend now we have

not created this so actually let's do

that

real quick so I'm going to go to

components create a new file and call

this friend jsx so this will be used in

this component as well as

the friends list component

so

this is going to have a number of items

so we're going to import

let's say import what person

add

outlined

with person remove outlined and actually

just to prevent confusion for you

friend is going to represent these guys

right here so

see these three items right here

this is particularly a friend

component

or action not this but this

since we're reusing these we want this

to be a separate component

so we're going to go back

and fill out our friend component

so here we're going to have import box

from interior UI

icon button typography

and use theme

then we're going to import use dispatch

with use selector

we're going to import set friends

from State we're going to import Flex

between

and import user image

and we're going to have the friend

component and the friend component

that's going to take the friend ID with

name subtitle

and user

picture path

like so

and again I'm going to make sure I

export default friend

inside of here I'm going to do const

palette

use steam to grab the colors cons

dispatch equals use

dispatch I should probably like copy

this at some point because

I keep writing the same thing

so we're going to do navigate equals use

navigate

const

underscore ID

and either use selector

I'm going to pass in state

with state.user

cons token as well

use selector

I'm going to grab the state.tok token

we're going to grab friends

from use selector

so we have not

configured a API call that grabs our

friends yet but once we do

we would be able to grab it here

actually I grabbed it from the users

sorry you don't need an APL code for

that

the user will have friends array

attached

so we can deal with that then we're

going to have

from here

actually let's move this because this is

all the colors

we should make the colors together so it

makes a lot more sense we're going to

see primary light

equals palette

Dot

I'm just going to copy palette to make

it easier so we're going to do primary

dot light

const primary

dark equals palette dot primary dot dark

const main equals palette dot primary

our pilot.neutral DOT Main

same with

medium

medium

and finally we want to check if the user

is a friend

because if it's a friend

we want to show an icon that shows that

they're going to remove the friend

if they're not a friend we want to show

an icon that makes it look like they'll

be able to add the friend so this is why

we have this functionality so what's

what we're going to do is Friends dot

find

we're going to check if the friend

exists

and if the friend ID is equivalent to

the friend ID being passed in from the

parent component

then we can trigger

whether if they're friend or not

and so we're going to create a function

that will make an API call

whether they'll be able to add the

friend or not

so if you take a look

so let me go back to the code

or let me go back to the website if you

take a look

this friend component has

since this person is already my friend

we're showing a minus icon so if I click

it now it shows gonna

the show that we can add this person as

well

so depending on whether they are a

friend or not it'll show a different

icon

so that's why we have this is friend and

that's why we need to create an API call

to make sure we add the friend and

remove the friend

so we're going to give it a response

within the weight of fetch

HTTP colon slash localhost colon 3000

and one

users slash

underscore ID

with friend ID so for that remember for

add removing a friend we need to pass in

both the ID

with the current user and the friend ID

that we want to

add or remove

and here we're going to have a method of

patch

this time with the headers

of authorization

Bearer

of token like we did before

and content type

of application Json

with that API call we're going to do

constata await response.json

and we're going to dispatch set friends

With Friends

and data

so

inside here I'm going to return

I'm going to pass in Flex between

with the flex

between of Gap of one REM

and then with the user image

an image of

user picture

path

and the size of 55 pixel

and inside this we're going to have a

box

and give it some properties so say on

click

and we're going to navigate

to slash profile

slash

friend

ID

now there is a bug

is that when you go to the user and you

go to a certain person's profile page

and then you try to click on someone

else's profile page and try to go to

that user the URL does update with react

router

but the components do not re-render now

there is a workaround to it but it's

very complex but there isn't an easy

work around which I'm not too big of a

fan of but it does the job so basically

it would go to the next users page and

then we'll refresh the page

I'm not too big a fan of solution but

it's a

dirty workaround that we have right now

so I'm not entirely sure what the best

solution is I just didn't want to deal

with having to write a long workaround

to get all the components working

in that

in that particular Edge case so this is

kind of a little bit of a hacky way to

deal with that so

with that in mind

like in real production app you're gonna

have to fix that

um but for something

small project like this I don't want you

to get hung up on fixing little edge

cases like that because that's not too

important unless you're dealing with the

real project

all right so we're going to give this a

typography with the color of main with a

variant

of H5

with a font weight of 500

and the SX

of

and colon hover

colon color of palette

dot primary dot light with a cursor

colon pointer

inside here I'm going to pass in name

and also typography with the color of

medium

a font size

of 0.75 REM

and a subtitle

and below the first flex between closing

tag

we're now going to add the

icon button

of the remove and add of the user

so I'm going to do

on click

I can do

patch friend like so and do SX of

background color

of primary light padding of

0.6 REM

and we're going to say if

it is a friend

we're going to add an icon that says

person

remove outlined give it a SX of color

colon primary dark

make sure that's closing

I'm just gonna

copy this

so I can just paste it over here and

this should be add outline so depending

on their a friend or not we're going to

show a different icon

and then we're going to save it

and it seems like use navigate has not

been imported so I'm going to import

use navigate

use dispatch everything's good make sure

everything is typed in you have no typos

and we're going to save it

and with that we can go back to post

widget

then we can import our friend

that we were working on

and we can continue our Imports so we're

going to import widget wrapper

import use state by the way I know this

part is kind of tenuous we have the

posts

the post widget and the friend component

so the post by the way is probably the

hardest part of the front end there's a

lot of functionality to it a lot of

little things happening so just

understand if you're a little confused

on what's Happening don't worry about it

just trying to

piece it together slowly so we're going

to import use dispatch

and then import use selector

and then we're going to import set post

like so

from here I'm going to create a

component

post widget

and in here I'm going to pass in a lot

of the things that I pass in Prior

so if I go back to posts widget go down

I can essentially just copy this

so I have the same values

the only thing we don't need is going to

be the key

and what I'm going to do is I'm going to

select

I'm going to select all the equal sign

and the opening braces like this

I'm going to

hit command shift right and I'll select

everything from that point to the end

and just hit back

and I'm going to put comma

so that's a neat short way to get rid of

all of that and then I'm going to have

a return like so

and this is where we're going to write

our logic but before that I'm going to

do export default post

widget

and we're going to add a number of State

like we did before

so here

I'm just gonna let's see if this works

so I'm just going to copy everything

over here I'm just going to modify

if I need to

so palette use team use dispatch I don't

need use navigate

so

use selector I grabbed it from the token

I don't need the ID

I don't need a list of friends either

so save me writing some some of the code

so

I'm going to add a state called is

comments set is comments so this is just

going to determine if we open the

comments list

or not so we can keep it as you state

false like this

we have the token then we also need the

const logged

in user ID now I'm being more explicit

because it's very confusing because you

have friend IDs you have the current

user ID you have the poster ID you want

to be more explicit in this case of

which ID represents who so that's why

I'm writing logged in user ID as opposed

to regular user ID

so I'm going to state

and then state DOT user

dot underscore ID

and then from here I'm going to do const

is light so now this part is a little

confusing so I'm going to write Boolean

likes

of logged

and user ID

so if you remember correctly on the back

end we have set

if I go to the models and set to the

user

and I look at

actually sorry post that's what I want

to look at we set the likes to the type

of map and of Boolean

so what this represents is that

we're going to have a likes is going to

be an object that looks like

uh

user ID whatever some some value blah

blah blah user ID

is going to be true

and then user id2

actually let's just do

this

true so this is what it's going to look

like

so if the user ID already exists in this

object

then we can check if they exist to see

if this current user is has liked it or

not

if they haven't liked it

it's not going to show up in this object

so that's why when you do likes

you're passing in the logged in user ID

so the current user ID that's logged in

you're going to check if it exists in

here and that's going to give us a

Boolean from there

they don't exist it's going to be false

so that's how we check if the user

has liked it or not and the reason why

we need that is if you go back

and you can see if I have like this we

need to know and we need to keep track

of if the current user has liked it or

not because if you refresh and you come

back this needs to keep the state of

which

the user has liked it or not

that's why we can't just do

um

we can't just put this as a count like

there's a possibility of storing just

the number of likes in the back end and

you can have whenever the user clicks

this it'll increase the number of likes

but you won't be able to track whether

that particular person has liked it or

not so the user can just continually

like it increase the number

themselves if they continually refresh

the page so you have to handle this on

the back end by keeping track of who

liked it

so this is again another reason why you

need to do data modeling beforehand to

catch situation like this

and then also we're going to get the LA

like count so the number of likes that

this uses that this post has we're going

to grab via object.keys

likes

dot link

so this grabs the number of likes via

how many keys there are

and after that we only need medium

and we just need primary

so palette dot primary

and then dot Main

and then with this

now we can create a function that will

change the number of likes so we're

going to create a function called patch

like

we're going to do async

and we're going to make an API call so

we're going to do response equals await

fetch

HTTP colon slash Local Host colon

3001 posts slash

post ID

slash like

colon I'm going to do method

patch like so

we're going to set a headers

with an authorization

of Bearer like we did before

now since we're always doing the bear we

could have made an abstract wrapper

function so we don't have to constantly

write this

but it's not too much extra code so I'm

going to do a content type

application flash Json

and we're going to do body Json Dot

stringify

and we're passing in the user ID

so the back end could keep track

of whether the current user ID

has liked the post

and what this response is what we

configured it was to return the updated

post so we

are just returning the entire post

I spelled this wrong so it's

giving me some funky results so

response.json

will give us the updated post from the

back end

so then that means we can just update

the post

instead

so that's why if you go to state

if you remember correctly

I'm going to go through the list of the

post to try to find the post

that we just updated

and if so we're just going to replace it

and this is basically replacing

that single post otherwise we just

return the original post if we did not

find it

and so if I go back to post widget

we have our patch like function now we

can write our jsx

so in here I'm going to do widget

wrapper

with a margin of 2 REM

top and bottom and zero left and right

and in here I'm going to create the

friend component so this is why we

created it

so now we're actually creating the

component of post widget but we just

need to pass in the correct things

so friend ID is going to be the post

user ID so the ID of the user who posted

it

then we're going to do name

pass in their name with the subtitle

in this case being the location

and the user picture path being

the same user picture path

so

we're going to have a typography with a

color

of Main

SX

margin top of one REM

and pass in a description

from here I'm going to do picture

path

and pass in in image

and this image is going to have a width

of 100 percent

height of Auto

alt of post

Style

of Border radius

0.75 REM

margin top

0.75 REM

and we're going to give it a source of

HTTP colon slash localhost colon

3001 assets slash picture

path

so this will be the post path or post a

picture

that we're creating right here

and then from here we're going to create

Flex between

the margin top of 0.25 REM

sure to close that

and I don't know why

it didn't automatically close it for me

and then Flex between

give it a gap of one REM

close it

and then one more Flex between so

there's three

and this one has a gap of 0.3 REM

and we're going to pass in icon button

on click

patch like

and in here is going to be is liked

with

favorite outlined SX

of color

primary

and we're going to make sure it's a

closing tag

colon and I'm going to do

favorite

border outlined

so this is determining the icon button

whether someone has liked it or not

and below this icon button I'm going to

do a typography

of like count so that the displays how

many likes there are

okay so after

the following Flex between

so I just want to be careful I don't

mess this up so there's two Closing one

closing above

in here we're going to create another

Flex between

with a gap of 0.3 REM

and actually I can just probably

just copy this

and I'm just going to remove everything

inside

and on click we're going to remove the

patch like to be set is comments

and we're going to revert is comments so

it'll open the comment section

and remove it

and we're going to have chat bubble

outline outlined like so

inside here we're going to do typography

with comments dot length

so that determines the number of

comments as well

all right so

we have to be very careful to figure out

where to place it

so this

this is the liked

then this is the comment section

and then from here below

this Flex between so there's two closing

Flex betweens

we're going to have

an icon button

with share outlined

like so

and then this one should be closed

let me double check

and then we should have below this Flex

between we're going to do is comments

so just make sure we aligned a lot of

these Flex betweens it's nice but you

see there's just it's hard to figure out

where the lines

so this is where we're going to display

the actual comments

so we're gonna have a box

with a margin top of 0.5 REM

and I'm going to iterate through our

comment section there is a comments.map

pass it in a comment

with an index

and in here I'm going to return

I'm going to return a box

and close the box like that

and give it a key

with

a name

Dash

I

so that will give it a unique

index the reason why I have

the I which is one two three we pass in

the name as well the reason why we do

that is to make this unique this is

index 0 1 2 might not be actually unique

so you need to keep that

you need to add something to make it

truly unique

okay so we have a divider we're going to

do typography

SX

pass in color colon Main

margin

of 0.5 REM 0

padding left of one REM

ake sure we close it

and inside here I'm going to pass in

comment

and it seems like we have everything

aligned properly and then there's

actually

one more divider right below it as well

we are exporting

we have the post widget over here

we have the friend widget

and now we can check go back to home

page and we want to add

the widgets over here

so my post widget

we should have the posts widget

underneath

passing in the user ID

underscore ID

so

cool and let's let's double check Maybe

favorite border outlined is not defined

so if I go back to post

widget

forward outlined

that should be actually let me double

check

there we go

favorite border outlined okay

everything's imported

ah perfect let me double check

everything so we have a like

okay it does not seem to update the

likes so let's fix that comments is

working let's see if we can add a friend

and

it does seem to add it perfect we don't

have the friends list yet we'll get to

that

the only thing that's not working is the

like button so let's go and take care of

that

after looking through I figured out what

the problem with the like is if you go

back I had a little bit of a typo if you

go to the index State Post underscore ID

so you want to put a dot over here

make sure you have that dot

let's save it and now

I'm going to refresh it

let's go back

everything should work as expected

great we have the comments we have add

friends remove friends

our post sections is now complete post

section was probably the the hardest

part because there's adding removing and

adding likes grooming removing likes

it's quite tough it might not look as if

it's a hard issue but it can be quite

challenging

all right and the last two widgets that

we need to take care of is going to be

this advertisement widget and the

friends list widget these two should not

be as involved as the other two so we're

just going to handle those so I'm going

to close everything

I'm going to just close a lot of these

folders so

we can focus on the right things so

under widgets I'm going to create a new

file called advert widget.jsx

close this I'm going to import

typography

use theme as well

and I'm going to import Flex between

and then import widget wrapper

now I'm going to create the advert

widget

so

make sure I export

default advert widget

and from here I'm going to do const

palette

equals use theme

and we're just going to grab some colors

so we're going to grab the dark so

palette

dot neutral dot dark I'm going to copy

palette dot neutral like so const main

equals that

main as well

const medium with palette dot neutral

medium

and we're going to return

widget wrapper

and I'm just going to do Flex between

with typography

color

of dark

variant

of H5

font weight

of 500.

I'm going to write sponsored

and below this I'm going to do

typography with the color of medium

and we're going to write create add

and below this Flex between I'm going to

do image

with

of a hundred percent

height of Auto

alt of advert

source of HTTP colon slash localhost

colon 3001 assets

I'm going to just do info

4.jpg so this is just a hard-coded

image we're not going to actually

Implement an advertisement here

so

we're just going to have border radius

of zero point

seven five REM

margin

of 0.75 REM top bottom

zero left and right

then we're going to do Flex between

and we're going to do typography

with a color

of Main

we're going to say Mika cosmetics

and don't go looking for it because

I just made that up I don't know if it's

a real thing

it is real then maybe you can go check

out

check out their products not not a

sponsorship so Mika

cosmetics

.com

and below this Flex between we're going

to do typography

with a color

of medium

margin of 0.5 REM top and bottom with

the zero left and right and I'm just

going to write

random text so your pathway to stunning

and immaculate

Beauty

and made sure your skin

is exfoliating

skin and Shining

like light

and that's pretty much our average

widget so we're just going to go to our

home page

go to our index file

we're going to go under

this Flex basis and I'm just going to

add

the advert

widget

so nice and simple it does not take

anything inside so that's all we need to

do

and also I'm going to create a little

box with a margin of two REM top and

bottom and zero left and right so this

is just going to get some space in there

and we're going to create the friends

list widget now

so friend list widget

Dot jsx

I'm going to close this close the advert

and in here I'm going to do some imports

so import box

to your UI

typography use theme

we're going to import a friend

from component front import widget

wrapper

import use effect

import use dispatch

and use selector

I'm going to import set friends

from here I'm going to create a

component called friend list widget

with user ID

and I'm going to make sure I export this

friend

list widget

and in here I'm going to go over to

let's see what's the most

similar

yeah I'm going to go to the friend

component I'm just going to copy this

see if this works out

we're going to have dispatch

and instead of navigate we're going to

do theme

use theme

we don't need the ID but we can keep the

other two

just trying to find ways to shorten

writing

some of this

so we're using the same thing over and

over

and from here I'm going to create a

function called get friends so we can

get a list of the users friends

we're going to do response

a weight fetch

and the reason why we can't just grab it

from the user list of friends we're

going to be using this friends list

widget if you click on someone else's

profile so this will grab the list of

users

before that specific user ID

so we need to make sure we're handling

not just the current user but also other

users as well so HTTP colon slash

localhost colon 3001 users slash

user ID friends

and in here I'm going to do method colon

get

with headers

of

authorization colon

Bearer

token

the const data of a weight response dot

Json

and we're going to dispatch set friends

With Friends of data

so we're setting our data or setting our

friends list

in our state

and we're going to make sure we got to

call this so we're going to do use

effect

so get friends

and in here this should be empty array

and we're going to do es lint

disable

oops disable line react hooks exhaustive

and in here we're going to return

a widget

wrapper

the typography

with a friend list

and inside the typography we're going to

give it some

properties so we're going to color

palette

the neutral

dot dark

with a variant of H5 font weight

of 500 SX

of margin bottom 1.5 REM

and inside here we're going to do box

give this a display

of flex but the flux Direction

will be column so go up and down instead

and we're going to give it a gap of 1.5

REM

and what I want to do is I'm going to

map out friends

and for each friend

I'm going to use the friend component

actually let me

fix the syntax over here

I'm going to do friend

and I'm going to pass in

key a friend dot underscore ID

friend ID

friend dot underscore ID with a name

of friend DOT first name

friend dot last name

give it a sub title

a friend.aku

patient

user picture path

with

friend.picture path

and that

should conclude our friends list widget

we can go back to index.jsx and we're

going to pass in the friend

list

widget

close it but we're also going to add

the user ID property

underscore ID

and with that

hopefully

you can see our friends list perfect

we can remove it we can add them

go down add a random person we have our

friend list we have our ad all working

light and dark mode

everything is working as expected

now the only thing left is going to be

the profile page

now in our completed application if we

take a look we go to Steve Ralph's page

we can see most of everything is going

to be all widgets that we've already

created and that's the whole purpose of

react you can use reusable components

and we can reuse them for different

purposes so here I have this user widget

I have the friend list widget the my

post widget

and the post widget right here

so we can use pretty much everything we

can go to another person we can have

their posts we can see everyone else's

post as well we can like

we can see the comments

things like that

so everything is all set up we just need

to set the layout but we can reuse a lot

of the same components so let's actually

get to it

so if we go to scenes we're going to go

to profile page we've already create

created the layout all we have to do is

set this up so we're going to import a

number of items so we're going to import

box

use media

query

and close this close this close this

I'm going to import use effect

with use state

and then import use selector

react Redux

import use params

we're going to import navbar

because we need the nav bar again import

friend list widget

import my post widget

import

s

plural widget

import user widget

and then from here I'm going to do const

user

set user so in this case we need to set

the user specific to this page so we're

going to keep it as local state

and we're going to grab the user ID

from the URL

so if you have noticed so I'm going to

go back

I've noticed the user ID if I click on

this

I get a profile ID

right here and we've set that before

when we navigate to someone else's page

we are able to get this information and

use that as our user ID

so with that we also are going to get

the token as well because we're going to

make an API call

State and we're going to do state DOT

token

and we're going to do is non-mobile

screens we're going to grab use media

query

and we're going to pass in Min width of

a thousand pixel

and I'm going to call a function called

get user

so we're just going to get the user

information

for this page so we're going to do a

const response equals await fetch

HTTP colon slash localhost

3001 users slash

user ID we've already made this type of

API call V4

so we're just going to repeat that again

the method of get we're going to do

headers again

with

authorization

of Bearer

token

Dot

and then we're gonna

format the response that we get with

response dot Json

and we're going to set the user as the

data

and finally we're going to make the API

call using use effect

get user

passing an empty array

and disabling

the linting

react hooks

exhaustive

and also again if the user

does not exist we're going to return

null so we don't get any errors

inside of our GSX I'm going to add box

component

I'm going to add a nav bar

and actually what we can do is go back

to the home page

let me just copy some of this and we're

just going to modify it it's not exactly

going to be that similar but

some of it will be similar so we're

going to have two REM six percent Flex

blocks

this time we're going to have a gap of 2

REM

justify content of Center because now we

want it to be Center

uh

Center location

so this is going to be 26 percent we're

going to have 42 percent we're not going

to have a separate

third column

in here

Flex bases we're going to have a user

widget we're also going to have a box

a margin of 2 REM 0 let's write I'm also

going to have a friend

friendless widget of user ID equals user

ID

like so

this should be pretty good and similar

my post widget should be there except

this should be user dot picture path

then we're going to have

posts widget which should be pretty

identical

we're just going to set this as user ID

and we're just going to say this time is

is profile so we're just grabbing this

person's user

and then from there I'm going to create

copy this box so we just have a little

margin right there

and with that

we should be able to get the same output

as here on our completed app

but not without some errors that we have

to handle so ID is underscore ID is not

defined

okay so if I look over here this

is not correct because it's not defined

but also what's the next error picture

path is not defined so if I go over here

this would be user dot picture path

and I think

that should cover all of it

so if I go here click on Steve Ralph

and I can see this is working as

expected we have friends we have all our

friends we can go back and go to the

main page we can go to someone else's

profile same with this

everything is working as expected

perfect

and with that that is everything in our

application this was quite the complete

package we have done everything from

back in to front end using mirn setting

up our databases setting up

authentication with JWT tokens we have

set up the front end with responsive

layouts

we have responsive layouts

on smaller screens full screens things

like that we also have light and dark

mode we can add friends remove friends

we can like a user's post dislike them

we have also the comments list we have

information all coming from the back end

so we're not using actual fake data that

we're actually using real data that we

are putting into the database we

even have a page where you can go for

persons users or a person's profile page

and grab all the information that they

have and see what they have there we can

even create our own posts as well and we

can register a new user logging in with

validation we have done everything from

complete scratch I'm very glad that you

are able to get through this entire

application it's not easy to do all of

this work this is a lot of information

and hard it's a hard project because it

is doing everything this is complete

from back end to front end see how they

connect see how they work together so

you have done a great job getting up to

this point now if you have any questions

about this project you can write a

comment below see if there's anything

you like and tell me if there's anything

you want me to build for next time but

also please if you do make sure to like

comment and subscribe if you like this

content so I can see you next time with

the project that you want to see next