Building The Homepage With Tailwind and Next.js

Table of Contents

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.

This video is available to students only
Unlock This Course

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.

Thumbnail for the \newline course Real-Time Collaborative Apps with Next.js and Supabase
  • [00:00 - 00:09] Okay, now you have the project up and running and now we are going to update our homepage. So there are a lot of boilerplate stuff going on here.

    [00:10 - 00:26] So I'm going to change this boilerplate code to much simple homepage and you can download this example code base from your course description. If you go to the first page of the course or top of the course, you will see the example code and you can simply copy paste.

    [00:27 - 00:35] So first I will update the homepage. So basically homepage is located in the app folder and page.dsx.

    [00:36 - 00:41] So there are a lot of stuff going on. So I'm going to update it with my code.

    [00:42 - 00:47] And of course now I need some of these components. So I'm going to clean up a little bit the component folder.

    [00:48 - 01:06] So basically if you go inside the component, there are some things here. So I will still keep the component super base logo component and I'm going to delete, I'm going to change next logo to logo and I'm going to keep another one.

    [01:07 - 01:22] This one step I'm going to change it to log out button. And I'm going to delete the rest of the components.

    [01:23 - 01:27] There's two things missing. Okay.

    [01:28 - 01:45] So I'm going to update the logo to this code base and log out button to this. It just user will redirect to author sign out page.

    [01:46 - 01:54] Super base logo is just the same. So if I go to the page now and now all of these are fixed.

    [01:55 - 02:08] Now one thing we need is this out helper next to us. So what I'm going to do is go to a terminal and do yarn add super base out helper next to us.

    [02:09 - 02:17] Now if I go back to the page, there is no errors now. Let's try to run our project if it gives any errors.

    [02:18 - 02:36] And now so our home page is now look like this. So if you go to the page, you have this log out button here just simply saying log out goes here and logo is something an SVG created it's called the project story board.

    [02:37 - 02:45] I store it and the rest is following start creating button. So basically it will redirect to slash storyboard page.

    [02:46 - 02:57] Otherwise it will redirect to the login page. So what I'm doing here with the user super base has this function that you can get the current user using the cookie.

    [02:58 - 03:06] And if the current use is available, then we can check we can do whatever we like. We have the home page and when you click, it will go to storyboard.

    [03:07 - 03:12] Right now this route is empty. So we need to create this route in our next lesson.