Build and Deploy a Fullstack React app using Next.js, NextAuth, ChakraUI, Prisma, and PostgreSQL

Aug 15, 2023

Build and Deploy a Fullstack React app using Next.js, NextAuth, ChakraUI, Prisma, and PostgreSQL

Main topics:
1:21:42 Session content presentation
1:36:49 Create Next.js App with Typescript support (use node v12)
1:40:15 Add ChakraUI components library
1:45:26 Website design with Figma
2:00:00 Develop the landing page
3:19:14 Authentication with NextAuth, Prisma, and PostgreSQL
3:27:46 Integrate Prisma
3:35:10 Integrate NextAuth
5:24:50 Next.js RESTful API
7:43:12 Web Hosting with Vercel

Additional topics:
1:24:27 GitHub repo creation
1:29:59 Pomodoro technique
1:31:48 nvm (Node Version Manager)
2:07:08 Reusable components
2:14:20 Atomic Design
2:51:20 ChakraUI SimpleGrid component
3:24:58 Create a PostgreSQL database with Heroku
3:47:49 Authenticated page
4:25:40 Conventional Commits
5.27:38 PostgreSQL Todo table design
5:35:16 Get Todo
6:24:54 Create Todo
7:06:16 Update Todo
7:33:42 Delete Todo

---
Closed captions sponsored by Prisma. Get yours for free here: https://pris.ly/closedcaptions

Content

4798.07 -> - And we are live.

4800.03 -> Hi, guys, hi, everyone.

4802.61 -> Could you just tell me if you are able to hear me?

4806.281 -> Do you hear my voice?

4807.94 -> Do you hear my voice?

4813.99 -> Please give me a feedback so we can proceed.

4839.18 -> Great, thanks Balaji, thanks Balaji.

4842.15 -> Nice to meet you.

4843.57 -> Hi Chambelano, hi Chambelano, everything's fine.

4846.39 -> Cool, cool, cool, thanks a lot.

4848.9 -> I'm really excited about being here with you guys today.

4852.43 -> It's my first live streaming on YouTube,

4855.18 -> so I'm also really worried about it,

4857.53 -> but, okay, okay, let's go ahead.

4860.34 -> There's a lot to do, a lot to learn today.

4863.74 -> So let's get started.

4867.18 -> So today I want to proceed as a normal work day,

4871.83 -> so we will divide our hours in chunks of time

4876.82 -> and we will use a specific technique

4879.92 -> I will talk to you about later.

4882.79 -> So let's see what we are going to do today.

4886.66 -> So we have a session this morning.

4889.98 -> Here it's morning in Italy, of three hours,

4893.49 -> and then in the afternoon,

4894.76 -> other four hours for a total of seven hours together.

4899.11 -> So let's see what we are going to do.

4902.78 -> So I open my favorite editor, Visual Studio Code.

4909.995 -> Okay.

4911.85 -> So today we are going to create

4913.18 -> a full-stack React application.

4917.66 -> What does it mean, full-stack?

4919.46 -> This means that we will create the front-end,

4922.13 -> but also the back-end with a database attached to it.

4927.69 -> So we will create a Next.js app.

4937.94 -> We'll use Chakra UI as the design system

4943.23 -> for the React components, okay, to speed up the development.

4949.55 -> And we will create our first part, which is the front-end.

4954.66 -> So the landing page.

4957.06 -> Hi, Falana, nice to see you here.

4960.8 -> We will create a landing page.

4963.51 -> After that, we will start creating

4968.03 -> authentication using the NextAuth, okay.

4976.013 -> We will see it later, about Twitter single sign-on, okay.

4985.559 -> And then we start developing our back-end.

4988.93 -> So let's say we create some endpoints,

4995.23 -> RESTful endpoints, okay?

5001.67 -> Of course, before this, we need to set up our database

5006.18 -> because the authenticated users

5008.17 -> will be stored there in a database.

5009.81 -> We will use postgresQL

5015.3 -> which is a relational database, okay.

5021.798 -> The databases are split between two types.

5026.66 -> Hi, Mahesh, hi, Mahesh.

5028.58 -> Relational databases and NoSQL databases,

5032.59 -> which are not relational, of course.

5036.15 -> In our case we use the relational database

5040.2 -> leveraging Heroku.

5043.539 -> We will also use an ORM, which is called Prisma, okay.

5051.09 -> So this is the scheduling for today, okay?

5058.89 -> Hey Fahem, hi, nice to meet you.

5062.64 -> So let's get started.

5067.35 -> So many of you, of course, asked me if it will be possible

5071.2 -> to use after the streaming the code

5075.52 -> that I will create with you today.

5078.07 -> Of course, the answer is yes.

5081.24 -> I will create right now GitHub repository

5085.29 -> that will be public.

5086.9 -> So you can use it also after the live streaming.

5090.89 -> You can fork it and use it.

5092.53 -> So repository name,

5093.96 -> let's use full-stack React app available, cool.

5099.8 -> full-stack React app, and this is public.

5107.88 -> Okay, let me add also, I could ignore file.

5112.67 -> Choose license, DMAT, usually is fine, okay?

5128.64 -> Not able to create a repository.

5133.08 -> Let's see if there's no JS, yeah, it's cool.

5140.48 -> Okay, here we are though.

5141.95 -> Now we created the public repository.

5145.19 -> Remember guys, you need to master Git

5149.06 -> as a versioning tool, it's market standard,

5153.43 -> and you need to use it in both situation.

5155.79 -> If your work as a solo founder, so alone,

5159.67 -> or if you work in a company really Git is mandatory.

5165.44 -> Now that we created the repository,

5167.14 -> we need to clone it locally on my machine, okay?

5171.54 -> So I copy this, I open a terminal,

5176.19 -> I use item two, which is really, really cool

5180.83 -> and say git clone,

5182.45 -> and then the URL of my repository.

5187.02 -> Perfect.

5188.72 -> Now there is a folder on my computer

5193.85 -> which is called full-stack React app, okay.

5198.59 -> I use this common codes to open this folder

5202.46 -> in Visual Studio Code directly.

5205.17 -> Here we are.

5206.56 -> Okay, yes, I trust this author, it's myself.

5211.66 -> Let me open the terminal here also.

5215.58 -> Okay, here we are.

5219.6 -> Great, so first step,

5224.21 -> let me copy this here and close this window

5231.48 -> and it split, okay.

5235.71 -> I hope you can read the text very well, guys, I think so.

5239.59 -> Yes, it should be okay.

5241.93 -> So first of all,

5243.05 -> we create the Next.js app with TypeScript support.

5250.66 -> Why TypeScript?

5252.5 -> This is very, very cool

5254.49 -> because we want our code base to be Type Safe.

5259.69 -> Also it has many, many benefits.

5262.18 -> Of course, there is a little bit of override.

5264.04 -> We need to create the types of our return types, data types,

5268.52 -> data structures, functions, and so on,

5272.69 -> but believe me it is very, very useful on the long term.

5278.7 -> If you need to refactor your code

5280.82 -> or you need to touch code that you didn't create.

5284.264 -> And after some months you don't remember about

5287.16 -> the data structures and the data types,

5289.4 -> really TypeScript is very important.

5294.72 -> So, the Next.js, create app TypeScript.

5302.82 -> Of course, for every library tool technology,

5307.39 -> the official website usually is full of documentation.

5311.92 -> So use your official website

5314.54 -> to do what you need to do basically.

5317.85 -> So here there is a small guide about creating

5322.53 -> Next app with support for TypeScript.

5327.13 -> So this is the comment,

5328.93 -> youcreatenextapp--TypeScript, --TypeScript.

5344.696 -> Project name is full-stack-app.

5351.95 -> So dependencies React, React zone and Next.

5355.8 -> So Next is kind of tool that's built on top of React.

5365.44 -> So we can create our UI components using React,

5369.47 -> but Next.js extends the possibility of Next to create

5374.57 -> the backend and server side rendering.

5377.98 -> It really includes a lot of features,

5380.42 -> really, really cool features.

5386.87 -> Oh, yes, just one more thing.

5389.71 -> I told you that I want to organize

5392.22 -> the time we spend together.

5394.44 -> Hi Marco, hi Marco.

5397.8 -> Using a technique which is called the Pomodoro technique.

5403.71 -> Oops, technique.

5406 -> If you're wondering what's a Pomodoro,

5408.15 -> it's an Italian word

5409.54 -> because any Italian developer created this technique.

5413.56 -> Yes, Francesco Cirillo.

5416.22 -> Pomodoro is tomato basically.

5418.01 -> So the idea is to create a timer,

5422.15 -> to always have a timer and split our time in chunks.

5426.74 -> In this case, we will use 50 minutes period.

5432.2 -> We will create things.

5434.28 -> We will be really focused on the activities

5437.09 -> and then we will have a 10 minutes break.

5439.39 -> And then we iterate this approach.

5444.93 -> Okay, I use this a really simple about efficient tool,

5450.9 -> which is called Cuckoo.

5453.12 -> And let's say we have 55 minutes really focused, okay.

5461.13 -> Here's the website, of course,

5462.22 -> if you want more details about this technique.

5466.65 -> I'll send the link in chat.

5472.14 -> Great, Chambelano, developed,

5475.47 -> an application can be used as a Pomodoro Clock.

5478.17 -> Chambelano, please share the link of your application.

5480.96 -> We are looking forward to use it, okay.

5485.55 -> Let's see if, okay.

5490.48 -> Node is not compatible with this module.

5492.97 -> They expect these versions, okay.

5497.78 -> And they got 13, so node --version.

5503.03 -> Yes, I have the version 13.

5505.63 -> So now we use a tool,

5508.23 -> very, very useful, which is called NVM.

5512.47 -> NVM stands for Node Version Manager.

5517.62 -> Really, really suggested.

5520.67 -> So I create a file here called NVMRC, okay.

5527.787 -> And I write inside version, I want to use (indistinct) yes.

5531.89 -> So version 14.

5534.57 -> And then I run in the terminal NVM,

5538.65 -> use to switch the version used in this project only.

5543.86 -> So in this folder to version 14.

5547.63 -> So now, create the Next app common sheet work.

5555.12 -> Full-stack-React-app.

5562.5 -> Okay, there is already.

5573.14 -> Hmm, okay.

5579.382 -> Let me removed the package.json.

5585.47 -> Okay, there is another one.

5587.25 -> It created another folder inside, okay.

5589.56 -> So let's me remove package,

5592.25 -> the node version should be still 14, perfect.

5596.54 -> And now, okay.

5627.666 -> Let me save this file.

5628.499 -> In the meantime,

5632.26 -> I want it to be added to there, to the README, okay.

5641.73 -> Cool, so let's check the documentation.

5646.26 -> Okay, for existing projects, it's not our case, okay.

5653.91 -> Now we should be able to run

5656.48 -> NPM run dev or yarn dev to run our application.

5661.76 -> Okay, there are some other details,

5663.52 -> but we should be good to go.

5665.89 -> So if I open the package json created

5670.02 -> by the comment we have some scripts,

5674.29 -> we have the dev script, the build script, start and lint.

5679.34 -> So in order to run our application locally,

5684.67 -> it's enough to run NPM run dev.

5690.76 -> Oops.

5704.17 -> Let's try with the start first.

5711.77 -> Hmm.

5716.7 -> Then the Package Json.

5720.62 -> Okay, always the problem with this double folder, okay.

5726.04 -> Yarn dev.

5736.27 -> Couldn't find the pages erector.

5737.61 -> Okay, it looks like we're missing something in our, okay.

5745.77 -> Let's use Next, and NPM is Next.

5752.82 -> Okay, it looks like it doesn't create everything.

5756.07 -> So let's use the getting started.

5760.11 -> Okay, we did this, okay.

5773.48 -> Yeah, in fact we're missing many folders here,

5777.76 -> it should have been created.

5778.64 -> So let me start from scratch, okay.

5788.119 -> Let me use version 12.

5794.78 -> Something broken with the latest version of NVM.

5799.61 -> I remove the folder.

5801.98 -> Okay.

5803.121 -> And we start from scratch.

5809.12 -> We use NPM, okay.

5820.58 -> Stack React.

5825.478 -> Let's see.

5828.705 -> Okay.

5858.82 -> Now it's definitely better.

5860.49 -> So guys don't use NodeJS version 14, use version 12.

5865.15 -> Everything is going to work fine.

5867.09 -> Okay, so here we have the folder structure,

5870.53 -> much better, okay.

5872.49 -> We have our comments, so NPM run dev, okay.

5880.78 -> Again, I'm not in the right folder, okay.

5885.64 -> Started.

5889.14 -> Very good.

5897.62 -> Okay, so here we have our application on local host

5903.99 -> with something already provided by Next.js.

5909.6 -> Get started page basically.

5911.05 -> So get us started by editing pages/index.tsx.

5919.48 -> Immediately.

5926.52 -> Okay, I can close this.

5929.28 -> Okay, so pages/index.tsx.

5931.75 -> As you can see, already JSX syntax.

5937.86 -> The JSX syntax is special syntax used by React,

5944.34 -> but not only by React

5947.48 -> that allows us to mix together HTML tags,

5951.89 -> standard tags like this with custom components.

5956.39 -> In this case,

5957.223 -> the head component comes from Next.js directly.

5961.73 -> But as we will see later,

5963.96 -> we will create our own components.

5968.874 -> Okay.

5975.03 -> So everything is inside pages

5979.22 -> and there is also a folder called API.

5982.89 -> We've already a Hello API.

5987.13 -> That basically returns Json object, we've John DOE,

5992.89 -> it is just an anticipation.

5995.09 -> So if I go to the browser

5997.248 -> and I type API/hello, I see the result.

6004.35 -> Very cool.

6005.183 -> So this means that we have Next.js.

6006.75 -> We can create the front-end part of our application,

6009.77 -> but also the back-end part.

6011.7 -> So this is very, very cool.

6015.37 -> Okay, so the first task we have is to,

6019.57 -> we created the Next.js app.

6022.445 -> Now we want to install Chakra UI React components.

6027.58 -> So let's go to the Chakra UI website, okay.

6033.22 -> You should have a guide for Next.js.

6037.52 -> Yes.

6042.44 -> Here we are.

6043.45 -> So we did this already,

6045.82 -> so we need to install Chakra UI now.

6049.82 -> Yes, yes.

6068.79 -> Okay, while it is installing,

6071.17 -> let's see what is Chakra UI?

6072.56 -> So Chakra UI, it's a library of React components

6077.51 -> really well developed, well done.

6080.3 -> So we want to leverage this.

6085.78 -> Let's see the basic components.

6087.17 -> So we have, for instance, the box component,

6091.85 -> which is the basics of our UI.

6097.76 -> As you can see, there are many prompts.

6099.23 -> We can pass to our Chakra UI component

6103.34 -> like the max width, the border width,

6105.39 -> the border radius and so on.

6107.07 -> So all the CSS rules are available here,

6113.27 -> and they are also more powerful.

6117.39 -> Then there is the flex component,

6120.42 -> which is bucks, div with the display flex,

6126.12 -> it can be used.

6127.03 -> There is a simple grid to use the CSS grid and the grid.

6131.12 -> So we will look at it later when we will build

6133.96 -> our landing page and we will create our layout.

6137.94 -> We will decide which of these components

6139.88 -> is the better one for us.

6144.38 -> Okay, let's see if it completed, yes.

6147.69 -> Chakra UI is installed.

6150.5 -> Let's return back to the Get Started guide.

6155.42 -> Chakra UI Next.js, okay.

6162.96 -> Now we want to add the Chakra provider.

6166.32 -> So this is, so behind the hood Chakra UI

6170.79 -> makes use of emotion, if not gronk, yes.

6177.47 -> So this is CSS Injure, yes, library.

6182.52 -> What is really cool about emotion

6184.73 -> is that there is this concept of a theme.

6188.56 -> So there's a common theme with different variables,

6192.28 -> like the colors that we will use in our application,

6195.83 -> spacing, the breakpoints for responsively out and so on,

6199.079 -> many, many, many things.

6201.36 -> And in order to allow the components of Chakra

6206.53 -> to use this common theme,

6209.47 -> we need to encapsulate our application inside a provider.

6217.17 -> The provider is a concept from React,

6220.08 -> basically creates a context,

6222.78 -> an execution context for our components

6225.91 -> and all the components inside the provider

6228.73 -> can inherit a prop basically,

6232.78 -> in this case, the team, for instance.

6238.24 -> Okay, so we need to add the provider specific for Chakra

6243.03 -> in our application.

6244.77 -> Which is the entry point, is pages_app.js,

6248.57 -> in our case .ts, because we use TypeScript.

6252.95 -> So let's do that.

6260.38 -> We import the Chakra provider

6262.1 -> from the Chakra UI React package

6268.83 -> and we encapsulate.

6277.43 -> So this is the route of our application,

6280.04 -> this component here.

6282.97 -> So we want to have the provider

6286.13 -> wrapping our application.

6294.33 -> So for Chakra, that's almost it.

6297.41 -> So let's go back to the index.tsx.

6302.52 -> Okay, let me close this.

6304.87 -> Let me open.

6308.22 -> Okay, the local host page.

6317.4 -> Now we want to change a bit the layout.

6319.18 -> Of course, we want to have our own application.

6323.67 -> Let's see what we want to create.

6326.26 -> So let me open Figma.

6329.14 -> I always use Figma to create my art boards and illustrations

6332.5 -> that I publish on Twitter as well.

6335.43 -> This is very, very cool.

6338.94 -> Okay, let's create a wide frame of our page,

6345.07 -> of our landing page for our application.

6348.328 -> Probably we want to create a bar on top.

6355.3 -> That would be our top bar.

6360.697 -> We'll created our say hero section,

6365.45 -> hero section top bar, okay.

6370.09 -> We want to put probably, oops,

6376.248 -> the name of our app, our brand let's say.

6386.37 -> Okay.

6391.36 -> SuperApp.

6415.098 -> Okay, let me center it,

6417.66 -> and a bit more margin.

6421.63 -> And also we want to suggest the user, the navigation.

6425.56 -> So we have the menu.

6429.66 -> We've smaller, we've blog page,

6439.92 -> the product page,

6446.54 -> the pricing, of course, okay.

6474.77 -> Okay.

6483.82 -> I group them together.

6486.8 -> Yeah, menu.

6493.13 -> Okay.

6495.57 -> Then of course we want to suggest to sign up.

6501.532 -> Okay, rectangle.

6505.2 -> This text inside, we will use the Get Started, Get Started

6512.94 -> because in our case we will leverage single sign-on.

6520.3 -> So there is not sign up process,

6523.36 -> but just click, you connect your Twitter account,

6526.62 -> so the application to the Twitter accounts,

6528.91 -> you are in immediately, okay.

6540.77 -> This is Get Started button, okay.

6554.442 -> And we add a little bit of radius.

6556.33 -> We change the color, of course.

6560.62 -> Let's use this one.

6574.6 -> Okay, and a bit of radius, here it is.

6580.42 -> Eight pixels of radius, okay.

6599.47 -> Cool, okay, let's change the color a bit.

6603.93 -> Let's use the gray.

6608.72 -> Okay, SuperApp, we bold.

6613.45 -> Maybe use different color

6615.02 -> like our let's say primary color of the application.

6619.96 -> It's going to be a kind of blue, okay.

6623.32 -> Then we have our here section.

6624.7 -> Probably with text inside,

6626.18 -> we will use nice gradient, uiGradient.

6635.73 -> Let's take one just with the blue.

6640.65 -> Atlas, yes.

6643.65 -> I'll just copy it.

6654.97 -> Okay.

6656.15 -> We use linear gradient.

6659.67 -> The first color is this one,

6661.68 -> then we have another color which is this one.

6669.38 -> And the third color which is this.

6683.49 -> Okay, we change the orientation.

6691.37 -> Okay.

6694.07 -> And we can add our main claim.

6698.33 -> Use the Super, let's say,

6702.14 -> increase your productivity.

6710.32 -> Make your app in minutes.

6716.48 -> Okay, let's make it that bit bigger, okay.

6723.15 -> Let's increase a bit spacing,

6725.35 -> 64, the line height.

6729.56 -> Okay.

6730.96 -> And usually there's sub-line.

6739.07 -> Your full-stack React app.

6750.823 -> I am going really, really fast.

6752.7 -> This is a small design of course.

6757.46 -> I will define it, it's just an example

6759.3 -> for us to implement something.

6763.623 -> Okay.

6779.309 -> Okay.

6782.52 -> Okay.

6783.62 -> After that, we will have

6792.12 -> some details about our service.

6794.27 -> So we have a picture, okay.

6804.04 -> Some texts to describe it.

6811.73 -> It includes Next.js

6819.32 -> Chakra UI database and so on.

6841.26 -> Not bold but regular.

6846.88 -> Let's say the market standard technologies.

6870.9 -> Let's make it a bit gray, okay, and 18, okay.

6881.13 -> Maybe like this, okay.

6893.66 -> Okay, very cool.

6896.95 -> Finally, the footer.

6910.279 -> We will make our footer of another color like this one.

6915.84 -> Yeah, that's good.

6918.6 -> Or maybe our brand blue color.

6924.72 -> Okay, here can say SuperApp 2021, okay.

6948.57 -> Follow on Twitter,

6956.59 -> Twitter,

6964.55 -> Instagram,

6971.97 -> Facebook.

6974.75 -> Okay.

6983.54 -> We group this and this together and SuperApp, okay.

6995.05 -> Okay.

6998.29 -> Perfect, so now we have, let's say

7001.04 -> it's more than a wire frame.

7003.04 -> We have a lot of details so we can start building, okay.

7011.212 -> I love this, it's a reference.

7013.72 -> I can close this, okay.

7020.25 -> Here we are.

7023.71 -> Okay.

7027.57 -> First of all,

7028.403 -> we have many files that have been added to our project

7034.2 -> that are not synchronized with our remote repository.

7038.9 -> There's modifications are locally on my machine.

7041.89 -> So we will leverage Git, and we create a commit.

7048.38 -> So I add to the stage all these files, okay?

7053.59 -> Then you create a commit with message,

7057.22 -> this is feature web-app installed Chakra UI, let's set.

7072.49 -> Let's say created Next app and installed Chakra UI.

7083.26 -> Okay, now that I have the commit, use get status.

7088.44 -> I see that I am on the branch called Main

7091.72 -> and my branch, my local branch.

7093.99 -> I have one commit compared to the origin Main.

7097.93 -> Origin Main I remember is the remote repository on GitHub.

7105.07 -> Use Git Push to publish your local comments.

7107.71 -> So what is incredible about Git

7110.06 -> is that it always give you

7113.11 -> useful messages to help you proceed.

7116.95 -> So let's use Git Push, okay.

7125.13 -> Get status, okay up-to-date.

7127.17 -> So now my commit if I use Git Lock, oops, okay.

7134.444 -> You can see that I have the initial commit, of course.

7137.96 -> And then my commit with my message created by myself, okay.

7149.51 -> And now if it got to GitHub

7154.96 -> in my repository, here we are.

7163.39 -> And commits,

7173.43 -> two commits, yes.

7176.37 -> The initial commit and the commit I did.

7179.11 -> So now, if someone has already cloned

7183.11 -> the repository is now able

7185.79 -> to use the Git Pull command and get my code as well.

7192.29 -> So it is very useful.

7195.8 -> Okay, so we have 26 minute before the next break.

7201.82 -> So let's try to implement something

7204.01 -> to create our landing page.

7207.06 -> Go to Figma, where is it?

7209.42 -> Here it is, okay.

7212.619 -> Okay.

7214.849 -> Okay.

7223.899 -> Okay.

7237.51 -> Okay, so I can remove all of these.

7240.11 -> We don't need them.

7243.44 -> Okay, the main footer.

7250.45 -> Okay.

7251.5 -> We've seen that as soon as I saved the page,

7255.52 -> the file, sorry, the page immediately reloaded.

7260 -> This is why, because Next.js

7261.49 -> has a hot reload mechanism,

7264.36 -> but refreshes the page immediately

7267.37 -> but it doesn't refresh the page.

7269.28 -> It pushes the modification into the page.

7272.13 -> And so you see the modifications almost immediately,

7276.83 -> and this is very good.

7278.08 -> We can update the title,

7280.09 -> the title meta tag of our page in the head of the page,

7284.41 -> SuperApp, oops, Supberb, SuperApp.

7290.26 -> Okay, you see that the title has changed.

7292.71 -> If I open the dev tools,

7295.92 -> I can see the HTML that was generated.

7299.23 -> So head, we have a lot of meta

7301.97 -> or the scripts created by Next.js.

7305.84 -> and should have also the title.

7307.72 -> Yeah, title, perfect.

7311.34 -> Now we want to create the body of the page.

7313.94 -> So let's use a component from Chakra UI,

7318.56 -> which is the container component.

7320.93 -> You see that as it been automatically imported,

7323.26 -> let me move it down a bit.

7325.74 -> Okay.

7329.48 -> Test.

7332 -> Yes, here we are.

7333.47 -> So the container components,

7337.56 -> container.

7343.842 -> It's a component that has maximum width

7349.06 -> and so it doesn't take the full width of the page,

7352.67 -> but it can decide how big it is.

7355.83 -> Usually you want to have your content

7359.2 -> not taking the whole space, the width of your screen,

7363.33 -> but it's a bit smaller.

7366 -> And if we look, inspect the component,

7369.14 -> you can see that we have our container.

7372.26 -> And then yes, this is the Chakra container.

7376.52 -> Okay, you see that there is margin left and right.

7382.3 -> Some padding left and right.

7385.18 -> Okay, it doesn't take the full space,

7387.03 -> but it's good for us, okay.

7394.04 -> Okay, so probably these is good for our hero page.

7398.64 -> Hero section where you don't want to take the whole space

7402.95 -> at least the content,

7404.72 -> that it's not really good for the top bar

7407.05 -> and the hero background.

7409.42 -> Okay, so let's get started with the top bar,

7416.236 -> in this case we use the flex component.

7419.91 -> I always like to use the flex component.

7424.88 -> Okay, there is a shortcut

7427.21 -> and usually it's command and dot.

7433.04 -> These is a studio called suggest Hazmat, Hazmat.

7436.46 -> Suggests what do you need to do

7438.18 -> to import a component that's currently missing

7441.08 -> and suggests that the package

7443.74 -> from which the component would be imported.

7446.22 -> Okay, so let's me import the flex component.

7448.13 -> As you can see,

7448.963 -> it has been added to Chakra UI layout package.

7453.78 -> Okay, we want this to be full width,

7456.53 -> so the width will be 100 viewport width, okay?

7468.55 -> Guys, I sold also GitHub Copilot.

7471.44 -> It's crazy, it's incredible.

7473.43 -> Okay, anyway,

7477.03 -> let's use the container anyway, okay.

7480.886 -> And we use max width, oops,

7487.191 -> of course, we're missing the closing tag max width.

7494.62 -> Okay, it suggest me the possible values.

7497.47 -> I want to use xl, okay.

7506.371 -> And we want to create the SuperApp.

7508.98 -> So we use text, (indistinct) yes.

7515.33 -> SuperApp.

7517.48 -> We need to import it, of course.

7522.12 -> I don't know why there's always something wrong

7524.06 -> with the import of text, but you can do it manually.

7535.12 -> Okay.

7541.81 -> So we have our SuperApp.

7544.35 -> Of course we need to change it a bit

7546.13 -> because the style is different.

7547.78 -> What's really cool about, yes,

7552.26 -> about Figma that it provides you also the CSS

7556.08 -> of what you created, you've withdrawn on the Canvas.

7563.62 -> So we will not use position, width, height and so on,

7566.78 -> but we can use the rest.

7568.04 -> So this is a text of font size of 36 pixels

7582.207 -> and font weight, which is bold,

7588.92 -> and font size, it's already there.

7592.17 -> Font style normally is the default.

7596.28 -> If we want the line height 42 pixels.

7601.84 -> Okay, and of course there is the color, which is this one.

7613.57 -> Okay, let's go back.

7615.32 -> Here we are.

7617.7 -> Okay.

7620.24 -> Let's remove the container.

7622.49 -> Yes, I want it to the left of the page.

7626.96 -> Okay, then we create the menu and the Get Started button.

7638.59 -> Okay, so we create another flex.

7645.16 -> Okay.

7647.02 -> Texts,

7650.75 -> that will be Blog.

7654.66 -> And then we have Product and Pricing.

7658.22 -> So let's start leveraging components of that.

7665.77 -> So what I mean is that,

7667.82 -> we need to reuse our components, right?

7672.19 -> So let me start creating something else.

7677.44 -> So let me show you first,

7679.95 -> what you can achieve without reusing components.

7687.19 -> Okay, this is, oh,

7689.99 -> well, we can use the horizontal stack component

7696.92 -> from Chakra UI.

7702.46 -> Okay, as you can see now they're on the same row.

7707.16 -> Yes, so this is the horizontal stack

7712.2 -> and then I can define the spacing between them of 16 pixels.

7718.88 -> Okay.

7722.639 -> And they want this to be justifyContent center.

7729.54 -> Oops, it's align content actually.

7736.82 -> Okay.

7753.82 -> Okay, and this should be display flex.

7756 -> Where is the rest?

7761.3 -> Yes, here we are.

7762.92 -> So here, these in-depth tools,

7765.31 -> these great box with all the different configurations

7770.18 -> of our flex, so we want it to be flex direction row

7774.64 -> to align content with center, okay

7781.192 -> and the rest I think is fine.

7783.54 -> Okay, so let's add flex direction row

7788.53 -> just for it to be explicit.

7796.29 -> Okay, you see that is not perfectly vertically aligned.

7799.95 -> So blog, product, pricing.

7801.71 -> This is because our stack has the right height

7811.62 -> but the P elements are not correctly centered.

7815.52 -> So let's try to add.

7818.62 -> This has already the display flex, exactly.

7823.69 -> So, okay.

7828.12 -> Hmm, should be able to, okay.

7832.58 -> We'll check it on.

7835.77 -> Okay.

7837.19 -> Anyway, align content center.

7842.32 -> Okay, and then we add to the text flexGrow of one.

7850.29 -> Okay.

7851.46 -> As you can see now the SuperApp,

7860.8 -> P tag pushes the rest of the content to the right,

7865.47 -> because it has these flexGrow one property.

7869.81 -> This means that it will take

7873.53 -> all the space available basically.

7879.75 -> Okay.

7886.17 -> Okay, I just changed the width to 100%

7890.31 -> because these 100% we can see that also

7894.22 -> the padding that we have here, okay.

7900.21 -> Now we need to change a bit the style of our menu,

7908.71 -> adjust the color probably, so color this, okay.

7918.083 -> And the font size, here we are,

7924.303 -> is 18 pixel.

7926.28 -> So font size 18 pixels.

7933.68 -> Okay.

7937.58 -> Perfect.

7941.42 -> I wanted to repeat the same for all the elements

7945.28 -> in the page, for all the menu items.

7947.74 -> So blog, product and pricing.

7949.85 -> So probably this is the right moment.

7951.52 -> You see, there is a lot of duplication

7954.28 -> to start leveraging React components.

7958.85 -> How we do it.

7959.83 -> I usually like to use the same principle,

7963.87 -> which is called atomic design, okay.

7970.69 -> Atomic design

7975.26 -> from Brad Frost, 2013.

7979.94 -> So it's not a new concept,

7981.63 -> but really established in the market.

7988.68 -> Hi Toma, hi Toma.

7989.64 -> There is a question.

7990.52 -> What is the extension to see previous commit message

7993.52 -> on VS Code?

7996.3 -> In VS Code I use usually Git lens.

8000.92 -> I think it was integrated into VS Code, something like that.

8004.95 -> But here on this tab, you can see the commits,

8009.61 -> all the commits done and this is the previous message.

8016.1 -> Okay.

8017.338 -> And the modifications done.

8019.72 -> So in this case, I just added some files.

8025.2 -> Okay, otherwise, I also like to use the terminal.

8037.61 -> So if I go here, then I say, Git Log command.

8042.35 -> I can see the last commits of my repository

8045.63 -> and this is the message that I created.

8052.29 -> Okay, I hope it replies to your question, Toma.

8055.63 -> Okay, so back to reusing components, atomic design.

8064.54 -> Briefly, okay, this is a metaphor

8067.05 -> of the periodic table of the elements

8070.22 -> where single elements are composed together to create

8074.5 -> molecules or organisms and so on.

8076.85 -> So atoms are the, welcome Toma.

8081.9 -> Atoms are the smallest components for our application

8088.08 -> In our case we use Chakra UI.

8090.3 -> So for instance, the flex component,

8093.21 -> the box component are all atoms.

8096.44 -> It could even be single HTML tag,

8100.05 -> like div it's an atom, P it's an atom and so on.

8105.57 -> Then we have molecules.

8107.09 -> Molecules are made of atoms composed together.

8111.5 -> So if we want to create, I don't know,

8114.34 -> a button and we have box and the text inside

8119.43 -> that will be our molecule, right?

8121.13 -> Because we have two atoms together.

8124.07 -> And then of course we have the organisms

8126.21 -> where we compose together molecules, atoms and so on

8129.3 -> to create bigger components.

8131.69 -> And then the metaphor breaks

8133.21 -> and we have templates and pages.

8136.04 -> So templates are layout which are empty

8140.53 -> and React components empty with just layout.

8144.14 -> And then you push using props,

8147.33 -> your components in your template

8149.93 -> and component to fill the space, to fill the layout.

8153.21 -> And then finally we have the page.

8155.73 -> So let's try to use this metaphor to build our application.

8161.95 -> So I create a new folder here.

8165.52 -> Components,

8167.16 -> We'll create three folder inside, atoms,

8172.36 -> molecules,

8176.15 -> organisms.

8178.78 -> I skip templates, I use pages.

8181.97 -> Okay.

8183.65 -> Now what we want to create is these menu item

8190.32 -> that includes ready texts from Chakra UI

8194.92 -> that for my perspective, it's already an atom.

8198.49 -> So what I'm creating is,

8200.58 -> now I want to create it's a component with an atom

8204.53 -> and some text.

8205.54 -> So in my opinion this is a molecule.

8209.7 -> Menu item, oops.

8213.03 -> I create a new folder, I create a new file.

8216.78 -> Menuitem.tsx,

8219.709 -> you're gonna start building it.

8221.13 -> Export const, MenuItem,

8225.058 -> we can have children component,

8227.12 -> which is the text that's going to appear inside

8230.75 -> and then I copy what they have here.

8234.145 -> I create a generic version of this, okay?

8240.51 -> Of course I need to include

8246.44 -> import text from Chakra UI React.

8252.01 -> Okay, and now I have children underlined.

8256.31 -> So the problem from TypeScript validation

8259.5 -> is children has an implicit type of any,

8263.96 -> we don't want to use any in this case,

8267.13 -> we know in advance that we will use only texts

8270.36 -> for the moment.

8271.35 -> So I create the type, menu item props, okay.

8279.98 -> Just children type string.

8284.3 -> And I assign this type to the menu item.

8289.09 -> So these special syntax is from TypeScript,

8292.44 -> if you're not familiar with it,

8295.25 -> this is the variable menu item.

8298.45 -> After the column here,

8305.72 -> we have the type.

8306.73 -> In this case, this is a functional component FC.

8311.66 -> So React functional component and the arguments.

8316.21 -> So the props passed to these component

8319.54 -> are made of one prop only,

8323.37 -> one property, children, of type string.

8326.52 -> So now children is string and ReactNode eventually.

8331.55 -> It could also be a ReactNode, okay.

8335.36 -> We are exporting menu item from this file.

8338.03 -> So now we can use it.

8342.6 -> Menu item, okay,

8348.49 -> blog, I need to import, yes.

8355.89 -> Okay, so import menu item from module components,

8358.82 -> molecules, menu item,

8360.57 -> menu item.

8361.72 -> Perfect.

8366.44 -> Let's see the result.

8369.27 -> Okay.

8370.103 -> It's the same as before, of course.

8374.36 -> But now if I have, yes,

8377.08 -> this is a Chrome extension to inspect the React components,

8381.9 -> I can see that this is the menu item

8384.98 -> while this is just text.

8389.03 -> Okay, the text component.

8390.597 -> Let me do the same on product and pricing.

8404.61 -> Okay.

8409 -> Now let's add the button,

8415.65 -> the Get Started button

8417.88 -> and we import the button component from Chakra UI again.

8421.71 -> Okay, it's Get Started.

8426.436 -> I don't think it was imported correctly.

8429.5 -> Yes.

8433.15 -> And we have the Get Started button.

8435.16 -> We just want to change it to variant solid,

8445.29 -> color scheme blue, okay.

8455.04 -> Okay, now we just want to add some space

8457.79 -> between the menu items and the button.

8460.86 -> In our case we have 82 pixels.

8464.14 -> So let's add that to the flex, the margin left.

8468.12 -> Oops, margin left of 82 pixels.

8473.84 -> Okay.

8476.45 -> We are almost there.

8479.27 -> Okay.

8486.37 -> Okay, let's add some padding to upper left.

8490.087 -> So we use two pixels, 0, four pixels is six, okay.

8497.712 -> So we have some real space.

8506.56 -> Okay.

8508.153 -> Okay.

8509.32 -> SuperApp, Get Started.

8512.01 -> Of course we want to have these as links.

8519.42 -> That is a special component,

8521.56 -> next link that we use.

8525.81 -> Okay, that links to another page

8531.71 -> using all the optimizations of Chakra UI,

8536.41 -> of Next.js, sorry.

8538.25 -> So blog, okay.

8543.35 -> Link href blog.

8550.52 -> Okay.

8552.05 -> And then we need to have incurring site.

8562.75 -> Okay.

8564.42 -> Okay, so now the type has changed

8566.9 -> the children type of manual item.

8569.49 -> So we need to update it.

8570.98 -> We go to Menu Item and we change to string or ReactNode.

8579 -> Okay, now it's the validation types,

8582.09 -> validation is back again.

8597.06 -> Okay.

8599.745 -> Here we are.

8601.21 -> Okay, now we add the cursor

8603.06 -> and we see that on the bottom left of the window,

8607.62 -> we can see, oops, that is pointing to different pages.

8617.55 -> Okay, of course the pages doesn't exist already.

8619.99 -> So if I click on blog, I should get, not found.

8623.62 -> Yeah, exactly.

8625.43 -> 404 this page cannot be found.

8627.42 -> We will create it later

8628.48 -> just to see how to create different pages in Next.js.

8634.25 -> Okay, 2 minutes more, okay.

8639.14 -> Let's create the hero.

8643.33 -> Okay, really quickly.

8645.94 -> So again, we will create a molecule.

8649.47 -> We will not reuse it,

8650.66 -> but I mean, it's much more better to create

8656.94 -> different components to keep our codes well organized.

8662.71 -> Okay, export const.

8668.79 -> Hero, okay.

8673.47 -> So again, where we have probably a flex

8676.89 -> with the width of 100%, I need to return it, okay.

8683.67 -> And we know already that we have some texts inside.

8687.56 -> I import React.

8689.58 -> Let me import flex, let's import from React.

8694.33 -> Okay.

8700.65 -> Okay.

8701.483 -> Then let's create another flex for our text.

8705.73 -> Let's use another component in this case

8707.59 -> which is called, heading, okay.

8719.08 -> Because, okay, this is a text, probably it's a H1

8726.88 -> HTML tag that we want to use.

8729.26 -> So heading, increase your productivity and so on.

8737.01 -> Okay.

8747.02 -> Okay, it's probably a tag one.

8750.74 -> Let them include this hero in the page

8753.15 -> so we can see it immediately.

8759.1 -> Okay, so this is the top bar.

8764.75 -> I create another flex.

8766.69 -> I put the hero inside, okay.

8771.19 -> It's self-closing components,

8773.33 -> so we don't have anything inside at the moment, okay.

8777.5 -> We have our text H2 in this case.

8788.75 -> Okay, probably in this case we can use

8790.53 -> the container component.

8792.14 -> Remember where it doesn't take the full width of the screen,

8796.84 -> but just the portion.

8798.89 -> So let's try with the container component, okay.

8809.62 -> Okay, very cool.

8811.66 -> Let's add some padding on top 32 pixels.

8816.78 -> Okay, it's padding Y.

8824.2 -> It's a special property of Chakra.

8831.18 -> PY means padding Y,

8832.86 -> it means that the padding added on top and at the bottom.

8836.86 -> You can see padding top 32 pixels and padding button 32.

8841 -> So let me increase it to 64.

8843.9 -> Okay, here we are.

8846.37 -> Then we have the subtitle let me add it.

8849.38 -> It's another heading, okay.

8855.11 -> Not as bad as suggested.

8859.23 -> We'd say fullstack React app, okay.

8866.93 -> Probably it's better to use text in this case.

8873.24 -> Okay, as H2, okay.

8876.71 -> We use margin top of 16 pixels.

8880.68 -> We include text.

8882.85 -> Of course not table two.

8886.957 -> Okay.

8889.65 -> Now let's change a bit the look and feel.

8891.84 -> So font size, font size is 30.

8900.95 -> Yes.

8904.21 -> Okay.

8906.83 -> And height is 64, so a lot.

8914.888 -> And the color.

8916.85 -> This time instead of using the hexadecimal value

8921.55 -> of the color, let's use something from Chakra UI.

8928.79 -> Gosh, it'd be just gray.300, yes, we are.

8936.91 -> Too light so let's increase it.

8941.417 -> Gray.600, okay.

8945.61 -> I'll show you later what does it mean,

8947.09 -> but we already have, thanks to Chakra UI,

8949.82 -> a lot of palette of color,

8951.97 -> different shades of colors in our team

8954.74 -> that you can immediately using our application.

8959.18 -> Let's make it smaller, okay.

8963.47 -> We can remove this in my opinion.

8966.93 -> Perfect, perfect.

8969.57 -> Okay, so our Pomodoro is done.

8974.99 -> Let's have a break of 10 minutes

8977.96 -> and then we will be back here, okay?

8981.69 -> Remember, it's really important

8983.02 -> when you work on your daily basis to take breaks,

8989.37 -> because programming, it's real brain intensive activity,

8993.854 -> and you really need to take a break, okay?

8996.71 -> See you in 10 minutes.

8998.27 -> See you later.

9598.69 -> Okay, here we are.

9601.88 -> The break is finished.

9603.68 -> Let's create a new one, 55 minutes more.

9611.41 -> Welcome back guys.

9616.14 -> Thanks for your feedback.

9618.56 -> I'm happy that, I mean, it's clear and fluid.

9621.7 -> If you have any doubts, any questions, don't hesitate,

9626.74 -> feel free to ask in the chat.

9628.86 -> I will reply as soon as I see your question so no worries.

9635.72 -> Okay, so let's return back to our application.

9641.02 -> Where is it?

9642.22 -> Here it is.

9644.24 -> VS Code.

9645.93 -> Okay, so what we are missing is the background, of course.

9648.53 -> So we can just copy it from here.

9652.34 -> Okay, so this is the flex background equals.

9663.04 -> Yes, here we are.

9665.58 -> Let's increase a bit, darker, okay.

9674.926 -> Okay.

9679.95 -> Okay, we still have padding.

9682.06 -> Let's see who is adding it, is the home container.

9685.95 -> Okay, I know.

9687.67 -> What is it?

9691.75 -> Yeah, it's important to give water

9693.88 -> to the flowers Filana.

9696.3 -> Well done, well done.

9697.94 -> It's very important to take a break, okay.

9702.91 -> Okay, this is something added by

9704.45 -> and created by your Next.js.

9706.81 -> So as you can see here, there is this div classNames,

9710.66 -> stlyes, container

9712.78 -> that comes from these styles/home.module.css.

9719.093 -> Okay, let's see Home Module CSS.

9723.67 -> Okay and this is the container.

9727.05 -> The container probably has this padding,

9729.17 -> so let's remove it, all right.

9733.21 -> Much, much better.

9737.84 -> Okay.

9739.61 -> Now the top bar.

9746.27 -> Lost the padding so this is, we have,

9752.57 -> so this is padding with this syntax.

9755.06 -> We have six pixels on the top, 0 on the right.

9759.1 -> Six at the bottom and 0 on the left.

9767.4 -> Yes, six top and down

9771.03 -> is the same as PY six pixels, okay.

9777.29 -> But in our case, we want to add eight pixels padding.

9782.13 -> Okay, let's say 16.

9784.97 -> Okay, and let's use eight.

9788.11 -> Okay, great.

9791.43 -> Now, one thing that I don't like about these components

9796.07 -> as you see it here on the left

9798.88 -> is that you don't know that these flex

9801.76 -> and all these components inside are the top bar, right?

9806.79 -> So it's create a component.

9810.39 -> Organisms, new folder, top bar, new file, topbar.tsx.

9818.8 -> Export const, TopBar.

9825.06 -> Okay, I copy all of these,

9829.73 -> here flex and then move it to top bar.

9837.53 -> Okay, of course, you need to import all.

9841.18 -> Let's see, add all missing imports, hmm, React.

9847.15 -> Let's try again.

9850 -> Add all missing imports

9851.66 -> Okay, so we have flex, menu item.

9855.28 -> No, this is not the menu item we want, it's our own.

9860.08 -> Yes, text of course.

9862.75 -> I don't know why it isn't able to import,

9865.94 -> we move React above.

9867.45 -> We have everything.

9872.27 -> Great.

9875.4 -> So now I can import top bar here.

9884.06 -> Here we are.

9885.16 -> Back again, with the same page but much more clear, right?

9891.76 -> So top bar.

9897.48 -> Okay, one question from Tomah.

9900.05 -> You can put link element in menu item component,

9903.89 -> or better to let in top bar?

9906.72 -> This is a good question.

9908.01 -> It's something that I didn't think about,

9911.41 -> but definitely.

9914.97 -> Okay, this is something we can move.

9917.97 -> Absolutely, good idea.

9919.74 -> So menu item, let me split this, okay.

9928.56 -> Okay, this is a good example.

9930.06 -> So we can extend our menu item to have multiple props.

9935.79 -> So now we have the children, which is the text,

9939.85 -> but also the path, correct,

9942.56 -> which is different from link to link.

9945.63 -> So, let's do this, oops.

9950.24 -> Maybe instead of children, we could call it text.

9953.18 -> Let's use the refactoring

9957.5 -> children and call it text.

9961.51 -> Okay, which is a string.

9970.14 -> Okay, and then we have this.

9980.236 -> Okay, we import the link from import React

9986.43 -> and the import link for next link.

9991.98 -> And down here, we have the href, okay.

9999.1 -> The type of href it's again a string.

10003.71 -> So now we can refactor a bit our menu item.

10009.07 -> Now with self-closing text, blog, href, is blog.

10019.22 -> Okay, much better.

10021.306 -> What do you think?

10026.94 -> Okay, and I can add the product,

10032.66 -> product and pricing.

10039.32 -> Yes.

10043.09 -> We can even leverage the Chakra UI colors,

10046.42 -> gray 300, maybe 500.

10052.81 -> Cool.

10054.01 -> So this is still working.

10059.717 -> Yes.

10065.66 -> Okay.

10068.32 -> So when we look at our top bar component,

10071.88 -> we know that we have texts,

10074.96 -> menu item,

10077.33 -> and the button on the right.

10081.48 -> Okay.

10082.98 -> I close this.

10084.73 -> We have the new menu item.

10086.98 -> Let's create a commit.

10093.17 -> So let's see the changes.

10095.08 -> So here we have the hero, the menu item,

10098.38 -> the top bar components.

10101.03 -> Okay, the indexer, there are some imports not used.

10112.18 -> Delete all unused imports, great, thanks.

10116.14 -> In this home module.

10119.27 -> Okay, so we can say menu item was present, no it's new.

10124.63 -> Okay, let's include everything.

10126.9 -> Get commit feature web-app,

10134 -> let's use a refactor, refactor,

10138.12 -> refactor the UI components,

10143.68 -> moved into the components.

10148.51 -> Refactor new components,

10150.78 -> organisms, molecules.

10161.06 -> Okay, Git Push.

10176.344 -> Okay.

10178.44 -> What we are missing, okay, let's create this.

10182.42 -> Okay, so at this time I want to start creating

10187.34 -> the separate components

10188.294 -> just to be sure that we don't need to move stuff around.

10195.63 -> So new folder, we can say

10204.413 -> landingbody, okay, new folder, sorry, new file.

10213.445 -> Okay, so again, export const.

10217.38 -> Okay, these a component.

10221.54 -> Okay, what do we have here?

10222.69 -> We have, okay, a little bit ground,

10226.37 -> which we with the need to use it

10228.96 -> and then probably we can leverage the container.

10234.32 -> Okay, we can leverage again their container

10238.19 -> because probably these will be moved here, this moved here.

10243.48 -> Okay.

10246.12 -> So that it's aligned with what we have on top, okay?

10255.141 -> And okay, so let's use the container.

10264.15 -> Okay, we need to have inside an image

10267.8 -> for the moment you use placeholder

10269.601 -> and some text on the right.

10273.82 -> So let's start to use a different component this time

10276.01 -> from Chakra.

10277.5 -> Let's try with the simple grid.

10281.22 -> Okay, simple grid.

10282.27 -> We just have two elements, but probably it's useful for us.

10287.08 -> Okay, so simple grid.

10294.76 -> Okay.

10302.05 -> Okay.

10303.772 -> And landingbody I added to the index.

10310.17 -> Okay, so we have our hero

10312.52 -> and then we have our landingbody.

10323.57 -> Okay, here we are, I close this.

10330.03 -> Okay we don't need the background.

10335.4 -> Okay, so simple grid, oops.

10338.81 -> We have two, oops, let me...

10342.77 -> Okay.

10343.75 -> We have two columns.

10346.67 -> Okay, with spacing of 10.

10349.27 -> Okay, let's me tell you the spacing

10354.77 -> with an absolute number for Chakra UI.

10357.95 -> Basically Chakra UI has a base grid,

10362.81 -> a virtual grid, let's say of four pixels.

10365.75 -> So the unit here is four pixels.

10369.93 -> So 10 is like saying 40 pixels.

10381.42 -> Let me show you exactly grid gap.

10387.96 -> If I go back to, say one should be four.

10393.69 -> It's a variable.

10400.771 -> It doesn't want to tell me the value inside,

10403.64 -> but I can go to computed gap four pixels.

10407.5 -> So 10 is equal to 40, okay.

10412.89 -> Then of course, we create a placeholder for the image.

10420.01 -> So let's use the box.

10424.94 -> Okay, we say the ground color, oops,

10429.63 -> color is gray 600.

10435.824 -> Let's see in size just randomly, okay?

10446.19 -> Okay, width equal dark, perfect.

10454.97 -> You can say 300 and then we add border radius

10462.32 -> of 16 pixels, okay.

10466.38 -> I remove the background tomato, okay.

10470.853 -> And I also want padding of 24 pixels, okay.

10484.401 -> Okay.

10488.86 -> Let's add some text.

10490.73 -> I think we don't need specific height.

10497.2 -> Skip background color just to suit tomato.

10501.88 -> Here we are.

10503.379 -> And text again, so.

10513.675 -> Okay.

10515.7 -> Next.js Chakra UI database, oops.

10523.2 -> Okay, let's use box.

10536.1 -> This is one element.

10540.37 -> Okay.

10561.476 -> Okay.

10565.01 -> Flex direction needs to be column in this case.

10570.29 -> Perfect.

10575.4 -> Okay, let's create another text.

10579.01 -> Oops, text elements.

10581.78 -> It should be at least in Chakra UI.

10583.81 -> Let's see if there's one.

10586.43 -> List like this, like this.

10592.7 -> Okay.

10593.68 -> So let's say unordered list.

10605.81 -> Okay, so we have Next.js, Chakra UI and postgresQL.

10623.45 -> It's really difficult name.

10625.5 -> Okay, let me add all the missing components.

10636.1 -> All right.

10638.47 -> Now let's add some margin, margin bottom of 8 pixels.

10644.71 -> I'm from tender, so I'm a little bit,

10650.12 -> I mean, I want you to be careful with the details.

10654.11 -> I'm not able to see something, not in space,

10657.17 -> not aligned correctly.

10659.114 -> It just hurts me.

10661.1 -> Okay, so we want to vertically center all of this.

10666.18 -> So this is our flex with background tomato.

10669.5 -> So let's leverage the flex properties

10675.23 -> because this is a flex.

10676.82 -> Let's see live if we can make it working.

10681.09 -> So it should be aligned like this.

10683.71 -> So justify content center.

10686.13 -> Thanks, Google.

10688.98 -> Justify content center

10696.46 -> And let's remove the background.

10699.73 -> Okay, here we are.

10704.97 -> Just to improve a little bit of spacing here.

10707.64 -> So landingbody,

10712.47 -> container,

10713.303 -> padding Y.

10720.49 -> I have it already on there.

10722.57 -> So 64 and 24, okay.

10726.95 -> Perfect.

10729.39 -> Let's create the footer

10731.72 -> And then we are done with the landing page.

10733.59 -> So the footer.

10737.995 -> I could move the landing body to the organisms.

10741.09 -> So let's use these feature, dark, move.

10749.19 -> Yes, update imports.

10751.65 -> So as you can see, now landingpage is coming from organisms,

10755.18 -> I just saved the file and it's working back again, okay.

10761.5 -> New folder, footer, let's say landing footer.

10771.34 -> Oops.

10779.06 -> That's the folder.

10792.63 -> Okay, and is this really simple.

10798.96 -> So easier to use but we don't use class names.

10801.88 -> We don't like them.

10804.58 -> We don't like the footer tag, okay.

10815.94 -> Okay, so also in this case, we can use the container.

10831.23 -> Okay, and again, this simple grid with columns.

10837.21 -> I will explain you this later

10839.08 -> columns to spacing, whatever eight, okay.

10844.69 -> SimpleGrid.

10846.69 -> Then on the left,

10849.24 -> we add SuperApp 2021,

10859.67 -> and then under with follow us on.

10874.23 -> And you say flexDirection column, oops, yeah that miss.

10888.82 -> Okay, let me important landingfooter

10890.88 -> so we can see it in the page, in Next.tsx.

10902.341 -> Okay.

10906.108 -> Let's me add background color.

10911.87 -> Let's use this box as footer.

10917.45 -> Okay, so basically we can use the components

10920.65 -> of Chakra UI

10924.42 -> but we can tell Chakra which HTML tag to render.

10931.07 -> So this is still a box component,

10934.03 -> so we can leverage the colors and margin and so on.

10937.87 -> But the rendered HTML tag will be the footer.

10945.25 -> Here we are, footer.

10947.14 -> You can say SP,

10952.791 -> now we have the P, the P tag.

10956.591 -> Yeah.

10958.42 -> Let's use footer.

10963.5 -> Okay, let's state the color.

10966.64 -> We can also leverage the color palette

10969.04 -> of Chakara, so blue 500.

10973.63 -> Here we are.

10975.23 -> Let's make it lighter.

10981.25 -> 300.

10983.63 -> Okay, let's add some padding.

10986.88 -> Padding Y of 40 pixels, okay.

10998.88 -> We add two grids, one here and one here, okay.

11004.79 -> Then you add the text, okay.

11012.07 -> And then you see that we have, so this box,

11017.76 -> this with flex direction column

11021.85 -> to show the followers in one row

11024.23 -> and then Twitter, Instagram, Facebook on another row.

11028.41 -> But these are on the same row.

11033.19 -> Twitter,

11036.49 -> Instagram,

11041.83 -> and Facebook.

11051.06 -> Okay.

11052.04 -> So now in order to make Twitter, Instagram, and Facebook

11054.71 -> on the same line, on the same row,

11057.13 -> we'll create another flex component

11059.75 -> that wraps them with flex direction row.

11066.17 -> Flex, okay.

11075.83 -> Okay, it's already flex direction row.

11079.79 -> It's not perfect.

11080.89 -> So let's change it to have some spacing instead of flex.

11087.7 -> We use Hstack, horizontal stack

11093.67 -> so that we can set the spacing between the elements,

11097.44 -> the spacing, let's say 4.

11109.49 -> Here we are and then we can say margin bottom is 16 pixels.

11120.25 -> Of course this needs to be changed to links,

11122.79 -> to the Twitter profiles and so on.

11124.7 -> I will not do it right now, okay.

11130.22 -> Okay, now you can see that there is more vertical space.

11134.17 -> So probably what we want to do

11136.56 -> is to move the footer below to the bottom of the page.

11140.58 -> So the first idea is that we could

11146.59 -> make this body grow.

11148.47 -> Let's try, landingbody.

11152.39 -> This is container.

11154.84 -> Let's try in the inspector first.

11160.9 -> Okay, so we have this, okay.

11166.6 -> This is display, blog.

11171.55 -> Okay, let's see if we say display flex,

11174.67 -> say flex grow one.

11181.7 -> Hold on one second.

11182.7 -> I have probably Amazon on my door.

11185.1 -> I'll back in 5 minutes.

11245.77 -> Thanks, I was muted.

11247.85 -> So I'm back, I'm back.

11250.99 -> Okay, let's see this home container, here it is.

11256.92 -> It has display blog also, so let's try.

11263.54 -> Display flex, okay.

11266.51 -> Flex direction column, here we are.

11276.98 -> Display flex, flex grow is not working, hmm.

11283.87 -> This is not working as well.

11291.72 -> Okay, this is like this.

11303.84 -> Okay, let's try to add here flex grow 0.

11311.84 -> This one flex grow 0.

11316.84 -> The footer, display flex,

11322.58 -> flex grow 0.

11329.64 -> Still not working here.

11338.914 -> Another solution could be

11340.42 -> to use an absolute position for the footer, let's try.

11347.71 -> Position absolute, okay.

11352.83 -> Bottom 0 and width, viewport width, okay.

11363.49 -> But it's not the going to the bottom

11364.79 -> because the container, this one, okay.

11377.81 -> Okay, minimum height, okay.

11384.11 -> So this is something for the body.

11388.16 -> Okay, let's see, if I remove this.

11392.6 -> Is it going work?

11393.74 -> No, it doesn't work, okay.

11407.11 -> Let's go to the landing body, container.

11410.43 -> We say position absolute, and bottom 0, okay.

11425.51 -> Sorry, no, this is the body.

11427.98 -> I need to go to the footer.

11433.39 -> Okay, you say width, 100 viewport width, okay.

11440.1 -> It's working already.

11441.12 -> Okay, cool.

11443.85 -> What is not working is that you see,

11446.21 -> it's going above the other element, okay.

11470.559 -> I don't know why it moved here, but okay.

11490.14 -> Okay, we could spend some time on these, of course.

11493.835 -> Okay, something we could do

11496.11 -> is that according to the height,

11499.16 -> we can change or refine a bit the layout.

11502.64 -> I mean, we have a lot of things to see today.

11506.06 -> So I just want you to speed up a bit, okay.

11508.94 -> So let's say that we are ready.

11510.63 -> Just one more thing I want to show you

11512.86 -> is that on my big screen,

11516.88 -> this part is going to be really far away.

11519.63 -> It's probably not what we want.

11521.97 -> We want to have SuperApp probably here

11528.54 -> and the rest a little bit on the left, okay.

11532.19 -> So we can leverage the responsive layout

11535.47 -> so that according to the size of the window,

11538.81 -> we change a bit the CSS.

11541.9 -> So let me open the top of bar, okay.

11550.38 -> Okay, so here we have the flex, okay.

11556.04 -> The width is 100%, so let's change it a bit.

11564.733 -> And we pass instead an array of values

11568.79 -> where we can say, okay, these are the break points.

11572.19 -> So this is an array with small size screens.

11577.93 -> Then we have medium-sized screens,

11579.84 -> probably this is extra small, medium, large, and so on.

11589.85 -> Okay, let's look for break points,

11594.75 -> Chakra UI, here we are,

11598.41 -> small,

11600.34 -> medium,

11601.55 -> large, and extra large and two XXX extra-large.

11608.81 -> Okay, so let's leverage this, okay.

11620.592 -> And for every property of Chakra UI,

11626.36 -> so even flex direction, align content,

11629.43 -> we can do this trick, not only for the width.

11632.163 -> It's okay for every prop of Chakra UI components.

11637.22 -> So if the screen size is more, okay, we can still use 100%,

11645.14 -> if it is medium probably still 100%.

11650.78 -> Okay, but if it is large,

11655.64 -> we want to use another width.

11658.97 -> Let's use that one of the container.

11672.31 -> 60 characters.

11674.39 -> So this is do 60 CH.

11678.42 -> Okay.

11687.25 -> So when the screen is more okay, we have a full width,

11691.94 -> and when we move, speaker.

11697.16 -> Okay, let me close this, become 60 CH, okay.

11712.08 -> Okay, let me just add a new flex element.

11717.82 -> So we will keep the parent one with 100%, okay.

11727.527 -> Okay.

11754.551 -> It was not format in the code.

11759.73 -> Okay, let's see here what we can do to make it centered.

11769.35 -> Flex direction row is this one,

11774.44 -> line item center or justify content center, okay.

11778.72 -> This is justify.

11790.25 -> Okay, let's say that it starts to change

11794.25 -> to 60 characters too soon.

11798.85 -> So we still want to use 100%.

11807.97 -> Oops.

11810.688 -> Okay.

11814.908 -> Okay.

11825.04 -> Okay, seems a good compromise.

11827.81 -> So, okay, you see, even in a big screen,

11831.61 -> we still have these resized

11836.56 -> and not taking that the whole space.

11838.78 -> Probably could do the same here on the footer, okay.

11847.56 -> So landing footer and let's say this is like this, okay.

11863.39 -> This one needs to be always like this.

11865.47 -> So let's say the container.

11874.21 -> Okay, at this point we can just change

11876.709 -> to a normal flex, not using, okay.

11882.357 -> And then we say display flex,

11890.7 -> justify content center.

11896.486 -> Okay.

11905.56 -> Almost there, almost there.

11915.87 -> Okay.

11919.57 -> Perfect.

11922.16 -> Good.

11925.52 -> So let's create a new commit.

11929.43 -> Okay, landingbody and the footer top bar updated,

11937.12 -> okay, index.tx.

11943.05 -> Git commit feature web-app added footer Git Push.

11954.55 -> Okay, so let's say we are done with our landing page.

11958.96 -> So anything, let's see,

11961.9 -> particular leveraging the Next.js functionalities.

11966.46 -> We've seen that we can make responsively out

11970.34 -> using the syntax landing footer, okay?

11977.4 -> With the different breakpoints

11979.44 -> of our page from our viewport, okay.

11984.64 -> We can leverage Chakra UI components

11987.12 -> to be a real efficient in making layouts and components,

11995.47 -> user interfaces, the front-end.

11997.31 -> We leverage the atomic design principles.

12001.77 -> We have these components folder

12003.88 -> with atoms, molecules, organisms inside, okay.

12008.42 -> So it seems well organized, right?

12012.88 -> Okay.

12013.76 -> Now let's move to the other topic.

12017.89 -> So what this is done, this is done.

12020.53 -> Okay, so now we want to allow customers,

12025.62 -> people, users to sign in, right?

12030.97 -> So this is the public page,

12032.95 -> but we also want to make the user access to something

12039.39 -> after an authentication.

12041.4 -> And we want to provide user specific content

12044.31 -> after the authentication, okay?

12046.89 -> So in order to do that, we will leverage NextAuth.

12055.21 -> That needs a database.

12060.1 -> In order to interact with the database,

12062.75 -> we will use Prisma ORM, okay, and that's it.

12069.06 -> So we will have some configuration to do.

12072.82 -> Let's start with the database first

12074.94 -> because we will need it later.

12077.69 -> So we've Prisma.js which is an ORM.

12094.93 -> Okay basically it's library

12096.54 -> that allows you to interact with your database

12099.78 -> creating interfaces and classes that you can use

12105.08 -> so that you can avoid to manage connections, queries,

12111.48 -> and SQL statements in your code, in your backend code.

12116.57 -> But you can use the Prisma.js library to interact

12121.76 -> with your database.

12123.01 -> So it's really, really developer friendly.

12126.13 -> So like this await prisma user,

12129.05 -> usually it's one of the tables

12130.96 -> that you need to create on your database.

12133.41 -> And then you have utility functions to query your database

12139.94 -> and get results.

12145.07 -> Okay, so this is one site.

12151.56 -> Then we have NextAuth, which is a great library

12155.55 -> to manage authentication in our application.

12160.25 -> Let's go to the documentation.

12162.52 -> The nice thing is that it supports, okay,

12168.18 -> Prisma and many other ORM libraries,

12175.49 -> but also it supports many, many providers

12182.53 -> to allow your users to login to your application,

12188.43 -> even just the mail.

12189.76 -> So email and password,

12192.18 -> you can use Facebook login, you can use GitHub login,

12195.95 -> you can implement Twitter login and so on,

12200.67 -> which is great, which is really, really great.

12204.48 -> And also it supports many databases.

12210.73 -> That's if I'm able to find the list,

12216.4 -> databases, check out the overview.

12222.41 -> Okay, there are different adopters.

12229.22 -> Maybe on the homepage.

12234.746 -> No.

12241.68 -> Okay.

12242.513 -> Anyway, I can tell you that it supports

12246.96 -> SQL databases like PostgreSQL of course,

12254.45 -> MariaDB,

12259.12 -> MySQL and experimentally also MongoDB,

12265.07 -> it's a noSQL database.

12269.78 -> So it has a really different concept,

12272.65 -> it's based on documents and not on tables and rows.

12277.48 -> So it's really difficult and that's it.

12283.06 -> Okay, so let's get started by creating database.

12290.01 -> I use Heroku.

12291.44 -> Because it provides for free

12295.353 -> a database, a Postgres database.

12303.43 -> Okay.

12308.06 -> Let me create a new app in Europe, fullstack React app.

12319.25 -> It's not available.

12321.88 -> It's not available.

12325.51 -> This is available, okay.

12328.53 -> Create app.

12332.51 -> All right, two resources, I would like to add a database.

12358.49 -> I'll create fullstack React pipeline.

12368.765 -> Okay.

12378.448 -> Now I should be able as an add-on to create database.

12396.32 -> Okay, so this is the Free Hobby Dev plan.

12399.97 -> Of course there are some limitations, but okay.

12404.87 -> In order to create our simple application,

12410.06 -> it's more than enough.

12420.71 -> Okay, here we are.

12421.543 -> So, we have 10,000 rows capability,

12429.09 -> and 20 connections simultaneously.

12431.8 -> It's more than enough for us.

12433.96 -> Okay, set things.

12435.1 -> And now we have the credentials.

12437.81 -> Okay, I think, I will delete this, so I can do it.

12444.92 -> Okay, here we have the host database name,

12449.01 -> the user, the password,

12451.61 -> and this is the full URL before the details, okay?

12455.66 -> We will need this later when we configure Prisma.js

12459.42 -> to interact with our database.

12465.48 -> So let's go to Prisma.js.

12470.73 -> Again, I'll try locally.

12476.41 -> Okay, you need to run this comment.

12481.77 -> No, this is a starter project.

12483.18 -> We don't need it.

12484.58 -> We want to add it to an existing project.

12492.26 -> Okay, we have postgres database, set up Prisma.

12497.09 -> Okay, let's install it.

12514.77 -> Okay.

12516.02 -> After that we invoke NPX Prisma.

12519.799 -> It is going to guide us in the configuration of Prisma.

12539.42 -> And then we will edit it.

12545.72 -> Okay, after that, we'll have

12548.18 -> to configure NextAuth with Prisma.

12555.739 -> Okay, there is a specific guide.

12557.21 -> And we will follow these simple, simple steps.

12563.27 -> Okay, in the meantime,

12565.63 -> I think that Prisma is going to create everything for us.

12570.02 -> So I don't need to move forward by myself.

12599.31 -> Okay, this is what we'll need to do then for Prisma.

12603.82 -> So install some packages.

12605.64 -> So the NextAuth and the Prisma adopter,

12610.72 -> we will use the Twitter provider, not the Google provider,

12614.28 -> and we will configure it

12616.16 -> and by passing the client ID inclined secret.

12620.2 -> I'm going to use a Twitter application I already have,

12625.02 -> Twitter developer, but in case you want to do your own,

12630.7 -> you need to access to the Developer Twitter platform,

12636.35 -> to the Developer Portal and then create apps,

12643.55 -> like standalone apps.

12645.08 -> It's more than enough to create your single sign-on.

12652.23 -> As you can see, I'm using this tech for IVOA,

12655.05 -> which is my small product to manage messages on Twitter

12662.4 -> which is using exactly these technological stack,

12665.79 -> Next.js, NextAuth, Prisma and so on.

12671.45 -> But these standalone apps

12673.23 -> doesn't have access to the V2 of the Twitter API.

12678.6 -> So in case you need access to the V2 Twitter API

12681.96 -> you need to create a project and an app, okay.

12692.23 -> So here you can set up your work message

12695.36 -> whenever a new follower starts following you.

12700.56 -> And then you can start engaging with people on Twitter.

12704.74 -> Okay, let's see if, okay, so Prisma is installed.

12711.78 -> So let's go back to Prisma.

12716.66 -> Okay, NPX Prisma.

12722.9 -> Okay.

12724.92 -> There are some comments we need to use NPX Prisma.

12735.41 -> Okay, so everything is done.

12737.95 -> Prisma created a folder and a filing site.

12742.29 -> So the Prisma folder here it is

12744.43 -> with the schema.prisma,

12747.12 -> this is where all our models for our database will exist.

12754.13 -> Okay.

12757.96 -> You already have a Git Ignore.

12759.2 -> So don't forget to include the .env to do not commit.

12762.75 -> So this is really important.

12766.53 -> This .env file.

12770.46 -> Okay, it's where our environment variables secret

12776.51 -> username and password to connect to our database will exist.

12781.19 -> So it's very important that you put these .env file

12785.57 -> in your Git Ignore.

12789.26 -> Okay, fortunately, it's already present

12793 -> so that you don't push,

12798.547 -> let me add also this one.

12802.09 -> You don't push this file to your Git repository

12806.07 -> otherwise your secrets will be available to everyone

12809.31 -> with access to your Git repository, okay?

12813.42 -> In my case, the repository is public.

12815.66 -> So I don't want everyone have access

12817.8 -> to my database, of course.

12821.5 -> Okay, so next step's set the database URL in the .env.

12826.64 -> So I take this URL from Heroku,

12832.91 -> Heroku, here it is.

12840.79 -> Okay.

12843.037 -> And what else?.

12847.42 -> So the provider of the data service block in Prisma.schema.

12853.26 -> So the provider is already there.

12855.5 -> postgresql is correct,

12857.31 -> database URL is the environment variable name, perfect.

12865.3 -> Prisma to be pulled to turn your database schema into, okay.

12869.81 -> So it's possible to create tables remotely on the database

12875.4 -> and then with Prisma DB Pull,

12877.64 -> Prisma is going to create the model,

12879.32 -> the JavaScript model that presents the schema

12882.77 -> on the database locally here for us.

12885.73 -> In our case, the database is empty.

12887.94 -> It doesn't have any schema and so we don't need it.

12892 -> And then we have Prisma Generate

12895.1 -> to generate the types of the Prisma client

12899.11 -> that we're going to use, okay.

12903.65 -> So we have the database, we have Prisma setup.

12907.59 -> Now we need to see the steps of NextAuth.

12911.86 -> So let's do this.

12920.21 -> Okay, we don't need to install Prisma.

12921.94 -> We already have it.

12938.44 -> Okay, so this is very important.

12940.03 -> Create the Prisma schema.

12944.004 -> What does it mean?

12945.58 -> This means that,

12952.29 -> oh, like a roll call.

12953.77 -> Great, this is new, I want to use it.

12957.99 -> Share the database URL.

12959.77 -> This is okay, the URL of another database, okay.

12966.78 -> Okay, okay, model, what does it mean?

12970.32 -> The model is basically a table,

12973.79 -> representation of a table

12975.72 -> on the database with different columns.

12978.71 -> So in this case, in order to work

12982.05 -> NextAuth needs all of this tables, account, session,

12987.98 -> user, verification token, and all these columns inside.

12992.42 -> So in the table account, ID, user ID,

12995.04 -> type provider, and so on.

12997.71 -> It's something we need to create in our database,

13000.3 -> but we don't need to manage.

13002.92 -> NextAuth will manage the content for us.

13008.17 -> And then of course there are some relations.

13011.59 -> For instance, there is a relation

13013.06 -> between account and the user table,

13016.59 -> on the field, the user ID.

13017.76 -> So the user ID of the account points to the ID

13023.67 -> column of the user and so on.

13027.93 -> And there is a relation,

13028.84 -> so on delete, on account for row, there is a cascade

13035.3 -> so it is removed also

13038.4 -> the other record on the other table.

13042.71 -> Okay, so in order to do all of this,

13048.2 -> we just copy and paste this in our Prisma schema file.

13058.62 -> Okay.

13060.08 -> Then if you have route admin access to your database URL,

13065.37 -> you can use Migrate

13067.29 -> or in case you are using Heroku, like in my case,

13072.74 -> you need to provide another database URL

13076.14 -> as a shadow database in order to use the Migrate comment.

13080.69 -> In our case, we will go straight forward

13083.4 -> and push the new schema on the database.

13089.09 -> Let me open a tool called pgAdmin,

13093.89 -> just to show you what's going to happen on the database.

13104.968 -> Okay.

13107.49 -> Our Pomodoro has ended,

13111.64 -> but I just want to show you something before the next break

13119.48 -> and then we'll continue on till 1:00 PM.

13126.87 -> Okay, so here are servers, let's me add my server,

13132.48 -> so create server fullstack at DB.

13141.412 -> Okay.

13143.23 -> We'll take from postgres,

13149.88 -> the credentials, okay.

13156.04 -> You have the host database,

13162.38 -> user password,

13168.74 -> save password and that's it.

13173.34 -> Okay.

13177.71 -> Okay, I can see many databases.

13179.28 -> Mine is starting with DE, DE,

13183.132 -> so I need to scroll a bit.

13185.88 -> I don't have access to all of these databases,

13188 -> but this is how Heroku is managing databases,

13192.81 -> so D-E-C, okay.

13197.56 -> It's D-E-K-I.

13202.627 -> Here it is,

13203.933 -> it is the yellow one.

13205.28 -> We have schemas

13209.59 -> and tables, okay.

13211.05 -> At the moment, table is absolutely empty.

13215.65 -> So let's go back to VS Code,

13219.54 -> we do NPX Prisma DB Push.

13230.56 -> Okay, now it's in sync.

13232.61 -> If you do a refresh,

13245.15 -> let's refresh this and this,

13249.12 -> refresh schema, tables.

13254.13 -> Okay, I have the tables that are described here

13258.63 -> in the Prisma schema on the remote database.

13263.37 -> Of course, if we do query, everything is absolutely empty.

13273.47 -> Okay.

13279.87 -> Now, one more step.

13282.83 -> Okay, we did this.

13286.05 -> We need to perform these steps here.

13289.54 -> So configure our application.

13295.8 -> So, in Pages API,

13301.872 -> we need to create this file with this specific name.

13308.55 -> Oops.

13313.12 -> Okay.

13315.307 -> And we put this content.

13320.15 -> Okay, we can rename it to TS because we're using TypeScript.

13326.54 -> Okay, we don't need the GoogleProvider around Twitter.

13331.73 -> Provider,

13341.8 -> okay.

13346.265 -> Okay.

13353.07 -> Okay, now in our environment file,

13357.62 -> we need to add the Client ID and Client Secret.

13361.9 -> So if you go to the NextAuth and under Providers, Twitter,

13368.61 -> okay, we need to provide this.

13376.3 -> Twitter Client ID,

13378.002 -> I mean, the name could be whatever,

13379.62 -> but just to give us an idea

13382.11 -> that this is Twitter application Client ID

13384.83 -> and the Twitter application Client Secret,

13387.66 -> is something you will get

13388.96 -> from that Twitter Developers application.

13391.48 -> If you go under the Keys, you will see them.

13396.37 -> So I'm going to add them to the .env file.

13401.153 -> Okay.

13402.51 -> And also the Client Secret.

13408.29 -> Okay, let me take the values.

13411.77 -> I will not show you this,

13414.33 -> let me just pause it for a second, the streaming.

13433.08 -> And by the way, I will show you,

13435.04 -> I can regenerate them afterwards.

13445.24 -> Okay.

13465.678 -> Okay.

13471.04 -> So now these values

13476.17 -> are set, this is a special syntax

13478.06 -> to retrieve the environment variables,

13482.41 -> in process.env. the name of the environment variable

13488 -> that you created on .env.

13490.79 -> Okay, now what do we need to do?

13495.07 -> Let's follow the Get Started.

13498.947 -> Okay, here we are.

13502 -> Okay, let's see,

13503.17 -> we want to make our users to sign in, right?

13509.66 -> So we have this special signing function.

13515.25 -> So we go to the top bar.

13522.19 -> Okay, we use signIn.

13528.22 -> And when the user clicks on...

13534.99 -> Okay, on Get Started button,

13537.76 -> we want to call the signIn function of next of React.

13543.17 -> Okay?

13544.9 -> This is a stander click handler of React.

13548.34 -> So let's see what happens

13552.71 -> in SuperApp.

13554.38 -> Let's open the Console also,

13557.08 -> Get Started, okay.

13562.33 -> Action out, we fetch the to be get,

13564.05 -> it's not supported by NextAuth.

13567.297 -> Let's see what does it mean.

13590.15 -> It turns out that I had the blah-blah-blah file

13593.22 -> at the route of the API folder and not in the API Auth.

13598.82 -> So NextAuth, where are you?

13604.12 -> Get Started, all right.

13605.74 -> On the page is API Auth.

13607.72 -> Okay, so I need to move it to new folder, Auth

13614.395 -> and move this file there, move it.

13618.727 -> Okay, what application?

13621.78 -> Let's go back.

13624.97 -> Let's get started.

13626.74 -> Wa-la, we hit the sign in button,

13630.01 -> I don't know why we have this card.

13633.36 -> Okay.

13634.54 -> Sign in with Twitter.

13638.71 -> So this is my user account logged in.

13642.97 -> Okay.

13644.639 -> Okay.

13646.191 -> I should be logged in now.

13648.58 -> Okay, but we're not doing anything at the moment

13651.63 -> to understand if the user is logged in or not.

13655.38 -> So we always show this page,

13661.88 -> okay.

13663.15 -> So let's create another page,

13666.27 -> for instance, new file under Pages, logged user.

13673.79 -> Okay.

13679.44 -> Pages, okay.

13684.95 -> What we need to do is something like this,

13686.74 -> so if we create, under Pages a file,

13690.38 -> Next.js automatically creates the page for us.

13697.09 -> Okay.

13703.24 -> Let me close some windows.

13708.19 -> Okay.

13712.96 -> Okay, this too.

13715.68 -> Okay, so if I go to Logged,

13718.33 -> choose the name of the file that I created before,

13727.18 -> we can have the page logged,

13729.74 -> but at the moment we are not checking

13731.37 -> if the current user is logged or not.

13734.63 -> We're just showing logged

13736.44 -> regardless of the identification.

13739.32 -> So we need to leverage our mechanism of Next.js,

13752.45 -> which is getServerSideProps.

13763.84 -> Okay, so this is something we can define in our Page

13770.58 -> and this is something that is going to be executed

13773.51 -> on the server side, not on the client's side.

13777.21 -> So whenever a user lands on the logged page,

13781.22 -> we want to check if the user is the current user

13786.46 -> logged or not.

13788.41 -> So it is authenticated or not.

13793.52 -> Okay, in order to do that,

13795.09 -> we need to check the session object of NextAuth

13810.72 -> Okay.

13813.3 -> There's a function called getSession

13815.41 -> that you can use in the client side and on the server side.

13824.47 -> Exactly.

13825.75 -> We need to use weight

13826.81 -> because it's an asynchronous function if returns a promise.

13834.55 -> Okay, and then we have session,

13838.16 -> we can log session,

13842.69 -> and we return to session

13847.22 -> in this getServerSideProps.

13849.46 -> So whatever we return here, like section or hello,

13856.3 -> this object will be returned

13861.13 -> and passed to our page component, so logged,

13865.49 -> logged page.

13868.88 -> So here, we will be receive session and hello.

13877.61 -> So also in the component, we could log session, hello,

13886.202 -> we can put it here.

13887.11 -> So, okay.

13891.22 -> So now, I just got hello, because I had it here,

13898.91 -> session, at the moment session is null

13902.22 -> even if it should be authenticated somehow,

13907.04 -> let's see on obligation cookies if there something,

13911.19 -> it should be, okay.

13913.42 -> Let's fix it.

13929.37 -> Require session,

13938.1 -> okay, getSession.

13950.03 -> Okay, so we need to pass the requests

13953.63 -> to the getSession that was not able to retrieve

13957.76 -> what we need.

13962.09 -> Okay.

13965.49 -> So request.

13971.296 -> It should be in context,

13973.17 -> let's see what's inside context.

13989.48 -> Oh, sorry, the logs are here.

13993.13 -> So session is null, but in context we have many things.

14001.44 -> Okay.

14002.273 -> We have REST.

14005 -> Okay, so my opinion, the documentation is not up-to-date

14011.17 -> because in this context we have requests.

14014.61 -> Okay, so we need to use this syntax request and response.

14021.45 -> Okay.

14028.872 -> Okay.

14029.72 -> We need to pass the request,

14033.06 -> requests, okay.

14048.28 -> Okay, so now we add the session, we add the user,

14051.96 -> this is my email, this is my image, this is my name.

14059.07 -> Perfect.

14060.62 -> So now we know that I'm logged

14064.31 -> and now we can say,

14065.63 -> if session is null, it's not defined,

14071.34 -> we will redirect the user to the landing page.

14079.06 -> So the Next.js Redirect.

14088.839 -> Okay, there is the useRouter, let's say redirect.

14099.28 -> I need an explicit redirect, not a configured one,

14110.689 -> res.redirect,

14115.77 -> status puff.

14125.09 -> Here we are.

14132.52 -> We have 200.

14137.91 -> Okay.

14140.66 -> So we are directed to the landing page.

14145.52 -> So from here cleaned the cookies,

14150.96 -> so I don't have the session anymore.

14158.06 -> Okay,

14159.82 -> res.redirect is not a function.

14166.21 -> I should have something different probably.

14183.752 -> And now...

14193.17 -> Return redirect, perfect.

14196.54 -> We've session getServiceSideProps, perfect.

14204.78 -> Makes sense.

14205.613 -> Destination, route, permanent, false.

14216.83 -> So I can go to logged.

14221.66 -> Okay, I'm immediately redirected to the landing page.

14228.77 -> So now we can get started again, signing in with Twitter,

14236.05 -> Okay, I mean, oops!

14238.19 -> No, I'm not in because I need a callback

14240.86 -> in the NextAuth here.

14245.93 -> So after the log-in, we need to redirect the user

14248.52 -> to the logged page,

14251.11 -> but I can access it manually.

14254.46 -> Yes, it works.

14255.7 -> And they have my session here

14257.73 -> and I can understand who is my user.

14269.06 -> Okay.

14270.93 -> So let's add the redirect after the login

14275.46 -> in 10 minutes from now.

14277.08 -> So let's have another pause.

14280.72 -> Okay.

14284.089 -> See you later.

14851.78 -> Hello, welcome back.

14860.61 -> Okay.

14861.443 -> Almost ready for the next Pomodoro of almost 10 minutes.

14866.55 -> So we will just start there with direct after the login

14869.98 -> and then we will have the lunch pause of one hour.

14878.56 -> I think we can get started.

14887.8 -> Session finish 10 minutes, let's go.

14895.02 -> So what we are missing now,

14899.92 -> it's redirect, what happened here?

14908.13 -> It's normal at the bottom, I don't know why.

14914.54 -> Okay, so clientele

14918.46 -> and up to configuration and utilization.

14926.52 -> Okay.

14930.68 -> Callbacks.

14942.4 -> Options, okay.

14947.34 -> It's not for us.

14949.53 -> Callbacks.

14952.7 -> Redirect.

14955.38 -> You can see our handler for any of the callbacks below.

14961.3 -> Should be redirect base URL.

14973.62 -> Okay.

14977.53 -> Callbacks.

14984.34 -> Let's sync redirect.

14989.19 -> Okay, let's log this.

14996.32 -> URL and base URL.

15009.13 -> Get Started,

15012.13 -> sign in.

15016.42 -> Okay, it seem booked multiple times.

15024.38 -> Okay.

15029.86 -> Just not probably what we need.

15033.93 -> Session sign in, sign in, let's say.

15037.85 -> So we have user account profile, email credentials, okay.

15047.99 -> Sign in callback.

15057.41 -> Okay, so we can also return our URL.

15065.77 -> Okay.

15067.02 -> So eventually we can return logged.

15088.3 -> Let's see if it works.

15102.8 -> Yeah.

15105.3 -> We can direct that into the logged page.

15108.98 -> Now in the logged page,

15114.46 -> we want to render something like

15120.14 -> you adjust explanation, we can remove hello.

15127.88 -> But we have the session object

15129.26 -> so we can say something cool like,

15133.95 -> Hi session.user.name.

15143.612 -> So we could say welcome back.

15148.16 -> Yeah.

15150.44 -> And of course we need a logout button.

15154.14 -> So import the button from Chakra UI, okay.

15163.1 -> We say log out

15168.128 -> and onClick, we invoke the sign out,

15175.75 -> yes, function of next of React.

15184.11 -> Okay.

15187.088 -> Then of course, you know that I need to fix this lay out.

15196.52 -> Flex direction column

15222.467 -> and set the container.

15237.47 -> Padding Y 64, and we can resolve, so center from Chakra.

15256.49 -> Okay.

15258.78 -> These are always text.

15269.26 -> So we can add margin bottom 24 pixels, okay.

15284.67 -> Now if we click on Log Out.

15291.24 -> Okay, we land to the landing page, okay.

15300.35 -> Very, very cool.

15307.2 -> Okay, let's try to fix this.

15309.07 -> And then we can have our pause.

15317.94 -> Position absolute, okay.

15332.65 -> Okay, so this is the body class.

15334.89 -> So we have the global CSS body

15338.44 -> and we say minimum height is 100 viewport height.

15345.46 -> Okay.

15346.831 -> If I refresh it should still work.

15353.3 -> Why not?

15359.13 -> Height, minimum height from where it's coming.

15375.21 -> Yeah, it's important.

15378.09 -> It's not very nice but at least it works.

15383.66 -> Okay,

15386.56 -> cool.

15414.38 -> We've lost the redirect.

15422.38 -> Okay, let's try again.

15437.28 -> Let's see if this is executed.

15440.13 -> Sign in.

15455.37 -> Yeah, it's signing,

15460.118 -> but no redirect.

15465.808 -> Let's see in the network what we can see.

15483.32 -> Logged.

15486.29 -> Okay.

15488.1 -> Log last log

15492.53 -> and then probably we are redirected.

15495.76 -> Let's see.

15502.381 -> Okay, let's see why.

15522.66 -> Probably the session is null.

15530.43 -> Correct.

15549.18 -> Straight to clean everything and redo the login.

15554.9 -> Okay.

15561.62 -> Oops.

15568.02 -> Still null.

15573.95 -> Let's see.

15575.35 -> I got it, I got it.

15578.78 -> Probably this modification here

15580.83 -> on the sign in modifies a bit the behavior.

15590.9 -> Okay.

15603.71 -> Now we have.

15605.73 -> So let me open a new project to check how to redirect.

15613.34 -> Then we're done.

15649.98 -> I got it.

15651.79 -> I did it differently so this is fine,

15655.29 -> but fine from the index.tsx we do the same.

15669.12 -> We add the getServerSideProps

15676.73 -> in pre-session, yes.

15680.48 -> So if the session is present,

15685.33 -> I redirect the user to the logged page.

15690.2 -> Okay.

15692.7 -> So if I'm here and I go to the index,

15697.62 -> I'm redirected to the logged page

15699.93 -> and this is done in the index.tsx.

15702.76 -> Instead if I log out,

15705.66 -> I can only stay on the landing page.

15709.03 -> if I go to logged,

15711.71 -> I'm redirected to the landing page, okay.

15716.2 -> So let's see the changes.

15722.16 -> In the top bar I added the signin.

15728.83 -> Okay, I did the NextAuth, the Prisma schema.

15734.66 -> Okay, so let's add these two.

15740.37 -> Git commit message feature web-app

15747.67 -> added authentication, Twitter authentication.

15754.9 -> Okay, done, top bar.

15758.17 -> You can say added Signin button to the top bar, okay.

15771.43 -> Remove the logs.

15776.32 -> I always remove the logs before pushing Safe.

15793.61 -> The logged I've seen one thing.

15798.11 -> Okay, so I misspelled one word in the commit message.

15802.61 -> So I can delegate to remove this from staging.

15806.58 -> Git commit--amend.

15810.52 -> Okay, don't do it if you're working with a common repository

15815.28 -> like with other people and this case, I can do it.

15821.578 -> Okay.

15827.76 -> Added logged page.

15832.97 -> Okay.

15836.81 -> Here,

15840.34 -> added check on logged user and the direct

15848.85 -> to the logged page.

15853.18 -> Okay, and then I add all the rest.

15858.55 -> There's chore,

15861.3 -> added styles and other minor changes.

15870.6 -> Okay, Git Push.

15874.65 -> Okay.

15876.59 -> So here we are.

15879.06 -> We have seen how to authenticate users

15882.74 -> using Twitter single sign on,

15886.23 -> how to check if the user is signed, is logged in

15889.55 -> and then redirect him to the logged page.

15894.76 -> So working back again, okay.

15902.333 -> Okay, let me remove this.

15911.46 -> Okay.

15915.891 -> And that's it.

15918.76 -> So, okay, something wrong.

15921.88 -> Probably, yeah, the number of connections to the database.

15925.73 -> I just need to restart Next.js.

15929.61 -> So this afternoon.

15934.13 -> Ah, yeah, yeah, Toma.

15935.79 -> Great question.

15937.24 -> So the commit messages used with Fit App and Saw

15942.91 -> is called Semantic Commit Messages,

15949.18 -> conventional commits, okay.

15951.8 -> This is a kind of convention you can follow eventually.

15956.38 -> Yeah, like this

15958.55 -> for your commit messages.

15960.41 -> We are using at work with my team

15962.672 -> and it's really appreciated.

15966.04 -> So basically, let's see if there are,

15969.67 -> there is the list of, not here.

15973.82 -> Semantic Commit Messages.

15980.26 -> Yes, the list.

15981.44 -> So basically we can use these prefixes

15984.31 -> like fit for new feature,

15987.23 -> fix for a bad fix, docs for changes to the documentation,

15992.66 -> style for formatting,

15994.49 -> the factor for factoring texture and so on.

15998.88 -> Of course you're not limited to these prefixes,

16001.95 -> you can invent your own, but this is just unconvention.

16006.99 -> And then in the brackets,

16011.93 -> you can put the context of your modification,

16016.14 -> for instance, future language,

16018.52 -> add Polish language, for instance.

16021.33 -> This is not mandatory, but it's useful somehow.

16026.19 -> And then of course you have

16027.14 -> the commit message that you can use.

16030.88 -> So these are kind of convention, really nice and useful.

16036.87 -> I can send you the links.

16042.24 -> Okay.

16046.72 -> And I also use, if I have time, I will add it

16050.29 -> to the project maybe this afternoon,

16053.35 -> this CLI common line tool commitizen is really nice

16058.09 -> because it provides you with selections like this.

16062.29 -> So in the common line with the rows,

16064.14 -> you select what you want,

16066.26 -> how do you want to compose the commit message.

16068.844 -> And it's very nice.

16072.18 -> This afternoon, probably we can look at it.

16077.89 -> Okay, so that's all.

16082.14 -> Thank you, Mahesh, thanks Toma.

16084.86 -> Thanks for attending this session.

16087.26 -> So we will have one hour break for lunch.

16091.09 -> Of course, if you have a different times zone

16092.89 -> probably it's for dinner,

16094.75 -> or it could be a different moment in your day.

16100.37 -> What we will see this afternoon

16102.06 -> is how to create backend endpoints.

16106.13 -> We will try to create a form, to fill the form,

16109.21 -> to create content to the database,

16111.66 -> but only for the authenticated user.

16115.55 -> Then how to retrieve data from the database,

16119.32 -> update it and so on.

16120.96 -> So stay tuned.

16124.36 -> Thanks a lot and see you later.

16128.22 -> Thank you.

19363.6 -> Okay guys, I'm back again.

19367.1 -> I have talked a bit alone, I think.

19371.32 -> Yes, thank you, Nicola.

19373.81 -> So I ended the poll, just understanding

19377.61 -> if it was easy or not

19379.54 -> to follow the first session we had this morning

19383.28 -> and 50/50% between almost, but sometimes it was lost

19388.34 -> and yes, I was able to follow, so, okay.

19393.25 -> Let's go ahead.

19396.1 -> What we're saying is that don't be worried, no worries

19400.31 -> because the recording of this live stream session

19406.52 -> will be available on YouTube, on my channel.

19411.687 -> Okay.

19414.173 -> And you can find me, oops.

19420.37 -> Yes, one second.

19430.08 -> Okay, I give you my channel.

19440.62 -> Okay, so this is my channel.

19445.89 -> Okay, follow me for further updates

19449.05 -> or other events like this one.

19454.69 -> So let's get started.

19456.57 -> Let's proceed with the next session.

19462.31 -> So now we have our application with the login set up.

19469.05 -> So this is our landing page.

19471.05 -> Get started, sign in with Twitter.

19476.86 -> Okay.

19478.62 -> Redirect to the logged page

19480.77 -> where we will extend this section.

19486.44 -> But what I want to show you is, okay,

19490.49 -> how to create an API using Next.js.

19495.11 -> So what is particularly useful here and cool about Next.js

19502.128 -> is that as we've seen before we can create front-end pages

19508.04 -> like the logged page, but also APIs.

19515 -> So for authentication with NextAuth we added something,

19521.13 -> but this is automatically handled

19523.15 -> by the NextAuth client library.

19526.8 -> Let's create a RESTful API.

19534.09 -> Okay.

19536.03 -> We will use, of course, our database and so Prisma ORM,

19542.16 -> and we will create our RESTful API.

19544.51 -> What is a RESTful API?

19548.23 -> Probably you know about them already

19550.73 -> but it's set of backend services with some specific rules

19559.41 -> like we will leverage the HTTP methods like HTTP,

19565.39 -> GET,

19567.13 -> HTTP POST,

19569.77 -> HTTP PUT,

19571.71 -> and HTTP DELETE, okay?

19576.23 -> To create some services, so I'm not particularly creative.

19581.23 -> So we will create the usual to-do app.

19586.48 -> So we will create an endpoint called todos, okay.

19593.961 -> And when called with the HTTP method GET,

19599.87 -> this will get all the todos of the current user.

19608.88 -> We will create another endpoint, POST API todo,

19615.57 -> to create a new todo.

19624.94 -> Okay.

19626.91 -> We will create the PUT to update an existing todo.

19637.71 -> And finally DELETE todo ID,

19645.05 -> to delete an existing todo, okay.

19658.2 -> Now let's define our todo object first,

19663.73 -> so the todo, okay,

19667.75 -> so let me go directly to the schema, the Prisma.

19671.13 -> Okay, so I recall you that in schema.prisma file,

19676.73 -> we have all the models of our tables on the database.

19687.63 -> And also the relations.

19690.57 -> Prisma works both ways

19692.37 -> so it's possible to create these model representation

19696.59 -> from an existing database,

19698.9 -> but we can also update the model here

19702.56 -> and push the modifications to their database.

19709.05 -> So this is the database that we currently have.

19713.05 -> We only have these four tables.

19716.31 -> I can show you also the content now.

19722.28 -> These are the supporting tables for NextAuth.

19726.762 -> And now there is My User.

19729 -> So this is the user ID, my user ID inside the application.

19734.921 -> And the their provider uses Twitter.

19738.25 -> The provider account there.

19739.35 -> This is the Twitter user ID, my Twitter user ID,

19743.24 -> and then tokens and so on.

19746.33 -> Then we have the sessions.

19751.48 -> Okay, there are a couple of sessions for my user.

19755.03 -> Then we have the user table.

19760.42 -> Okay, with my name on Twitter, my email,

19764.88 -> my profile image and verification tokens, okay.

19775.18 -> Okay, nothing here at the moment.

19779.81 -> Oops, I closed it.

19795.76 -> Okay, now what we want to do

19798.92 -> is to create the tables, for that, to store our todos.

19806.59 -> Okay, so now GitHub Copilot helps me a bit in creating this.

19815.28 -> Let's use it, but not everything.

19819.59 -> Okay, this is very cool.

19821.06 -> So these will be the ID of the row, the unique ID, okay.

19829.93 -> Then we have the user ID.

19832.74 -> This user ID will be the same ID of the user table, okay.

19839.89 -> Then we'll have the title of todo,

19842.13 -> so the description completed.

19845.72 -> I like to use this syntax for Boolean.

19849.08 -> So isCompleted or is something or has something,

19854.95 -> then common columns on databases relational,

19860.3 -> databases createdAt.

19862.59 -> So when the record was created, but also updatedAt.

19865.53 -> So last time in which this record was touched, okay.

19872.07 -> And finally, we need a relation like this.

19881.19 -> So we have a relation with the user table.

19886.97 -> The relation fields are user ID from the todo

19890.85 -> is linked to the ID column of the user table.

19894.81 -> Now it's a little bit complaining because we are missing

19898.79 -> that connection here between user and todos.

19902.63 -> So todos, todo, okay.

19907.67 -> Stops complaining, okay.

19912.7 -> Now, as you can see the formatting is not perfect.

19915.86 -> So let's execute NPX Prisma format.

19924.41 -> Okay, well, format, very good.

19927.31 -> Now what we need to do is to NPX Prisma DB Push.

19934.28 -> This command will push our model schema to database.

19943.58 -> In this case, we just added a new column,

19946.88 -> a new table, sorry,

19948.2 -> with some columns inside defined and adjust the relation.

19952.6 -> So, it's something that can be done

19955.9 -> without touching the current content of the database.

19961.66 -> So let's do it.

19966.96 -> Okay.

19967.84 -> So if I go here,

19975.4 -> okay, remember it's DE something

19989.79 -> Here we are, tables todo.

19993.08 -> So now we have a new table created by Prisma

19999.6 -> Prisma, sorry, with all the columns.

20002.62 -> So ID, user ID, title is completed, createdAt, updatedAt.

20007.3 -> Very, very cool.

20011.46 -> Okay.

20015.71 -> Now let's create these endpoints.

20025.26 -> We got pages, API, and we create a new file,

20029.938 -> todos.tsx, oops .ts.

20035.98 -> We don't need JSX, it's not a UI component.

20041.35 -> So todos.ts, it's perfectly fine.

20046.17 -> Now let's go to Next.js.

20050.241 -> Let's close something.

20053.66 -> Okay, and let's add an endpoint.

20063.69 -> Okay API Routes,

20065.59 -> any file inside the folder pages, API

20067.53 -> is mapped to API/ it would be treated as an API endpoint

20072.92 -> instead of a page.

20075.16 -> But yes, server side only bundles,

20077.56 -> that's what increases your client's size, bundle size.

20081.32 -> For example, the following, API Route,

20084.11 -> pages API user,

20085.934 -> Json response with a status code of 200, okay.

20094.41 -> Then we can access the request

20098.413 -> and we can handle the response.

20104.41 -> We can use request.method

20106.39 -> to get the HTTP method of the request.

20110.15 -> So this is exactly what we need, okay.

20124.1 -> All right, this is todos.

20127.48 -> So we will use the GET method.

20132.1 -> So get todos, all the todos,

20134.34 -> returns all the todos of the current user.

20146.96 -> Okay, so if request method is GET,

20153.66 -> we process the GET.

20160.07 -> Returns all the todos of the current user.

20165.19 -> If the request submitted is not GET

20174.1 -> for this endpoint,

20176.9 -> this means that it's an unsupported method.

20181.26 -> So response status code 405 method not allowed.

20187.97 -> So thanks GitHub Copilot.

20191.44 -> If we want to understand HTTP status codes,

20196.09 -> 405 method not allowed.

20198.94 -> So this is a standard HTTP method, status code 405.

20204.69 -> And the message is method not allowed.

20209.44 -> There are many others.

20210.71 -> Let's see, like this, the 200 series, okay,

20215.59 -> created this is positive, the 300 cashing,

20220.53 -> the 400 for the bad request and different errors

20225.66 -> and then 500 with bad things happening, okay.

20233.683 -> And we return.

20237.05 -> Instead if the request method is GET we need to do this.

20240.92 -> So returns all the todos of the current user.

20244.19 -> In order to do that, we leverage the Prisma.

20248.96 -> Okay, so let's see Prisma.js website,

20257.04 -> Docs, CRUD operations.

20264.53 -> CRUD, it's an acronym that means

20266.15 -> create, read, update, and delete data.

20268.71 -> So the usual operations you need to do on a database.

20276.33 -> All right, so we need to use the await.

20283.36 -> So Await Prisma,

20285.83 -> the name of the table,

20288.28 -> find the unique, number case is not find unique,

20291.03 -> which returns just one record.

20293.49 -> We need to return many records.

20295.2 -> So there is the find the many function method.

20302.42 -> So Prisma.todos.findmany

20316.86 -> where, user ID, submit current user ID, okay.

20323.47 -> How do we retrieve the user ID?

20329.03 -> NextAuth, okay,

20336.91 -> we have the API to getSession,

20344.48 -> can be used on the server side as well, okay.

20351.46 -> Like this, so await, getSession.

20357 -> We need to send request.

20362.96 -> Okay, let's make the handler asynchronous.

20367.11 -> Oops.

20369.48 -> Let's do like this.

20370.84 -> Export default const equals async.

20385.12 -> Export default handler.

20391.96 -> Okay.

20403.12 -> Let's generate again the Prisma client.

20406.71 -> Ah, yes, yes, yes, I need to do like this.

20410.37 -> So import Prisma,

20414.3 -> create an instance of the Prisma client.

20417.834 -> Okay.

20421.59 -> Now, we are using TypeScript.

20427.83 -> We add the types of the request and the response.

20433.88 -> These are types, they're coming from the Next package.

20437.02 -> So, okay, prisma.todos.findMany.

20443.944 -> Here we add the session.

20448.51 -> Okay.

20450.35 -> What do we have in session?

20452.77 -> We have a type of session from Prisma, oops,

20458.42 -> from NextAuth, okay.

20468.02 -> Default session, we should have user name,

20471.09 -> email, image expires.

20473.48 -> So what you can notice here

20474.98 -> is that we don't have the user ID.

20478.8 -> Good point, which is exactly what we need.

20482.23 -> So we should do session.user.

20487.16 -> We need the user ID here.

20489.151 -> But currently it is not available, okay.

20497.84 -> Another check if the session is not there

20502.19 -> we return res dot... Unauthorize

20511.97 -> Very good, thanks Copilot.

20516.7 -> Perfect, so session can be also null as a value, okay.

20526.9 -> Now we don't have the user ID

20528.93 -> in the user object of the session.

20534.23 -> This is because this is by default not returned,

20538.02 -> which is a bit, in my opinion,

20540.49 -> they could have returned it by default, but it's like this.

20545.57 -> So let me take it.

20555.96 -> Okay.

20557.83 -> We can leverage the callbacks of NextAuth.

20562.6 -> Sorry, let me start Pomodoro... 23...

20568.94 -> So 30 minutes, go.

20573.15 -> The callbacks of NextAuth

20575.42 -> in order to modify the session object

20579.26 -> to include also the user ID.

20582.43 -> So session.

20587.97 -> It has the session

20592.18 -> and returns the user.

20595.21 -> Let's use any that we should never use

20599.78 -> the any type in TypeScript

20603.21 -> but let's see.

20605.37 -> Okay, we say session.userID = user.id, okay.

20612.743 -> And we return.

20614.55 -> Promise that resolves the session with the user ID inside.

20624.5 -> Okay.

20630.22 -> Okay, it looks like we have a user type from NextAuth.

20636.348 -> Let's see what's inside.

20639.18 -> Nothing, default user.

20641.7 -> Okay, we have ID.

20643.15 -> Perfect, perfect.

20645.31 -> Very cool.

20647.56 -> Was it wrong here?

20649.56 -> It's not the same, but awaitable session,

20654.35 -> awaitable session.

20659.03 -> Undefined.

20663.63 -> We can also have description.

20665.05 -> This callback is called whatever a session is checked, okay.

20671.92 -> If you want to make something available,

20673.47 -> you add it to the confrig article

20676.59 -> but you have this forward to make it available, okay.

20682.472 -> Okay, okay.

20693.69 -> Okay, so it's a bit different.

20701.04 -> Session.

20702.66 -> Session.

20704.91 -> User,

20706.21 -> user.

20710.64 -> Oops.

20721.03 -> Okay.

20721.87 -> So these callback function receives an object

20726.8 -> made of session, user and token.

20729.22 -> So we need to extract using

20732.25 -> the constructing feature of JavaScript,

20736.5 -> we extract session and user.

20739.19 -> This is the type definition.

20743.57 -> Okay.

20747.771 -> Inline type definition, it's not very nice.

20752.31 -> So let's create a type here, which is session argument,

20761.09 -> which is this one.

20766.72 -> Okay, and is this the type of the object.

20769.9 -> To be honest, there is also D token.

20772.65 -> So let's add it, JWT token,

20777.73 -> what's the type?

20785.29 -> Token JW-.

20790.259 -> Okay, let's import it from, okay.

20794.25 -> That's format.

20795.77 -> Format with Prettier, okay.

20805.43 -> Okay, so now we add the user ID in the session.

20813.81 -> Okay, so we need to override a bit this session type

20824.77 -> or we can say,

20828.96 -> type user session... better here.

20838.26 -> Type user session equals user ID string and session.

20847.69 -> So we extend the session with this type.

20856.74 -> Okay, and we export the user session type, export.

20862.69 -> So this is where the user session

20865.96 -> with the user ID is created,

20868.55 -> therefore I'll create the type here.

20871.04 -> So really close to where it is generated and I export it.

20875.96 -> So I can use it in other modules of the application.

20881.02 -> So the type of session is UserSession.

20895.046 -> Okay.

20903.425 -> We need to use const, use exactly.

20908.07 -> So user session, type UserSession.

20911.32 -> It is the session returned that gets session, but cast it.

20915.95 -> So we change the type to user session.

20919.13 -> Now user session, dot user, okay.

20926.27 -> It's in the route.

20928 -> Thanks, TypeScript.

20932.604 -> Yeah.

20935.13 -> UserSession.UserId.

20941.72 -> Okay.

20944.45 -> Todos,

20947.99 -> return,

20950.52 -> response.todos.

20955.1 -> So this will be an array of todos, okay?

20963.53 -> Perfect.

20967.5 -> So let's try to execute it.

20973.67 -> API todos.

20977.417 -> Let's see what happens.

20983.31 -> Can read probably find menu of undefined

20985.32 -> It looks like todo is not there for us to be used.

21007.93 -> This is very strange because we have this todo.

21021.88 -> Exactly.

21039.74 -> Let me restart it.

21051.26 -> Perfect, so we get an array which is correct

21056.42 -> because we don't have any todo on the database.

21058.91 -> So let's create a new todo.

21064.67 -> So Script,

21067.26 -> insert.

21071.3 -> Okay.

21074.83 -> So ID nothing, user ID, is my user ID.

21090.75 -> This one.

21096.842 -> And title, it's buy yogurt.

21103.64 -> Oops, yogurt.

21108.59 -> And it's completed.

21110.43 -> It's completed, so Boolean, so false,

21114.09 -> createdAt.

21115.65 -> Now the date format, it's funny.

21120.55 -> We can use now I think

21123.418 -> and now.

21126.36 -> Let's execute it.

21150.12 -> This is auto-generated.

21155.522 -> Okay, let's use an audit tool.

21157.52 -> It's much more user friendly.

21168.66 -> I need to select these schema.prisma file.

21179.87 -> Okay.

21181.01 -> This is Prisma Studio, it's from Prisma, very cool.

21187.6 -> Other records, so user ID.

21191.21 -> Is this one by yogurt, whatever it's written.

21202.369 -> Yeah, it's completely, false created, save change.

21206.18 -> Okay, now we have the record, very fresh.

21213.84 -> My endpoint, local API todos, like this.

21220.61 -> Perfect.

21221.91 -> I can create another one,

21233.67 -> title todo learn.

21241.37 -> It's completed false createdAt, and save change.

21247.533 -> If I refresh the page,

21249.71 -> I get another one.

21250.98 -> There's an issue here, createdAt is not the current date.

21256.06 -> So let's go to the schema.prisma.

21263.43 -> Okay, so the problem here is that the for createdAt,

21266.74 -> we don't have a default value.

21269.9 -> So default now.

21275.75 -> Default now, okay?

21279.41 -> Now what we need to do is to push these modifications

21284.25 -> of the model to the database.

21288.8 -> Probably now we will get to narrow.

21291.932 -> Or probably not because it's a default.

21296.34 -> Could not find file, okay.

21300.27 -> Usual folder issue.

21306.14 -> Perfect.

21308.81 -> So if I delete this two records,

21317.84 -> I can add the records now.

21321.45 -> Okay, learn (indistinct)

21330.507 -> I have to unfortunately,

21333.59 -> to close Prisma Studio and load it again.

21338.98 -> So Prisma Studio.

21344.22 -> Open the schema,

21348.61 -> todo,

21350.49 -> record

21354 -> user ID, learn JWT, and now createAt.

21360.15 -> It's null with default now, okay.

21362.88 -> So, we can save changes

21367.6 -> now.

21372.43 -> I don't have to touch it.

21381.97 -> Okay, perfect.

21385.01 -> So now createdAt is the current date of today.

21390.84 -> UTC 0.

21394.29 -> If I refresh, here we are.

21399.861 -> Let me create another record

21404.05 -> by Last.jsBook, oops, I did it again.

21429.26 -> Okay, so now we have two records, cool.

21444.18 -> Okay, now what do we want to do

21446.02 -> is to show the todo here, of course.

21455.15 -> Let's me,

21460.06 -> push, create a commit.

21462.81 -> So Git commit, message is feature API

21469.26 -> and add the todos endpoint API rest,

21477.73 -> rest API endpoint.

21483.13 -> Okay.

21490.57 -> So let's go to the logged page.

21498.77 -> Okay.

21503.71 -> Here we want to add the list of todos, okay.

21512.011 -> So you already know me.

21514.61 -> So we create a new component organisms,

21519.39 -> new folder, todos list.

21527.38 -> Okay, or about todos.

21535.98 -> Okay, export todos, export const.

21543.088 -> Okay.

21548.37 -> We already have the model,

21549.52 -> the TypeScript type of our todos.

21553.02 -> So todos, should be todo but array, okay.

21561.1 -> So now we can use todos.

21567.73 -> Yes.

21569.8 -> To render them.

21573.88 -> So todos.map,

21576.32 -> we have to do object,

21580.33 -> we return.

21582.28 -> What we return is probably flex

21587.31 -> with really important, this is list.

21590.57 -> So Reacts.

21593.159 -> I want this key prop every element of the list.

21604.32 -> Okay, and then we put inside our todo.title.

21617.668 -> Okay.

21621.186 -> And let's say, for the moment.

21627.84 -> Okay.

21630.31 -> So if I add this to the todo, to the logged page,

21636.02 -> of course, nothing will appear

21643.38 -> because we need to send to the components

21649.47 -> the todos, the todos prop.

21660.73 -> Todos.

21667 -> Oops.

21674.15 -> Type todos equals todos props.

21680.384 -> Todos React functional component to this props.

21700.02 -> It gives me the following properties

21701.98 -> from type props key React element.

21717.52 -> Not sure about the problem, todos props.

21729.129 -> That's not really clear.

21734.704 -> Okay.

21738.19 -> Okay, so this more compact.

21743.17 -> I'm returning to flex.

21748.1 -> React element.

21764.62 -> Very strange, we'll check it later.

21767.12 -> Anyway, what I want to show you

21769.57 -> is that If I include some fake hard-coded todos,

21777.89 -> it should appear.

21801.15 -> Yes.

21806.38 -> Yes, so we add todos, probably here we can add title.

21817.29 -> So return,

21827.13 -> heading, todos.

21841.618 -> Okay.

21844.86 -> Got it.

21845.693 -> I was missing this fragment because every list,

21850.95 -> when we have more than one component,

21854.22 -> we need to wrap it at least in a div

21856.76 -> or in a fragment like this, okay.

21860.61 -> So now we have the todos, big, probably.

21874.59 -> Better to use the Chakra UI heading.

21884.1 -> Okay, so we can say size,

21892.06 -> large or MD.

21899.616 -> Okay.

21909.27 -> Okay.

21917.54 -> Perfect.

21918.373 -> Now what we want to do, of course,

21920.13 -> is not to have our coded todos,

21925.08 -> but retrieved them from our endpoint.

21928.7 -> So in order to do that, let's create a new component.

21935.57 -> Okay, new file.

21937.883 -> TodosContainer.tsx.

21944.72 -> TodosContainer, okay.

21949.47 -> Here we will use React hook.

21955.7 -> So as soon as the page is loaded, we fetch the todos.

21961.3 -> Okay.

21968.11 -> Okay, we define our state variable todos,

21971.11 -> set todos, perfect.

21977.17 -> Okay.

21978.8 -> And we render todos.

21984.65 -> Exactly.

21986.85 -> Perfect.

21990.86 -> Okay, now let's implement these fetch todos function.

21996.8 -> Fetch todos is a sync function.

22005.68 -> Okay, I usually do axias

22011.69 -> but in this case we can use also fetch.

22014.12 -> So we fetch API todos for the current user.

22019.27 -> This is the response.

22021.02 -> We get the Json, and we return the data.

22025.96 -> This is in async function.

22027.38 -> So we can do then todos, set todos.

22034.65 -> Exactly.

22036.03 -> So if you're not familiar with React hooks,

22039.9 -> you state is a React hook

22043.39 -> where we can define the initial value

22047.33 -> of the state of variable.

22048.51 -> In this case, it's an empty array.

22052.29 -> Then it returns in array with two elements.

22054.61 -> The first one is the state variable.

22057.1 -> In our case, we call it todos.

22059.99 -> The second one is the sector function.

22063.21 -> So we can invoke this function like in this case,

22066.3 -> passing value.

22068.09 -> This value will be set as the new value

22071.81 -> for the state variable todos.

22074.15 -> So when I fetch the todos,

22077.02 -> I get the todos and I pass the todos to the set todos,

22081.52 -> then the values of the state variable todos is updated

22085.23 -> in the past todos presentational components

22088.67 -> that we created before.

22094.41 -> Okay.

22095.9 -> Now in the logged page, instead of todos,

22100.21 -> we import the todos container.

22106.3 -> Okay.

22110.05 -> Great.

22111.02 -> So it's working already.

22113.44 -> So let me refresh the page.

22124.85 -> You can see that there is a call to API todos.

22131.75 -> This is the response.

22135.01 -> Okay.

22136.52 -> And so this is the data coming from my database.

22140.11 -> Learn.jwt by the Last.jsbook.

22143.99 -> If you remember we created two records here

22153.46 -> with two titles Learn.jwt by the Last.js book.

22158.85 -> Here we are.

22162.42 -> Okay.

22164.59 -> Pretty cool, yeah?

22167.99 -> Okay, let me use user, oops, session.

22173.15 -> This is session, user session.

22186.48 -> Object is possibly undefined.

22190.19 -> Well, actually not.

22193.1 -> Okay.

22200.63 -> So let's use the optional chaining.

22204.13 -> Why I say that should not be undefined

22206.36 -> because we have the check here.

22207.87 -> If the session is not defined,

22209.06 -> we are directed to the route page of our application, okay.

22215.81 -> But that's fine.

22220.37 -> Let's add these two requests and next.

22228.99 -> API request and responses is next API response, okay.

22241.69 -> Server side props should exist or anything.

22270.1 -> Okay.

22280.15 -> TypeScript.

22281.59 -> So there is a GetServiceSide prop that we can use

22288.3 -> as a type here.

22312.31 -> GetServerSide props.

22314.41 -> So export cost

22320.9 -> equals todo async, okay.

22336.11 -> This is never used.

22340.32 -> Perfect.

22352.61 -> Okay, so we're almost done with the Pomodoro.

22356.1 -> So let me commit the changes.

22379.4 -> Feature todos,

22382.342 -> added todos retrieval.

22393.422 -> Show the todos logged page.

22402.26 -> Okay.

22403.9 -> Modifications on GET.

22405.94 -> So after the break,

22409.31 -> we will look at the other, oops.

22415.96 -> The other endpoints.

22418.84 -> So we implemented this, the GET,

22421.35 -> we need to create a new todo from our web application.

22425.21 -> And then of course we will find a way to modify it

22430.32 -> and delete it,

22431.46 -> Okay, see you later.

23054.23 -> Okay, we're back.

23057.84 -> So the break time is completed.

23061.49 -> So let's have a new session, 30 minutes this time, okay.

23067.65 -> So now we're able to retrieve our todos.

23072.02 -> Let's find a way to create a new todo.

23075.59 -> So let's play the screen, okay.

23082.18 -> Let's start from scratch.

23085.048 -> Let's restart Next.js locally.

23089.95 -> Okay, so now what I would like to do

23093.09 -> is to add simple input field

23098.54 -> with the button, just to write some text inside,

23102.39 -> click the button and perform a request

23105.88 -> to the server, to our end point

23110.8 -> and create the todo with the title.

23115.8 -> So let's get started with the new endpoint.

23122.72 -> So let's me take the README.

23125.55 -> So we said that we have these endpoint,

23129.54 -> API todos to retrieve all the todos of the current user.

23133.28 -> We want to create another endpoint API/todo

23138.82 -> with the HTTP method POST to create a new todo.

23146.05 -> So under pages, API, I create a new file todo.ts.

23154.2 -> Let me copy what do we have on todos

23158.42 -> and modified it a bit.

23161.23 -> So we want here, posts,

23165.57 -> create todo,

23168.288 -> and also PUT

23174.5 -> update todo.

23175.57 -> We can use this handler also for DELETE.

23178.93 -> The only difference that for PUT and DELETE,

23182.97 -> we need the ID of the todo to update or to delete.

23191.42 -> Okay, so in this case,

23196.27 -> if the HTTP method, is not, okay,

23206.68 -> let's say we support posts.

23210.19 -> Thank you GitHub Co-pilot.

23212.29 -> So POST, PUT and DELETE.

23216.58 -> This is an array, includes request.method.

23227.238 -> It could be undefined even.

23234.89 -> Method, empty.

23237.55 -> but we have a negative negation before.

23242.61 -> So if this array,

23245.73 -> doesn't include the request method,

23249.61 -> then the method is not allowed.

23252.76 -> So if I receive GET from my request,

23259.85 -> this array doesn't include

23262.44 -> because there is the question mark,

23264.51 -> doesn't include GET, then the method is not allowed.

23271.34 -> Okay.

23274.24 -> Then we charted the session again,

23276.61 -> because all of these actions need to know the user ID.

23283.46 -> So the user must be authenticated.

23289.42 -> And then we start.

23290.84 -> So let's remove this.

23293.57 -> So, we've post, create todo.

23302.83 -> Okay.

23304.83 -> We have put update todo with the GET.

23314.53 -> It's all right the DELETE, we delete the todo.

23328.78 -> Now let's see if GitHub is giving us some suggestions.

23336.84 -> Okay, so when we create the POST, we have seen that,

23343.86 -> sorry, when we create a todo we need for sure

23347.57 -> the user ID, we can retrieve it from the session.

23351.2 -> We need the title from the front-end and that's it

23356.46 -> because by default isCompleted will be false.

23366.98 -> In our request body, we will have title and that's it.

23376.01 -> Okay, we can put the check if title is not there.

23379.36 -> We can return.

23383.19 -> Bad request.

23386.72 -> Bad request.

23393.75 -> Otherwise we can do Prisma todo we need to create now.

23403.2 -> So let's go to the Prisma documentation.

23409.61 -> Let's open it here, Prisma.js.

23418 -> We search CRUD

23424.12 -> and create.

23425.81 -> So Prisma, table name, create,

23428.51 -> data and data inside, okay.

23435.85 -> So todo create data.

23441.95 -> So title,

23446.65 -> then we need the user ID.

23449.655 -> We retrieve the user ID from session,

23453.499 -> and we say, we need to have const userSession.

23458.26 -> Type user session is the session const.

23465.154 -> Usersession.userid.

23467.62 -> Then when it is completed, oops.

23474.212 -> Okay, isCompleted false.

23478.35 -> And the rest has a default value.

23480.12 -> So the ID is automatically generated.

23482.78 -> The ID of the todo createdAt and updatedAt

23487.37 -> are automatically created.

23494.34 -> Okay.

23497.402 -> And we return, res.json, the returned todo.

23518.864 -> Okay, there's something broken with the formatting.

23523.063 -> Let's understand what.

23526.56 -> This is closed.

23527.6 -> This is closed.

23529.5 -> Closed.

23531.927 -> This is closed here.

23534.08 -> There's one more.

23535.57 -> Yes, okay.

23539.98 -> Okay, let's try it.

23546.07 -> So now we create another component,

23548.84 -> molecules this time,

23550.64 -> which is todo, new todo.

23561.7 -> Todo create.

23567.72 -> Export const, todo creator.

23571.35 -> Okay.

23573.71 -> As always let's use the flex and input.

23579.35 -> Correct.

23581 -> So let's look at the Chakra UI documentation input.

23592.62 -> Okay.

23594.4 -> List straightforward.

23604.17 -> Something to do.

23618.95 -> Okay.

23621.05 -> And then we need a small button,

23626.44 -> an icon button.

23635.3 -> Okay.

23637.06 -> There are some icons present in Chakra UI,

23643.58 -> probably there is a submit icon.

23650.41 -> Okay.

23658.12 -> We need to install it.

23659.24 -> Let's do it.

23677.04 -> Icon, there is one otherwise we need to stop it.

23681.77 -> We can use the plus icon.

23689.52 -> The add icon, yeah,

23691.93 -> good work for us.

23704.59 -> Plus icon, icon button,

23716.3 -> icon.

23717.77 -> So relabel and icon.

23720.64 -> So icon, PlusIcon,

23728.56 -> relabel,

23731.26 -> create todo.

23740.14 -> Oops.

23748.55 -> It's not called plus icon, but it's called add icon.

23758.149 -> Okay.

23759.55 -> Now when we click on the icon button,

23770.77 -> we need to call our back-endpoint.

23781.58 -> Okay, we need to retrieve the value of the input field,

23784.2 -> so we can say unchange event,

23791.59 -> we can do set value to e.target.value.

23802.023 -> And then we create a new constant

23807.02 -> on submit or better onCreate,

23812.52 -> click onCreate.

23819.191 -> Okay.

23827.64 -> No, it's not right.

23829.88 -> Fetch API todos.

23836.23 -> So we filed, let's just say install axias, NPM axias

23842.48 -> This is a package to manage HTTP requests.

23846.57 -> So I will do axias.post API todo.

23860.34 -> Okay.

23862.1 -> We need to send some data

23865.35 -> So the title.

23871.84 -> That's it.

23876.09 -> Exactly.

23878.75 -> So let's type out something.

23881.89 -> So console.logrequestbody.

23890.58 -> Here we include, we import axias from axias.

23896.27 -> What about icons?

23901.41 -> No type definitions, strange.

23909.39 -> Okay, so the posts with title value

23913 -> where the title is this one.

23916.35 -> So let me refractor it title and setTitle.

23930.75 -> Okay.

23931.97 -> OnClick, just called Create.

23954.06 -> Okay, let's see what is wrong.

23957.14 -> Something is wrong with the packages, probably.

23993.65 -> Okay, at Chakra UI icons.

24009.49 -> Let me remove the package.

24012.095 -> Lock,

24015.27 -> yes, yarn.

24021.61 -> Okay.

24023.48 -> PM run dev.

24032.13 -> Okay.

24033.21 -> So we go to the logged page

24040.22 -> before the todos container,

24042.22 -> we add the todo creator.

24057.144 -> We can add title here.

24059.81 -> Heading, create todo.

24079.76 -> Okay, say flex direction column

24087.223 -> padding top, always better paddingY 16 pixels,

24095.72 -> size MD.

24099.234 -> Okay.

24101.4 -> Margin bottom four pixels.

24105.95 -> Okay.

24108.76 -> Now, let's put the input inside the flex.

24119.32 -> Okay.

24120.91 -> And let's add the margin left of four pixels, great.

24129.23 -> Now variant equals solid

24134.91 -> and color scheme is blue.

24139.48 -> Okay.

24144.49 -> Create todos.

24149.409 -> Let's see what happens if I right here something,

24154.208 -> and then click on the plus.

24157.3 -> So we are calling the todo.

24161.105 -> Let me expand this.

24168.38 -> This is a post with Co-pilot, okay.

24175.2 -> And this is the response.

24177.201 -> So it seems that it was created.

24180.07 -> Let's go to the database.

24183 -> I refresh todos.

24184.68 -> We add a new todo, perfect.

24189.13 -> So it is being created.

24190.1 -> If I refresh the page,

24195.63 -> I get also the new one, perfect.

24199.5 -> Okay, but it was not immediately shown.

24203.42 -> Let's see why.

24206.85 -> Because when a new todo is created

24214.27 -> and nobody notifies it about the todos container.

24221.14 -> This is why.

24223.55 -> So considering that we made two different components.

24230.14 -> Let's see how we can manage this.

24232.98 -> So we need to make them communicate, how?

24237.05 -> Through the logged page.

24239.58 -> Okay.

24240.413 -> Let's see why.

24241.51 -> Let's see how.

24243.16 -> I create a refreshTodoToken.

24249.269 -> And I set refreshTodoToken, the type is a string.

24256.49 -> Then I pass this refreshTodoToken

24259.92 -> to the todos container, todos container.

24264.92 -> So we have a new prop.

24266.99 -> RefreshTodoToken

24269.55 -> and we pass it to the use effect, is our dependency.

24278.55 -> Okay, there are some questions in chat.

24280.54 -> Let me just complete this.

24283.23 -> So props, refresh, string.

24292.162 -> React.FC, todoprops, okay.

24296.53 -> So Chambelano is asking,

24297.93 -> how do you choose the amount of pixels for your signing?

24301.22 -> Is that a rule you follow?

24302.56 -> Okay, good question.

24304.23 -> So Chakra UI makes use of "virtual" grid

24309.77 -> of four pixels by four pixels.

24313.63 -> So the base unit of measure is four pixels.

24318.56 -> So I follow the same approach,

24321.04 -> but usually I use multiples of eight pixels.

24326.69 -> So that is why you often see myself putting eight pixels

24331.62 -> or 16 pixels or 24, 32 and so on.

24338.31 -> So this is the base rule that I follow.

24341.48 -> And this way the layout is well organized.

24349.12 -> So in this case, I just use four pixels for the margin,

24352.44 -> which is more than enough and also here on the left,

24357.34 -> it's four pixels, if I remember, yes.

24363.48 -> So let's say multiples of four

24368.56 -> or multiples of eight pixels, okay.

24373.216 -> Does it reply to your question?

24381.15 -> Okay, I hope so.

24384.19 -> Okay, back to the refreshTodoToken mechanism.

24391.24 -> What we need to understand here is how, okay, thanks.

24396.36 -> Is how the use effect works.

24400.2 -> So basically there are two parts

24403.13 -> of the user effect React hook.

24405.51 -> The first one is the function.

24408.91 -> Let's say they call the function.

24410.99 -> The second argument, it's an array of variables.

24415.71 -> Okay.

24417.34 -> You say use this version, let's say, okay,

24424.45 -> we've an empty array.

24427.61 -> This means that when the todos container component

24432.83 -> is mounted,

24434.51 -> so it's rendered for the first time,

24438.31 -> this callback is called, okay?

24442.74 -> So just once when the todos container component is mounted.

24452.39 -> Instead, if I add a variable here it means that

24457.35 -> whenever the value or RefreshTodoToken changes,

24464.18 -> this callback is invoked.

24466.99 -> So whenever that refresh token, todo token value changes.

24472.96 -> So I'll show you how we can leverage this feature

24477.66 -> of the use effect to trigger fetch

24482.7 -> of the todos whenever we want.

24487.21 -> Okay, I hope this is clear.

24489.05 -> It's very important concept of the use effect.

24494.24 -> Okay, another question from Filana.

24496.38 -> I have to go, okay.

24500.3 -> Okay, thank you very much, Filana.

24505.13 -> Yes, yes, the recording of the streaming will be available.

24508.96 -> So no worries if you need to leave or you joined later,

24514.59 -> the recording will be there.

24515.69 -> So thanks Filana for attending.

24521.25 -> Okay, see you, see you.

24523.96 -> Okay.

24526.18 -> I hope this is clear.

24529.4 -> Now back to the logged page.

24531.77 -> So now the todos container refresh token, sorry.

24536.52 -> The todos container calls the fetch todos

24540.36 -> whenever the value of the refresh todo token changes.

24544.77 -> Now, the default value of the refreshTodoToken,

24551.39 -> which is created in the logged page

24553.79 -> is a state of variable.

24555.66 -> It's an empty string.

24557.94 -> So if I go here again,

24562.67 -> I create a new todo, oops.

24579.57 -> Okay, I create a new todo,

24584.64 -> I create it but nothing happens.

24590.35 -> The todo is created, if I refresh, I can see it.

24596.46 -> Okay, but not before.

24599.86 -> So let's complete this development.

24604.05 -> Now, which components we know when a todo is created,

24609.97 -> it's inside todo creator

24613.55 -> because we have these own create function

24617.03 -> that calls, executes the HTTP POST requests.

24631.159 -> Okay, these access posts returns promise.

24634.59 -> So we can use the syntax of the promise.

24638.82 -> So then, catch in case of errors, so error,

24645.58 -> and also there is finally,

24649.73 -> which is at the end,

24651.45 -> regardless of a successful response or an error

24656.63 -> finally is always invoked, okay.

24658.87 -> But in our case we don't need it.

24662.72 -> So when the todo is successfully created,

24669.13 -> onTodoCreated,

24673.46 -> we can create a new prop

24675.38 -> and we can call it onTodoCreated.

24687.38 -> This is function, okay?

24696.72 -> Okay, this is just a prop of type function

24701.58 -> that is passed to the creator from above, from the parent.

24705.58 -> And it is invoked

24707.14 -> whenever we create successfully a new todo.

24713.48 -> Now, of course, we need to define it here onTodoCreated.

24721.13 -> Okay.

24722.48 -> What do we do when a todo is successfully created?

24726.51 -> We need to refresh to change the value

24730.97 -> of our refreshTodoToken.

24735.05 -> We can use a month, that's random.

24738 -> We don't care about the value, it's a string.

24743.558 -> Let me just show you what's the result of this method.

24748.78 -> You see, it's always different.

24752.07 -> Okay, so considering

24757.021 -> these values changed in the refreshTodoToken,

24763.31 -> you see, the fetchtodos will be called again.

24768.24 -> So let's try another todo.

24775.85 -> Another todo appeared.

24781.77 -> Pretty, cool, yeah.

24784.56 -> Okay.

24785.75 -> Of course we can do a lot of changes here

24789.65 -> to improve our user interface.

24791.73 -> But I mean, it's not the purpose of this course.

24795.58 -> So for instance,

24796.54 -> we could add a loading or we can do it actually.

24800.37 -> So there is a nice feature

24803.964 -> and the icon button should be isLoading.

24807.55 -> Correct, which is false, but okay.

24814.28 -> We can create isLoading, setLoading.

24821.72 -> So onCreate, we say setLoading true

24826.67 -> and here we use finally, because regardless of the result,

24831.18 -> we want to set setLoading to false,

24834.74 -> and then we pass the isLoading variable to the icon button.

24841.63 -> Okay.

24843.04 -> So isLoading state variable.

24847.81 -> The default value is false,

24850.66 -> but when I click on the plus icon button,

24855.9 -> I call the onCreate callback.

24858.2 -> I set the loading state, true.

24863.18 -> So isLoading on the icon button is true.

24867.82 -> At the end of the request I set loading to false.

24874.15 -> And so isLoading is false.

24875.9 -> Let's see.

24880.25 -> Yeah.

24881.79 -> Very cool.

24882.9 -> So you have a feedback about what's going on.

24885.78 -> Very, very cool.

24887.93 -> Okay, I think the Pomodoro is complete.

24893.85 -> We can have another small break, I think.

24902.89 -> Okay, so what we need to do next,

24908.997 -> we can implement the DELETE and the UPDATE.

24912.704 -> And finally,

24914.77 -> we will see how to release our application using Vercel.

24921.26 -> And so get a URL so that everyone in the world

24924.38 -> can use our application.

24926.13 -> So we will use this, create a new project,

24929.58 -> link it to my repository on GitHub

24933.08 -> and have it ready in five minutes.

24939.6 -> Okay.

24943.135 -> See you later.

24944.44 -> See you in 10 minutes, no more, okay.

24947.44 -> See you.

25549.125 -> Okay.

25551.53 -> So the break is done, is complete, finished.

25555.34 -> Let's get started with another session of 30 minutes.

25559.7 -> So it's afternoon.

25561.17 -> We did a lot of stuff.

25563.12 -> We're a bit tired.

25564.07 -> So let's make shorter our focus time, so 30 minutes.

25570.94 -> Okay, so now that we have our structure,

25578.91 -> so we are able to create new todos.

25581.51 -> When we create new todos,

25582.88 -> it automatically updates list,

25588.83 -> because it calls again the todos endpoint.

25594.23 -> Let's add the PUT HTTP request to UPDATE.

25599.99 -> We will add also the isCompleted state and the DELETE.

25610.02 -> Okay.

25611.39 -> So let's work on the update of the todo.

25626.667 -> Okay.

25630.918 -> We have two components, actually.

25632.26 -> One is todos

25633.93 -> with just the presentational component

25637.19 -> with the todos and the list of todos.

25645.87 -> So we need to extend this basically.

25650.85 -> We can transform this component by using an input element

25661.67 -> or the value is todo the title.

25669.08 -> Okay.

25673.177 -> All right, so now we can edit the content.

25678.83 -> Okay.

25679.96 -> And so we can say, okay, let's change a bit

25683.39 -> the UI to input.

25688.11 -> There is a variant.

25692.74 -> They don't like it.

25694.62 -> I like very much so input, variant and style.

25701.882 -> Okay.

25704.311 -> And probably we can add margin Y of four pixels.

25710.51 -> Okay.

25711.343 -> We have more space for us and now onChange.

25719.731 -> Or better onBlur, let's do it onBlur.

25723.1 -> So was that the user experience we want to achieve

25727.95 -> or better how we want to implement it?

25729.78 -> So I'm here.

25731.67 -> I update.

25733.88 -> I cannot update.

25736.626 -> It's not value, it's default value if I'm not wrong.

25741.91 -> Okay.

25743.8 -> Okay.

25744.633 -> But I can change the value,

25746.68 -> as soon as I move out of the input.

25750.9 -> So if I click outside using the tab.

25757.01 -> I move out of the input.

25763.775 -> We save the new value.

25766.66 -> So we can say onBlur,

25771.526 -> I show you so look.

25775.72 -> Blur.

25780.19 -> So new todo. I click outside blur.

25786.12 -> Another todo I click, press tab blur.

25791.08 -> Okay, perfect.

25792.27 -> So onBlur recall function which is on TodoBlur.

25805.27 -> Okay, TodoBlur is a function that receives the ID,

25812.99 -> for our todo, so I wanna say todo ID.

25816.19 -> The newTitle.

25820.11 -> Okay, and let's keep completed for the moment.

25827.34 -> Okay, so todoId is a string,

25830.78 -> the title is string.

25835.21 -> Okay,

25838.17 -> cool.

25839.28 -> OntodoBlur width, todo.id

25843.431 -> and we need the new value.

25847.18 -> So e.target event.

25851.09 -> So E is the event, the blur event.

25855.41 -> Okay.

25856.42 -> Target value.

25860.31 -> Okay, so this is how we change the todos.

25864.98 -> Todos is used in the todos container.

25868.71 -> So onto the blur.

25871.75 -> Const onTodoBlur,

25874.5 -> we have, exactly, this stuff,

25877.9 -> console.log onTodoBlur, id, text.

25899.68 -> Okay.

25901.53 -> Promise for it.

25909.22 -> Okay.

25912.15 -> Type string, okay, sorry.

25914.24 -> This is string.

25916.98 -> So here I am Learn.jwt, okay.

25922.08 -> OnTodoBlur, this is the ID of the todo

25925.263 -> and this is the new text Learn.jwt.

25928.174 -> Okay.

25931.91 -> Let's do another small optimization.

25943.66 -> So we call this only if the title is updated.

25949 -> So if todo title equals equals event target value return,

25959.4 -> it's called short circuit.

25961.63 -> So whenever our condition is matched, which just return.

25968.8 -> Okay, so now if I, now it's executed.

25974.94 -> If I blur on this, it's not executed

25978.09 -> because the values are exactly the same.

25980.33 -> If I remove this, it's not executed, okay.

25986.28 -> Now on the todos container, onTodoBlur,

25990.26 -> what we need to do

25991.74 -> is to call axias.put,

25995.78 -> something we use, exactly,

26001.543 -> todoId and newText.

26008.77 -> So we add todoId, sorry, newTitle,

26015.66 -> title is newTitle.

26021.04 -> Exactly.

26023.02 -> Okay.

26026.58 -> But we didn't implement this endpoint yet.

26030.37 -> So the PUT on API todo

26033.06 -> so let's open the todoPagesAPI.

26039.115 -> Okay.

26040.33 -> We go to the post.

26042.18 -> So the PUT, okay.

26044.4 -> What we need to do is request body.

26050.29 -> We extract the ID.

26056.97 -> Ah, yes, because this is in the in params.

26059.84 -> So paramsId,

26063.271 -> Then we extract the title from the request body.

26080.97 -> Okay.

26081.83 -> We need to check the value of request

26086.05 -> which is this API request query key, okay.

26093.17 -> And then we have,

26099 -> prove of data.

26100.65 -> So let's see Next.js retrieve denomic ideas.

26113.7 -> I suppose I need to do it a bit differently, okay.

26126.56 -> I shouldn't make it like this, I think.

26132.44 -> Yes, router query.

26136.759 -> Okay.

26148.14 -> Okay, let's try to do it very clean, select this one.

26153.19 -> Optional catch all routes, okay.

26157.56 -> Pages posts will match post one ABC, but not post create.

26163.317 -> Okay.

26169.88 -> Okay.

26173.342 -> Your folder todo, new file, pid.ts.

26180.68 -> Okay.

26182.056 -> So, I copy todo.

26186.038 -> Okay.

26187.75 -> So here we support only POST.

26196.03 -> Here we support and PUT and DELETE.

26211.46 -> Okay, we can remove the post, okay.

26220.137 -> I said this should be inquiry.

26234.47 -> Oops.

26236.24 -> We need to extract PID, router query PID.

26241.293 -> Okay, which is actually the ID.

26245.29 -> Okay.

26252.337 -> Okay, and what we need to do is wait,

26256.91 -> Prisma.todo.update

26261.44 -> where ID,

26266.03 -> data, title, exactly.

26269.7 -> Const todo.

26273.282 -> This is what we return, we return todo.

26282.06 -> Write as string.

26290.2 -> No, it doesn't like it.

26297.28 -> Const id string, pid.toString.

26306.35 -> Okay.

26308.17 -> So let's try it.

26317.611 -> Okay, I can remove this.

26319.79 -> I can remove DELETE.

26322.83 -> Okay, just to simplify a bit,

26325.49 -> we say that if the request method is different from POST.

26334 -> Okay, the method is not allowed.

26338.386 -> Okay.

26342.92 -> Okay, now to discontinue we call API todoId,

26348.14 -> we further add newTitle.

26350.94 -> Let's see if it works.

26358.03 -> Okay.

26359.912 -> Okay.

26362.283 -> Okay.

26364.44 -> So we add PUT.

26368.89 -> This is the idea of the todo.

26371.81 -> This is the response, let's see on the database.

26377.6 -> Learn.jwt, okay, perfect.

26380.35 -> So it worked.

26386.33 -> So let me commit these changes, okay.

26398.79 -> Feature API, (indistinct) added todo update.

26407.9 -> And I push it.

26410.72 -> Okay, now let's work on the deletion or the completion.

26417 -> Yeah, so we won't mark it as completed.

26420.11 -> So we can go todos, container todos.

26428.58 -> Okay, the todos component.

26435.78 -> So we can add here an input type equals checkbox.

26443.545 -> Checkbox.

26451.56 -> Checkbox.

26453.54 -> Now, let's say on Chakra.

26461.82 -> There is a checkbox component.

26476.38 -> Okay, there is also label eventually, we don't need it.

26480.16 -> Default is checked, I will say no.

26484.01 -> Okay, is disabled.

26489.41 -> Is invalid, the spacing.

26493.657 -> Okay.

26498.04 -> Okay.

26499.48 -> There should be a value prop.

26502.03 -> Let's see.

26513.1 -> The value to be used,

26515.32 -> this is where the return from submission,

26519.42 -> the initial value.

26522.28 -> Okay.

26525.25 -> Okay.

26526.083 -> Let's try with value.

26528.03 -> So value equals todo.isCompleted.

26540.72 -> Default value.

26557.31 -> That is the default.

26561.49 -> Is checked.

26570.82 -> All right.

26572.11 -> So if I go to database,

26575.62 -> and I change this to true and the save

26579.51 -> and I refresh the page.

26584.64 -> Okay, this is checked.

26588.32 -> Very good.

26589.59 -> So let's change also a bit.

26595.01 -> Okay, if this is done,

26601.906 -> I would like to show it with a strike through.

26607.1 -> Okay.

26609.92 -> Let's see if we are able to SX,

26617.404 -> font, textDecoration.

26627.473 -> The previous one was perfect.

26630.17 -> Yes.

26631.215 -> If todoisCompleted,

26634.89 -> otherwise not perfect.

26638.08 -> Perfect, perfect, perfect.

26640.64 -> And if it is completed,

26643.45 -> I don't want to allow someone to change it,

26652.24 -> readONLY todo.isCompleted.

26659.23 -> Perfect, I cannot change it anymore.

26663.19 -> And also,

26667.26 -> sorry, let me do text decoration equals, exactly.

26675.138 -> And also color equals.

26679 -> If it is completed, gray 500, otherwise black.

26684.62 -> Okay, very cool.

26689.98 -> Let's say gray, 800.

26697.2 -> Okay.

26700.4 -> Perfect.

26702.47 -> Now we want to update the todo, of course, the database

26707.55 -> when we click on the Completed.

26710.61 -> Okay.

26711.53 -> So again, I'll change

26718.61 -> TodoCompleteToggle.

26731.01 -> So again, the todoId and we need also the new value.

26737.34 -> So e.target.checked,

26750.06 -> So todo.id.

26755.85 -> Oops.

26760 -> Okay.

26764.16 -> Okay.

26767.07 -> Boolean.

26772.39 -> IsCompletedBoolean.

26777.67 -> So again, we go to the todos container,

26783.44 -> we create the new callback.

26788.207 -> Okay.

26790.18 -> OnTodoBlur, Todo.id.isCompleted.

26800.1 -> Okay.

26803.58 -> Boolean.

26807.12 -> Okay,

26809.43 -> isCompleted.

26812.34 -> Now the only issue we see is that, okay,

26817.15 -> let's retrieve also uncompleted

26821.11 -> and data is completed.

26823.73 -> Now, I don't want to, I mean,

26826.5 -> in one case we send the title onBlur.

26831.42 -> In another case we send isCompleted.

26833.63 -> So we want to make our code resilient

26836.89 -> and consider only the field that is the descent,

26842.06 -> not everything.

26842.93 -> So let's say const updatedData.

26851.55 -> Okay, and we say if title updatedData,

26857.189 -> the title equals title.

26861.74 -> Okay.

26862.573 -> We do the same on isCompleted.

26866.46 -> And we send only

26873.21 -> updatedData.

26876.56 -> Okay.

26880.23 -> And I request data.

26890.74 -> Okay, let's create a type.

26896.14 -> Type todo update.

26902.08 -> Okay, contains title or isCompleted.

26907.56 -> Both are optional, so could also not be present.

26914.77 -> Okay.

26917.65 -> Perfect.

26918.51 -> So let's see if it works.

26922.2 -> Something broken,

26924.55 -> probably there will be connections.

26929.34 -> Yes.

26931.16 -> Restart it,

26933.25 -> NPM run dev.

26947.35 -> Here we are.

26954.48 -> This is the PUT the pale on there isCompleted

26959.787 -> and isCompleted true.

26965.32 -> Correct.

26967.09 -> Now we need to trigger again the update of the list.

26978.264 -> The refresh token.

26986.16 -> Okay.

26989.87 -> So let's create an another

26991.97 -> which is RefreshCompletedTokenTodo.

27008.094 -> Okay.

27009.587 -> And so we add these as dependency for the hook

27015.55 -> and we say that on todo complete toggle.

27020.85 -> Finally, we set the complete todo token

27026.01 -> to a new random string.

27028.26 -> Okay.

27031.8 -> Let's try.

27039.56 -> Okay, it took a bit, but at the end it worked.

27046.28 -> Also I see the order changed.

27054.37 -> Let's see how we can order probably on the createdAt.

27062.565 -> Okay, so let's go to our todos API.

27069.41 -> We'll retrieve this.

27072.95 -> Okay, let's go to Prisma.js to see how we can sort

27081.04 -> the data

27098.81 -> Filtering and sorting,

27102.51 -> filtering and sorting.

27107.64 -> Okay, so order by.

27115.61 -> So I want to order by createdAt.

27121.76 -> Okay, but also isCompleted.

27125.73 -> So let's PUT isCompleted first, so I want to complete it.

27133.16 -> Let's use createdAt only at the moment.

27140.27 -> Okay.

27153.38 -> Nope.

27169.56 -> Okay.

27171.005 -> It took a bit of time.

27171.84 -> Let's see if on the checkbox,

27174.07 -> there is also a loading state,

27177.3 -> would be great, but I don't think so.

27180.236 -> Okay, we should implement it by my algorithm.

27183.17 -> Okay, so let's keep it for the moment.

27186.2 -> Okay, and we did everything,

27190.28 -> we can update, okay.

27194.95 -> We can complete, wa-la

27198.59 -> perfect

27199.93 -> and we can createNewTodo.

27206.114 -> Very, very cool.

27208.46 -> Okay.

27217.27 -> Is there anything?

27218.64 -> Ah, the DELETE, the DELETE

27221.47 -> Cool, cool.

27223.74 -> Okay, so let me comment this modifications first.

27228.54 -> So we have the update.

27237.15 -> We have the commit feature web-app

27243.24 -> added to do title update and completion.

27253.68 -> Okay.

27259.65 -> Okay, let's do the DELETE.

27262.48 -> So always on that PID one.

27267.77 -> Okay, should be really, really fast.

27272.05 -> So we extract the PID,

27276.376 -> we convert it to string, okay.

27283.61 -> And then we say todo.delete where ID.

27296.27 -> Okay.

27302.29 -> Then again, we go to the todos.tsx.

27309.79 -> We add an icon button.

27313.21 -> Icon button.

27315.73 -> Icon, I suppose there is a delete icon.

27320.3 -> Yes.

27323.16 -> Aria label.

27327.27 -> Delete todo.

27328.99 -> Okay.

27330.2 -> And don't click,

27333.538 -> I need to call onTodoDelete,

27339.68 -> TodoId.

27351.012 -> Okay.

27358.08 -> Okay.

27360.71 -> Now we go to the todos container

27364.861 -> and we add the onTodoDelete.

27369.82 -> It's very similar to this one.

27374.191 -> TodoDelete.

27375.97 -> We only have the TodoId.

27378.96 -> Okay, so we call the delete.

27383.73 -> All right.

27385.07 -> And again, we trigger the uncomplete todo token

27390.3 -> to refresh the list.

27393.65 -> Okay, this is not super nice.

27396.11 -> So let's go to Chakra icon button.

27404.24 -> This should be size property,

27409.709 -> size.

27411.73 -> Okay.

27412.94 -> Let's try to make it

27417.77 -> variant ghost and size very small.

27427.79 -> So variant ghost

27433.51 -> and size, small.

27438.21 -> Okay.

27443.36 -> Also margin left equals four pixels.

27458.1 -> Okay.

27459.971 -> And what about the fill?

27464.77 -> Around 500.

27468.45 -> Let's say color skin, red.

27475.95 -> Okay.

27478.86 -> Not bad.

27480.18 -> But I want to show it only on Hover.

27487.74 -> Okay.

27501.63 -> This is interesting.

27503.06 -> I never did it with Chakra UI

27506.01 -> so let's do it.

27511.05 -> Hover,

27519.21 -> no.

27536.61 -> Styles, props.

27541.47 -> Hover, okay, group hover.

27550.49 -> Okay.

27556.201 -> It should do the work.

27562.37 -> Okay, say display.

27566.96 -> All better.

27567.793 -> Opacity, it's one otherwise opacity is 0.

27579.32 -> And also we show it also if todoisComplete is false.

27587.07 -> Better.

27588.19 -> Let's fill the space.

27594.067 -> Todo.isComplete

27603.12 -> 0 otherwise one.

27612.86 -> Okay.

27614.79 -> Role group.

27620.64 -> Okay.

27622.75 -> So, okay.

27628.72 -> Let's say, visibility todo.isComplete,

27635.56 -> isCompleted hidden otherwise visible.

27645.01 -> Okay.

27648.24 -> Okay, this is why I don't have the cursor pointer, okay.

27654.75 -> Okay.

27659.03 -> Very nice.

27663.04 -> Okay, let's try to delete one.

27666.28 -> So I remove these completed from here.

27673.91 -> Didn't work.

27675.58 -> IsCompleted false, isCompleted true.

27679.45 -> Right, right.

27680.72 -> Because in the endpoint I had generic.

27685.74 -> Okay, so we should say it's different from undefined

27690.22 -> because in case it's false, it was skipped,

27694.06 -> now it's not.

27705.538 -> The usual.

27706.758 -> Okay, too many connections to the database.

27710.18 -> That's why we have these three reload of Next.js

27715.79 -> when we update the code,

27717.64 -> it creates a new connection to the database.

27720.51 -> So when we reach the limit of 20,

27722.72 -> it's going to raise an arrow.

27726.59 -> Okay, let's try again.

27730.32 -> Okay, and now we can remove it.

27734.29 -> Perfect.

27740.78 -> Okay.

27743.141 -> Okay.

27746.465 -> Okay.

27749.445 -> Okay.

27751.88 -> And then update it.

27754.1 -> Great.

27757.13 -> Okay.

27761.36 -> So now we have also the deletion.

27766.8 -> Okay.

27771.807 -> I can add this in commit, Git commit,

27776.21 -> the term feature web-app added to do deletion.

27785.1 -> Cool.

27789.98 -> Okay.

27791.34 -> Now the last step is to deploy it to the Word.

27797.74 -> So at the moment,

27800.407 -> we have this obligation on the local host,

27802.33 -> we can run it locally, it works,

27804.48 -> but let's try to make it available to everyone.

27810.15 -> So, okay, this is Vercel.com.

27813.04 -> This is the company behind the Next.js.

27818.47 -> They have many, many services,

27821.39 -> but basically they allow you to connect

27827.43 -> some repositories, Git repositories.

27831.133 -> And it automatically retrieves

27836.3 -> the updates of your repository

27838.09 -> when you push to your branches

27841.51 -> and it deploys on temporary URL.

27845.25 -> You can configure your domain,

27847.73 -> your custom domain, of course, and so on.

27850.22 -> But it's really cool.

27852.88 -> So let's try to change a bit the permissions.

27862.86 -> I need to log in.

27870.562 -> Permissions,

27872.41 -> only select the repositories fullstack React app

27876.42 -> and then save, okay, now, full stack React app is there.

27882.92 -> I click on import.

27885.17 -> Framework preset is Next.js, okay.

27891.07 -> The routes directory,

27892.91 -> unfortunately it's not the route directory,

27899.12 -> but it's the full stack React app.

27902.2 -> If I go to GitHub and I open it,

27910.39 -> you see the application is inside this full stack React app.

27915.52 -> So I copy it,

27918.73 -> so the route directory is full-stack React app.

27923.47 -> Okay.

27925.05 -> And then all the rest is standard.

27927.17 -> So we don't need to modify anything.

27931.81 -> Here we need to define,

27933.08 -> to include the environment variables

27937.02 -> that we included in the .env file.

27942.17 -> So and remember that we have the database URL.

27950.21 -> Okay, defined in the .env file.

27957.444 -> In our case, I use Twitter as authentication provider,

27960.89 -> so the Twitter Client ID and Twitter Client Secret.

27964.59 -> So you need to go here, insert the value and click on add.

27970.13 -> And then the same for this,

27973.17 -> of course, put inside there and then call it values.

27976.94 -> And database URL, blah, blah, blah.

27982.47 -> Okay, deploy.

27988.25 -> So now in the cloud, Vercel downloads the clones,

27994.13 -> the GitHub repository, builds everything

27998.409 -> and assigns a random domain, basically.

28014.52 -> Okay.

28015.353 -> Installing Chakra UI.

28021.41 -> It usually takes a few minutes, really a few minutes,

28026.21 -> like two or three, depending on the size

28028.17 -> of your application, of course.

28035 -> Okay, building.

28037.48 -> But the nice thing is that once you have your repository

28042.34 -> imported in Vercel, when you update your code,

28047.56 -> you save, you create a commit,

28050.42 -> when you push on the branch

28053.27 -> automatically Vercel rebuilds and redeploys everything.

28057.99 -> So this is called continuous integration,

28062.13 -> sorry, continuous delivery.

28070.36 -> Okay, so now we have preview, ship, cool.

28075.97 -> So this is set up.

28078.48 -> Nice.

28079.5 -> Congrats.

28080.67 -> We have also the preview.

28082.36 -> Go to the Dashboard.

28084.565 -> Okay.

28086.41 -> This is the domain assigned to it.

28090.45 -> Here we are.

28091.87 -> We have our application online.

28097 -> Everyone can use it.

28098.45 -> Now, if you try to log in with Twitter,

28100.62 -> this is not going to work

28102.75 -> because you need to go to the Twitter Developer Portal

28113.27 -> Developer Portal and access to the app that you created

28120.5 -> and add this domain, this one, otherwise,

28125.68 -> I mean, it will not work.

28129.82 -> Okay, let me try to do it.

28138.27 -> Callback URLs, no.

28143.04 -> No, the point is that I should create

28145.37 -> a brand new application.

28148.17 -> I'm not able to, I mean, they don't allow us to,

28152.94 -> let me show you, there's nothing particularly important.

28155.98 -> So they allow to define a single callback URL.

28161.96 -> So I created, for instance,

28163.78 -> this Twitter application for highway development.

28170.09 -> So it works on local host.

28173.47 -> I mean, I use the keys from this application

28176.02 -> also to work on local,

28179.11 -> but in order to make it working here

28184.23 -> fullstackReactvercel.app,

28190.59 -> I should create another application

28192.63 -> and add the correct domain.

28195.11 -> So at the moment, I'm able to show you

28198.3 -> also the rest of the application online,

28201.48 -> in fact it doesn't work,

28204.12 -> but with few steps

28205.64 -> you're able to deploy your application online.

28210.78 -> Okay.

28212.395 -> I think that's almost everything.

28214.62 -> It was a huge rush today.

28218.12 -> We've seen many, many things

28220.5 -> and let's see if I forgot something.

28225.016 -> I think not, I think not.

28226.9 -> Okay.

28230.64 -> Very cool.

28231.473 -> So we have seen everything.

28233.74 -> Thanks for attending this live streaming

28237.753 -> and let me know if you have any feedback,

28243.55 -> write to me on Twitter.

28245.35 -> You know that I'm very active on Twitter.

28248.99 -> So this is my handle.

28252.17 -> Okay, send me a DM, a direct message.

28255.58 -> No problem at all.

28258.681 -> And yeah, it was nice.

28264.55 -> That's all, thank you very much, guys.

28266.14 -> See you next time.

28268.02 -> Thank you, bye, bye, bye-bye.

Source: https://www.youtube.com/watch?v=29LwC_6PHac