Refining the Story Page
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the Real-Time Collaborative Apps with Next.js and Supabase course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Real-Time Collaborative Apps with Next.js and Supabase, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
[00:00 - 00:11] Alright, so we built some components with our project. So we have back button and start sharing, stop sharing and then we have this model.
[00:12 - 00:24] Yes, we will get into the colors soon. So one thing left to do is this story components where you show all the list of stories and where you can click a button and add a new story.
[00:25 - 00:36] So let's start from removing coming soon. We don't need that anymore and we are going to uncomment this part.
[00:37 - 00:49] Let's create a file called story and let's do the same thing use client. So let's see.
[00:50 - 00:57] Initially we need something called service story. So when first time use a load we need to have a story from the server.
[00:58 - 01:08] And now we are going to return something. Of course we need to also import the component.
[01:09 - 01:14] And yes, we are showing it here. And first we need to have some stories here.
[01:15 - 01:24] So we can maintain a local state, go stories. And we can have a type.
[01:25 - 01:31] Here we can create a type. Or we will accept title.
[01:32 - 01:44] We just string and story match, story image and then just ID. We need import use state.
[01:45 - 02:02] So now I'm going to bring in my HTML bot course image you can import from next image from next image. And we have your simple HTML template to run.
[02:03 - 02:12] So of course right now it won't run anything because we don't have stories. So for now you can for example, I'll sit here.
[02:13 - 02:23] When you use an image you need to add the next config. Well, I think I need to restart.
[02:24 - 02:29] When you update the next year's configurations. Let's see.
[02:30 - 02:40] Yes, we have this image and title and delete the story. So if we expect when I click on delete it is saying delete test.
[02:41 - 02:58] So of course now when I add more and more things to this area, for example, if I add another object to this area say test two and it's the second one. So when we implement the servers server bot, whenever we add a new story it will be here.
[02:59 - 03:15] So so far we built the home page and login pages and creating the story pages now. And one thing is left we need to have like icon or something to add the story.
[03:16 - 03:30] For that we need a new story component. Let's create a new story component and I will call it same way new story file.
[03:31 - 03:46] It's also a client component. I'm accepting one prop called use ID and here I have a more HTML here.
[03:47 - 04:01] And image of course we need to import image from next image and on click for now I will console look clicked. New story we need to import it here.
[04:02 - 04:10] I'm using short code from VS code but you can also manually import this. So I'm store importing story new story from a new story file.
[04:11 - 04:16] Now if I go back, yeah, there's new story. This image looks like this.
[04:17 - 04:22] Now if I go back to the app and if I refresh. Yeah, looks like this.
[04:23 - 04:30] In the next lesson we are going to talk about the database and how to integrate everything make it functional with the database.