0:00 All right, so in this lecture, we're gonna go ahead 0:02 and start off by building our 0:04 stories component, which will essentially be housing our user 0:08 stories where they can upload a temporary image. 0:12 So let's go ahead and implement this. 0:14 I wanna create a dedicated component for this to keep our JSX out of 0:18 our main app directory. So inside of components, let's go ahead 0:21 and actually create a new folder for dashboard, because this will 0:25 represent the dashboard on the main page. 0:28 And in here, we'll go ahead and create a new stories.tsx component. 0:32 Now, as I mentioned before, later on, we're gonna connect this up to the back 0:35 end 0:36 so that we can actually create our own stories and update this 0:39 data, of course, in the database. But for now, we're, we're gonna go fill 0:43 this out with dummy data so that we can get a feel for how things 0:46 are gonna look. 0:47 A part of this is to define our own interfaces so that we can have some 0:51 type safety. Later on, we're actually gonna use tRPC to 0:55 connect our Next.js UI to our back end, and we're gonna 0:59 maintain the schema for these types, like in this case, a story, 1:03 on the back end. And so these types will be shared between 1:06 the front end and the 1:07 back end so we don't have to duplicate them. 1:09 For now, I wanna create this, the interfaces directly here on the client 1:13 side 1:13 so we can have a sense for how things are gonna look. 1:15 Later on, we will migrate this to the back end with 1:18 tRPC and make 1:19 sure we only have a single type definition for both the front end and back 1:23 end. So let's go ahead and start off by defining an interface for 1:27 our story that we're going to have.
The rest of the transcript is for members.
Sign in 