0:00

5:50:47

Build and Deploy a Full Stack Social Media App | React JS, Appwrite, Tailwind CSS, React Query

JavaScript Mastery·5:50:47·Technology·B2

Chương · 8

Chương 1·Introduction and Project Overview

Hiển thị

Auto-scroll

0:00

this is not your typical Instagram clone we're bringing you a modern social app with stunning UI with a native mobile feel a special text stack an infinite scroll feature and amazing performance have you ever struggled with complicated server setups worrying about security handling user off scaling managing and storing files securely and optimizing API performance without losing countless

0:28

development hours if that is the case Cas you're not alone and I've got something that can help whether you're a new or a season developer thinking of starting a fresh side project doing all these things on your own can be quite a hassle so hi there and welcome to a new project video where you'll build and deploy an amazing social site with a hassle-free backend thanks to aight

0:54

Cloud it allows you to create a backend faster than Thanos snaps his fingers and at a much lower cost than scary Firebase for pro plans you'll get what you would otherwise have to pay in Firebase for free with aite but what are we building the app you'll build contains a robust and stunning authentication system a homepage for exploring posts shared by others with top creators featured on the

1:20

right the ability to like and save posts accessible through a separate dedicated page and you might think here we go again another Instagram clone but trust me this is not your typical app sure you've probably mastered the basics of crowd operations but have you ever had a chance to implement that one incredible feature that's had us all hooked for decades yes the infinite scroll we'll

1:48

implement it inside the explore page integrate it together with the sech functionality and I will teach you how to do the same for all other Pages too and moving to other phenomenal features will develop a detailed post page that also displays related posts a profile page showcasing your liked posts and the ability to edit your profile similarly browsing other users and their profiles

2:15

a create post page for sharing all kinds of memories you would like to share with effortless file management and storage and a drag and drop feature an edit post page to edit the contents of your post anytime and so much more with an amazing responsive UI with the Bottom bar that surely gives the feel of a native mobile app does it sound exciting as it does to

2:39

me we'll develop all of these all well learning react context API complex react routing with outlet and conditional rendering we'll use the latest version 5.0 of the backand agnostic data fetching Library famously known as react query now t stack query that will allow us to implement autoc caching ref fetching parallel queries a first class mutations loading State

3:10

Management and more then you'll also learn Tailwind shaten ight Cloud as a backend as a service tool and everyone's favorite typescript there is a lot to learn so I hope you're pumped to learn these exciting features and master the Most Wanted skills to impress potential employees ERS and clients with that said before we dive into the development of this app there's one more thing that we

3:37

must do and that is set up an account on aight Cloud so right now click the special link in the description that's going to allow you to follow along with this video and create a phenomenal backend with an aight Cloud once you click it their homepage is going to open and then you can go to sign up once you're in you can sign in or sign up the simplest way to do it is using GitHub

4:01

once you're in you'll have to create your first project use JSM to start with and then add an underscore and add your app name I'm going to choose snapgram but you can choose anything else maybe something with just a bit more imagination and then click create project and we are in operate cloud is going to allow us to create robust secure and scalable backend applications

4:26

it provides sdks and server functions that you can integrate with any kind of framework some of the best features they offer and at the same time the features we'll use to create this project are o where you'll be able to add specific team-based and permission-based security they offer o options from email and password to Magic URLs and more than 30 social sign-ins

4:51

the next thing we'll use in our project are going to be databases you can add more than one database for a specific project in the process of creating it is super simple then you can of course add many different Collections and the best thing is each collection has its own attributes which can be of a lot of different types and you have advanced permissions on a collection level the

5:15

next feature I'll also teach you how to use is storage it allows us to quickly create buckets of different files where we can store any kind of images and even export them and transform them to reduce file sizes and finally there are cloud-based serverless functions and the best thing about aite is that it offers all of these features for free setting it apart from traditional backend

5:40

diservice Tools in terms of pricing and value and because of that it's no surprise that aide has become a trending project on GitHub so now that you're set up with aide and hopefully excited for what we're are about to build together let's Dive Right In to get started with developing our phenomenal in Instagram clone application we can start by creating a new empty folder on our

6:04

desktop and let's call it snapgram once you created it you can simply drag and drop it into your code editor of choice in this case Visual Studio code once you're there you can go to the top go to view and then terminal this is going to open up a built-in integrated Visual Studio code terminal lately we've been doing a lot of next year yes so I'm quite excited to

6:31

get back to react a bit we're going to use vit which is the fastest way to set up our development environment for react so head to VJs dodev and click get started once you're here you can scroll down a bit and you can see that you can initialize your V application by running mpm create V at latest so paste that Command right here add a slash to create it in the current snapgram repository

6:58

we're in and press enter this is going to ask you whether you want to install the create feed package to which you're going to say why or yes and then you can choose which type of application you want to run in this case we're going to choose react we will use typescript so you can press enter and that's it you can run mpm install to install all the necessary dependencies and then mpm runev to see

7:23

it in our browser the installation usually takes just a couple of seconds so let's wait for it and then we'll be able to run the app once it is done press mpm run Dev this is going to spin up our application on Local Host 5173 and you can see it took less than a second to spin it up so hold control and then click right here to open it up once you do that you'll see a simple V and

7:49

react starter this means that we are ready to get started with creating the base file and folder structure of our application so let's start from beginning here we have our source inside of which our entire application will be here we have assets which we can move to the public folder just to clean up what we have in the source we're going to have a couple of different CSS files but

8:13

for now I want you to delete everything that's inside of the source as a matter of fact let's delete the entire Source itself because we're going to recreate it immediately after so create a new source folder so we can start from scratch and the main point of cont we need here is a file called main. TSX this is the starting point of our application where we can import react

8:40

from react and the only file where we're going to import react Dom from react Dom as well once you've imported it you can say react dom. create root this is the root or the starting point of our application so we have to Target our root by saying document. getet element by ID and we pass a string of root and then you say. render and inside of here we can render a self-closing app

9:10

component of course this app has to be created and imported from somewhere so let's create a new app. TSX page this is going to be our primary router component so inside of there run ra Ace this is a shortcut to create a react Arrow function component if this didn't work for you might not have the necessary extension to do so head to extensions and type es7 plus react Redux react native Snippets

9:41

install this package and then you'll be able to run that command as well with that said we can now import this app within the main so let's simply doubleclick this app and press control or command space that's going to open this up which is going to allow you to just click it and Auto Import we're going to use this functionality many times throughout this video so you'll

10:03

get used to it one thing that I noticed is that create root doesn't exist in react Dom and that's because react Dom has to be imported from react-dom SL client and then here this is potentially null so we have to also add an exclamation mark at the end so typescript doesn't complain and no longer are react Imports necessary so with that we have our main and we have

10:28

our app these are the starting points of our application if you go back and zoom in really closely you can see our div that says app now I know that this is a pretty simple start and you might already know how to set all of this up but let me just remind you that what you're about to build today is extraordinary it's not something you've built so far we're going to use the best

10:51

Technologies today to create a complete comprehensive Instagram clone with liking saving top creators functionalities and much more so just keep watching and step by step we'll get there and you'll know how to create this application from scratch now that we have the app we also have to have some basic styles for that we're going to create a new file called global. CSS keep in mind that all the

11:19

Tailwind styling that we'll be doing through this video will be done by you directly within components but we have to have some helper classes here to make her life a bit easier so in the description down below you can find a GitHub gist that contains a global stat CSS file copy it and paste it here you're going to notice that here we have some helper functions for the top bar

11:42

for postcard image and so on which apply multiple Tailwind CSS classes so if at any point you want to see what a grid container is it's simply a set of utility classes to make that grid container possible so with that said we can import the global. CSS right within the app by saying import. global. CSS but hey this global.

12:07

CSS file is using Tailwind so let's go ahead and let's set up tailwind and if you haven't heard of Tailwind is a phenomenal utility first CSS framework pack with utility classes to make our styling simpler it doesn't impose rules like UI libraries do but rather it allows you to create custom Styles much more quickly so let's click get started and let's install Tailwind

12:33

CSS but we can also search for V this is going to tell us how to install Tailwind with vit we first have to run mpm install DD Tailwind CSS post CSS and auto prefixer so back in our app you can go to terminal and let's go ahead and open up a new terminal window and within here simply paste it and press enter this is going to install the necessary packages for us to be able to style

13:00

using Tailwind once that is done you can also copy and paste the next command MPX Tailwind CSS in it- P this is going to initialize and create the necessary projects such as the Tailwind config JS next you have to configure your template paths so simply copy the content from here and go to Tailwind doc config.js once you're there simply modify this content to what we copied

13:27

from the documentation finally add tailing directives to your CSS that's going to be within the globals and we have already done that with our Global CSS finally run mpm run Dev and then you can style your hello world with a couple of classes to see if it works so back in our app we can now modify the app to say hello snapgram let's save it and back in our app we can see that this is now on H1

13:58

but the styles don't seem to be applied if they were getting applied we would be able to see the underline so to make it work there are a couple of things we need to do alongside the globals we also have to modify the Tailwind doc config.js to include some additional theming options for our great application so in the description down below you'll be able to find a modified

14:21

Tailwind doc config.js file which you can simply copy and then paste right here it's going to include some font families can use widths screen sizes but more importantly colors so every time we want to specify this dark color we don't have to say 0909 08 we simply say dark 2 and the second thing we have to do to make it work is if you notice here we're importing something known as Tailwind

14:48

CSS animate so copy that go to your terminal and then you have to run mpm install dasd and then Tailwind CSS animate this is that extra plug-in that's going to allow us to play with just a bit more animations it quickly got installed you can go back to your application press contrl C to stop it from running and finally rerun the application by running mpm run Dev and quickly our application is up

15:18

and running on Local Host 5173 and we can see that this H1 is indeed underlined which means that the Tailwind styles are getting properly installed and we can also see the dark background which means that our base styles are getting properly applied and in a nutshell that means that Tailwind has been properly set up so what should we do next well let's set up the base

15:41

routing of our application by creating a couple of routes and there for a couple of pages and in react to do the routing you have to install an additional package by running mpm install react router Dom the only package you need to manage the routes once it is in installed we can head to the main. TSX file here you can import something known as a browser router coming from

16:09

react-router-dom and then we can wrap our application in a browser router just like so there we go the app is going to go within it this means that now the browser router is going to control the routing for our entire application which may makes our ab. DSX that much more powerful because now within here we can import routes as well as a route from react router Dom once you do that you

16:43

can wrap everything in a main section we'll be using HTML 5 semantic tags all across the video you can also give it a class name equal to flex and h- Screen meaning it's going to take 100% of the screen now you can see how I quickly hovered over it and I can see exactly what CSS properties have been applied this is a pretty cool extension for Tailwind so if you don't have it already

17:10

just type Tailwind CSS intellisense the first extension that pops up install it and if you're not a fan of Tailwind you can still follow along but you'll know exactly which properties are getting applied for the ones that don't get this hover you can simply search them here here and then you'll be able to find them within global. CSS with that said we can wrap everything in a routes

17:37

parent within the routes we'll be able to Define two types of routes public routes and also private routes public routes are the routes that everybody will be able to see the sign up and the sign in and private routes are the routes that you'll be able to see only if you're signed in so let's create our two first routes let's do a route which is going to be a self-closing

18:05

component that's going to have a pth of SL sign in and it's going to render an element of sign in form it's going to be a self-closing element now of course this is a page or a component which we have to import inside of here and we can also repeat this with our first private route so we can say route self close it give it an index this means that this is the starting page and then the element is

18:39

going to be a home component so we can put a self-closing home component right here now of course we have to import these components from somewhere so let's create the structure needed to do so in the source folder we're going to create two new folders one is going to be called _ o and the other is going to be called underscore root these are two folders that are going to make it

19:06

simpler for us to know what is public and what is not within oth we're going to create a new folder called forms and within forms we're going to have our signin form. TSX where we can run rafc this is going to create a simple signin form component Within forms we can also create another one which is going to be signup form. TSX we can also run RFC and outside of forms but inside of

19:40

underscore o we want to create a layout o layout. TSX and there we can run our efce as well this layout is going to wrap both of our signin and sign up forms it's going to have things like the logo as well as this wonderful image gallery that appears on the right side and then the forms will change depending on the URL how cool is that that's why we have this generic layout

20:09

but then components are going to be the ones that change the form and we're going to have a similar thing for our root within the root we're going to have a folder called Pages within Pages we're of course going to have our home.

20:23

DSX where we can run rafc but outside of pages we're going to have our underscore root that's going to contain a root layout. TSX or we can also run RFC and of course the layout for the homepages is going to contain things like this sidebar on the left sidebar on the right and more now within root Pages we're going to have many different pages I mean tens of pages by

20:49

when we're done with this application so we don't want to Simply import each one in a new line so we can create a new index.ts file which is going to allow us to import them in a cleaner way but first we have to export each component we have so we can say export default as home from slome and now we can close all of these new open files go back to the app we can automatically import signin form

21:20

fromo forms signin form and import home from root Pages while we're here we can duplicate our signin routee and simply exchange it for sign up and here we can say sign up form which we can also import from o forms now notice how for the O forms it imported them as default Imports whereas for the home it imported it as the named import which is going to allow us to later on import page one

21:52

page two and all the other Pages within a single line to keep our code more tidy great so now we have the base structure and you know how the routing is going to work but there's one missing piece we haven't utilized our layouts and the react router Dom allows us to do so easily you can create a new route just like the routes you created before but this time it's not going to be self-

22:17

closing it's going to accept an element which is going to be the O layout we created which you can automatically import from o layout and then with in it we can place additional elements or pages that are going to appear there how clever is that it allows you to use the layout but then immediately place the pages using that layout within so we can repeat the same procedure with our

22:43

private routes as well where we're going to have a route and there we're going to have an element of root layout of course it has to be defined as a self-closing component and then we can place all of the home routes right here great so now you can see we have a lot of imports already but we have done a great job in setting up our path for Success so now going back to Local Host

23:13

5173 the only thing we can see is the root layout but soon enough you'll be able to see much more than that so how would you feel if I told you we're going to start with this completely custom and stunning sign up and sign in script screen after all for our social media app to work we first have to onboard our users that are later on going to upload their posts most likely it's going to be

23:39

cat photos as it usually is on the internet but that's up to them it's up to us to allow them to do so on a beautifully designed and fast platform so let's jump into the signup form the first thing that our user will see our signup form will be just that a form and in this application we'll be using Shad CN styling Library it is a library of beautifully designed components that you can

24:10

customize using Tailwind everything from dashboards cards tasks playgrounds and of course forms you'll be able to create wonderful but also simple and minimalistic forms everything you need is there so to get started with chat CN we can head through their documentation and then installation in this case we're using vit we already set up the project and we already initialized Tailwind next we

24:42

have to modify our TS config.js by adding this thing in paths so we can open up our file explorer and then go to TSC config.js so press copy right here go to your file explorer and then go to TS config.js right here below linting we're going to add a Shad CN note and we can paste the base URL as well as pads but don't forget to add a comma right here next you have to install types

25:16

node so that the V config can resolve paths without errors for that we can open up terminal paste it and press enter once installed we can also copy our paths and then go to V.C config.txt in it let's press y to install it and then we'll have to answer a couple of questions we would like to use typescript yes we would like a default style yes we're going to use the Slate

26:02

Coler our Global CSS file is within Source SLG global. CSS so we have to modify that we do want to use CSS variables our Tailwind config JS file is located right here so we can simply press enter and we can press enter for the import alas as well for utils 2 and we do want to use use react server components and we can write a configuration so simply yes yes enter enter and then y to

26:35

submit it this is going to install the necessary dependencies and then we'll be able to start using shaten components that's it this was the last step right here now a big difference between shaten and other UI libraries is that shaten with this config didn't add absolutely any code to our project it will only add the code and the component components that we actually need so we'll have to

27:00

manually add every single component we want to use so let's use their button example to start with copy this command paste it in the terminal and press enter it's going to say installing button and if you pay close attention you'll be able to notice that it's going to create a complete new folder called components UI and there's going to be the code for the button that's why shaten is so cool

27:26

it doesn't add any code you don't need need it simply adds a button component we just installed and you can modify its source code it's not like we'll need to do that but you can if you want to so with that said now we have everything set up and let's try to use that button within our signup form the only thing you need to do to do that is import button from component UI button and then

27:50

use it so back in our app let's do just that import button we're going to copy this button and just use it right here within this div let's press save and back in our application if you go to for slash sign-up which is the route for our signup page you can see the O layout that's correct and the reason for that is that our o layout it's not returning any pages that are within it so to be able

28:20

to see this button let's first focus on implementing the O layout the only thing we'll need in here are two special components from react router Dom so let's import a component called Outlet interesting name I'm going to soon let you know what it does and then navigate and we can import that from react router Dom now later on we'll have to figure out if a user is authenticated so for

28:48

now we can simply say is authenticated is equal to let's do fals for now later on this is going to be a dynamic value based off this Boolean variable we can return a react fragment but then we can open a new Dynamic block of code and say if is authenticated in that case if we are authenticated we can return a navigate to forward slash so we want to navigate the user to the home but if we're not

29:23

authenticated in that case we can return a react fragment like this that's going to have a section within it and that section is going to render the outlet meaning what has to be on the page we're on such as sign up or sign in whatever is Within These pages right here great so now let's save this go back to our app and you can see a wonderful click me button great now let's go back to the normal

29:56

size and let's actually start implementing what we can see here on the finished website a complete sign up and sign-in pages with the design and the forms to do that we can first style the layout a bit by giving this section A Class name equal to flex D1 justify Dash Center so we need to ensure that the form is centered horizontally as well as items Das Center which is going to

30:28

center it vertically it's going to be one below another so flex-all and padding y of 10 meaning padding on top and bottom this is going to now Center it but on the right side of the screen we want to show this beautiful image so to do that we can render a self-closing image tag that's going to have a source off and now how are we going to get access to this image I created a few

30:54

wonderful assets that I want you to be able to use so down in the description in that same GitHub gist folder where the code is you'll be able to find a link to a zipped public folder download it unzip it delete the existing public folder and then simply paste the new one right here not within the source like I did it happens you have to put it right here outside of everything so it

31:21

appears on top of the source folder and once you have it there you'll be able to see the assets that contain icons and images which means that we can Define our path right here it's going to be for/ assets slash images slide-img do SVG the alt is going to be logo and class name is going to be hidden so usually on mobile devices it will be hidden but on extra large

31:52

devices it will be showing so it's a block we wanted to take the full height of the screen so h- screen the width is going to be 1/2 so 1/ two it's going to be object cover and BG no repeat great so now that we have modified our o layout we can close it and if we go back to our website it's going to look like this pretty cool right we have the right side which is the image and then we have

32:20

the button on the left side which right now doesn't do absolutely anything but soon enough it will that's because we'll create a comprehensive sign up and sign-in form and we'll do that using shaten most comprehensive and most complex component and that is the form so go here and search for the form it is the most comprehensive one because forms are tricky they're one of the most

32:49

common things you'll build in web applications but also one of the most complex so that's why shaten automatically out of the bot uses react hook form which is a great library for managing forms and states and then Zod which is great for form validation here we can learn a bit more about the anatomy of a form so you have a form component and then you have form Fields

33:12

within it each form field has a control a name and then you can choose how it's going to look like it's going to render an item a label form control description and a message and here we have a complete form example so let's go ahead and follow the steps to create our form first we need to copy the command to install it so we can go back go to our second terminal and paste the command to

33:40

add the form soon enough it will be done and then we can actually use it so first we have to define the shape of our form by using a Zod schema of course you can learn more about Zod in the official Zod documentation but don't worry it's a pretty simple IDE library to use and I'm going to teach you how to use it so let's copy import everything as Z from Zod and then const form schema we can

34:07

paste that right here at the top we can put this import on top as it is external import and we're going to put this right here because it is coming right here from our code and this form schema is going to go right here within our component the next thing they say we have to do is Define a form by using the use form hook coming from the react hook form Library so let's go ahead and

34:32

import Zod resolver as well as Z from Zod as well as the form schema which in this case can be placed above the component but then we'll also need to import the form and everything else that is in here so instead of copying everything let's copy just the things that we need first I'm going to copy the Zod resolver paste it right here at the top and then I'm going to

34:54

copy the entire form right here or rather just the definition of a form and we can paste it right here on top and the form schema can go outside right here so now we're defining our form we're also using the form and this has to be imported from react hook form the use form right here but now that we have defined it we can actually build out our form so we need to import all of the

35:21

different components that go into building a form which we can paste right here on top and you can notice that one of these is an input which is another component we have to install because if you check the component so far you can notice the form label and button but no input so to install the input you know what we need to do just say MPX CH C Nui latest add input it is as simple as that we can

35:48

also put all of these components in one line so it's easier to see everything just like so and then we can actually build out our form by copying the form right here and let's paste it instead of this button we can indent it properly and save it and that's it you now have a fully accessible form that is type safe with client side validation and let's see if it actually looks like this and

36:17

would you look at that it looks amazing but it's only one input and one button but the validation is working wonderfully and chatan has this beautiful button minimalistic UI so now let's convert this into this and make it fully functional to do that we won't simply keep everything in a single file as that would quickly clutter our view and wouldn't be so reusable so we're

36:42

going to use many reusable practices to turn this into a component that we can then reuse and manage its data more efficiently and the first step we'll do to achieve that is we're going to extract this form schema into a separate vol validations file so let's go ahead and go to file explorer collapse everything and go within Source within lib and then right here create a new folder called

37:10

validation within it we can create a new index.ts file and within index we can do something similar to what we have done in the signup form we can import everything as Z from Zod and then we can create Define a form schema so right here let's define it but in this file we're going to keep many different form schemas so we have to Define which one is it this is going to

37:38

be a signup validation schema and we're not going to Define it in this file and then not use it we have to say export const sign up validation to be able to use it so now we can go back to our signup form and we can import form schema or rather we can rename it to signup validation coming from atli SLV validation and we can use it in three places where we used it before and

38:08

in this case we also need a z from Zod as we're referencing it right here as a type great so now we have just extracted one thing but instead of Simply extracting That Base example we had let's actually make it a bit more meaningful we're not just going to have a username we're going to have a name as well so let's define it at the top let's say name is going to be a z.

38:34

string with a minimum of two characters and then as the second parameter of a specific option you can provide the error message so in this case we can say a message is something like to short there we go and then you can continue doing that we have the username username is going to also be a minimum of two characters we don't need a maximum here and we can also provide a

39:02

message of something like too short then we can have an email which is going to be a z. string. email like so and then we can have a password which is going to be z.

39:15

string and it's going to be a men of eight characters and we're going to say to short if it's less than eight of course feel free to provide more meaningful error messages something like password must be at least eight characters you can do that for all the other ones now we have our proper signup validation but as you can notice we're using it here but as for the default

39:41

values we're simply defining the username so let's also add a name at the start equal to an empty string let's also do a username after that we're going to have an email and finally we're going to have a password so now we're starting to create the structure for what our form is yet to become and of course the next thing we have to do is actually create our form with all of the necessary form

40:10

Fields so if we go back to the finished site right now we still have just the input but let's go ahead and put this side by side with our editor so we can see the changes that we make live now we have our form on the right side and the code on the left so let's go ahead and turn this into an actual final form to look exactly like this one does to be able to do that we can start with the

40:35

outer div or rather with the form we don't need to wrap the form with anything as the form is going to be the most outer side container so we can remove this outer div and we can select everything within the form just like so and indent it properly I always try to keep my code clean now within the this form we're going to have a div so right here create a new div and this div is going to have a

41:04

class name equal to on small devices width is going to be 420 it's going to be Flex Center and it's going to be Flex C so the elements appear one below another next we have to create this logo on the top so let's immediately do that here we can render a self-closing image that's going to have a source of / assets SL images SL logo.svg and you can give it an ALT tag

41:33

of logo now if you save it you should be able to see a nice looking logo appear right on top as soon as you reload and there we go you can see logo's icon actually the entire logo is there as you can see when I drag and drop it here but you cannot see it as the background is white so let's go ahead and figure out why our background is not dark as it was dark before if you head to your global.

41:59

CSS file you'll notice it got overwritten by shaten and it's no longer applying the black background on our body so once again to get back to our previous globals you'll have to go to the GitHub jiz down below copy it and then paste it right over here once you do that you're going to get an error because our tail wi. config.js also got overridden so copy it from the GitHub

42:25

gist and then paste it right here that's going to ensure that you have access to all the necessary theme colors and everything is going to work as it should now with the dark mode so below this image let's create an H2 that's going to say something like create a new account and we can give it a class name of H3 bold now I know what you're thinking why H3 if the element is H2

42:54

well that's because on medium devices is it's going to be H2 bold so we're going to make it a bit smaller there we can also give it a padding top of five so PT of five and then small devices a larger PT of 12 to create some spacing below the H2 we can have a P tag and this P tag is going to say to use snapgram enter your account details and now we can give it a class name that's going to say text-

43:28

light-3 small- medium for the font size on medium devices base Dash regular and a margin top of 12 and we don't necessarily have to say count just details to use a bit less width now we want to wrap our entire form within this div so let's copy the ending tag and paste it right here below the end of the form and let's expand our form to fit nicely right here there we go now our form is going to

43:59

have a class name of flex flex-all gap of five w- full and then margin top of four this is going to make the elements extend the full width of the screen or rather full width of the container so now everything looks uniform the first field we have is going to be a name field we can change the form label to name and we can remove the placeholder but rather we can give it a type is equal to

44:30

text and a class name equal to Shad input if we save this it's going to get this beautiful view and we don't need a form description I believe a title or rather a label is enough so now we're getting closer to this final view so let's go ahead and duplicate this form field right here below and the second one is going to say username and we can change it to username here as

44:59

well that's great two done two more to go let's duplicate it two more times the next one is going to say email and we can say email here as well as change the type of the field to email there we go and the last one is going to of course be the password so let's change this to password type password as well and say password here so now once we type here it's actually going to be dots meaning

45:29

it's hidden and finally we need a beautiful button that's going to allow us to submit the form so let's give this button type submit a class name equal to Shad dasb button undor primary there we go but it's not always going to say submit sometimes it has to load meaning we've submitted it and it's doing its action so what we can do is create for now a fake field called is

45:58

loading so const is loading is at the start going to be set to true and now if we go back we can use that property to make some Dynamic changes if is loading in that case we can return a div that's going to have a class name equal to flex Center and a gap of two between the center and the flex you need to have a dash and here we can say loading dot dot else we're going to render something

46:30

else which is simply a text that's going to say sign up and there we go now we can see loading but to make this loading a bit more interesting let's create a new component called loader so we can go to our components and create a new folder within there called shared these are components that are shared all across our application within it we can create a new loader. TSX and run

46:59

rafc within here we can wrap everything in a div that div is going to have a class name equal to flex Center and w-o and within it we can render just one self-closing image with a source equal to SL assets SL ions SL loader. SVG we can have an ALT tag of loader we can have a width of about 24 and a height of 24 now if we go back to our signup form we can call our self closing loader

47:36

right here by putting it here and then double clicking and pressing control or command space to import it from components if you save it you can see this loader appear right here which is amazing now of course we're not submitting yet so what we can do is bring this is loading to false because we haven't haven't yet submitted we have nothing to load and now we have our

48:00

beautiful form that you can see right here it is a bit wider and that's because we here have more words to use snapgram please enter your details let's see what do we have here to use snapgram okay let's be nice and say please enter your details which is going to make her form a bit wider great and now that we have all of those fields we have to figure out how to actually

48:25

submit them but before that we're missing just one additional piece of information which is the link to go to the login as well in case we already have an account so right here below this button we can create a P tag that's going to have a class name equal to text- small- regular text- light-2 and text- center and margin top of two so that's going to provide this

48:55

nice centered text we can say already have an account and if that is the case we can render a link component this link has to be imported from we don't have it here but it should be coming from react router Dom so right here at the top we can say import link from react router Dom and now if we go down this is looking good and what is this link going to say well it's going to point to

49:27

forward SL sign in it's going to have a class name of text- primary and it's going to say log in there we go let's style it a bit further by giving it a text primary 500 which is the shade of the color text- small- semi bold and finally a margin left of one so now it's looking great and it's going to redirect us to the sign in form which doesn't exist yet we're going

49:59

to create it as soon as we implement the functionality to actually log our users in that's definitely the first thing we have to do right so how is that going to work well everything starts with a button that has a type of submit and once we submit it's going to submit the entire form right here that form is going to call the handle submit function which we have here and then the only

50:27

question is what do we want to do on submit and the simple answer is we want to create the user and that usually looks something like this we say const new user is equal to a wait why a wait because usually creating a user takes some time it is an asynchronous action in the database which means we have to specify this as an async function and then usually the function to create a

50:55

user is called create user account to which we want to pass the values but as you can see we don't yet have the create user account function so let's comment this out and we have no idea where is this event coming from how are we going to create our user and thankfully for us this is where aight comes in they're going to help us with databases functions storage but in this case o as

51:24

we actually have to create our users and as I've told you at the start we'll be using ID's Cloud platform click the special ight Cloud Link in the description that's going to allow you to sign in and follow along with this video seamlessly and then sign in or sign up I recommend with GitHub and once you're in you'll be able to create your first project let's do something like jmore

51:51

snapgram of course this is now going to be taken by me but whatever name you decide to take definitely append JSM in front of it and then click create there we go our JSM snapgram has been created and here we have our getting started guide but thankfully you won't have to follow it because you're watching this video and I'm going to teach you everything step by step to

52:17

utilize all of the primary upright Cloud features we'll be dealing with OD really soon to create our users databases functions and even storage so for now the only thing you have to do is copy this ID that you've been given for your project once you do that we can go back to our application and then we can go to our Explorer collapse everything so it's easier to see as a matter of fact we can

52:44

close all the files at the moment and then go to Source lib and within the lib we're going to create a new folder called aight within aight we're going to create a new file called config.sys so open up your terminal and run mpm install ight and that's the only dependency you have to install to make this work and just to verify in my case I'm on version 13.0.0.0.0 able to define a couple of

53:57

things first of all your project ID and I think you already know it right it's the ID we copied from aite but we never want to share any IDs or keys or Secrets publicly so for that we're going to use environment variables so let's go to our app and then outside of the source we can create a new env. local file and within it we can Define the V uncore aprite uncore projector ID is equal to

54:31

this same ID that we copied that way instead of just simply using plain text here we'll be able to say import. meta env. vorea rightor projector ID and that way it's going to be safe now here you can notice that our typescript is complaining a bit saying that EnV does not exist on typ type import meta and we just have to let typescript know that we're using V and that this is actually

55:01

going to exist and the way you do that is in the source you can add a new v- env. D.S file and there you can type reference types is equal to v/ client and then close it like so and add three dashes at the front once you do that you can see that it's no longer complaining but now we can still see some warnings that these variables are not utilized so how do we utilize all of these great appes

55:33

functionalities well we can say export const client for example is equal to new client so we just have to create an instance of this client and we're going to repeat this procedure for everything else so here we can say account is going to be equal to account then we have something like databases is equal to new databases then we have storage is equal to new storage and we also have avatars is

56:07

equal to new avatars you can see that it's complaining for a lot of these saying that the argument client was not provided so for all of these to work we have to pass in the client within them right here so they know what they're referring to and with that said we no longer have any warnings but now we have to configure our client and we can do that by saying client dot set project it's pretty

56:36

simple right it's aight config do pro ID we already have that but there's another thing we have to do and that is set up the endpoint so we can say client. set endpoint and that's going to be aite config do URL but hey how do we get this URL it's obvious it has to go here right and we can import it from envs by saying import. meta env. Vore aprite URL so now we have to

57:09

go to our env. local and we have to add the Vore aprite URL is equal to a string but hey where do we get this aight URL we didn't see it here in the quick start docs it's going to say right here that we can set up endpoint as the https cloud. aight. V1 so let's copy this and paste it right here so one more time that's https col cloud.

57:40

aight. slv1 and now we are properly configuring our client and this is all that we need to get started with authentication so now alongside config within aite we're going to create a new file called api. TS and within it we can export async function create user account that's going to get in the user that's going to accept the user as a parameter and then it'll try

58:11

to do something do you get where we're going with this is the function we're about to call from within our form so now we can connect to app right authentication functionalities to actually create this user so to do that let's first follow the proper tab script Rules by defining the interface for this user and we can do that by saying that the user is of a type or rather of the

58:34

interface I as an interface new user and we can Define that within a new folder that's in the source folder called types within types we can have a new index.ts and in the GitHub J down below you'll be able to find this entire file that's going to contain a couple of different interfaces we can go through each one of these as we're referencing it in the code such as in this case

59:01

export type I new user which has a name email username and password and now we can just import it right here from add/ types and now we know exactly what this user is all about once we know that we can open up a new try and catch Block in the error we can simply consol log the error and we might as well return it so return error but the better question is what are we going to do within the tri

59:32

block and here we have to create a new account by saying con new account is equal to await account. create and we need to pass a couple of attributes the first one is the ID of course we can just randomly type it but upright provides us with a great utility function called ID so we can simply import ID from aight and then what you can do is just call it and say id.

1:00:02

unique and that's it's always going to provide you with the unique ID and then we provide the user. email user. password and user.name and for now we can return the new account so now you can also notice this account we're calling is not defined so let's double click it and would you look at that we are already exporting it from the config and if you go into the config remember

1:00:29

that this is the account utility that we have established before by passing the client into it and referencing the account from aite that's going to allow us to deal with the O functionalities of aight Cloud so now we can close all of this and go back to our form within o forms sign up form and here we're back to calling the function that's going to create a new user so let's go ahead and

1:00:57

uncommented double click and then press control space and import it from lib upright API and we're now hoping that we're going to get a new user right here or at least a new account back after the creation is done so let's go ahead and conso log that user right here by saying consol log new user now if we save this we are ready to submit our form by entering a name let's do Adrien we can

1:01:28

Do JavaScript Mastery and an email off contact JS mastery. Proo and finally a password so let's go ahead and click sign up and we have really good validation here I'm glad we were able to see it we need eight characters so I'm going to enter them and then click sign up now it seems like nothing has happened but let's go ahead and go to inspect and then right here we can check

1:01:58

The console we indeed did get back an object that says created ad updated ad email name password update and all this good stuff which means that this is coming back from aite which then means that our user was indeed created it's that we just didn't do anything with it which is going to be our next goal so now if we go back to our ight project and reload the page you should be able

1:02:24

To see that a new user has been created and you can even dive into it see more information about it verify it check the membership or do a lot more stuff which is pretty amazing that we're able to set up authentication this early in the project but it's not going to be enough just to create our users we'll also have to set up our databases and our storage buckets for all of this to

1:02:50

Work because our users will create posts and we need to be able to create relations between users posts and more first we're going to create a new bucket for our media this is where we're going to upload our images so let's create a new bucket and call it media there we go as simple as it gets immediately we're given the media ID so let's go ahead and copy it and back

1:03:16

Within our app we can go to our EnV file and then we can paste it right here but before say Vore upright underscore storage uncore ID and then set this equal to this string that we got from here this is our storage bucket now while we're here let's go ahead and set up our databases as well so click create database and enter the new database name called snapcam you don't

1:03:44

Have to enter database ID because it will be generated automatically so just click create now that we have our database we can go ahead and copy its ID so go back and this time say Vore aite _ database _ ID and we can paste it right here so now we have the aight URL and then three different IDs from three different services that aight Cloud offers now while we're here we also need

1:04:11

To Define how our database is going to look like so the entire database structure so bear with me let's define all of the collections and relations between them that we're going to have in our app it's going to take some time to Define them but after that we'll be good to go for the entirety of this phenomenal build so let's just click create collection let's enter our first

1:04:35

Collection name which is going to be posts and click create then you need to go to settings you need to head down to permissions and you can allow access from anywhere by clicking any then check all the texts and click update so it's pretty cool how we have a robust permissions SL roll system built into aight Cloud next we can repeat the same process for our users collection so

1:05:07

Let's create a new collection called users click create go to settings same thing here we need to add permissions click any and then take all the boxes and click update and now there's going to be a third one which is going to be called saves and this is going to be for all the saved posts within here we can also go to settings go to permissions add any and then select all

1:05:39

The boxes and click update and now we have to start creating relations so let's go to the posts collection and again make sure to follow exactly what I do here because our app is not going to work if we don't properly set up our relations it's important that we create relations immediately so everything works later on so go to attributes and then click create

1:06:04

Attribute in this case we're immediately diving to a complex attribute of a type relationship in this case we want to create a two-way relationship and this is going to be a relationship between a post and a user so we can say users attribute key is going to be creator and then the attribute key in the related collection is going to be posts and a relation is going to be many to

1:06:32

One so this is how it's going to look like one Creator can have multiple posts and while we're here it wouldn't be such a bad idea to start sketching things out right in our ultimate nextjs 13 course we were doing a lot of sketching because we covered a tough project where we have to deeply explain all of the concept covered and this often includes a lot of sketching so in this video I want to

1:07:00

Also do the same I want to give you a bit of behind the scenes of the level of complexity we go in our Pro courses so if you haven't checked them out yet that's great this video is about react but after you watch this free video on YouTube you might want to learn nextjs server actions and all of the great stuff that it offers so add yourself a to-do after you're done with this video

1:07:26

Check out JS Mastery Pro but with that said let's start sketching the complex architecture of our snapgram application we obviously have posts saves and users so let's go ahead and create all of that as simple rectangles here we're going to have our users we're also going to have our posts and finally we're going to have our saves which are three different collections now it's obvious that we're

1:07:54

Creating a many toone relationship between our user called a Creator and our posts so this means that one user can have multiple posts so let's just create this relationship that's from both sides and we can do something like this where we're going to Simply duplicate this right here indicating that one user can have or can create two different posts so that's going to work like this

1:08:22

And then an important thing here is on deleting a document we must set null as this is going to set the document ID as null in all related documents meaning it doesn't exist so let's click create and it's possible that something like this happens but don't worry just go to databases select your database and then you can see your collections here specifically we're working with users

1:08:49

And then attributes and you can see here that now we have a relationship with posts and also that same attribute should be within post as well because that's the relationship so now let's create a second attribute under posts which is also going to be a relationship attribute it's going to be a two-way relationship related to users one more time but this time not who created it

1:09:16

Rather who liked it so we're going to say likes so it's going to be likes here we're going to say liked so who liked it and then relation is going to be many to many because many users can like many different posts and then on deletion we also want to set the same set n and click create there we go and now we can slowly start thinking about which attributes are posts are going to have

1:09:41

So right here we can make this a bit smaller and make it a bit simpler to read let's do something like an attribute which is going to be Creator we know that each Post in this case has to have a Creator and we know that a user is going to have a post attribute so let's do something like this attributes this is going to help us when creating a database or rather not because this is going to help us

1:10:09

Understand our database structure usually you would have to create all of this within your application but now aight actually creates the relationships for us which is super handy and the second attribute we have added is going to be likes so the post is going to have likes and then users are going to have liked so which posts have they liked let's move forward

1:10:32

Let's create a next attribute for our post and that's going to be a string this time the attribute key is going to be a caption the size is going to be 2200 this was a default size for an Instagram post so that's where we took it 2,200 characters default is not going to be anything and you can click create we're going to also need tags attribute so let's go ahead and create a new one

1:11:00

Of a type string that's going to be called Tags it's going to be 2200 as well and it's going to be an array of tags pretty interesting then we're going to need an image URL so let's create a new URL type yeah there's a special type for the URL which is going to be called image URL and then it's going to be required and click create we're going to also need an

1:11:27

Image ID attribute which is going to be of a type string this is needed if somebody wants to delete a post so we can say image ID of a size 2200 again feel free to choose whatever you want here and it's going to be required we need a location attribute as well of a type string so let's say location size is going to be and this is more or less it these are all the attributes that we need for our

1:12:00

Post so what we can do is instead of just typing them out we can go ahead and screenshot what we have here on Windows I usually use command shift s and then you can simply select it like this there's a similar shortcut on Mac OS as well so let's take it and let's put it right here within our fig Jam so it's really easy to understand what properties each one of our posts has

1:12:26

There we go now we even know the type this is going to be helpful later on once we dive into the further architecture of our application now that we have all the attributes we can go to the indexes tab of our posts and this is where aite allows you to do automatic searching of your collections so click create index you can call it caption the index type is going to be full text the

1:12:52

Attribute is going to be caption and the order is going to be descending this is phenomenal essentially you have built-in search and filtering this is going to allow us to automatically search for different posts based off of caption so let's click create now we want to go to the users collection and also start creating new attributes so go to attributes you can

1:13:17

See that we already have liked and posts let's create a new one of a type string that's going to be name we can enter the same size as before and click create we're going to also need a username for our user so let's say attribute is going to be username it's going to be 2200 and we can click create we also need an account ID so let's create a new string of account ID of

1:13:48

2200 let's make it required and let's click create our user is also going to have an email so let's select an email type call it an email make it required and click create our user can also add a bit of info about themselves so let's create a new string property called bio and here they can add their biography let's click create finally we need to create an image ID attribute of type string so

1:14:18

That's going to be image ID of the same size and this is needed for deleting the profile images when changing the profile image let's click create we also need the image URL attribute this is going to be of a type URL so let's say image URL required and create and this is it we immediately have all of the attributes that belong to our user what we can do is also screenshot

1:14:51

It and add it to our fig Jam there we go I'm just going to make it the same size and we can put it right here below users collection there we go it's pretty handy to know the full structure especially as the app grows and finally the saves collection is remaining so let's go back to our upright go to saves attributes and we need to create a user attribute which is going to be of a type

1:15:22

Relationship so it's going to be a two-way relationship between users where it's going to say user and it's going to say save so we need to know which user saved which post it's going to be a many toone relationship because one user can save many posts and on delete we have to select set now and let's click create and also we need to create a post attribute so we know which post was

1:15:55

Saved so we can create a new relationship and we can create a two-way relationship between posts we can call it post and save make sure you call these attributes exactly the same as I'm calling them here that's necessary for the application to work and then we can do a many to one and set now and click create so now we can copy these one more time and we can add them right here below the

1:16:30

Saves and there we go so now we can see that saves actually kind of comes in between of some of the posts so here we can make this a bit smaller and we can Define that a user can save a specific post so it's going to go something like this saves and then we can go to a specific post users can create posts but users can also save the posts that they like pretty cool right and then these are the

1:17:00

Attribute of the save so this is our current structure we'll be returning back to this fig jam and whenever we need to explain something in more detail that's exactly what I'm going to do in a visual manner if you'd like me to add more visuals to our videos just let me know for now I've been only doing this in our Pro courses because we have so much more time to cover things in depth

1:17:23

In videos the time is limited but still I'll try to make them as detailed as possible finally now that we've created our collections our database is ready this took some time but I mean it's pretty crazy really soon we now have a complete authentication system where we can add users not only that but now we can add them to our database as well in the database we have our collections

1:17:51

With complete attributes so we know the structure of each one of our Elements which we can see right here and then we also have relationships between them and we also have storage so we can upload images to our application I mean ight Cloud really does everything you wanted to do in this case now the last thing we need to do is go to database and then copy the IDS right here of these

1:18:17

Collections so let's copy the saves go back here and we can say something like vorea right uncore saves uncore collection uncore ID it's a long name I know but it's better to be safe than sorry and finally we can duplicate this two more times we're going to save saves collection ID we're going to have post collection ID and we're going to have a user collection ID as

1:18:50

Well so for the Post we can copy it right here don't mistakenly do the wrong one and finally we can do the users there we go so now we have the ight URL the project ID the database ID storage ID user collection ID post collection ID and the saves ID in case you didn't copy the project ID before it's right here within the overview database is right here storage is right

1:19:23

Here everything is so easy to find now we can make use of these variables by going back not to our signup form but rather to our config right here we're initializing all of these Services here but we're not yet properly setting them up and we can do that by having the URL the project ID we also need a database ID which is going to be import. meta env. vorea _ database ID we

1:19:56

Also need to get a storage ID which is going to be import. meta env. vorea rightor storage ID we also have to have all the collections so we can say user collection ID is import. meta do. vorea rightor user collection ID post collection ID is going to be import. meta env. Vore aight _ postore collection _ ID and finally saves collection ID which is going to be importa env. Vore aprite uncore saves

1:20:48

Uncore collection uncore ID and with that we have everything we need to start utilizing these services that aright provides out of the box so back in our code we can exit our EnV local we can exit our config as well and before we go into our signup form and finalize what this function does on the front end let's go ahead and implement it on the back end or rather let's utilize all of

1:21:17

These services that aite provides so I'm going to add aight right here to the top and I'm going to pin it this is a cool Chrome feature you can have something pinned now with that done let's go ahead and go into the aite API and so far we have only created an account which then added it right here to our a but that's not enough our user has to have relations to the post it

1:21:44

Creates which means that we need to have it in our database so right now within our database we don't yet have a user so that's going to be our next goal to add a user to our off but also to create the user's document in the database so how are we going to do it well let me show you we can go right here below create account and we can check if we get anything back from it and if we don't so

1:22:10

If there's no new account in that case we want to throw a new error we can do it just like so throw error then moving down we can create a new Avatar URL by saying const Avatar URL is equal to avatars do get initials now where are we getting these avatars from well that's something we have to import from aight so you can double click it press control space and then import from that/ config if you

1:22:42

Remember this is going to be one of these services that aite provides account databases storage avatars and client so now we're we're using avatar.

1:22:54

Get initials and we want to get the initials from user.name once we have the Avatar URL we can create a new user but this time not a new account rather a complete new user in the database by saying a wait save user to DB just like so but the main question is where is this function coming from and the answer is it's a function that we are going to Define our cells so right below this

1:23:26

Function create new user we can create a new function export async function save user to DB this function is going to accept the user as a parameter and we can immediately destructure some of the values from that user and then open up a new function block we can destructure the account ID which is going to be of a type string we can destructure the email which is

1:23:55

Going to be of a type string as well we can destructure the name of a type string we can destructure the image URL of a type URL and we can destructure the username which is going to be optional and it's going to be of a type string as well and how do we know we're getting this well we can pass it right here when we call that function we can pass an object that's going to have all of these

1:24:19

Properties an account ID equal to new account and then dot dollar sign ID that's how app write stores IDs we can pass a name equal to new account. name we can pass an email equal to new account. email we can pass a username equal to new account. username or rather this username is not going to be within a new account because we're not passing it initially but we are

1:24:50

Passing it right here when saving the user in the database and that's coming from our form we have a field here called username so instead we're going to say user.

1:25:05

Username and finally we need to pass the image URL of a type Avatar URL which we're also passing above now we have this new user which is equal to the function call of our save user to DB and then instead of returning a new account we can return a new user which means that our create user account function is now done but of course it's dependent on the save user to DB function so let's

1:25:34

Collapse this and let's focus on the save user to DB remember above we're only using the O functionalities where we're doing authentication but now we want to save it so for the first time in this app we're going to save a document to app right database let's open up a new try and catch Block in the error we can simply console.log the error in the try we can say const new user is equal to await

1:26:06

Databases. create document one more time where is databases coming from try to think about it's coming fromc config because we're utilizing what we configured not that long ago and now we have to pass what want to create so we're going to pass the ight config do database ID we need to know which database are we modifying then we need to pass the upright config do user collection ID to know

1:26:38

Which collection are we modifying we need to pass the id. unique and we need to pass the actual user object now you're going to notice it's going to start complaining about the app right config which we have to import from config that's exactly why we're exporting it in the first place and then we simply can return this new user and now not only are we creating the user in

1:27:04

The authentication part which is right here but we're also creating it in the database so let's collapse it and would you look at that with two simple functions we actually have a connection to the database so what's remaining is to actually try to create our user so let's go back to our signup up form we're calling the create user account and let's figure out what we want to

1:27:30

Happen after the account gets created we surely don't simply want to consel lock the newly created user after the user is created we want to check if there is no new user means something went wrong in that case we can simply return meaning exit out of the function but we also want to play with some additional function functionality which is going to be a small toast that appears or at

1:27:57

Least we call it that way a toast that we can check by going to our Shaden documentation and then checking the toast functionality a toast is a little popup that you click and then it jumps out it can be dark like it is here but you can also have different examples where it can be light meaning something was good or a red one meaning something was really bad so let's go ahead

1:28:22

And implement this which is just going to provide much more intuitive workflow so we immediately know whether the user was created or not now I'm going to show you how to add this second shaten component to our workflow we just have to follow the documentation first you run the following command MPX Shad CN UI latest add toast we can do that by opening the second terminal we have here and simply

1:28:50

Pasting it once again that's MPX shaty and UI add latest add toast this is now going to add it within our components and then UI and you can see that the toast and the toaster as well as the used toast functionality were added automatically don't worry you don't have to modify these we just want to use them within our code so how do we use them well we can refer to the documentation

1:29:16

Here we need to add it to the most outer part of our application in this case it's not going to be app layout TSX it's going to be our app so let's go ahead and copy this import let's go right here to our app and let's import it right here at the top we don't need this entire part we simply need the import so we're importing it from toaster UI components and then we want to put it

1:29:42

Right here at the end near the closing main toaster like so this is going to allow us to see the toaster and then we have to use the used toast hook whenever you want to call it so right here we can import this go back to the signup form we can import it right here at the top we don't need the form description as we're not using it and then where do we want to use it we have to declare it

1:30:09

As a hook right here at the top cons toast is equal to use toast and then we call it whenever we want it to appear in this case right here after the return so we say toast schedule description this is it but of course we want our toes to say something different so we can just give it a title no need for a description that's going to look something like this title is sign up

1:30:38

Failed please try again as simple as it gets now in this case let's be optimistic we're not going to test our application or our function failing we want to test the toast if everything works so what do we want to do we want to sign our user into a session that's the next step so we can say con session is equal to await sign in account okay and this is another function that we have to call

1:31:10

That will soon Implement for now let's comment and out and let me tell you about something more important in this course you'll also learn how to use react query recently renamed to 10stack query as they started supporting view spelt solid and more but in our hearts it's still called react query it's going to allow us to do a lot of things right out of the box it's going to be simple

1:31:37

And familiar but more importantly it will allow us to Cache the data we're fetching from the server it also has Auto ref fetching server side rendering support pation out of the box mutations meaning changes to the server data infinite scrolling which we're going to use and Implement in this video and there are so many more reasons to use react query in your react applications

1:32:02

And in this video I'll teach you how to use it from scratch so what do we need to do to get started with react query and using it alongside aite well we can go right here to our lib and then next to aight we can also add a new folder called react D query within here we can create a new file called queries and mutations. TS within here we're going to import a couple of things we'll use from

1:32:34

react query but of course first we have to install it so that's going to be at 10stack SL react dqu so let's copy this open up our terminal and say mpm install at tanack SL react query press enter and soon enough it will be installed it's a pretty lightweight Library once it's installed we're going to import use Query and queries are for fetching the data use mutation mutations are for

1:33:07

modifying the data use Query client as well as use infinite query these are all the things we'll use from react query and once again the reason why we're using it is to simplify data fetching and mutation while getting all the benefits such as caching infinite scroll and more out of the box now what you want to do here is you want to export our first mutation so we can say

1:33:36

export const use create user account mutation it's a long name I know but we try to make them as meaningful as possible it's an arrow function that returns a call to use mutation that then gets an object in and then we want to pass the mutation function so what are we actually doing and in this case it's going to be an arrow function that's going to return a

1:34:06

call to our create user account function that we have created not that long ago within upright SL API and it's going to get the user right here as its first and only parameter and that user is coming right here through the function which is going to be of a type I new user which we can import from types so essentially what we've done is we've initialized a new mutation

1:34:34

function so that now react query also knows what we are doing now we can use this use create user account mutation within our signup form and you might have seen this right here I was testing that but let's create it from scratch right here at the top we can do it even above the form we can say const get something an object out of it and call a use create user account mutation just

1:35:04

like so as a hook we can immediately import it from addlib SL react query forqueries and mutations there we go and now what do we get back well we get back mutate a sync as well as is loading the mutate async if I can spell it properly is the actual function that we're calling right here in this case it is the create user account function that we have created

1:35:38

not that long ago that creates the user in the authentication and also saves the user in the database so now we're calling that as a hook and it's giving us this mutate async function but we can rename it so we know what it means this is going to create a new user account so we can say create user account so this syntax simply renames this mutate function into create user account and we

1:36:07

can also rename is loading to is creating user so it makes more sense and we no longer need this fake is loading right here so we can remove it and we can immediately use is creating user right here at the bottom there we go that's our new is loading so react query provides this out of the box as well now right now it says is loading is not defined or does not exist but don't

1:36:35

worry we're going to fix this soon for now it's important that we have this create user account which we can call and we no longer need to use it directly from aight because this mutation is actually calling create user account from aight for us it's kind of a level in between the app right in our front end to ensure that we have easier time fetching data on react and querying and

1:36:58

mutating the data as well as caching it so now we have this and we're calling the create user account as we were before but now this is a mutation from react query now we can also do a session which is the sign in account which is going to be yet another mutation so let's go to our mutations right here and we can create another one just by duplicating this one below we can call

1:37:25

it use sign in account mutation so use sign in account and now that I think about it we don't have to add mutation at the end of every single one so we can simply fix this right here and modify it right here at the top as well as in the import so now if we go back we have the use signin account and here what we want to do is have a mutation function that's going to get the user but in this case

1:37:55

the user is going to be just the email of a type string as well as a password of a type string we can put this in a new line so it makes a bit more sense and now of course we're not going to call the same function once again which is the create user account in this case we're going to call a sign in account and we want to pass the user and this sign in account

1:38:22

will create in aide so let's go to aite API we now have create user account save user to DB but right below it we're going to export async function sign in account that's going to get the user which is going to have a email of a type string as well as a password of a type string as well and then it's going to have a try and catch block here we can simply kolck the error and

1:38:55

in the try we can create a new email session by saying cons session is equal to await account. create session and again this is another utility provided to us by aight it's create email session to which we have to pass user. email as well as the password by saying user.

1:39:18

password and then we can return this session so once again we have created an App function that's then getting utilized by react query and we can import it right here from aight API so now this one is for creating the user and this one is for signing into the account and now we can repeat this with the other hook that we have right here in our signup form we can say const we get a mutate

1:39:47

async which is going to be equal to a function of sign in account and we get is loading which is equal to is signing in and once we get that we can say that's equal to use sign in account which we have to import from react query queries and mutations and now we can use this function right here await sign in account to which we have to pass the email which is going to be values. mail

1:40:16

right here and then password which is going to be values. password and all of this is coming from our form once we have that we can check if session exists by saying if no session we want to return a new toast saying sign in failed please try again and bear with me I know this is taking some time but authentication and creating user accounts is one of the most complicated

1:40:42

parts of every single application now after we have the session we have to store that session in our react context at all times we need to know that we have a logged in user so for that reason we can create a new folder right here within the source which is going to be called context within the context we can create a new file called oth context.

1:41:08

TSX there we can run RFC and we'll need to import some utilities for creating context from react such as create context use context use effect as well as use State now we need to Define how an empty user is going to look like so we can say export const initial uncore user is equal to an object where the ID is equal to an empty string name is equal to an empty string

1:41:41

username is equal to an empty string email is again an empty string as well image URL is an empty string and a bio is also an empty string so everything is empty after that we have to declare the initial of state so we can say initial undor state is equal to an object where the user is equal to the initial user is loading is set to false is authenticated is by default set to false and then

1:42:17

we're going to also have the function to set the authenticated user so set user is equal to a function set is authenticated this is for setting up a Boolean value which is also going to be a function and then we're going to have a check off user which is going to be an async function that's going to return either a false or a true which is a Boolean value just like so why we have

1:42:44

this to know whether we have a logged in user at all times and now we can declare our context but by saying const O context is equal to create context we can Define the type of that context by providing this syntax and then referencing the I context type which is coming from addtype if you look into this is simply declaring the types of everything we have now

1:43:11

discussed and finally we need to set it to the initial State now instead of calling this component o context we can call it o provider because that's going to wrap our entire app and provide the access to the context every context needs to have children because it wraps the entire app and then displays whatever is within it we can also Define the type of children to be equal to a react. node and I

1:43:41

believe it's called react node so we have to add that here so now what do we do right here within it well we want to define the state of this user so that's going to be us use State snippet called user set user as well and at the start it's going to be equal to the initial user variable that we have declared before and we can also give it a context or a type of I user which we can import

1:44:08

from types so this is just so our typescript knows exactly how our user is going to look like we're going to also need States for loading so we can say use state is loading set is loading so we can write here declare that and then at the start it's going to be false and we can repeat this as well for another one use state which is going to be is authenticated set is authenticated at

1:44:39

the start set to false because we don't yet have users that are logged in what are we going to do then well we're going to wrap everything in our o context that's going to look like this of context. provider and we need to pass it the value so the value will be equal to value and we can declare what we're passing right here on the top by saying const value is equal to an object that's

1:45:06

going to have the user the set user function which we will declare soon it's also going to have the is loading it's going to have the is authenticated it will have the set is authenticated as well and it's going to have a function called check o user which we can Define right here const check o user is equal to a function right here and now we're passing that value to our provider also we need to

1:45:38

render the children within it right here now of course the value is going to complain because there's going to be a mismatch between the types but we'll solve that really soon once we utilize the check off user function so what is this function going to do well it's going to be an async function that's going to have a try and catch Block in the catch we can simply say console. log

1:46:04

error and we can return a false meaning user is not authenticated we can also have a finally clause which is going to set is loading to false meaning we're done with loading but in the try we'll actually try to get to the currently logged in user account so we can say const current account is equal to await get current user and this is a function will create directly within aite so

1:46:35

let's go to aite API that's going to be right here and let's go below the sign in account export async function get current user and we can open up a try and catch block as we always do in the catch simply console.log the error and here we can say const current account is equal to await account. getet and then we can check if that current account doesn't exist we can simply

1:47:09

throw a new error but if it does exist we can try to retrieve that current account by saying const current user is equal to a wait datab bases. list documents so here we need to pass the database ID from which we want to read The Collection ID from which we want to read and then the query of what we're trying to fetch so we need to get a list of all user documents in a given

1:47:36

collection first we need to pass the aite config database ID then we need to pass the app config do user collection ID and then we need to pass what we're trying to fetch which is a query of a type array so we can say query. equal we want to get the account ID and we want to get only the current account do dollar sign ID and this query is coming from aight so we can import it

1:48:10

at the top finally we can do another check saying if there's no current account or current user this time we're going to throw an error but if we have it we can return a current user. documents zero there we go so now we have the get current user function which we can now use within our OD context by simply importing it from lib ight API so here now we check if the current account

1:48:41

exists in that case we want to set our user so we can say set user and then we set the ID to be equal to the current account dollar sign ID the name to be current accountname username to be equal to current account.

1:49:03

username email to be equal to current account. email image URL to be equal to current account dot that's going to be image URL and then bio to be equal to current account. bio of course what you could have done is you could have destructured all of these values from the current account right here by using the destructuring assignment and then pasting them here you also need to add commas to the

1:49:33

end and if you did that you can also put it all in one line as it's not taking too much space and now you don't have to mention current account every single time so it's going to look a bit cleaner like this and for other properties you don't even have to say what it is if the name is the same which in all of these cases is so you can simply keep the key name here since we no longer have access to

1:50:00

the entire current account we can just refer to the ID and then all of this also fits in one line so we can put it in one line like so this is in my opinion a bit easier to understand what we're doing but we have to be careful and typescript comes in really handy here if I wasn't using typescript I would do it exactly like this I would destructure everything and

1:50:23

get the values but if you read this in typescript it's going to say property dollar sign ID as well as all the other ones do not exist on type document or undefined so if you look into the get current user you can notice that here it's great it's returning all of these values but in the catch it's not returning anything so if this function fails then these values will be

1:50:49

undefined and they'll cause an error so in this case to make our application less error prone I would actually get back a bit and I wouldn't D structure the value although it's taking a bit more space and maybe includes a bit more words I would still keep it like this sometimes more words is not bad if your application is more robust finally if we get to here once we set our user we can

1:51:13

also set the authenticated status to true and return true as well if we outside of this block we're going to return false and this is our check off user function now this has to be called whenever we reload our page and for that we have to use the use effect so we can define a new use effect hook that's going to have a function like so and a dependency array like this empty meaning

1:51:43

it's only going to be called whenever the app reloads here we can look into our local storage so we can say if local storage. get item upright called it cookie foldback is triple equal to a string of an empty array or it's a local storage.

1:52:04

getet item cookie fullback is equal to null in that case we simply want to navigate the user back to the sign-in screen so in that case we can import a new hook at the top import use navigate which is coming from react router Dom and we need to initialize it right here at the top by saying cons navigate is equal to use navigate and now we can call it navigate to SL in and

1:52:35

I notied that I didn't close the local storage. getet item so here I'm going to close it and this is how it's supposed to look like finally whenever we reload the page we want to recall the check o user function we have created above so now we have our use effect we have our check off user we're passing all of these as values and we're wrapping our entire application with all of these

1:53:00

values so that at any point in time we completely understand whether our user is logged in or not finally we can also export right here at the bottom export const use user context this is going to make it simple for us to call this context every time which is a function call to use context and then we pass in the O context great so now we have this phenomenal context and I notice that

1:53:31

here it says o provider which is not really used we have to export it right here export default o provider not o context and I want to point your attention to something this is a complex app the files are also complex there's a lot of logic Happening Here and although I try to explain everything to the best of my ability it's possible that either I or maybe you miss something it's easy

1:53:58

to make a typo right so test your application thoroughly we're going to test it together after we're done with this authentication and if something doesn't work the complete GitHub repository is going to be down in the description so simply refer to all the finished files and simply override the things you have so far to ensure that everything is good and if you're still

1:54:18

having some errors or disc Community Link is going to be down and we have a forum specifically for this video for everybody to assist you with the problems you're having so with that said let's now utilize this odd context within our signup form right here we can say const is logged in is equal to a wait check off user which we can import from our context so right here we can

1:54:46

say const check off user as well as well as is loading which we can rename to is user loading is equal to use user context like so and we can import it from use user context o context there we go so now we're calling it and we're getting the Boolean value back is logged in finally what we want to do is if is logged in that case we want to call the form. reset so we want to reset

1:55:22

the form and we want to call that same navigate remember from react router so that's going to be link but also use navigate and we Define it right here cons navigate is equal to use navigate and now we want to navigate to the homepage because we are successfully logged in so we can say navigate to forward slash else if we're not successfully logged in we can again show a toast saying sign up

1:55:56

failed please try again and we can immediately return it and this is our onsubmit function a lot of things were happening in the meantime we worked out our database we worked out our react query ight we did everything also we created contact in the meantime so a lot of stuff has happened let's go ahead and test it out so we can go back through application I'm sure something's going

1:56:22

to be broken so let's go to inspect console and let's reload the page as you can see it's saying that we have an error in the signup form saying that there's no query client set use Query client provider to set one the reason why we're getting this error is because we didn't actually utilize our o nor our react query in our app with we simply wrote some code in some files but to

1:56:53

actually utilize it we have to go way back to our source main. TSX and we have to wrap our app with all of these providers so first let's wrap it with the O provider which is coming fromc context o context and then we can put our app right here within it and indented properly this is the context we have created but with react query we also have to create our own context so

1:57:23

let's go into lib react query and create a query provider. DSX here we have to do something similar we've done with our own context by running rafc instead of a default export we can simply use a named one export const query provider we also get the children right here because we need to show the entire app within it which is going to be of a type children react. react node

1:57:56

like so we can also just import react node at the top that's going to be a bit simpler so we can destructure react node from react and now it's going to fit in one line and then we need to return query client provider like this that we can import from t stack react query it's going to have a client property equal to query client which is once again coming from T stack react

1:58:30

query so we can import it at the top and I believe it should start with a lowercase letter so it's a query client like so and it's complaining right here that's because we have to set up a new instance of that query client by saying const query client with a lowercase Q is equal to new query client that we call like this and then we pass the lowercase one right here and finally we

1:58:56

can render the children right here this is similar to our own context we have created before so now going back to our main alongside wrapping it in the O provider we can also wrap it in the query provider which is coming from lib react query provider and we can put all of this within it and in then it properly so now we're properly wrapping our app with everything we need and we can again

1:59:25

check the errors now the error is saying that is creating user is not defined add signup form so let's go to our signup form and let's search for is creating user that is creating user is coming right here from our use create user account so why would this is loading not be there if it's actually saying that it's not returning the is loading property well this is coming from use

1:59:55

create user account and that is a mutation from react query so let's go ahead and check out our package Json and would you look at that tanac just recently changed its version to version 5.0.0 and When developing these projects for JSM they take a couple of weeks up to a couple of months to create so it's possible that our development version is using an older version of react query

2:00:28

this is actually quite exciting for you right now because we're going to do some live debugging we're going to go over the documentation of the new version and I'm going to show you how you would deal with this error if you're following a video and something got outdated so the first thing you have to do is go to the library we're using and then go to the docs in this case we're wondering

2:00:50

about the loading so if I search for is loading no nothing is here but if I search for just loading itself we can see displaying Global background fetching loading State maybe that's useful now we can see that this is for Global fetching right but we want to see maybe use is fetching no let's see if I can find anything useful now no this is not that useful let's see a quick start

2:01:18

here we can use the use mutation they are creating everything we discussed in this video creating a new query client using that query client and using one mutation exactly as we are but in this case I don't see there're using the loading so let's go a bit more in depth into the overview and there we go here the user query and it indeed is using the is loading property but this is a

2:01:45

query and not a mutation we have to differentiate the query from a mutation mutation so maybe we want to read a bit more about the mutation so let's go into mutations and let's see how that works so we can use a mutation and apparently there is a mutation that is loading also the is error and is Success so let's compare the two con mutation is equal to use mutation and

2:02:14

they use it directly right here within the code oh this is interesting so unlike queries mutations are typically used to create update delete data or perform side effects for this purpose stack query exports a used mutation hook but I just figured out I'm reading the V4 docs we want to redirect to the latest version oh there we go can you see the difference mutation that is

2:02:41

pending and not is loading okay I get it maybe they wanted to make a change from the query so in the query right here once we try to call it yeah they're also calling it is pending so kind of waiting for something not loading but pending right okay I'm going to give it to them but now if we go back to our application and go back here and simply use is pending instead

2:03:07

of is loading you can see it actually works this is amazing so now if I save the file and reload the page everything seems good but it's saying is creating user is not defined I think we called it is creating account so let's simply copy is creating account move all the way down and then modify it and now we're back to our sign in form which means we were redirected let's try to close and reload

2:03:38

okay no errors that's good but let's go back to the sign up form that's what we were working on this entire time okay this is interesting so every time we go back to sign up it redirects us back to sign in I'm guessing that's because it thinks we have already created a user so what we can do is just go back here go to the application Tab and check our local storage it seems to be empty as well as

2:04:06

The session storage. So the question is, why are we getting redirected? The only place where this could occur is the place that happens as soon as we load the page. Do you know such place? I think that's going to be our odd context here. We have a use effect and here we navigate to sign in. So right in here, for now we're going to comment out this second line and we can put it right here above and save it.

2:04:37

And remove this or sign. If we do this and now if we go to sign up, you can see it's no longer going to redirect us. Everything is working and there we go. We can finally see our signup screen we've been working on for such a long time. But if you think about it, we weren't working on just the signup screen. We were working on everything else we'll need for the entirety of our

2:05:04

application. So now if we go back to our signup form, we know what needs to happen after we successfully create an account. We're going to create a session, add that to the user context, and then navigate to the homepage. So let's see if that works. Let's try with something like the real JSM. We can also do that right here. The real JSM, the email can be something like

2:05:32

let's do Adrien JSM mastery. proo and we can choose a specific password and click sign up. It says loading and it disappeared, or no it didn't. It actually redirected us to the homepage, which right now is completely empty and has the root layout. After all this hard work, we should have implemented that confetti screen to also pop up as this was stuff what we've gotten here. If

2:05:59

something didn't work for you, definitely make sure to refer to the codebase. What's also possible is that while you were trying to log in, maybe you used the same email before, so your user already got created. If that's the case, try a couple of different emails and usernames and ensure that isn't the case. But now that we have successfully created our user, you can see that we have it right

2:06:23

here under a user collection. No longer is it just under o but also under databases users and we have the real JSM with the username, account ID, email, and everything else. So this is great. This means that we have just added a document in our database and also that we have logged in our user. So now if we go back and reload the page, you can notice that we stay here because it

2:06:52

knows that the user is already logged in. But of course, to completely finalize our o, we need to implement the login screen as well. So what we can do is right click, go to inspect, go to the application tab right here, and then under local storage you'll be able to see a cookie fullback. This was added by ight. What you need to do is just clear it. This is going to clear here our existing session and then

2:07:21

we can go back right here to OD context and we can check if local storage that get item cookie fback is null. In that case, want to redirect back to the sign in screen. So now if we save this, you can see we're redirected to the signin form. So now let's try to implement the sign in. Trust me to do it, it won't be as difficult as implementing the sign up. What we can do is copy

2:07:51

literally the entire sign up form exactly as it is and then go to sign in form and paste it right here. First of all, rename it from sign up form right here at the bottom to sign in form. Also rename it right here at the top. And now there are a couple of modifications we'll have to make. Let's start from the top to the bottom. We'll be using the use user context, that's okay, and we'll use the

2:08:22

use signin in this case. We don't need the use create account. The form is only going to accept the email and the password, not the name and the username as well. And we have to change this to sign in validation. So let's go to our Zod which is right here under validation index DS and we can duplicate this right below, rename it to sign in validation and only contain the email and the

2:08:49

password. We can remove the name and the username. Then you can go back and doubleclick this and press f2. This is going to open up a rename window, or you can just simply press sign in and press enter. It's going to automatically change all of the naming. If this didn't work for you, simply exchange every time that it says sign up to say sign in. After that, we have our submit Handler. We also

2:09:17

get the values but we can skip the user creation process and only focus on the session. Still the check-in is going to be the same and everything else is going to be exactly the same. But we'll have to modify our form. Instead of create a new account, we can say log in to your account. We can say something more personal, something like welcome back, please enter your

2:09:44

details. Then we don't have the first two Fields, so we can completely remove them. The only thing we do have is going to be the email and the password. So now if you save this, you can see it's no longer going to be is creating account. This time it's going to be is user loading and is that it. We won't need this rename right here and we won't need use create account. If we save this, our

2:10:13

form is back and we also need to change the last thing that it says right here as well as the button. It's going to say sign in and then here we can say don't have an account, in that case you can sign up, and then this is going to redirect to sign up. You see how simple that was. And there we go. Now if you click it, you go to sign up, you go to login. This is looking great. And now let's try to log

2:10:44

in with the account we have created. I'll use the same email and password and click sign in. This time it doesn't seem to go through. Let's see why that might be the case. I'm going to go to inspect and then I'm going to go to console and reload the page. I'll try to enter my same email and password one more time and click sign in. It almost seems like nothing is happening. So our submit button is

2:11:13

actually submitting the form. We don't need this is pending right here and then we call the onsubmit Handler which should sign us right in and then if we are logged in it should navigate to forward slash. But in this case, for some reason it doesn't do it. I'll try to reload. Even if I reload, we're still here on square one. But that's okay, let's figure it out together.

2:11:38

Let's see if we actually get right here. So let's try to console.log is logged in and then we can say console. log navigating. I'm guessing we're not getting to right here. So I'm going to save it and I'll enter my details one more time and press sign in. It's almost as if nothing happens. We're also not getting any toasts, so that's a bit suspicious. Let's add some

2:12:09

more conso locks a bit higher right here. Let's conso loog session and let's also cons log right here at the top by saying we're in. That's the whole point of coding, right? Getting stuck and getting past these errors. Once again, let's try it together and once again absolutely nothing happens here nor here. Now it seems like this onsubmit function is not actually getting cold

2:12:39

even though we have it right here under form submit and the button should indeed submit that form as it has the type of submit. So one thing I'll try to do is just restart our application. So go to our terminal, press contrl + C and then Y and then simply run mpm run Dev one more time. It's a wild guess but sometimes who know, it might make things work. I'm going to make this a bit larger

2:13:07

so we can see it a bit better. Let's make it so large so we can see this nice image as well. I'm going to enter my email and the password and click sign in and once again no conso logs, no errors, nothing is even in the network tab right here. So if you clean it and click, nothing is here. It seems like this form is not getting fired and I really like it when this happens. It exposes me

2:13:36

to you and it makes me think, it makes me want to resolve this together with you watching this video. So let's try to figure it out together. Let's go all the way to the top of the file and let's see if everything is looking good. We have some imports from Hook form, react router Dom. Then we can divide our internal Imports coming from components right here. We also have some more react

2:14:00

hook form rather. This is this was react ROM, this is react hook form and then we have something from lib validation. This is the signup validation. Oh no, wait, this was supposed to be sign in. Looks like it auto imported it in the wrong way. This right here was supposed to be only sign in. Yes, because now we're talking about sign in right here and not sign up. Actually

2:14:27

disallowed us from submitting the form. Well, I guess that's its job, right? So I'm going to delete all of the conso logs right now and save the file. There we go and hope that it was just the wrong import right here. So now I'm going to expand the entire app. We can see how wonderful this signin is, sign up as well. It's instantaneous moving between the two and we can try to log in with the

2:14:57

account we have previously created. I'm going to enter my password and click sign in and we are on our homepage. This is phenomenal. I know it took some time to do this entire Au and everything else, but hey, we're finally in and now we can start focusing on our homepage. So we can close our sign in and the sign up and we can go right here to Source root pages and then homepage. Or rather, we'll

2:15:29

have to do the root layout first because that we're seeing, but then soon enough we'll move to the homage and the rest of the content. I know it took some time, but we laid out a strong foundation for everything else we're about to build. So phenomenal job coming this far into the video and now the exciting stuff begins. Let's get started with the root layout. The layout is going to play a

2:15:54

major role in turning our app from this to this where we have the sidebar on the left side, the whole middle part for the post, and then the top creators on the right. And of course it's all fully mobile responsive. So as you scroll, we have this beautiful mobile UI. So let's get started with the root layout by wrapping everything in a div that's going to have a class name equal to w-

2:16:22

fold for full width and on medium devices Flex. Now within here we'll have a couple of components. So let's go ahead and create them. We can do them within the shared and we can create a new file called top bar. TSX and run R efce inside of there. We can do a second one called Left sidebar. TSX and run r fce. If we have a left one, we're going to also have a bottom bar. So let's create a

2:16:53

bottom bar. TSX run rafc and that's everything we need so far. So let's go back into our root layout and let's use all of these components. So here we can put the top bar at the top and just self close it and import it by double clicking and pressing control space. Then we're going to have the left side bar immediately below. Also you need to import it. Then below it we're going to have a

2:17:24

section and this section is going to have a class name equal to flex D1 so it expands and then h- full for the full height and within it we want to render the outlet component. This component has to be imported from react router Dom. So outlet from react router Dom. This is similar to what we have done before for our off layout where this Outlet actually lets us show what's

2:17:59

going to be on the homepage later on. And then below it we also want to render the Bottom bar. There we go. So now we have everything we need right here. If you scroll all the way, you'll see a bottom bar there as well. So now before we start with the homepage, let's start with these individual Pages such as the top bar. Since it's at the top, this is going to be a simple section. So let's turn it into a

2:18:28

section and it's going to have a class name equal to Top Bar. Within it we can create a div and that div is going to have a class name equal to flex between padding y of four meaning top and bottom and padding X meaning left and right of five. Right here we can render a link and that link is going to point to the homepage. It's also going to have a class name equal to flex Gap D3 and items Das

2:19:02

Center because it needs to Center our image. So first let's import this link from react router Dom by saying import link from react router Dom and then this image is going to have a source equal to SL assets slimes SL logo. SVG. Once we save it, you can see snapgram appear on top. Let's also give it an Al tag off logo, a width of 130 pixels, and a height of 325 pixels.

2:19:40

There we go. Now below the link, still within this div, we want to do another div that's going to have a class name equal to flex and a gap of four. Within it we can create a button and this is going to be a reusable button component of course coming from Shad CN meaning from UI button. Within the button we can render the image that has a source equal to for SL assets SL

2:20:10

ions SL log out. SVG and the alt tag can be log out as well. There we go. You can see it on there. And then we also need to have a variant equal to ghost. That's an interesting one. We can give it a class name equal to Shad button ghost and we can give it an onclick property. So that's going to be right here on click and we simply want to call the sign out functionality. Now this sign

2:20:42

out is something we also have to Define. So we'll have to go to our queries that's going to be within lib react query and then queries and mutations and right here we'll have to copy the Ed sign in account, duplicate it right below and call it use sign out account and we simply want to use a mutation or return a mutation that doesn't have to get any properties in but it has to call the

2:21:13

sign out account function. So we can do it just like so. But of course this has to come from aight. So in the aight we'll have to create a new function like we have sign in account. We'll also have to have another export async function sign out account. We can open up a new try and catch block, consol log the error right here, and then on try we can say con session is equal to await account.

2:21:51

delete session and then we need to pass current. This is so cool. So this was provided to us by app right. So we can delete the session and then we can return deleted session. Now we have this sign out account within queries and mutations. We can import it from app right and we don't have to call it because it's going to be self calling function or rather just a function declaration here and

2:22:19

then going back to the top bar we can Define that mutation. We can do that by going here to the top and saying const mutate in this case it's going to sign out. We're going to get the is Success variable as well and that's going to be equal to use sign out account coming from lib react query queries and mutations and now we can call the sign now on click and we can also make it a

2:22:52

an actual function like so and call it here. There we go. So now we can see the log out button as well. Here we also want to add a use effect. So we can say use effect and if we have successfully navigated, so if is Success then we want to use the navigate. So right here we can import const so at the top we can import use navigate from react Rd. We can declare it as a function con navigate is

2:23:27

equal to use navigate and then if is Success we can say navigate Z. This is going to navigate us to the sign up or the signin screen and we also need to add the dependency array or we can check for is success and then import use effect from react. So the task we can import use effect coming from react. There we go. Finally we can also add a profile photo that we can click to

2:24:00

go to our profile. So right below the button we can add a link that's going to have a two and then we want to go to for SL profile. But now how do we get the ID of the currently logged in user? Well, thankfully we have created our context. So right here at the top we can say const user is equal to use user context which we have to import from atcontext SLO context and then right here we can

2:24:35

use dollar sign and curly braces and then say user. ID. We can also give this link a class name equal to flex Center Gap 3 and right within the link we can render an image that's going to have a source equal to either user. image URL or we can use some kind of a placeholder just to be safe. So that's for/ assets SL imagesprofile dplace holder.

2:25:07

SVG. If we save it we can see our huge TR. Soon enough we'll figure out why TR. I don't think I've called myself something with t are. Oh I have, it's the real JSM, so that's why it has those initials. Alt is going to be profile and then class name is going to be h-8 for height w-8 and then Tailwind allows us to make it rounded really easily by saying rounded Das full. And now we have our top

2:25:38

bar. You might have been wondering where is this stop bar right on the desktop. We don't have it, but we're immediately building this application so it works well, not well, so it works phenomenally on mobile devices. So that's why here in Mobile this phenomenal top bar appears. That's great. And now we also have the log out functionality. So if we click it actually redirects back and we can

2:26:05

immediately jump back in. Everything is working flawlessly so far. The top bar is done. Let's focus on the left sidebar next. Here is where we're going to have all of the links that we have right here. To get started with the left sidebar, we'll have to keep our window expanded so we can see it on the desktop mode which we can see right here. I guess it's tablet as well and then we can move

2:26:32

our code just a bit to the left. There we go. So let's start with creating a nav because yeah, even though it's a sidebar, it is a navigation bar. We can give it a class name equal to left sidebar. We can save it and go back and now here you can see immediately that this shifted the homepage a bit to the right. Within the nav, let's create a div that's going to have a class name equal to flex-all

2:27:00

as the elements are going to appear one on top of another and then a gap of 11 to create some space. Right within that div we're going to have our first link and this is going to be the same link as on mobile. So we can go back to our top bar and we can copy this entire link right here and paste it in the left side bar. We of course need to import Link at the top from react router Dom. So we can

2:27:27

say link and that's coming from react router Dom. If we save it's looking good but we can modify the width to 170 and the height to 36. There we go. That looks a bit better for the sidebar. Right below it we can show our link to the profile page. So let's go below the link and then create another link. This link is going to point to forward slash and it's going to be as before a dynamic link to

2:28:01

forward SL profile. Not this what I just typed but profile and then forward slash the user ID. Right and we already know where the user ID is coming from. It's going to be similar as with the top bar. So here we can IM immediately copy what we have because in the sidebar we'll also have to deal with the logout functionality. So we might as well copy most of the things we have here on the

2:28:28

top as well as what we have defined in the component. So let's copy everything from here and paste it in the left sidebar on top just replacing the name of the component to left sidebar. There we go. Now if we save this everything still works. We have the user ID D. We can give it a class name equal to flex g-3 and items Das center. Right within it we can show an image that's going to

2:28:59

have a source equal to user. image URL or SL assets SL ions SL profile Das placeholder.svg. There we go. We have our huge the real JSM. Let's give it an ALT tag of profile as well as a class name equal to age-14 width of 14 as well and rounded Das full. Now next to this we also want to show the name of the person that's logged in because we have a bit more space than on mobile. So let's create a

2:29:39

div that's going to have a class name equal to flex-all so it appears one below another and here we can do a P tag that's going to have a class name equal to body- bold. Here we can render user.name and that's going to show the real JSM and right below we can render another P tag that's going to have a class name equal to small- regular text- light-3 and it's going to say

2:30:17

at and then dynamically user. username. If we save it now we can see this is going to work but we can remove the dollar sign. There we go. How cool it is that we can immediately extract all of this user information directly from the user context. That's what we've been working on so hard while creating the authentication. So now we can simply use it. Now going below we want to render the

2:30:43

sidebar links. So let's move below this link and let's create a new UL, an unordered list that's going to have a class name equal to flex flex-all and a gap of six. Right here we might as well render all the nav links one by one by saying Link Link and then duplicate this many times. Of course each link has to have a path, it has to have some content, so it's going to expand on many lines right here.

2:31:16

Instead of that, what we try to do as good developers being more structured is we can create something known as constants file. That's a special file and folder right here above our context still within the source. So create a new folder called constants and then create a new index.ts right within it. Here you can Define some sidebar links just like so. It's going to be an array and then we

2:31:43

can say home. Anything else you want to say you can add here. Since this is not any logic but rather just static code, what we can do is in the description Down Below in the GitHub gist you can find the complete constants index.ts file. So copy it and paste it here. You can notice that this is mostly Bottom bar links as well as sidebar links. So what this allows us to do is just jump

2:32:11

right into here and open up a dynamic block of code and say sidebar links. map where we get each individual link which is of a type I nav link interface nav link which we can import from at/ types and then you can open up a new function block. Also import sidebar links from ad SLC constants. Here we can simply return something known as a nav link and a nav link is a component coming from react

2:32:45

router Dom. So right here on top we can import link as well as a nav link. There we go. So now going here, each nav link has to have a two property. So where are we going to? In this case we're going to link that route because each sidebar link has a route, an image URL, and a label. So now we can also give it a class name equal to left sidebar daslink and as a matter of fact I think we need

2:33:19

to wrap this nav link with an Li because An Li is a list item that has to go between the uls. So you can put the nav link between the Li and then the class name of left sidebar link is actually going to go to the LI. Since we're mapping over it, we also have to give it a key equal to link. label. Now our nav link is going to say something right and that something is link.

2:33:47

label. So if we save it now you can see all of these different labels. Let's style it a bit further by giving it a class name equal to flex gap of four items Das Center and padding off four. There we go. This gives us much more space. We can also render an image right here next to the label by saying IMG. We can give it a source equal to link. image URL. Alt is equal to link.

2:34:22

label and we can give it a class name equal to group- hover invert D white. So this is just to make the color work. And there we go. So now if you hover over it you cannot see it. We're about to fix that but this is looking good. But on the final version of our application you can see that we have a currently active link. So we can do that here as well. But how do we figure

2:34:50

out on which link are we on? Well, we have to use something known as a use location. So right here from react R Dom we can also import use location which is a hook and then we can declare it right here at the top by saying const path name is equal to use location and now we can use that path name right here in the sidebar links to create a Boolean variable called is

2:35:22

active. So const is active is equal to and it's active if the path name is equal to link. route. Based off of this is active Boolean, we can also change some Styles. So in this Li we can make it Dynamic by turning it into a template string like so and then we can say if is active then also render the BG primary 500. So if we save it you can see the color changes. Now the last thing is also

2:35:57

to change the color of the icon. So let's change the image to be also dyamic template string and if it is active then we can call the invert white. So if I now save it, we have to properly spell it for this to work. It seems like we have one extra brace. So if we fix it, there we go. But if we hover it's not yet fixed. So let's see what that is about. Let's try to properly

2:36:26

space it out so we can better see it. Group hover invert white and then we have if is active then also invert white. If we go here you can see that it works really nicely. It inverts but in this one it doesn't. That's interesting. That's because we have to make this a group. So this Li actually has to have a group property so it knows it's grouped with this. So if we hover over this it

2:36:55

Actually applies a group hover. There we go. So now this is such a wonderful sidebar. The last thing we're missing is the logout functionality. So let's add that right here below this ul and then going one more time below the div here we want to add a button. And this button is going to be only almost exactly the same as in the top bar, so we can just copy this entire sign out

2:37:22

button and then paste it here. If you do that, you can notice the icon appear. But here we have a bit more space, so we can also add the text that says log out. And let's also space this correctly. So we have a variant class name, onclick, and then we have an image. And then finally below the image we can have a P tag that's going to say log out. And we can give it a class name equal to small

2:37:51

medium and LG base medium. So if we save it, you can see log out. And that concludes our sidebar. Of course, now if you try clicking explore, nothing's going to happen because that route doesn't yet exist. So while we're here, what do you say that we implement the routing so that everything we work so hard on doesn't just disappear? So to do that, we can now go back to our main or rather to

2:38:21

our app right here, because that's where we have the routing. And we can implement all the other private routes. And trust me, we're going to have quite a few. So let's create a new route which is going to be a self-closing component with a path of for SL explore. And it's going to render an element that's going to be called, I think you can guess it, explore. There we go. So now

2:38:48

we want to duplicate this many times below. The second one is going to be saved, meaning all the saved posts right here. But we cannot now see it because we broke it. And that's going to render saved. Then we have to have all users which is going to go to all users. Let's expand this just a bit. Then we can have create post and that's going to be create post. We can also have update Das poost and we need

2:39:24

to know the ID of the post we're updating. Take care of these columns right here. That's going to be edit post. Then we're going to have a specific post details, so that's going to be posts and then the ID of that post. So that's going to be post details. And then we have a profile, so that's for/ profile slid. And we can also add this special asterisk which means that everything

2:39:52

after the profile is also going to point to that profile. We can say profile. And finally we're going to have the update Das profile slid where we're going to render the update profile. And with that said, we now have all of our routes. The last thing we have to do is create those pages within the pages folder right here. So let's create them one by one. That's going to be starting from the

2:40:24

top all users. TSX where we can run ource. Let's go to the next one. That's going to be create post. TSX and again run RFC. After create post we're going to have edit post. TSX where we're going to create rafc. After that we're going to have explore. TSX once again run rce. After that we're going to run post details. TSX run rce. We're going to have our profile of course TSX and run

2:41:08

RFC. And we're going to also have our saved for saved posts. TSX and run RFC. And we're going to also have the update profile. TSX and we can run R afce. So now we have all of these pages. You can close them by pressing control or command W. Don't do that while you're in your browser. Move to your Visual Studio code because usually it would close your tab. And then you can close all of these

2:41:38

tabs and we can go to this index within the pages and we can export all of these components so that it's easier to import them. So let's duplicate this a few times, quite a few actually. And then we can export explore from exlore. We can also export saved. We can export create post. We can export profile. We can export update profile. We can export edit post. We can export post details

2:42:17

and we can export all users right here as well. And I think we're going to use the like post as well. So let's add like posts as well. And we need to create the component for liked posts. TSX and run RFC. Now that we have created all of these pages within app, you can doubleclick each word, press control or command space, and it's going to automatically give you the import. Repeat

2:42:50

this procedure all seven or eight times, however many components we have. So if you do this, you can see that they're all getting imported from one line, which is pretty cool. That's exactly why we needed to export them. Whereas these components are being imported in their own individual lines. So now if we save this file and reload the page, you can see the sidebar and you can see that it

2:43:19

says explore and it says home. The URL changes and what it says also changes. So now we have complete routing implemented in our great application. Before we focus on that central part, we're going to first focus on the bottom bar, which is a bit weird right. Where do we have a bottom bar here? Well, as with the top bar, it only happens on mobile devices. I mean how cool is this? This is a special

2:43:50

native mobile like bottom bar. So you can press your, so you can navigate your app with your thumb. How cool is that? So now we're going to definitely stay in mobile view. We can return back to our root layout and move to our bottom bar as that's going to be the component we're going to implement next. Trust me, it's not going to be that complicated. We'll be able to use the majority of things we

2:44:18

have in the left sidebar to make it happen. So first of all, let's create a section and that section is going to have a class name equal to bottom dasar. We can import a link as well as use location coming from react router Dom. And then we can initialize that path name to know on which page are we currently on. So const path name is equal to use location. Now we can do something similar

2:44:56

to what we've done with the sidebar. So let's go into the sidebar and let's copy all of these sidebar links all the way until the end and then paste it right here in the bottom bar. So essentially we are going over now the side links this time but bottom bar links which you have to import from at SL constants. In this case we don't need to provide the interface and instead of a nav link

2:45:28

we're going to use a link. Now if you save this already it's looking okay, but we can make it look better. Instead of a left sidebar link, you can say bottom bar link. But in this case we don't even need an l. Everything is going to be in a link. So simply copy the key and the class name from the LI, remove it completely as well as the ending tag, and then add it instead of the class name right here to the

2:45:59

link. There we go, that's more like it. Let's put this in a new line. Let's remove the bottom bar link. I don't think we'll need it in this case. We just want to apply a couple of class names if we are active. So if the current link is active, in that case we want to provide it a BG primary 500 as well as a rounded Das 10 pixels to make it just a bit rounded. And then usually it has to be

2:46:28

flex center, so we center the link. See how it changes on the bottom. We want to give it a flex call so it appears one on top of another because on mobile we have more vertical space than horizontal. A gap of one to create some space, a padding of two, and a transition. This is going to just make it animate slowly once we hover. Finally we want to style the image by just giving it on active

2:46:56

invert white. And then instead of a link label, let's simply create a P tag that's going to render the link label but it's going to have a class name equal to Tiny Das medium text- light-2. So if we save it, this is now looking good. But is it looking close to the finished version? Okay, we're almost there. The icons have to be a bit smaller, so we can add a width of 16 and a height of 16 as

2:47:30

well. And now I think we're there. Keep in mind this automatically works as well, so we can now navigate on mobile devices too. This is pretty crazy. And it also of course works with a sidebar. This is great. And I would want to focus on the homepage so bad because we've been waiting to implement this beautiful homepage for a long time. But I'm sure that you're aware that we're

2:47:58

missing something before we dive into it right. And that something is create post. How can we see the homepage if we don't yet have any posts? So I'll have to keep you waiting a bit longer until we do the homepage. We'll have to focus on create post first. So let's collapse this. We have a beautiful create post on mobile as well. We can close this the root layout as well and we can move into

2:48:28

create post page. As soon as we have this, we'll be ready to fetch those posts on the homepage and display them. So first of all the layout and then the functionality of creating and finally reading those posts on the homepage. Once again, exciting stuff coming really soon. To start creating our create post page, we can wrap everything inside of a div. That div is going to have a class name

2:49:00

equal to flex and then flex one so it expands nicely. Let's go back to our current website and let's add another div that's inside of this existing div that's going to have a class name equal to common Das container as we're going to reuse it a couple of times. Within this div we can have another div and this div is going to render an image. This image is going to have a source

2:49:28

equal to for slash assets SL icons SL a-post SVG. It's also going to have a width of 36 and a height of 36 and it's going to have an Al tag of ad. That's because this is going to be an icon to add a post. Finally we can create an H2 right below it that's going to say create post. There we go. We can style it a bit by giving it a class name equal to H3 dasb on medium devices H2

2:50:08

dasb. It's going to be text left as well as w- full. We want to style this out div by giving it a class name equal to Max dw- 5xl so really wide width. We also want to give it a flex start so now it appears as a flex container, a gap of three to create some space, a justify Das start, and a w-o for full width. And now we have our create post similar to what we have here. But now as you can notice, we start

2:50:45

with something known as a form similar to what we've done with our sign in and the sign up. A form with a couple of fields: caption, photos, location, and tags. So in this case we want to create this as a new component. It's going to be called a post form. So let's create a new component within the components folder and then not within shared but rather within a new folder called forms. Finally

2:51:14

within the form we can create a post form. TSX inside of which we can run RFC. Now back in our create post we can simply render the post form component and import it from components form post form. There we go. This now allows us to dive into this form which we're going to create as a reusable component so we can reuse it later on in many different places. So how is our form going to look

2:51:45

like? Well, it's going to be a typical shaten form. So immediately we can go back here and search for our form and then we can get our example. We know how form fields look like. We know that we need to have a form schema as well and then we need to define a form, define the onsubmit, and finally build out our form. So let's do so step by step. First we can import everything that we need from

2:52:13

here and paste it right here at the top. Then we're going to define the form as well as define the onsubmit that's going to be within the post form. Then we need to import everything we need to make her form happen. So we can put that right here. And finally we can define the form within our application right here. Now if we save this and go back back, you can see simple username form.

2:52:48

But instead of a simple username, let's make it a bit more interesting. Our form is going to have a class name not of space Y8 but of flex flex-all gap of N w-o and then maxw d5xl. Within it we have a form field of caption. It's going to be a form item with a form label that's going to have a class name equal to Shad Das formore label and it's going to say caption. Instead of an input, this is

2:53:29

going to be a text area. So this is another component that we have to install. So let's copy it. Let's go to our second terminal and let's say MPX shaten UI latest add text area with a lowercase T and press enter. Once it is installed, we can simply import it from do/ UI text area. We won't be needing a form description, but to our form message we can provide a class name equal to Shad Das

2:54:04

formore message. And we can also style our text area by giving it a class name equal to sh p- text area and custom- scrollbar. Now this is more like it. We can now duplicate this form field one more time below. This time it's going to say file. It can say add photos right here as the form label. But this time it's not going to be a text area. It's going to be our own component that we'll create

2:54:42

called file uploader. So let's simply call it like this and let's define it within our components and then shared called file uploader dtsx and we can run RFC. Back in the post form we can import it right here. Save it and we can see file uploader soon. We're going to make that happen as well. But for now, let's duplicate our form field one more time below. This time it's going to say

2:55:16

location and it's going to render a form label that's going to say add location. Instead of a file uploader, it's going to render a regular input that's going to have a type is equal to text and a class name equal to Shad input. There we go. If we save it, we have a location input. And finally we can duplicate this form field one more time below for the last time. We're going to

2:55:46

say tags. We can say add tags and then in parentheses separated by comma, just like this so people know what they have to do. We can end parentheses. And then we can also render an input. It's also going to be of a type text but this time we can give it a placeholder something like art, expression, and learn whatever. Right, some tags that we can add there. There we go. If we're doing a coding application, it can

2:56:20

be JS, react, and nextjs. There we go. So if we save it, this looks great. And finally we have to have a button. So below all of these form fields we can create a new div. Inside of that div we can have our button and below it we're going to have another button. The first button is going to be not of a type submit but of a type button. It's going to have a class name equal to Shad button unor

2:56:55

dark4 and it's going to say not submit but cancel. Okay, so we need to be able to cancel the submit of the form. Let's put this in multiple lines. There we go. So this is one of our buttons. And then the second one will be submit. It's going to say submit. It's going to have a class name equal to Shad button primary and wh space no wrap. There we go. Now we can style this div that's wrapping these

2:57:28

two buttons by giving it a class name equal to flex Gap D4 items D Center and justify Das end. There we go. Now they're nicely aligned at the end. Now the majority of the UI is done. But let's go ahead and focus on the file uploader. That's one component that's going to be one of the most important components in our entire application. We are building a snapgram and you have to

2:57:55

snap some photos right and then upload them. So let's go ahead and implement our file uploader component. To implement it, we'll use a package called react drop zone that allows you to drop some things in. So let's install it by running mpm install react d drop zone. And while it's getting installed, let's browse his docs. If you Google react Drop Zone, this is the first thing

2:58:23

that's going to show up. And here you can see its usage. First we need to import react and use call back from react as well as use drop zone. So let's do just that. Never reinvent the wheel. Always just refer to documentation when you can. Then we need to get a function called on drop that we can put right here. There we go. And then our outer div needs to include all the get root props

2:58:54

and the input needs to include the get input props. So let's copy this entire div right here. There we go. There are multiple ways of doing it as you can see, but for now we're going to be happy with what we have. At least I hope. Let's save it and it says drag and drop some files. But we can really see where to drag and drop them. So let's style this a bit further. Let's give this div a class

2:59:22

name equal to flex D Center flex-all BG D dark D3 and rounded d excl as well as cursor Das pointer so we know it's clickable. Then let's make this input a class name equal to cursor Das pointer so we know we can click it as well. And then let's create a new use state for a file URL. So right here at the top we can say use state which is going to be equal to use State snippet and let's call it file

3:00:02

URL as well as set file URL at the start equal to an empty string. We can also import use State coming from react right here at the top. Use State great. So now instead of saying is drag active, let's rather check for is a file URL there. Has it been uploaded? If it has been uploaded, we can return some kind of a div right here. Else if it hasn't, we can return something else. So let's create a new

3:00:38

div. Let's say test two. And here let's say a div that's go going to say test one. We can delete everything else. So now you can see test two meaning we don't yet have a file URL. So now let's create this nice interface from which it's apparent that we can actually upload the files. To do it, we can give this div a class name equal to fileuploader dashbox and we can save it.

3:01:10

Within it we can create an image that's going to have a source equal to SL assets SL ions SL file- upload. SVG. That's much better. The width is going to be about 96 and the height is going to be about 77. Finally we can give it an Al tag equal to file upload. Below it we can create a new H3 that's going to say SVG, PNG, JPEG. And we can give it a class name that's going to be equal to text- light

3:01:52

D4 small regular and margin bottom of six. There we go. Now instead of making this an H3, let's make this a P tag because it's small. And then above this P tag, let's create an H3. This H3 is going to say drag photo here. We can give it a class name equal to base- medium as well as text- light-2, margin bottom of two, and margin top of six. There we go. That's more like

3:02:28

it. And we can also add a button in case people want to click and not drag. So we can add a button that's going to say select from computer. We can then import this from UI button and give it a class name equal to Shad button undor dark4 and save it. There we go. This is more like it. Now the last thing we have to do is implement the functionality. So how are we going to

3:03:01

figure out when something gets uploaded? Well, in this case we have the get root props and get input props. We won't be needing is drag active from use Drop Zone. On drop to the second parameter to this used drop zone is going to be what do we accept. So we can say accept an object of image everything and we can define that right here. That's going to be an array of PNG. We can also do a JPEG and we can

3:03:36

also do a DOT jpeg like this. Also maybe an SVG, who knows why not. There we go. So now we're defining what can we use. But now let's define a function on drop. What happens once we actually drop some files? Well, let's also create another use state right here. And this use state is going to be for the file itself. So file and then set file at the start equal to an empty array because we can pass multiple

3:04:07

files. And the file URL is of course only the URL of the file we pass. So what do we do once we drop it? We set file to be equal to accepted files. And then as props to this component, we're going to pass two additional things. So going back to our post form, finding where we have the file uploader, we can pass two things. We can pass the field change and we can also pass the media

3:04:39

URL. The field change is coming right here from the field of this form field. So that's going to be field.on change. But the media URL, how do we know what is the URL of this media? Well, that's going to be coming through props. So right here we can say the post form is going to accept a post. But this is only if we're updating it right. If we're updating the post, then we need to have

3:05:07

an existing post. Otherwise we don't have anything. So in this case, if we do have a post, then we can pass post question mark. image URL. And now we can dive into the file uploader and accept those props. So we're getting the field change as well as media URL. And for now we can put these as a type any. And alongside setting the file, we can also set field change like

3:05:37

this to accepted files. And then we can set file URL to be equal to URL dot create object URL and then we pass in the accepted files zero, so the first file that we have there. And that's going to give us the URL. As the callback, we want to add the file right here. We need to define the type and this type has already been defined by react drop zone. So we just need to import it at the

3:06:09

top by saying file with path. And now we can say this is of a type right here file with path. We can also define these two props by saying file uploader props. And then we can define this interface or the type right above by saying type file uploader props is equal to we first have the field change which is a function that accepts files which is of a type an array of files and it doesn't

3:06:52

return anything, so void. And then the media URL which is going to be of a type string. Great. So now it's complaining a bit about these accepted files. That's because here we can define what a file is. A file is an array of files. So we can define it like so and we can put it in a new line so it's easier to see what's happening. There we go. We have the used callback where we

3:07:21

have accepted files and this is actually going to be an array of file width paths. And then everything is good. Once we do that, we're actually ready to set all of our states to the file that gets uploaded. So let's try to upload a file. I'm going to grab one from our finished application. Let's do this one. I'm going to save it and now I can add it right here and there we go. It gets back to

3:07:50

test one. But hey, let's actually show the file that's there. So this div can have a class name equal to flex D1 justify Das Center w- full for full width, padding five, and en large devices padding 10. Okay, that just gave it some padding. But now let's actually render the image. It's going to be a self-closing image that's going to have a source equal to file URL. It's going to have an Al tag of

3:08:26

image. It's going to have a class name equal to fileuploader das IMG. And there we go. Finally let's add a P tag right below that's going to say click or drag photo to replace. And let's style it a bit by giving it a class name equal to fileuploader das label. And we have to put this outside of this div right here but within a react fragment. So here we can put a react fragment, close the div,

3:09:03

and then put the P tag outside of the div but inside of the fragment. If we save it, that's looking much better. So now we can add a caption, we can add a photo, location, and the tags, and click submit. The file uploader is done. But let's actually implement the logic for adding all of these other fields. First of all, the form fields are complaining that this doesn't exist. File

3:09:31

doesn't exist, caption doesn't exist. And that's because we haven't yet validated our form using Zod. So right here we can define what our form should accept. This form should accept a caption which is going to be if the post exists then post question mark. Caption. This is for when we're editing. Else it's going to be an empty string. The file is going to be an array

3:09:58

of files. Location is going to be if we already have a post location then post location. Else an empty string. And tags is going to be if we have a post then post. tags. join by a comma. Else it's simply going to be an empty string. Now you can see that it's complaining that this caption does not exist. That's because we are now using a default form schema. But we actually want to turn this

3:10:28

into post validation. So let's head into our validations right here and we can duplicate this sign inv validation right below. We can call this something like post validation. It's not going to have an email, not a password, but it's going to have a caption of a type z.

3:10:52

string. It's going to be a minimum of about five characters and a maximum of about 2,200 characters. Let's also have a file which is going to be z. custom and we can define the value right here of file or rather an array of files. There we go. It's so handy how we can define custom types. It's going to have a location which is going to be of a type z. string. Let's do Min of two, Max 100,

3:11:27

and then tags is going to be a z. string. There we go. So now we have this custom post validation and we can use it right here three times where mentioned the form schema and then you have to import it from lib validation. There we go. So now our post knows what we're trying to render. Oh, I just noticed here we're using the input. We have to spread the field. So we have to say do dot field.

3:11:57

Like so, and also we have to do the same for the last one right here. Do dot field. There we go. We're getting there. We have a couple more errors as you can see. We don't need this form schema as we have created it in another file. It's also complaining about what we're receiving here. TypeScript is also complaining about the type of our props here. So we can say this is going to be

3:12:24

of post form props, and we can define it right here by saying type post form props is equal to where we have a post question mark, meaning sometimes it's going to be here, sometimes it will not, and this is of a type models do document, and this models is going to be coming from. Aight, we also are never using a form description, and we can now structure this more nicely by putting it in a single

3:12:57

line. There we go. So now we have our form, which we're almost there. We can actually put the values in. The validation is working as you can see. We can upload images, add a location, and add tags. The last thing we have to do is implement the logic what happens once we click submit, and this is where we're going to connect with aite and create a new post based off of these values. Within here we

3:13:27

can now use this new hook coming from React Query. So let's define it right here at the top by saying const mutate async, which we can call create post, and is pending, which we can call is loading create, that is equal to use create post, and we can import use create post coming from queries and mutations. Now that we have it, we can simply call this create post right within

3:14:06

onSubmit. The way in which we're going to call it is const new post is equal to await create post, to which we pass an object where we spread all values of a post and then pass the user ID of a type user.

3:14:28

ID of a user that has created the post. Once again, how are we going to get the user that's creating the post? Well, that's pretty simple. We have created our context. So now at the top we can say const user is equal to use user context, and we can import this from Context o context, and immediately you get the ID. So now we have this new post, and what do we want to do once we create it? Well, we

3:15:03

can say if there is no new post, in that case we can return a toast that's going to have a title of something like "Please try again", and this toast is coming from const toast is equal to use toast coming from UI use toast. There we go. What happens if we successfully created a new post? Well, in that case we simply want to navigate to the homepage. So to be able to navigate, we have to

3:15:39

import use navigate from react router Dom. Let's do it right here: import use navigate from react router Dom, and then we can simply define it as a hook: const navigate is equal to use navigate, and then we call it right here: navigate to forward slash. Make sure to make the onSubmit an async function because we're using the await action of create post. So with all of this, I'm

3:16:19

hoping we're successfully creating our post. If we get redirected to the homepage, it means we're good. So let's expand it to see it in full glory, and let's create our first post. I'm going to add our photo right here. I'm going to say something like "Nice Greenery on a nice River", not as thoughtful as Chad jpt, but what can you do? And we have a location. I'm not sure where this is. Let's do

3:16:51

something like "River", and we can add something like "nature". Finally, let's click submit. We got redirected, but it does say "Please try again". So I'm guessing it broke somewhere. Let's open up the inspect element, and then let's go to our console, and it says "The current user is not authorized to perform the requested action." Okay, that's interesting. That could be because we haven't set up the

3:17:26

permissions for us to upload new items. So let's go to Appwrite, let's go to Storage, Media, and then here Settings, and we can add a new role for any to create, read, update, and delete different assets from our storage. Just to be sure, let's go to Database, snapgram, post, and it's good. It wasn't actually created, so that's what matters. So now let's give it one more shot. I'm

3:18:01

going to do something like "River and nature". I'm going to upload the post one more time. I'm going to add a location something like "a river", and I'm going to say "nature" right here as well, and I'm going to click submit. We indeed get redirected this time without any errors, but we still cannot know whether the post was actually created, or can we? If we go to Appwrite and go to Posts and

3:18:36

reload, we can see our first post appear right here. It was created on this date, and it has this data: liked posts, name, username, account ID, email, bio, image ID, image URL, save. Everything is here. So we know that the post was created in the database, but was the image created in storage? Let's check that out. Under Media, we have our preview.png, and we can see this image on Appwrite server.

3:19:13

This is amazing. So now the last thing we'll have to do is implement the homepage and fetch this phenomenal post we've created. So let's do that next. To create a new post, we first have to create a function that's going to do so in Appwrite before we can call it. So let's go ahead and let's go to our source lib appwrite API, and right here below sign out account, let's export async function

3:19:48

create post that's going to receive a post of a type I as an interface new post coming from add for/ types. Make sure to import it, and then we can open up a new try and catch block. You know the drill. Right in the catch we can simply console log the error, but in the try is where the magic happens. Here, first we need to upload our file to Appwrite storage. Let's write that down:

3:20:22

upload image to storage. So we can say const uploaded file is equal to await upload file where we pass the post. file0, meaning the first post. Now this upload file function is another function we'll create. Let's do it right below: export async function upload file that accepts a file of a type file. It's going to have a try and catch block. Within the catch we're going

3:20:59

to console log the error, but within the catch we can say const uploaded file is equal to await storage. create file. So the first time in this application we're diving into the storage functionality. Remember we had account, databases, avatars, but now also storage. This is used for saving media. We want to pass a couple of things. We first want to pass the storage ID by saying

3:21:33

appwrite config do storage ID. Then we want to make a unique ID by saying id. unique, and then want to pass the file which we actually want to upload. Finally, we want to return the uploaded file. So now from the function above we get this file back, and we are ready to attach it to a post that we're about to create in a database. Just to be sure, we can do one check: if there is no uploaded

3:22:03

file, throw an error. Else, we need to get the file URL. So we can say const file URL is equal to get file preview, to which we have to pass the uploaded file. dollar sign ID. And this get file preview is another function we'll create because we'll want to reuse it multiple times across this application. So let's create a new export async function get file preview. It's

3:22:38

going to get one program of file ID of a type string into it's going to have a try and catch where we console log the error in the catch, and in the try we need to get the preview. So we can say const file URL is equal to storage. get file preview. Here we first need to pass the app config do storage ID, we pass the file ID we want to get, and then we specify the width and the

3:23:15

height, which in this case I'm going to set to 2,000. Then we specify the gravity, meaning where is it going to show. In this case we're going to say top, and finally you specify the quality. In this case we're going to get 100, the top quality. Finally, once we get it, we can simply return a file URL. Now we can go back to the function above. We now have our file URL, and

3:23:44

just to be sure we can add an if check: if no file URL, throw a new error. But also, not only do we want to throw an error, we also want to delete a file because something was corrupted, something wasn't right with it. So let's create a new function delete file, to which we're going to pass the uploaded file do dollar sign ID. There we go. So we're thinking up front: if something was corrupted, we want

3:24:20

to delete the previous file. And let's create this function: export async function delete file, which once again accepts a file ID of a type string of a file we want to create. It's going to be a try and catch block with the console log of the error right here below error, and then here we can say await storage. delete file, to which we pass the appwrite config storage ID and

3:25:01

the file ID of the file we want to delete, and we can return an object with a status of okay. There we go. So now we're also deleting a file. And now if we have successfully created a file, if it isn't corrupted, then we are almost ready to create a post. But first we have to deal with the tags. So we need to convert tags into an array. We can do that by saying const tags is equal to

3:25:36

post. tags question mark. replace. We want to replace all of the empty strings, so we can do a regular expression like so globally. We're looking for all the spaces and we replace it with an empty space, and then we split them by a comma. So this will ensure to then split all of our tags, or we can say just an empty string. And finally, we are ready to save the new post database by saying const

3:26:08

new post is equal to await databases. create document. First we pass the database ID we want to update, so appwrite config database ID. Then we pass which collection do we want to update by passing the appwrite config do postcollection ID. We define the unique ID that we want to create, meaning the post like so, and then we need to pass the entire object containing all the data about the

3:26:44

post such as creator of a type post. user ID, the caption which is going to be of a post. caption, image URL which is going to be a file URL, image ID which is going to be uploaded file. doar Sun ID, location which is going to be post.

3:27:09

location, and then tags which is going to be set to tags. And now this is saving this new post in the database. Finally, we want to check if the new post was created. So if no new post, in that case we again want to delete this file. So we can call await delete file, and we want to pass the uploaded file. doar sign ID because something went wrong, and we want to throw a new error. Finally, if all of that

3:27:43

succeeded, we can return a new post. And with this, we're done with the creation of our post. We're building a production ready application, so we have a lot of checks. We need to ensure that everything is going well. If it doesn't go well, we have to delete our file not to overload our storage, right? So this is now our function that will create a post. Now we have to call this create post as a

3:28:10

mutation. So we go back to our React Query queries and mutations. We can collapse the existing ones and create a new one right here below. We can export const use create post, then we want to say as before return use mutation to which we pass the mutation FN as in function that's going to get in a post of a type I new post, and we want to call a create post to which we pass that post. Of course we

3:28:47

have to import the create post from where we just created it at appwrite API, and also the I new post from at/ types. But now this is not the only thing we want to do. Once we create a post, we also want to query all the existing posts so we can show them on the homepage. So let's say const query client is equal to use Query client, and then right here after the mutation function

3:29:17

we can say on success. So what's going to happen on success? We create this callback function and say query client. invalidate queries, and here we can pass the filters based off of which we want to invalidate the query. Specifically, we want to choose a query key which is going to be something like posts, or rather in this case not posts but get recent posts. Why is that? And why

3:29:53

do we need to invalidate it? Well, that's the beauty of React Query. It allows us to fetch new fresh data and not let the data go stale. So the next time we try to get recent posts, it actually invalidated this query, which means that it will not be able to get post from cache; rather it will need to recall it again from the server. So that's why we have to do it this way and invalidate the query for

3:30:21

the recent posts after we create a new post. I hope that makes sense. Now later on we're going to have many of these query keys, and it's a good idea to keep them somewhere and keep them safe. So what we can do is create a new file right here in react query called query keys. TS, and there we can define something known as an enum. So we can say export enum query keys. This is an

3:30:53

enumeration. What it means is that we can define or connect one key with one string. For example, get recent posts is going to be a string of get recent posts. Now why do we have to do this? Well, that's because if you just misspell something here like get posts like this or get recent post, maybe that's even a bigger misspelling, it might be really really hard to notice, almost impossible,

3:31:25

and you can spend hours looking for this bug. But on the other hand, if you do something like this array query unor keys. get recent posts, it's impossible to miss it because you can import it specifically from query keys, and then you know it's going to be right. And now if I misspell it here, it's going to immediately complain. So this is a pro tip when building large applications: how

3:31:56

to save yourself from typos. Create an enum where you'll be able to create more different versions of this. So in the description down below, you can find all query keys. TS. It's going to be just a couple more, and we'll use these later on to invalidate specific queries so we can always keep our data fresh. Great. So now we have our use create post mutation, and we can call it within. Can

3:32:24

you guess where? Within post form. Yep, we finally got there. We can start by creating the structure for our homepage. We're going to have a div that's going to have a class name equal to flex and flex x one so it expands. Within it we're going to have another div that's going to have a class name is equal to home Das container. If we save this, we cannot see a lot, but it's there. Let's go ahead

3:32:55

and move this over to the side so now it's easier to develop. Right within our home container, we can create another div that's going to have a class name equal to home- poost, and within it we can create an H2 that's going to say "Home Feed". There we go. The first thing we can see here, let's give it a class name equal to H3 dasb on medium devices, H2 dasb text- left and w- full. So now we can see it on

3:33:32

the top left. Now immediately below, we want to show some kind of a loader component if posts are loading. So let's create a fake const is post loading which is going to be set to let's do true for now. Immediately below we can say if is post loading and if there's no posts, and post is going to be set to null for now, if there's no that then we can show the loading right here or

3:34:05

rather a loader. I believe we called it. We can import it immediately. And else we can actually create a UL that's going to allow us to loop over all of our posts. So for now we can see this great loading, but now let's focus on what matters more, and that is fetching all of the posts. To fetch the posts, we'll have to go to our queries, and here we'll have to create a

3:34:32

new query to get recent posts by saying export const use get recent posts. This is going to be a function that's going to return a use Query, no longer a mutation, rather a use query where the query key of what we want to get is going to be an array of query keys. get recentposts, and a query function meaning what will get executed once we try to fetch this. This will have to be a function coming

3:35:11

from Appwrite. So now we have to move to the Appwrite API and create a new function: export async function get recent posts, where we can set the posts to be equal to await databases. list documents. To that we have to provide the appwrite config database ID, appwrite config do post collection ID as the second parameter, and then we can define in which order do we want to get it. So we can say query.

3:35:52

orderes as in descending DEC based off of the created at criteria, so the latest ones are going to appear on top. And then we can also do another query. limit to 20 posts tops. And this has to be as the second parameter to our query just like this. Then we can fix this right here, and we can say if there's no posts then we can throw an error that's going to look like this,

3:36:23

else we can simply return posts. So now we can go back to our queries and mutations, and we can simply say get recent posts import it at the top, and now this use get recent posts is going to expose this function to get called. So let's now go back right here, and let's declare a hook that we can call const where we get data. So with every query you get something known as a data object,

3:36:54

and you can rename it to in this case post. We get the not is loading anymore, it's going to be is pending, and that's going to be is post loading. And then finally is error, you also get that. We can say is error posts, and that's going to be equal to a hook of use get recent posts, which we can simply import and call. Now if we save this, it's going to automatically know whether we have to

3:37:23

load something or not, and as you can see the loading was immediately switched off, and we can render test. And as you can see we can see it. That means that we indeed have some posts to load. So let's create the UI for loading a post. We can give this UL a class name equal to flex flex-all so they appear one below another, Flex D1 a gap of nine for some spacing, and a w- full for full width. Now

3:37:58

here we want to map over the posts by saying posts question mark. documents. map where we get each individual post of a type models. document, and the models has to be imported from Appwrite, and then we can instantly return an Li which is a list item that for now can render something like post. tile. If we save it, we cannot see anything. Let's see if I properly called it. Is it a title or

3:38:29

is it something else? Well, if I go to Appwrite, we can see we have the preview image. This is under storage, but if I go to databases, database posts, and here we can see all the attributes that this document has under data. So we have likes, caption. Yeah, let's do caption: post.

3:38:51

caption. Now if we do it, we can see "River and nature", which means we're getting it right here from Appwrite from our own server database. How cool is that? But instead of simply showing the caption, let's show something more: a nice looking post. So to do it, we can render a new component called post card. This is going to be a self-closing component to which we're going to pass the post as the first and only

3:39:23

prop. There we go. Now this postcard, of course, is something we have to create. So within components and then shared, we can create a new post card. TSX, run RFC, and we can import it right here within the homepage. Once you do that, you can see the postcard, and now within the postcard we are ready to implement the UI of the postcard. First of all, we know that it's going to accept posts as the prop. So we

3:39:59

can say post. Did we pass it as a post or posts? Yeah, it's definitely going to be post because it's singular one. So we can say post is going to be of a type post post card props, where we can define it right here at the top: type postcard props is going to be post of models. document, and this models is coming from Appwrite. So immediately know the structure of this document. Once

3:40:29

we get it, we can use its data and then render it. So let's create a new div that's going to have a class name equal to post-c card that's going to create this nice rectangle. We can also do another one right below that's going to have a class name equal to flex between. Within it we can create another div that's going to have a class name equal to flex items Das Center and a gap

3:41:01

of three, and then there we can render who created it. So that's going to be this right here: Hobbit with a photo two days ago, and then tags that were added. So let's create a new link, and this link has to be imported. So we can say import link from react router Dom. That link is going to point to the Creator who created it. So we can say to that's going to be dynamic: forward SL profile

3:41:36

slost doc creator. dollar sign ID. Here we can show the Creator's image by saying image has a source of equal to post question mark.

3:41:51

Creator question mark. image URL, or we can do a default of SL assets SL ions SL profile dplace holder. SVG. There we go. That's a huge the real JSM. We can also give it an ALT tag of creator and a class name of rounded D full W of 12, and then on large devices h of 12 as well. Below that link, we can render a div that's going to have a class name equal to flex flex-all, and within it we can render a P

3:42:34

tag that's going to render the post. creator. name. Okay, that's better. Below this P tag, we can render a div that's going to render a new P tag, and within here we can show the post. dollar sign created at. There we go. So now we have the full date. Below it we can add some kind of a dash, and then add another one that's going to say post.

3:43:02

location. There we go. So now we have almost everything we need. But let's go ahead and style it a bit better. This first P tag is going to have a class name equal to base- medium. This is going to make it bolder. On large devices it's going to be body bold, and it's going to be text- light-1. The div below is going to have a class name of flex Das Center that's going to center it, a gap of Two, and a

3:43:35

text of light three because it's not so important as the Creator name. The P tag below can have a class name of subtle semi bold so it's a bit less important, and a large devices small regular. Finally, the last P tag is going to have a class name of subtle D semi bold, and a large devices small regular. So same thing. Now the last thing we have to figure out is how to actually format

3:44:09

this date string into something that makes sense, like on here we say "two days ago". And this, my friends, is the job for Chad GPT. No longer do you have to create these functions on your own. You can Google it, or you can simply ask Chad GPT to do it for you. So if you go to chat GPT, say something like: "I have this date string literally like that. I have this date string. I'm building a social media app in

3:44:43

JavaScript, and I want to convert that date string into a more meaningful format like two days ago or two hours ago. Create a JavaScript function that does that." Okay, I could have been a bit more precise, but this is how we can do it as well. Hopefully it's going to give us something we can work with. It created a function called format date, and it showed us how we can use it. So let's

3:45:17

simply copy this function, and let's go right here to our source lib and then utils dots. Within here you can paste this function, and we can also say export function format date. Here our TypeScript is complaining a bit because I forgot to tell chat GPT to make it in TypeScript. So I can simply say "make it TypeScript". That should do the trick, right? Um, let's see. There we go. Certainly, that's great.

3:45:49

So we can simply copy it again, and it should have no problems at all. We just have to export it. There we go: export format date. Now we can import this right here and wrap the post created at. So we can say format date wrapped, and then we can simply import it from l utils. If we do that and go back, you can see "one day ago", which is exactly when I posted it. Sometimes it's possible that

3:46:18

Chad GPT is going to imagine something and give you wrong code. So for that reason, and for some other functions that we're going to use later on, the full utils.ts file is going to be in the GitHub gist down below. It contains the function we just created, as well as the check is liked which is going to help us later on, and then another function called format date string. But that's

3:46:42

more or less it. So now we can go back to our function. It still works exactly as it should: "one day ago". And now let's focus on the most important part, which is showing some more details like the caption and the tags, and then finally the image. So we can go three divs down: 1, 2, 3, and then here we can create a new link. This link will only be shown if we are the ones that created the post,

3:47:13

because then we'll be able to update it. So here we can say this is going to point to slash update dpost slost dollar sign ID, so it's going to point us to the update page. And there we can render an image that's going to have a source equal to SL assets SL ions SL edit.

3:47:40

SVG. Of course we want to make it a bit smaller, so let's give it an ALT tag of edit and a width of 20 as well as a height of 20. There we go. That's better. Now how can we hide this if we're not the Creator? Well, first we have to know what is the ID of the Creator and then the ID of the currently logged in user. How can we know that? Well, we have done it a couple of times. We can simply use the context. So

3:48:08

Here we can say con user is equal to use user context and we can import it right here. We can also say if there's no post. Creator then we want to return because something went wrong here, but in this case we should have a user. So right below we can add a class name to this link and this class name is going to be dynamic and it's going to check if user us er. ID is not equal to post.

3:48:44

Creator. Dollar sign ID and if that is true it's going to render hidden. And as you can see in this case it disappears, although I'm not sure why did it disappear because we indeed are the real Creator. Oh it disappeared because this and hidden should have also been within these brackets and then within double quoted strings. There we go, so now if we are it's there,

3:49:12

If we're not it's not there. Great! Now let's focus in more post details by going below the link and below this div we can create another link that's going to point to for slash. Let's make it Dynamic slost slash post. Dooll sign ID, so if you click this it's going to point to edit. If you click anything above it's going to point you to the real user, or at least if you click the image,

3:49:43

But now everything that is within this link is going to point you to the post itself or the post Details page. So here we can say div is a class name of small-medium on large devices base- medium and padding y off five. There within a P tag we can render a post. Caption. Of course this has to be wrapped in curly strings. River and nature. And Below we can have a UL to render the tags. So we

3:50:21

Can give them a class name of flex gap-1 and margin top of two. There we can render the post. Tags. Map where each tag is of a type string and for each tag we want to instantly return an Li that's going to have a key equal to it's going to be tag and a class name of text- light-3 and we can simply render hashtag and then the tag. In this case it is simply nature. And finally we can go

3:51:00

Below this div and render an image. This image is going to have a source equal to post. Image URL. Of course image with a lowercased eye, or we can render for/ assets SL ions SL profile Das placeholder.svg and it's going to have a class name equal to post-c cardor IMG and an Al tag of post image. If we save it we cannot seem to see it, so it's like the image URL

3:51:41

Is not there. Let's consol log our post to see what does it contain. So here we can consal log the entire post. We can then go to our inspect element and go to the console and here if we reload you can see that we have a key error on home 17. So let's quickly fix that. Here we're mapping over the posts but we're not passing a key. So let's say key is equal to post. Let's do

3:52:16

Caption. If we reload it is gone and now we have this post but the image URL is simply an empty array. That's not good, right? Same thing here, the image ID is here but the image URL is empty. So now we have to figure out where are we updating the image URL in the first place. Apparently it's getting set to an empty array. So let's search and let's search for image URL specifically. We

3:52:49

Want to search where we're updating it, not using it. So here in the URL we're setting the image URL to Avatar URL, but this is regarding the users. We're wondering about the posts. So most likely it's going to be would then create post and there we go. Here we say the image URL is equal to file URL and the file URL should come from the get file preview and then it's uploaded file

3:53:18

ID. So the first thing we can do is just conso lock the file URL to see what are we getting back. So conso log, I can put it inside of an object that way it's going to tell us what they conso logging. So just like this and then we can try to create one another post. So let's go back, let's increase the width of the browser just a bit and then let's go to create post. Let's write a new caption say

3:53:47

Something like this time it will work. I added the JavaScript Mastery logo right here and I can give location something like JSM and we can add nextjs as well as react and let's click submit. You can see the file URL first was a promise and then fortunately the same thing even for the second image. The image URL is empty, but it's good to know that we got a promise right here as a

3:54:16

File URL. That's because if you go to the get file URL we made this function an async function and it shouldn't have been one because nowhere is it awaiting something. So now we have to fix this by removing the async from the function and then we'll have to delete what we have already in the database as those posts are going to be broken. So let's go back to our app

3:54:41

Right, go right here. We're going to have two different media files right now which I can completely delete. There we go. But we know that the storage worked. So now I can go back to databases snapgram and then posts and I can also delete all of these posts right here. There we go. So now if we go back and reload and now back on the homepage we have no posts. We do have one error

3:55:11

Saying that it cannot find assets images profile placeholder.svg. So let's see what that is about. Let's try to go to profile dplace holder. SVG and we can see that indeed it is there. So where are we trying to call it from? Let's try to search for profile Das placeholder.svg. It seems like we're calling it in a couple of places. Assets here is it's icons, but we have to verify

3:55:41

Is it icons or is it images? So it seems like it's icons. So here it's okay icons, here it's okay icons, and finally in top bar its images. It should have been icons. So if we save this and reload you can see that we have no errors and we have no posts. So now that we have fixed the issue with the post creation we removed the async from our upload file or rather get file preview. Now it's

3:56:10

Going to immediately return exactly what it should which is the URL. So let's close all the files that we don't need and let's simply create another post and hopefully this time we'll be able to see it on our homepage. So I'll do something like ultimate nextjs 13.5 course. I uploaded this great Dev overflow image which is the project we're building in our nextjs course. I'm

3:56:37

Going to add the location of JSM Mastery Pro platform and we can add something like nextjs and maybe course and let's click submit. There we go, it got submitted and we can see it on our homepage. That is great! We finally have the real profile right here. It says just now which is amazing. We have the full caption, the tags as well as the photo. This is phenomenal! And the last thing we need

3:57:09

Need is going to be the actions such as the heart and the save. So let's go back to application, let's collapse it to check it out on mobile devices. It's looking great. Maybe this image is not in the right format but still it gets cropped properly. So now let's go back to the postcard to finalize the last post actions. So Below this link containing the image let's create a new component

3:57:33

Called post stats like this. We're going to pass two things: we're going to pass the post equal to post as well as the user ID equal to user.

3:57:46

ID. Then we can create a new component in the shared components folder called post stats. TSX and run RFC immediately. Back in the postcard we can import post stats right here and then we can focus on the post stats component by first declaring which props do we want to pass. We immediately know that's going to be the post as well as the user ID which are going to be of a

3:58:17

Type post stats props. We can declare those right above by saying type post stats props is equal to a post is of a type models which is coming from app right dot document and the user ID is of a type string. Now that we know what we're getting, let's focus on the UI and the ux of our heart and save stats. First we can wrap everything in a div and that div can have a class name. That class

3:58:52

Name is going to have a flex justify between items Das Center and a zindex of 20 to appear on top. Right inside it we're going to give it a div that's going to have a class name equal to flex Gap of two and margin right of five. Finally right within we can show the heart icon. So let's say image that's going to have a source is equal to and let's do for now for SL assets SL ions SL

3:59:25

Liked. SVG and there we go. But of course it's going to depend whether it has already been liked or not. So if it has been liked then it's going to say liked, otherwise it's going to say like which is going to show this different kind of an icon. So we'll have to dynamically change this property. For now let's leave it statically as like. Let's give it an Al tag of like. Let's give it

3:59:51

A width of 20 as well as a height of 20. Let's give it an on click which for now is going to be set to an empty callback function and let's give it a class name equal to cursor Das pointer. Finally right below it we can create a new P tag that's going to render the number of likes. For now we can do it statically as zero and we can give it a class name equal to small-

4:00:21

Medium and on large devices base- medium. There we go. And we can do the same exact thing for saved. So let's copy this entire div, paste it below. This time we don't need margin right as it's already on the right side and we need to change this from like to save and everything else is going to be exactly the same. So now we have likes and we have saves. In this case we don't need to show the number of

4:00:50

Saves, so we can remove the P tag. There we go. This is great! So now that we've implemented the UI, what do you say that we implement the logic for liking, saving and unsaving as well? We can do that quite easily by heading to our API file. By the way, I just press control or command p and I started typing the file name. This is going to immediately move you to the correct file. Here we can

4:01:17

Create a new function. Export async function like post. We have to get a post ID which is of a type string as well as a likes array that's going to be of a type string array. We need this to know the IDS of the people that have liked the post. As usual we're going to open up a new try and catch Block. In the catch we're going to Simply consel Lo the error and in the try we'll try to like it by

4:01:50

Updating the record of the post. So we can say const updated post is equal to await databases. Update document and as usual we have to pass a couple of things to it. You can see it right here as well. Aight has is really nicely documented their SDK. So you have to pass the database ID, collection ID, document ID and then the data you want to update. So let's do that. First let's

4:02:20

Pass the database ID by saying app config that database ID. Then we have to pass the collection ID of the collection we want to update. In this case app config that postcollection ID. Then you need to pass the ID of the post you want to update and then you want to pass has the data. In this case likes of the new likes array. So we know what is the new like count. Finally if

4:02:46

There is no updated post there must be some kind of an error, so we can throw it and we can then return the updated post. And this is it for the like functionality. Of course we'll have to consume this function within our react query as well and make it a mutation, but we're going to do that soon. For now, believe it or not, the save post functionality is quite similar. So we can

4:03:11

Simply duplicate this function below and call it save post. To save a post we do need a post ID but we also need a user ID of the user that's saving that post of a type string. Then instead of updating the post we're going to create a new document. So we can say do create document. We pass the database ID but it's not going to be a post collection, it's going to be a saves collection ID.

4:03:41

In this case we don't already have an existing record of that save, so we can create a new one by running id. Unique and then we simply want to pass the user as the user ID that's actually saving the post and we want to pass the post of the post ID so we know which post is getting saved. And this is it. We just return the updated post. And finally we're going to also need to be able delete that saved

4:04:09

Post from the database. So let's duplicate this one final time and let's recall it or rename it as delete saved post. The only thing we need is the saved record ID, so we can say saved record ID of a type string. In this case we want to remove or delete a document, so we can say databases. Delete document. When you delete a document you get back a status code and to delete it you simply have to

4:04:41

Pass the saved record ID as the third parameter. Then we can check if there's no status code we can throw an error, else we can return something like a status of okay. And now we have these three functions or we can call them mutations that we can use within our react query to then use them within our post stats component. So let's go to our queries and mutations and go right below our use

4:05:13

Create post and use get recent posts. Here we can export const use like post which is going to be equal to an eror function. There we can define a query client by saying con query client is equal to use Query client and then we want to return the use mutation. We need to pass a mutation function like so that's going to get as a parameter one object of post ID as well as the likes

4:05:46

Array that's going to be of a type post ID is of a type string and likes array is of a type array of strings and then we can have a function that we can call. The function we're going to call is the like post coming from aight API and to it we can simply pass the post ID as well as the likes array. And now it's no longer complaining because it gets exactly what it needs. So now we have our

4:06:16

Used mutation. But the second thing we can pass to our use mutation which goes right here after our like post after our comma is on success. So the question is what do we want to do on success where we get some data back once we successfully do an action? Well, we want to invalidate some queries. So we can say query client do invalidate queries. In this case it's going to be a query key of query unor

4:06:51

Keys. Getet poost by ID with a data of that specific post that we updated like this. So what does this mean? Well, as I said before, every single post that we get or fetch using react is going to be cached which is amazing because on subsequent reloads it will already have them saved and it's going to take so much less time to load them on the screen. But if you update

4:07:20

Something about that post such as the like count and then if you go into the post details it's still going to have the same old like count, the one it had before you actually updated it. So to fix this we have to invalidate the fetch to theose detail details and say hey if this changes, if you like the post, the next time you open up the post please update the like count. That way it's

4:07:47

Going to be reflected. And we have to invalidate a couple of other queries as well. So let's copy this one two three more times. The second one is going to be get recent posts. So if you just reload the home you need to be able to see a new updated like count. Then get posts just in general and then get current user because if you go to your profile you need to be able to see the updated

4:08:14

Like count. And in other cases we don't have to pass the ID of a specific post because we're fetching many posts, so it doesn't really matter. Great! So this is the mutation for the use like count. Now as before with the API actions, this time the use Save post is going to be similar to the use like post. So we can simply dup duplicate this below. We can rename it to use Save post and then we're

4:08:45

Getting the post ID as well as the user ID, not the likes array. So we can modify right here the type to user ID of a type string. Instead of calling like post we're going to call Save post and we have to import it from aight API and we want to pass the user ID as the second parameter. Or let's be careful, if we have a r it says post ID and then user ID and here it's post ID user ID, so

4:09:13

You have to pass them in the same order. In this case I truly did call it post ID and then the user ID, so that's great. On success we don't need to update the specific post get post by ID, but we need to update all the other three. So we can just do it like this. And finally the last one use delete saved post is going to be the same. So we can duplicate it one more time right

4:09:39

Below. It's going to be called use delete saved post. The only thing we need is one simple parameter right here of Saved record ID and then we can call a function called delete saved post which we can import from aite and pass in the saved record ID. This has to be of a type string. There we go. And then we're going to invalidate the same queries. So now we have three

4:10:13

Phenomenal functions which we can use to make the logic of our application work. So let's save the file, go back to the post stats and let's retrieve all of these phenomenal mutations and queries by using the hooks provided to us by react query that are by consequence using aite functions. So back in the post stats we can see con mutate which we're going to rename to

4:10:41

Like post is going to be equal to use like post which we have to import from queries and mutations. We can duplicate this three more times. The second time the mutate function is going to be called save post and the third time it's going to be delete saved post. Of course we have to call this use Save post which we also have to import and use delete saved post which we can also

4:11:14

Import right here. We also need to know who is the currently logged in user which we can get pretty easily by saying cons data rename it to current user is equal to use user context which we can import from o context. Then we have to figure out what are the current likes on a specific post and we can do that right here at the top by saying const likes list is equal to post which

4:11:44

Is coming from props right here likes. Map where we get each individual user. Why user? Because we're saving a reference to the user whenever somebody likes it which is going to be type of a models. Document and we want to return just their ID. So user. Dollar sign ID and that gives us the likes list. Then we want to create two Ed States. So the first used state is going to say

4:12:14

Likes as well as set likes right here and at the start it's going to be set to the likes list. So immediately we know it's going to be an array and we also have to import use state from react which we can do at the top by saying import use State. We can also get use effect coming from react and in the same way we want to know if the post has been saved. So we can say is saved set is

4:12:48

Saved and that's going to be equal to false at the beginning. So now we have a lot of things. We need to enable this functionality. So let's create two functions we're going to use to like dislike and save and unsave posts. Const handle like post is going to be a function as well as const handle save post which is going to be another function for now. Now we have all of these properties we

4:13:17

Can work with right here Below in the UI. So let's make use of them. First things first, we can figure out if a post has been liked and based on that we can show a different icon. So instead of a source assets icons like we can open up a new Dynamic block and there we can say check is liked coming from lib utils to which we're going to pass the likes so we know the full likes array as well as the

4:13:46

Current user ID and we can check if it's currently in there. If it is then we're going to show the liked feature like so. And of course we have to close this properly so everything appears nicely and open up a new template string. There we go. So check is liked, if it is we render the assets icons liked and else we want to render something like assets icons like. If we save it you can see

4:14:14

That now it's a zero and it's not liked. Later on once we click it should turn out red. Once we click the like we want to get the click event and then call the handle like post to which we pass the event. If the only thing you have here you pass there you can immediately just do a shorthand which means like this. Similar thing here, instead of zero we can display the likes. Length, so

4:14:42

How many likes there are. And then we can do a similar thing with saved. So we can open up a new Dynamic template string block and close it of course. Right at the top we can say if is saved, if it is saved we can simply return assets icons saved.

4:15:05

SVG else we can return something like assets icons save. There we go and we can put it like here. There is even a shorter way of doing this. We don't have to create a template string because we're returning one string in any case. Same to here. So we can remove this entirely and just say if is saved make it this else make it this. Same thing we can do here. Soest check is liked, if so

4:15:34

Return this else return this. And if we save it's good. Right now it's not saved nor liked, so it should be empty. Finally if we do this we can handle save post. Great! So now you can see a lot of these are used. Likes is saved, but the mutations are not used. So what's going to happen once we actually click this button? Let's do that next. In the handle like post we get one parameter of a Type

4:16:07

E as an event and for now we can set it as react. Mouseevent. We also have to import react from react so we can do it here. Immediately within we can say e do stop propagation. So this is not going to allow us to click any further. It's just going to click this. That's done in case you make this entire container clickable so it points to a post and then if you click it here it's only going to like it,

4:16:36

It's not going to do any other action like go to the Post details. Then we have to update the likes array by saying new likes is equal to an array where we spread all the previous likes and then we need to check if new likes that includes the current user ID like meaning if they have already liked it. And to make this code more meaningful we can even extract this right here and

4:17:03

Say const has liked is equal to this. So if has liked, see how much more sense this if now makes. So if has liked in that case we can update the likes array or rather the new likes to be equal to new likes.

4:17:24

Filter where we're going to get the ID and we want to check if the ID is not equal to the user ID. So we're going to keep all the likes besides the current like because we want to remove it. And else if it not has liked we simply want to call new likes. Push and we want to append the new user ID because that user liked it too. Finally once we do that we want to set likes to be equal to

4:17:52

New likes and we want to call the like post mutation. So we can say like post to which we need to pass the post ID which is of a post. Dollar sign ID and the likes array. You can see typescript even lets us know what we have to pass right here. It's going to be the new likes. There we go. But if we do it's complaining that the argument type new likes is not assignable to parameter of

4:18:21

Type likes array. So this is really good again, thank you typescript. We have to Define likes array and then pass new likes right here. And now this is the function that's going to handle the like post. And as you can see this is being used and then also this mutation is being used as well. Now let's do a similar thing for the save. As before we can duplicate all the logic within our

4:18:45

Handle like post, collapse it and put it right here within our handle save post. We also need to get the react mouse event right here and then the logic is going to be even simpler. We can delete everything right here and we can say if saved post record. So have we already saved it? And how are we going to figure that out? Well, let's define it right here. Const saved post record it's

4:19:18

Going to be equal to the current user question mark. Saave doind so we want to find if the record exists of a type models. Document meaning is that user added to the array of the user that saved the post. And we can check that by saying find where the record doore ID is triple equal to the post. Dollar sign ID. There we go. So now we're trying to figure it out if there is such a thing.

4:19:54

In that case we want to set is saved to false and we want to call the delete saved post to which we want to pass the saved post record do dollar sign ID. So if we already have saved it and if we click it again we want to remove it from Saved. And then we want to call the save post to it we need to pass the post ID of a type post.

4:20:23

Dollar sign ID and also the user ID and we can finally set is saved to true. In this case of course it's going to handle both action. And please take a second and notice if I've made a mistake here. We have an if statement that delete the save but then every time as well we also called this. That's because we didn't return right here. If you add a return statement like

4:20:52

So it's going to stop the execution of all the other blocks. Or an alternative is to also add an else here. So we can say if it is not saved then save it, if it is saved then remove saved. Here we go. And now we can save. This gives us a lot of data to work with. But before we go ahead and test it out, typescript is trying to save us one more time. It's saying property data does not exist on I

4:21:23

Context type and that's because I've made a mistake. This should not be coming from the get user context. It should be coming from use get current user, which is a new function or a new query that we have to create. This query is not only going to give us the user's ID and the name as we get from the old context, it's also going to give us more information such as which posts does the

4:21:50

user have saved, and based off of that we'll be able to figure out whether we need to save or unsave. So let's go to our queries and mutations. We can export const use get current user, which is going to be an arrow function, and we can return a simple use Query where we pass the query key of query keys. get current user and a query function which we're going to call is

4:22:26

going to be get current user, and this is coming from Appwrite API. We have already created this API function before because we needed it for the context. We can get it here as well. And now if we go back, we can import the use get current user and we can remove the import from the context. There we go, everything works, TypeScript is not complaining. So let's go ahead and test it out. I'm going to

4:22:55

press the like button really carefully because I'm scared. We've done a lot of changes, hopefully it works. Okay, would you look at that? It's saved and it unsaved. Not only that, but it did it instantaneously. The reason why that is happening is because we're using React Query. It does something known as an optimistic update before it actually updates it in the database. It provides

4:23:20

user with an instantaneous feedback. Now of course the key thing is, if I reload the page, is it going to remain saved? And it does. Let's check the same thing with save. Oh, it doesn't allow me to unsave it for some reason. Hmm, interesting. Let's see why that is. So if we check, this is saved, it is set to is saved to false, but then once I check it in the handle save post, do we ever set it to

4:23:49

false? It seems like we do right here. But what if I reload the page? Okay, now it's unsaved. What if I save it? If I reload it is not saved. So we have to be able to get the current save state whenever we reload the page. To do that, we can extract this saved post record by copying it and putting it right here at the top. Then what we can do is create a new use effect, and this use effect is going to

4:24:23

have a typical callback function and it's going to change whenever the current user changes, and then we can set is saved to be equal to saved post record. Um, so if there is a saved post record, we can return a true, else we can return a false because this has to be a Boolean. And there's a shorter way of doing this: whenever you have something, if that something exists return true, else return

4:24:52

false, what you can also do is automatic Boolean assignment, and that is do a double exclamation mark. So what this does is it checks whether there is a truthy value. If there is a truthy value, this is going to make it a falsy value, and then from falsy you get the truth. So let me give you an example because I know this is a bit complicated. If we have the saved post record which

4:25:17

is, let's say, an object of Saved is true like this, then we call one exclamation mark on saved post record, which is going to return false, and then we call one more time this on the false and we get true. If you were to repeat this with another truthy value, like maybe just a string of test, it would also return false because once you negate it you get a false, and then a false is true. But if

4:25:47

you were to do this on a falsy value, like if you were to do it on an empty string, then at the end you would get false because first it converts to a true and then false. I hope this makes just a bit of sense. There we go, and we can save this and we can reload the page. Now if we press save it remains saved, but I still cannot unclick it. Okay, let's see if I'm doing something wrong here. I

4:26:17

think that right here where I was checking for the saved post record, the record itself is the user, so I cannot compare the record of the user or the ID of the user with the ID of the post. What I need to do is dive into the record.

4:26:34

Post that the user has saved and then compare with the post ID. So now if I save this, the saved record post or save post record should successfully get the state, and now I can be able to toggle it on, toggle it off. But it looks like not on. Let's reload and see. So if I do it here, it's on, yeah, but it doesn't allow me to bring it back. So let's just ensure that a couple of

4:27:01

things are in order. First of all, if it's unsaved here, go to Appwrite and then go to the saves collection. There should be zero documents because no posts are saved. If that is the case, once you click it and now go back to Appwrite and reload, you should be able to see one save there. But it looks like our user wasn't added, and here it unsaved it, so something is broken. So let's try to click it once

4:27:28

again. This time it stays saved, and if you reload right here, it looks like it added another document with again an empty user. So this is not looking good. It is possible that we got disconnected in the meantime, so it doesn't know which user is there. So for now, what I'm going to do is I'm going to delete both of these two documents because we don't want to have any saves, and I'm going to

4:27:52

quickly log out and then log back in to ensure everything is good. I'm going to use my same email and sign in. Now we can see we're logged in, and now I click save. But if we go right here, it looks like it didn't yet save it. So it's possible we need to add loadings for save and unsave. So right here with save we can say is pending, and we can say is saving post, and we can do the same here with is

4:28:23

pending, we can say is deleting saved. And now we can use those two right here to display a loader. So before the image, we can say if is saving post or if is deleting saved, in that case we can return a loader component which we have to import from loader. Else we return an image that's going to allow us to click it. And then we have to close this block here. So now if I reload the page, it's going to say

4:29:02

it's not or it is saved. And here if I go, we indeed do have a save document. Now if I unsave it, oh, the loading is in the wrong place. I added it within the saved or handle like not save. So I'm going to take this entire part, remove it from here, and add it right here. There we go. So it should be in the saved. And now if I save it, we can see that it's currently unsaved, which we can also verify in Appwrite.

4:29:32

And now if we save it again, it was loaded and then it's saved. So it's looking good. Here one more time, I'm going to unsave it and go back. It's gone. We get a 500, and this is okay. From time to time you will see some errors, but that's because Appwrite is still in beta. It's going to be phenomenal once it's out. So let's just reload. It works again. It's unsaved. And one final time, let's click save and

4:30:04

check it out. It is here. So now the save functionality works perfectly, as does the like feature as well. This is great. And with that, we're done with the post stats, with the queries, mutations, and APIs for the post stats as well. You can remove the console log that we had in the post card, and we can focus not on the home right now, but rather on the edit page because we need to be able to edit

4:30:29

the post as well. And trust me, this is going to be simpler than you might think. You have to go to the edit post page, and then you can also open the create post page. In here we can copy the entire create post and then paste it in the edit post. We can of course exchange the create with edit post. Now it seems like we're creating one, so we can simply change this to

4:30:57

instead of create we can say edit. And in this case, we'll also have to load the existing post data, so it's going to be a bit more complicated than create. So what we can do is right here get the ID of the post we want to edit by saying const ID is equal to useParams, and this useParams is coming from react router dom. So we can import useParams from react router

4:31:27

dom. There we go. And we need to get the post details. So to get to the post details, we have to create an API function. So let's go to our API below save post and delete saved post. And by the way, if some of these things are not working for you, there's going to be a complete API.ts file as well as the queries and mutations file down below. So let's create a simple get post by ID by saying export

4:31:57

async function get post by ID where we get the post ID of type string, and then we open up a new try and catch block. In the catch we console log the error, and in the try we can get const post is equal to await databases. get document. We want to get it from Appwrite config database ID from the post collection, so we can say Appwrite config post collection ID and we can pass the post ID. Finally we

4:32:34

can return the post. Now we have this function and we have to consume it by React Query. So let's go to queries and mutations. We can go below use delete saved post and we can create a new one called export const use get post by ID. Here we can say return use Query where we're going to have a query key of an array of query keys. get post by ID like this, and we need to pass the post ID in

4:33:15

it, and this post ID is coming as a param to this function. So we can say post ID of type string. Finally, which function are we going to call to query this post? We're going to call the query FN which is going to call the get post by ID to which we pass the post ID. And this of course has to be imported from the top right here from Appwrite API, get post by ID. I think it's here. There we go. And

4:33:45

once you do that, we'll also have a special property called enabled. So you want to set this to disable automatic refetching when the query mounts or the query keys is changed. So we want to enable the fetching only when we're fetching the data for another ID. If we're fetching it again for the same one, then we're going to get the same details if the post ID

4:34:07

didn't change. Again, this is a small step here nicely built into React Query, but it allows us to cache data and fetch data more efficiently. So now we have this use get post by ID, and we can go back to right here in the edit post where we can use it by saying const data is equal to post and is pending is equal to use get post by ID. Of course I have to spell it correctly and pass the

4:34:40

ID. And then we have to import it from queries and mutations. The ID has to be a string, so we're going to pass either this or an empty string. Then if we are pending, meaning if we're loading the data, in that case we can say return if is pending, then we can simply return something like a loader like this, which is coming from components shared loader. But now once we do fetch the data,

4:35:07

what do we want to do with it? Well, we simply want to pass it over to our post form with an action equal to update because now we're updating, and a post equal to post. There we go. You can see the data was already populated. How did that happen? Well, more than that soon. Let's dive into the post form. We can also accept the action and we can say that action is either going to be create

4:35:35

or it's going to be update. So now we know exactly what we're getting in, and all the data automatically got populated because we're accepting this post right here as a prop. But the question is, how can we get the file to get updated as well? Because you can see right here we don't see the photo or the file. And to get it, we have to look into our file uploader component that we have created

4:36:00

not that long ago. To it we're passing the media URL post image URL, so it should be able to read the image we're showing. So if you go back to the homepage and click edit, it should be able to read it. But it doesn't. So let's simply console log right here at the top whether we're getting post dot image URL. So let's console log the post. image URL, and then we can save it. This post is coming from, let's see,

4:36:34

here it's saying that sometimes it's undefined, so we have to add a question mark so our app doesn't break. That's great. Now let's open up the console and let's reload. And as you can see, we indeed do get a post which is our exact image, which is great. So we just have to figure out how to show it right here in the photos. And that's most likely have to do with going into the file uploader and

4:37:01

then using the media URL. Yes, as you can see we're currently not using it. So we can simply set the media URL to be a default state, the default file URL. And if we do that, immediately it gets updated. So now if we reload, as you can see once you visit the create route it's empty, but if you go to the edit you can see right here that it nicely gets all the data, the photo as well. And now you

4:37:31

should be able to resubmit the form to then edit the actual details. Don't click it just yet, because if you click it now it's going to create another post because if you go to the edit or on submit in here, we're only calling the create post, but we're not calling edit post which we have to create. So one thing that I noticed is that here it's complaining that action

4:37:54

should be update with an uppercase U, so let's do it that way. And now we'll have to focus on the logic of updating the post. So let's do that next. To implement the update post, we can go to our API and right here we can add a new function called update post. To do it, we might as well copy the initial create post that we had here because a lot of the logic is going to be similar. So let's copy it

4:38:23

and then paste it right here below. This time it's going to be called update post, and we'll have to get the entire post we want to update. Now the first thing we want to do is we want to figure out if the user is updating the contents as well as the image, or if they're updating just the contents. So we can say const has file to update, and that's going to be true if the post. file. length is

4:38:51

greater than one. This can be above the try and catch block. And then inside of the try we can form this new image by saying let image is equal to image URL is post. image URL and image ID is post. image ID. And this is going to be of a type I update post, so we can import it from the types. That way we know it's going to contain the file as well as the image ID and the image URL.

4:39:21

Now once we have the image, we can figure out if the user has a file to update. And if they do, we can open this block and we can slowly start adding things to it. So if they have a file to upload, we want to get the uploaded file, we want to check if it's there, we want to get the file URL alongside the error handler for the file URL, put all of that above. And then finally in this case we want to update

4:39:48

the image by saying image is equal to we spread the existing image and then update the image URL with a new file URL and update the image ID with a new uploaded file. dollar sign ID. This here is going to be the entire image, and the image has to be reassigned so it has to be let. But it's still complaining that image is never used. We're going to use it really soon. Now we get the tags, same things as

4:40:19

before. And then we want to save the post to the database, but this time it's not going to be create, it's going to be update. Once we update it, we want to get the same database ID, same post collection, but this time we're updating an already existing post. So we can get the post.

4:40:37

post ID right here. And then here we can define what do we want to update. The creator doesn't have to be updated, it's the same one. The caption is post.

4:40:47

caption. Image URL is going to be this new image object. image URL. Image ID is going to be image. image ID. Location is the same, and tags is the same. Finally, if we don't have this, let's call it an updated post, then we can await delete file post.

4:41:11

image ID. So if something went wrong, we're deleting the file. Else we're returning the updated post. This is great. This is going to enable us to update the post. And while we're here, let's also implement the delete post. That way all of the CRUD options for the post are going to be complete. So we can say export async function delete post. To delete it, we need to be able to get the post ID of a

4:41:39

type string and an image ID of a type string. Then what we can do is say if there is no post ID or if there's no image ID, we can throw an error because we need those to be able to delete a post. And we also need to delete an image, which is why we need an image ID. Then we can go to the try and catch, you know the drill. In the catch we can console log the error, and in the try we can say await

4:42:10

databases. delete document to which we pass the database ID, the post collection ID, as well as the post ID that we want to delete. And finally we can return something like a status that's going to say okay. There we go. So now we have delete as well. Don't forget we have to consume this within a React Query. So let's go to queries and mutations, and before creating it we can simply copy

4:42:39

the one before and then paste it here. We can rename it to use update post. We don't need to get anything inside of it. In this case it's not going to be a query, it's going to be a mutation. So we can say const query client is equal to use Query client, and then use mutation instead of use Query because this is a mutation, an update, not a fetch. Then we don't need to define a query key

4:43:07

because we're doing a mutation. And we can say mutation function instead of a query function. In this case we need to get the post because we need to know what are we updating, of a type I update post which we can import from types. And then we can update post by importing this from Appwrite API, and we pass the entire post. Finally we want to do something on success. So on success we're going to get

4:43:38

all the data and then call the query client. invalidate queries. So if we update a post, we need to update the query key under query keys. get post by ID because we have updated it, and if you go to the post details page it needs to be updated. And we can now duplicate this below. This time we can call it use delete post. In this case we need to get two things into the mutation function, so

4:44:12

let's define them properly. It's going to be an object of post ID and image ID, and that's going to be of a type post ID is a type string and image ID is a type string as well. And then we call not update post but rather delete post coming from Appwrite API, and to it we pass a post ID as the first parameter and image ID as the second. Finally the query you want to invalidate here is get

4:44:45

recent posts because in case we delete a post, then we need to be able to refetch all the posts on the homepage to show all the new posts without the deleted one. Now that we have these options, we can go back to the post form and we can import all of these actions or mutations from React Query. So right here below the use create post, we can do something similar by duplicating this entire line.

4:45:15

Mutate async in this case is going to be update post, is pending is going to be is loading update, and this is going to be use update post which has to be imported from queries and mutations. Now we can go right in our submit handler and we can check at the top if post exists and if action is triple equal to the update with a capital U. In that case we say const updated post is equal to await update

4:45:59

post, and then we need to pass all of the options in it. This update post is coming from our React Query, and of course it's doing the action from Appwrite API. So now we need to pass dot values meaning everything about that post. We also need to pass the post ID of the post we're updating by saying post.

4:46:22

dollar sign ID. We can pass the image ID by saying post question mark. image ID as well as the image URL which is going to be post. image URL. Finally, if we don't have the updated post meaning something went wrong, it should say updated post, then we can release a toast saying something like title is please try again. And if it succeeds, we can return navigate. This time we're

4:46:57

going to forward slash post slash post dollar sign ID. So no longer are we going to the homepage to see the new post we created. We're going to the details of that page to see that it was successfully updated. Great. Because we have this return here, we don't have to wrap this in an else because once we update it's going to do this and exit. If it's not update, it's going to do this

4:47:24

immediately. Great. So now if we save this, we're successfully doing the update action. So let's try to say something like, let's say the course got updated to version 13.6 and we want to add a URL. So we can say URL is JS mastery. pro. We can leave the location and the same, but it says submit. Maybe it should say something else. So if we go down to the button, in the button sometimes we need

4:47:52

to disable it when it's currently loading. So we can give it a disabled state and say if is loading create or is loading update, then we want to disable the button so the user cannot just mash it multiple times. And the button can say something like this: if it's loading and if it's disabled, the button should render the loader. So we can say if is loading create or is loading update, then we want

4:48:18

to simply return the loading state like so. And if it is loading, it can say something like post, but it can be an action. So it's going to either say create if we're creating or update if we're updating. So let's just ensure that on the create post we're properly passing it. Here we're not, so we need to pass an action equal to create. And now if we go back, as you can

4:48:50

see on update we can see update post. I'm not going to go back now to show you the create, but you can trust me that on create it's going to say create. Now modify your original post and let's give it a run. Click update post and let's see what happens. It says loading update post and we got redirected to the post details page exactly as we wanted. Just to verify that the post indeed did get

4:49:17

updated, we can go to our posts and we can see if the caption contains what we added. So that's going to be in the data, and we can see that indeed it does. So this is great. So immediately the next reasonable step is to implement the post details page as now our homepage is looking pretty good and the actions are there as well. So let's focus on the post details page next by going to post

4:49:46

details and implementing its UI. To implement the post details, we first have to fetch the post details from the database. And the way in which we can do that is by saying const data which we can rename to post as well as is loading or in this case is pending because we're using React Query version 5 is equal to use get post by ID coming from queries and mutations to which we need to pass the

4:50:20

ID. The ID is coming from useParams, so we can immediately import useParams which is coming from react router dom, and then we can say const ID is equal to useParams, and that ID can sometimes be an empty string like so in case we didn't fetch it from the params. Great. So now we have the data. Let's go ahead and use it within our UI. Right here we can wrap everything in a div

4:50:52

that has a class name equal to post details container. Inside of this div we can check if we are currently loading. So we can say if is pending, in that case we want to return a self-closing loader component which we can import from components loader. Else we can return a div that has a class name equal to post details card. This is going to create this rectangle that you can see.

4:51:24

Within it we can immediately render the creator image. As a matter of fact, a lot of things from the homepage which we can see right here like the creator image and all of these details can be taken from there. So let's go to our home and then we're going to go to the post card and we can copy this div that contains the link with all of the profile details. So let's copy it all the

4:51:50

way to here and then we can paste it right here within post details instead of this image that we just added. There we go. I can indent it properly. We have to import link coming from react router dom, so let's get it right here. We can also notice that post is possibly undefined, so whenever we're talking about a post we have to add a question mark after. So question mark here as

4:52:20

well, and here with the location. And we have to import the format date right here. Now if we go back to the post details, you can see we have this, the real JSM, this is great. But in this case we want to show it after the post. So we can go above in the post details card and immediately here render a self-closing image that's going to have a source equal to post question mark. image URL

4:52:52

with an alt tag of Creator and a class name equal to post details img. And this is not going to be Creator, it's going to be the actual post. There we go. So now we can see the post and then we can see who created the post. We can rename this div that contains the link into post details info. There we go. And then we can wrap it all in another div. This div is going to have

4:53:23

A class name equal to flex between as well as w-o and now we'll have to put all of these details on the left side and then the button butons on the right side. So let's do just that. Within this div we can put the link that points to the Creator image and that link can wrap everything all the way to the end right here and we can remove these characters that I don't need. So now if we save it.

4:53:52

You can see the real JSM fits nicely and we can put this link within this new div that we have created with a flex between. There we go. Of course this link will have to have a class name equal to flex so that all of these elements appear in a row. It's going to have items Das Center and a gap of three. And now we can go below this link and we can create those actions that we.

4:54:22

Should have on the right side. If at any point something breaks or doesn't look the same, I know we switched a lot of code here. You can go to the finished project GitHub repository and find the post Details page. Now below this link we can create another div that's going to have a class name equal to flex Center as well as a gap of four. Within it we can create another.

4:54:46

Link. This link is going to render the edit image. So let's say image is going to point to Source SL assets SL ions SL edit.

4:54:59

SVG. And of course if it's a link we have to give it a two property. It's going to go to forward slash. We have to make it Dynamic update dpost slost question mark. Dollar sign ID. And there we go. We have a huge edit button. We only want to show this if the person that created it is the author. So we need to again know who is the currently logged in user. To know that we can say.

4:55:28

Const user is equal to use user context and we can import it. And now we have the user. So we can go back down and to this link we can apply a class name saying that if user. ID is not equal to post question mark.

4:55:52

Creator. Dollar sign ID. In that case we want to make it hidden. So completely hide it. In this case it's still there because we created it. Then this image has to have a width of about 24 and a height of 24 and an Al tag of edit. It's much smaller. We should also make this profile photo smaller as well. So let's go to the Creator and we can make it W8 and H can be 8 as.

4:56:24

Well. But on large devices W can be 12 and age can be 12. And if we save it we have to say on large devices H is 12. There we go. That's looking better. And now alongside this edit we also want to add another button but this time the button is going to be for delete. So we can say on click we want to call a handle delete post and we have to declare that function of course. Const.

4:57:00

Handle delete post for now it be an empty callback function. It's also going to have a variant equal to ghost. It's going to have a class name equal to ghostcore details D deletor BTN and it has to have the same class right here to hide it if we're not the current Creator. So let's copy this right here, turn this into a dynamic template string, and then we can paste it right here.

4:57:34

Finally within the button we can render an image and this image is going to have a source equal to for/ assets SL ions SL delete. SVG with an ALT tag of delete, a width of 24 and a height of 24 as well. And there we go. Now we can see both of these. We can also lower the Gap a bit. Maybe Gap two is going to be fine or even one looks good. What if you do it with no Gap? There we go. Even without a.

4:58:08

Gap it's looking good. And if you expand it, keep in mind it still looks good on all different devices. This is wonderful. Now don't delete the poe just yet. We still have to add a caption in more details. So let's go below this button and Below two more divs and then here we can create an HR, a horizontal line with a class name equal to border w- full and border colar of Border D dark of 4 over.

4:58:40

80. If we save it you should be able to see a really unnoticeable line that's going to create some spacing. And then below we can copy everything we already had from a post card, not the Creator things but rather all of the post tags, the post caption and more. So let's simply copy this div that contains the post caption. It's just this small one right here. We can paste it below the.

4:59:09

HR, indent it properly. And everywhere where we're saying post we can add a question mark as well. And there we go. We have this wonderful caption. We can change this tiing a bit from this div by giving it a flex Das Co Flex D1 w- full small- medium and on large devices base- regular. There we go. That's going to position it a bit better. And finally we need to render the post stats. So let's go below.

4:59:40

This div, create another div that's going to have a class name equal to w-o and within there we can render a post stats self-closing component which we have to import from components shared post stats with a post is equal to post, a use user ID equal to user. ID. In this case it complains that a post could possibly be undefined. So we can say post or an empty object so it doesn't break. Oh but.

5:00:14

The structure of an empty object is not the same as the structure that it should have. So in the post stats we can declare the post as optional. Maybe it's not going to be there. But then it lets us know please add question marks so the app doesn't break. So that's exactly what I'm going to do. I'm going to add a question mark whenever post is mentioned. Oh but then it's complaining.

5:00:38

That we actually need to pass a post ID to the save post. So I'm going to add right here or an empty string or an empty string as well. And now we are good. So if we go back now we have the post stats and you can see the likes and saves as well on the bottom. This is a real post Details page looking really similar as it does on the original Instagram application. Keep in mind that.

5:01:05

You can go to the edit which is great and you can also delete it which we're not going to do for now. But this is wonderful. And later on once we have more posts we're going to also Implement other post recommendations right here below this one. So you can scroll through the app and find all the post that you like. But with that said, we're making amazing progress. We have the.

5:01:28

Homepage, we have the create post page, we also have the edit page, we can like and unlike, save and unsave, as well as visit the post details. This is amazing. So let's go ahead and focus on the second major page of our app which is the explore page. Here we're going to expand it further. So no longer it will only be a home where we fetch the latest post. We're going to have some search.

5:01:56

Logic, we're going to have the infinite scroll logic and a lot more. So let's get started with a explore next by putting this to the side and then opening the explore page. To get started with our explore page we can first wrap everything in a div that's going to have a class name equal to explore Das container. Then within it we can have another div that's going to have a class.

5:02:24

Name equal to explore Das inore container. Within that one we're going to have an H2. This H2 is going to say search posts and it's going to have a class name equal to H3 D bold, on medium devices H2 Das bold and w- full. Now right below it we can have a div that's going to have a class name equal to flex gap of one, padding X of four, w- full rounded - LG and a BG of.

5:03:06

Dark 4. We are now starting to form the UI for our search. So let's render an image and that image is going to have a source equal to SL assets slash ions SL search.

5:03:21

SVG. There we go. And then we can give it a width of 24 and a height of 24 and then I'll tag off search. Finally let's create an input. This is going to be a self-closing input component coming from components UI input. It's going to have a type is equal to text, a placeholder that's going to say search, a class name equal to explore Das search. And of course what would an input.

5:03:54

Be without a value which is going to be a use state right here on top. So we can use a state snippet and we can call it search value, set search value as well. And then at the start it's going to be set to an empty string. And we of course have to import use State coming from react. Now we can use this search value right here and the input also needs something to modify that value which is.

5:04:24

Going to be an onchange Handler. This onchange is going to get an event and it's going to set search value value to be equal to e. target. value like so. We can immediately get the value and then modify it. Now let's go two devs below and then there we can start creating the what is about to become the popular the explore page. So let's give this div a class name equal to flex Das.

5:04:56

Between w- full for full width, Max DW d5xl and margin top of 16 to divide it from the search and margin bottom of seven. In there we can have an H3 that's going to be similar to this H2 and we're going to change the styling to be body- bold as Wells on medium devices H3 Das bold and we can change it to H3. There we go. Instead of search posts it's going to say popular.

5:05:30

Today. Right below it we can create a new div that's going to have a class name equal to flex Das Center, gap of three, background of dark three, rounded Das excl, padding X of four, padding y of two and cursor Das pointer. This is going to be a button to filter our posts. So let's create a P tag that's going to say all at the start. We're filtering by all. We can give it a class name equal to.

5:06:03

Small medium, on medium devices base medium and text- light-2 for the color. Below this P tag we can render a self-closing image tag that's going to have a source equal to SL assets SL ions SL filter.

5:06:25

SVG. It's going to have a width of 20, a height of 20 and an Al tag of filter. There we go. So now this is looking really good. And now we can go two divs below and we can show the results of what's popular today. So let's create a new Dev that's going to have a class name equal to flex-wrap, gap of nine between each post, a W-4 for full width and a Max W of 5 XEL. Now inside of here.

5:07:00

We should figure out if we should show no post or if we should show old posts. So let's create some variables that are going to help decide what to show. We can say const should show search results and that's going to be equal to if search value is not equal to an empty string then yes it should show search results. Then const should show posts it's going to be equal.

5:07:32

To if it's no should show search results. I think I misspelled it show it should have been should show. So if no should show search results and if we have posts. So later on we're going to have an array of post. Cons post is an array and then we'll be able to say if posts. pages. every page has an item where an item. documents do length is greater than zero that means that we do have.

5:08:08

Posts. But again this is just a fake array. Soon enough we're going to fix this. But these two Boolean variables should allow us to know what we need to display. So right here below we can say if should show search results then we can do a Turner operation and then we can show a new search results component like this. Else we can check if should show posts then we can do a P tag here and say end off.

5:08:39

Posts because we have came to the bottom and we can give it a class name of text dl-4, margin top of 10, text- Center and w- full. And finally we can render the posts. So we can say posts. pages. map here we Rend it through all the pages where we get each individual item and and an index and we return something known as a grid post list. This is another component that we don't yet have.

5:09:11

So it's going to result in an error right now. But we can pass it a key equal to something like page- index as well as posts which is equal to item. documents. So posts on that specific page. And now of course everything is breaking because we have to create two new components search results and GD post list. So let's do that immediately by going to components shared search results. TSX where we run.

5:09:45

Rafc as well as grid poost list. TSX where we run rafc again. Now we can import both of these components right here. But if we go a bit above and then comment out these posts because right now this breaks because the pages don't exist on posts. So maybe we can add question marks right here to make this work for now. That's not going to work. So we can comment it out. And the reason why.

5:10:18

It's not working is because these variables are not working as the pages don't exist under posts. So we can comment all of that out and we're left with the base structure. Of course the next meaningful thing to do is to actually fetch real posts that we can explore and then implement the search as well. So let's go ahead and let's focus on getting the post for our explore page.

5:10:44

And don't forget that in the explore page we have this wonderful infinite scroll. So you'll always be able to get new content as you scroll down. So let's go ahead and Implement that fetch posts. You know the drill. We first have to go to the API app right and to create this function we can create an export async function get infinite posts. Of course we're missing an N right here and it's.

5:11:13

Going to accept an object called page peram which is going to essentially be page per Ram of a type number. Inside of here we want to define the queries which we want to fetch the post by. So we can say const queries of a type array with any kind of content is equal to array of query. order descending based off of the updated ad property and we have to add a dollar.

5:11:42

Sign up front. So we want to get the newest post first and we want to limit it to query. limit of 20. 10 is okay as well considering that we also have infinite loading. Then we want to check if we have page prrams. So if page pram in that case queries. push we also want to add a query. cursor after. What does this mean? Well it means if we're at the page two skip the first 10 already and give me.

5:12:14

The second 10 right. So we can say page Pam do two string. So the page param is actually going to be a number of how many pages or documents do we want to skip. Once we know that information we can open up a new trial and catch Block. In the catch we can simply consel log the error. And in the try we can try to fetch those posts by saying const posts is equal to await databases. list.

5:12:48

Documents from a database with an ID of ight config database ID and the collection with an ID of aight config that post collection ID. And then we want to pass all the queries BAS off of which we want to fetch the data. If there are no posts we can throw an error. In case there are we can return the posts. That's it for the get infinite posts believe it or not. But while we're.

5:13:16

Here let's also do the search and that's going to be really similar to get infinite posts. So let's duplicate it below. Let's change the name this time to search posts. We won't need any kind of page Brams. We'll need search term of a type string. We don't need any kind of queries or page prams. The only thing we need to do is fetch the posts. So here we can have one specific.

5:13:47

Query which is going to be query. search and we can search by caption and the search term is going to be the search term that we're passing through props. There we go. And again thank you tab script. It's complaining that the search term should be not a second part of the array but rather a second part of this search object. There we go. And then we're returning the posts. With that we're done with the.

5:14:15

Search posts. Now as you know the drill we have to consume those within queries and mutations. So let's say export const use get posts which is equal to a function that returns something known as a use infinite query. This is a buil-in react query feature. Here want to pass a query key meaning which posts do we want to get and that's going to be query keys.

5:14:46

Getet infinite posts. Then we need to pass a query function which is going to be get infinite posts coming from aight API. And then we have to figure out how we're going to paginate. So we can say get next page for Ram which is going to contain the last page that we visited. Then if there's no data that means there are no more pages. So we can say if we're on the last page and if last page documents.

5:15:23

Length is equal to zero then we can return null. Else we want to find the ID of the last page. So we can say last ID is equal to last page.

5:15:38

Documents and then we want to get the last page. documents. length minus one. This is going to give us the last page and then we can say that dollar sign ID of that page and we can return the last ID. Here it's complaining that last page is possibly undefined. That's okay we know it will not be. And finally we can do a similar one for the use search posts. So right.

5:16:06

Here we can say export const use search posts is equal to a function where we pass the search term of a type string and then we return a use Query where the query key is equal to query. keys and then it's going to be search posts and we don't pass the search term here we pass it under query function once we call the function. So query FN is going to be a callback function where we call the.

5:16:42

Function we created called search posts coming from aight API to which we pass the search term. Finally as before we have to do the enabled. This means when is it going to automatically refetch when the search term changes and this is how we do it. So this is great. Now we can consume both of these within our explore page in the same way we have been doing so far. So right here at the top const.

5:17:13

Data as searched posts and is fetching as is search fetching that's equal to use search posts coming from queries and mutations to which we have to pass the search value. One cool thing about this is if we were to just pass a regular search value it would recall this every time that we enter a keystroke. But this can be quite draining for our API and our server and everybody involved. So.

5:17:45

Usually what you want to do is you want to do it after a specific amount of milliseconds pass by then you want to do another call. This is a method called debouncing. So what you can do is close everything, collapse all the files, go to source and create a new folder called hooks. Within hooks you can create a hook called use debounce dots and this is a hook that I found.

5:18:12

Directly from react query. Here they provided its entire code. Essentially what it does is as you start typing it de bounces the query so it saves you performance. And this entire debounce query is going to be in the GitHub gist down below. So you can simply copy it and paste it right here. Once we have it, instead of passing the search value we can define a new const debounced.

5:18:40

Value which is going to be equal to use the bounce to which you pass the search value and then set in number of milliseconds like 500 until when it's going to be recalled. And you need to import use de bounds from hooks use debounce. And then you can pass the debounced value which is going to make our application even more optimized. So here we have everything when it comes to the search. But above.

5:19:08

The search we can also Define const data as posts fetch next page as well as has next page which is equal to use get post. And then we have to import this from queries and mutations. Now this gives us a lot of data to work with because no longer longer do we have to fake the posts. Now we can actually use these right here and we can uncomment what we have right here.

5:19:41

Below. If you do that and save it we still get an error but that's okay. We can go to inspect and then conso and we can see that it's complaining that it cannot read undefined at Pages line 16. So that is right here. Apparently our posts still don't have the pages. Other errors also include I'm guessing something related to that. Yes. So what we can do is we can conso log the posts and.

5:20:10

See what are we getting back. If I reload the page once again it seems like the posts are undefined. So let's figure out why that is. One thing that we might need to do is just ensure that we don't get to this block of code if the posts are undefined and it seems that they are. So what we can do is add an if state statement right here checking if we don't have posts and.

5:20:36

If we don't yet have posts then we can simply return a div that has a class name equal to flex D Center w-o and h- fool. And this is going to render only one thing which is going to be our self-closing loader component coming from components shared loader. If we save this you can see that our app works again and we can see that first the posts are undefined but then as soon as.

5:21:05

It loads them we get one post right here with the caption that we have entered. So this is great. And now you can see that we're displaying the grid post list great and we're passing the posts within them. So what do you say that we try to show these posts on the explore page? Let's go ahead and go into the grid post list and let's implement it. First things first, let's get all the necessary props.

5:21:32

Most important one is going to be posts. So we can Define this as grid post list props and we can Define them right here at the top by saying type GD post list props posts is going to be of a type models. document but it's going to be an array of these models coming from ight. Now that we have the post here, let's also get the user because we'll have to know which ones were created by the user.

5:22:02

So you know the drill. Const user is equal to use user context which we import from OD context. Now that we have this we can wrap all of this in a UL, an unordered list that has a class name equal to grid Das container. And let's save it. You can see it disappears. And now within here we can map over the posts by saying posts. map where we get each individual post and.

5:22:36

For each one we can return a list item. For now let's say that we just returned a post. caption. If we do it you can see only one post caption here. But of course we want to make this a bit more interesting and something like this would be great. An explore page where we can see all the popular posts. We have a nice looking image, a Creator in bottom left, and then save and like on the.

5:23:01

Bottom right as well. And then we can Scroll of course with the infinite scroll as much as we want to down below. So this is the goal and we can implement it. So instead of just An Li, let's do an Li that has a key equal to post. doar ID as We're looping over it and the class name of relative m-w of 80 and H of 80 as well. Now instead of rendering a post caption right here we want to render a link. This.

5:23:35

Link is of course coming from import link from react router Dom. This link is going to wrap our image. So right here we can Define our image that's going to have a source equal to post. image URL. And there we go. So now once we click it we wanted to go to the Post details of this post. So let's say two slost dooll sign ID. Now if we click it we go away. That's great. Let's also give it a class name.

5:24:14

Equal to grid Das postore link and that's going to make it look a bit better. The image itself is going to have an Al tag of post as well as a class name of h- full for full height, w-o for full width and object cover so it looks good. There we go. Now below this link we need to show the information about a user but we're going to reuse this grid a couple of times. We're going to reuse.

5:24:42

It on our profile later on as well, specifically on liked posts and more. And as you can see and on the Explorer we're going to show the stats like save and like. But if we're visiting somebody's profile we don't necessarily have to show the stats because you're not going to like your own posts. So that's why we're going to make this component modifiable as every component should be.

5:25:05

We can pass some additional props such as show user by default set to true as well as show stats also by default set to true. But in case you want to pass a false you can do that. So right here at the top we can also add two new types: show user question mark meaning it's optional of a type Boolean and show stats question mark Boolean which means that it is optional. So now if we go.

5:25:32

Below this link we can create a new div that's going to have a class name equal to grid dstore user and within here we want to check if show user is true then we want to return a div that's going to have a class name equal to for now flex and it's going to render an image that's going to have a source equal to post.

5:26:00

Creator image URL. And now you can see it right. This is the little image that we need to show of who created the post. We can give it an Al tag of Creator as well as a class name of h-8 w-8 and rounded Das full as we usually do with profile images. And there we go. Now it's a little profile icon on the bottom left. We can also create a P tag that's going to render the post.

5:26:32

Creator. name and we can also give it a class name off line- clamp D1 which is going to ensure it fits in one line. Let's also add a couple more properties to this div: Flex items D Center, justify Das start, a gap of two to divide them a bit and the flex of one. Great. Now we can go below this div and below the dynamic block and we can also check whether we want to show the.

5:27:06

Stats if we do want to show the stats we can render the Post Stats component so Post Stats like so we can import it from Post Stats pass over the post equal to post as a prop as well as the user ID equal to user. ID as a prop if we save it you can see like and save and we can do that right here from the Explore page this is great now our Explore page is almost done we still have to do the

5:27:37

search of course but let's go ahead and add another post to see how it looks like let's go to create add a caption something like learning Nextjs 13 select the photo add a location something like add home and add tags such as nextjs learning coding and we can create a post this right now works pretty flawlessly I got to say we get redirected to the homepage and we can immediately see our

5:28:11

new photo like a real social media application our timestamps work as well so just now at home we have different tags and we can click it to go to the Post details we can like it and we can also of course head to Explore where the new photo now appears at the Top This is great now what do you say that we focus on the search next so here we have a component called Search Results and if

5:28:39

you remember we have already created the searched post right here so let's pass some of the values into our Search Results specifically we can pass the is search fetching which is going to be the loading State equal to is search fetching as well as the search post which is going to be a query request coming from our used query finally we can head into this component and we can

5:29:05

start implementing search the first thing we have to do is accept those two props by saying is search fetching and search posts and this is going to be of a type Search Results props we can of course Define the type right above so type Search Result props it's going to get the is search fetching which is going to be a Boolean and search posts which can be a collection of models dot

5:29:40

document and an array and we can import that from aite now how is our search going to look like well our search is going to be a really simple component as a matter of fact it's going to be almost like an if so we're going to return a couple of different things if we're fetching the search posts we can simply return the Loader component which we have to import from

5:30:04

Loader on the other hand if searched posts exist so if search posts. documents. length is greater than zero then we want to return the same Grid Post List that we have already created but this time we want to pass something else to it so I'm going to put it in a new line like so and we can also put this in a new line so it's easier to understand it's a real function block

5:30:32

there we go so we want to return this Grid Post List and we need to pass to it posts which now are not just going to be explore posts but rather searched posts.

5:30:45

documents there we go here tapescript is complaining a bit I made two mistakes first of all I have to spell this prop correctly and when it comes to the search posts it's complaining right now that it does not exist on this property we can add a check right here saying if search post exists then we can go ahead and check for the documents this is just a top script warning we can look into it

5:31:08

later and here it's saying cannot find search posts did you mean search posts yes we indeed did mean that so that's good thank you tsrip for letting us know and then we're passing the search posts into the Grid Post List finally if this is not true and this is not true then it must mean that we have no searched posts so we can simply return a p tag that's going to

5:31:32

say no results found and then we can do a class name of text dl-4 margin top of 10 text- Center and W Off full and this is it this is our Search Results component that we have here and that we're using within our Search Results here we have a warning from typescript this is okay for now we can come back to it later on so let's go ahead and test our search we can try searching for something that we

5:32:05

have on our homepage for example nextjs 13 appears in both we have learning here and we have ultimate here so let's try to search for something like that let's try to go for next.js it's loading and we get both that's good both say 13 but only one says 13.5 the other one is 13.6 so if we do this it seems like it's not ref fetching it just gives us what's already cached so let's go

5:32:36

into our query for the search that's going to be search post use search posts and then here we have to validate the query again once the search term changes so we can pass the search term here as the second parameter and now it's going to recall it 13.5 and then 13.6 we still have both but if we search for ultimate we only have this and if we search for learning we only get this which means

5:33:10

that our search is working properly this is great to see of course there are filters here that we can also do and in general if we don't have search then we have the explore of course this is the place where we're going to also implement the infinite loading so we can immediately fetch all of the next pages and all of that is going to be pretty easy to implement using React Query and

5:33:34

aite so what we can do is first of all go all the way down and below this div we can create a new Dynamic block of code that says if we have a next page so has next page and if there is no search value meaning we are on the explore and then we want to show a div that's going to have a ref this is really important a ref called ref and a class name of margin top of

5:34:06

10 of course the app is going to break now because we haven't yet created this ref and we can add a loader right here when we're loading for the next page now why are we adding a ref to this little div right here at the bottom well once we scroll to it and once this reference gets in view it means we're at the bottom of the page and we want to start loading the new posts so let me show you

5:34:29

how to implement that right at the top we can install a new package this package is called react intersection Observer you can see it right here on mpm you can implement it in Hooks and it's going to give us access to this use in view it's going to be really easy to monitor specific elements in this case that ref at the bottom the only thing we have to do is import it attach a ref to

5:34:55

it and then we're going to know once we reach the bottom of the page again don't read when the wheel when you can find a simple package like so and we can easily install it by running mpm install react intersection Observer there we go the package got installed and we can use it by importing the use in view hook coming from react intersection Observer now right at the top we can declare a new

5:35:23

ref const ref and in view which is equal to the call of the used in view hook just like so and then we can also import use effect coming from react we can Define it right here at the top by saying use effect don't Define it below the if statement use effects have to be above all conditional renderings and it's going to render whenever the inw variable changes or whenever the search value

5:35:59

changes what we want to do is we want to check if it is in View and if we're not searching for something so if there's no search value then we want to fetch next page and this is my people how you implement infinite scroll so let's save it let's go back to application and now as you get to the bottom you should be able to see the scroll up of course it's not going to give us anything right now

5:36:26

because there are no new posts but if we limit the number of posts per page and if we create more posts it's going to work we can test it out really soon so up to this point we've implemented a lot of stuff so let's close these files let's expand this to its full glory and let's see what we have implemented up to this point we have a phenomenal registration and login screen so here we can login

5:36:57

into our account or we can sign up for an account if we don't have one already and in this case we can log in with our password and email immediately we are redirected to our home screen where we can see our great posts each post can be liked unliked and also saved let's not forget that we also have a phenomenal Explore page where we can see more posts that are popular

5:37:25

today if you want you can add additional filters and we have complete search search so if you search for something it's going to show up and also lead you to that Post Details page also don't forget that everything is completely mobile responsive and it has this native mobile UI we've laid down the foundation for creating something extraordinary a fullblown social media application of

5:37:51

course there's a couple of pages that are missing such as the People page where we show all the users the saved page where we simply have to fetch all the saved posts and then display them these two pages look like this here you fetch people and you show them and if you notice the saved it's going to look almost exactly the same as our explore that's because we're reusing the same

5:38:14

grid component finally there is the profile page where we can see the likes as well and the edit profile but I want you to pause here for a second first of all congratulations on coming this far into this tutorial it has been a long one you've shown a lot of dedication to learning and trying new things out so pat yourself on the back and be proud over the years many of you have asked me

5:38:42

how I approach something or develop something that mindset that developers have and today I want to do something special I want to tell you how I approach things for the rest of the features that we'll be building today if you see many people are successfully able to do something by following a tutorial like this or other content but their real struggles begin when they're

5:39:06

faced with something new most of us will still be clueless even though we have done something similar before by following a YouTube tutorial this is known as tutorial hell and in our Nextjs course we have tried to solve that we have created a So-Cal active lesson learning where you still have all of the lessons that we usually us have such as setting everything up and coding things

5:39:33

from scratch but soon enough we dive into something special and that is active lessons they start from the sidebar and then whenever you want to implement something before we do it together you have to do it on your own let me give you an example for the homepage here you have to create a question card UI so here we have a complete active lesson that guides you how to do that specifically with the

5:40:02

mindset part teaching you how to approach it like a real developer it gives you something to think about additional resources and even hints that you can uncover by hovering over and then in the next module I teach you how to do it from scratch in a long lecture and why am I telling you this well I don't really believe in tutorial hell watching tutorials is great but what I

5:40:25

believe is missing is the thinking part when you're watching a video you have to stop and ask yourself how would I approach it and only then watch the solution but very few of us do that and this is why we blame it on tutorial hell and why you're missing that developer mindset that's why in our next GS course we have scattered around so many of these active lessons so that you can

5:40:50

actually learn by building remember good developers don't have someone holding their hands they figure things out on their own because they have developed their mindset I don't have any graphics right now but just pause for a second and listen there's an old saying that says give a man a fish and you'll feed him for a day teach a man how to fish and you'll feed him for a lifetime for

5:41:14

that reason in this free YouTube video I want to give you a glimpse of what we have in our course by introducing some active lessons for the remaining pages to see how you will approach building them I hope you're excited to continue with this project by learning while doing so let's get started and I proudly present to you active lessons for our Snapgram application the link is going

5:41:39

to be down in the description the first active lesson is about implementing the infinite scroll and this is the feature that we have already built so I have specifically introduced this one to go over it and to show you how you're going to do the future ones on your own now that you know how we did this one together so the task and the mission is to think and try the infinite Scrolls in

5:42:01

the application for the home users and profile Pages even though we have already implemented it for the explore page you can also make it go right here in the homepage so here we provided you some examples saying that you can visit the original Instagram application and then see how every time you scroll down new posts appear and then some additional resources as well such as the

5:42:26

query key query function infinite query app pagination aate queries and more all of the resources you need to make this possible of course most of these are actual documentation sites and then there's also a mustre resource which is a React Query article on infinite scroll finally we have some hints as well the entire process needed to develop this is nicely laid out in form

5:42:52

of hints and not only that it urges you to think and develop that developer mindset so it asks you what do we need how should it work or Ro does that mean that Instagram is showing many posts in one request and then even some code blocks to get you to implement this on your own in case you get stuck and need any assistance as you can see it goes on and on and on and gives you the code needed

5:43:19

to implement these features within the application we have been building so far how cool is that it's a completely new paradigm to learning so just give it a go and tell me how you like it and once again if it's not working as expected don't feel frustrated it's a part of the developer's life so start again and debug everything line by line see if you're getting any documents and check

5:43:43

if the last ID is being calculated properly and whether it's being passed to the query function or not just keep trying if you get stuck just refer to the finished code repository on GitHub this right here was just the first of the active lessons we have implemented it for explore page but you can do it for the homepage as well and then we have five more the top creators is the

5:44:07

next feature you have to implement and in this case we have even provided you with a figma design you can see it here so you have to implement the top creators right sidebar once again you have everything you need here we even recommend to play a little flexb game to test out your Flex skills and then again we dive into a large number of different hints they go linearly from start to

5:44:33

finish so you can try coding it on your own and then try to think in layouts try to implement different things try to do it on your own but if you get stuck you can visit the hints then again we're going to implement the all users section next here you can check out the design and then we go through different must plays or must reads as well as some additional hints you can follow to

5:44:58

implement the feature and I don't think I got to say it but this is repeated for the save posts for the edit profile and finally for the profile page itself I truly believe that this is a new way to learning of course feel free to let me know what you think down in the comments and if you'd like me to do more things like this in the future with that said give it a go try

5:45:20

to go through as many of these active lessons as possible see how you like them try to implement some of the features and then come back to this video to deploy the project to the Internet so how did it go I hope you are able to take your time and I know it can take a lot of time maybe even more than the entire video you've been watching because implementing things on your own

5:45:43

actually challenges you a lot so I hope you did good if not there's more things to do and more things to learn but learning means improving so in any case now however much of the project you've finished let's go ahead and deploy to the internet to get together we'll be deploying our project to versell so you can head to versell decom and log in or sign up once you log in you should be

5:46:08

able to see your projects and you might not have as many as I do as you can see we have hundreds and hundreds of projects right here most of them belong to our JSM masterclass experience students so in our master class which is the JSM boot camp we actively teach people how to develop projects on their own within a team and this can be considered even an additional step to these active

5:46:34

lessons the active lessons though are reserved for the Nextjs course Andy will also gotten a chance to experience them in this video so with that said let's go ahead and click add new and we can select project you can notice that it's going to ask us to import a get repository which means that we have to upload our project to GitHub and to do that you can go to github.com

5:46:57

slne and create a new project called something like snapgram you can make it public or private I'm going to make it private in this case and click create repository once the repo is there we can push our code to it by dragging this to the side opening up our terminal of course we have to stop it from running and then you can run get init get add dot get commit Dash first

5:47:32

commit and then you need to copy a couple of command from here such as git Branch M main get remote at origin and get push you origin Master once you do it our code should now be live on GitHub which you can see if you simply reload and there we go our code is here now that repo is live we can go back to versel and it automatically figured that we have a new V project right here which we can

5:48:00

import once you import it you'll have to add your environment variables so back in our code you can go to our env. looc copy all the variables and simply paste them right here it's going to automatically figure out all the individual variables and click deploy as you can see the deployment is cued so let's give it a minute and let's see if it's successful and in just 30 seconds

5:48:26

our website is now live and let's go ahead and click here to visit our deployed application there we go our sign in is looking great but if you go to inspect and if you look into the console you can notice that we cannot really make a request to our new domain or rather the access to ight is being blocked from our new domain that's because of the course policy something that developers don't

5:48:53

really like but thankfully there's an easy way around it you need to go to aight and then you need to add a new platform in this case we're going to do web the name is going to be snapgram and the host name can be everything ad verell thata and we can click next finally let's skip optional steps and this created a new integration with a web platform where we have

5:49:21

deployed our snapgram and every single host name on verell should work so let's go back clear the console and reload the page we immediately get logged in into our new domain if that hasn't worked for you can just manually log in and with that said you should be able to have this explore features the people as well if you have implemented it saved features as well everything is working

5:49:48

flawlessly on our newly deployed website how great is that so how did you like the build if you're watching all the way until the end I hope you loved it Andy and how did you like the new active lessons I hope they truly tested you and helped you build your own developer mindset if you want to improve your game and build even better applications now using Nextjs instead of React you can do

5:50:13

so in your Nextjs 13 course so just go to jm.pro and check it out within it we have many more active lessons and a lot of interesting things to learn to land a developer job and finally huge thanks to aight not only for sponsoring this video but for building such a phenomenal open-source platform that lets us add OD databases function and storage in a matter of minutes once again thank you

5:50:42

so much for watching and I'll see you in the next one have a wonderful day

Transcript

Hiển thị

Introduction and Project Overview

This chapter introduces the video tutorial, which demonstrates building and deploying a full-stack social media app using React, TypeScript, Appwrite Cloud, Tailwind CSS, and React Query. The app features infinite scroll, authentication, file management, liking/saving posts, profile editing, and a mobile-responsive UI. Appwrite Cloud provides a free backend with authentication, databases, storage, and serverless functions. React Query is used for data fetching, caching, and state management.

1 / 8