Creating a Modern UI With Tailwind CSS and Next.js

The story page takes center stage as our primary focus for development. In this lesson, our primary objective is to construct the user interface (UI) for the story page. Users will have the ability to seamlessly add or remove stories within this dynamic environment. Furthermore, the page boasts real-time sharing functionality, although we will delve into the intricacies of its logic at a later stage.

Building an Interactive Storyboard Application with Next.js

This article aims to demonstrate how to create an application where users can add and share stories on a storyboard platform. The platform will be built using Next.js, a lightweight framework for static and server-rendered React applications. This tutorial will guide through the process of creating a storyboard page, authenticating users, building an interactive share component, and finally, constructing a functional 'New Story' feature. 

To create the storyboard page, navigate to the 'app' folder and create a new folder named 'Storyboard'. Within this folder, create a new page called 'index.tsx'. You can also rename it to 'Storyboard.tsx' if you prefer. The page can be initialized by exporting a new function that returns a basic HTML element. With this, the storyboard page is set up. 

---
title: Building The Storypage With Tailwind and Next.js
privateVideoUrl: https://stream.mux.com/T7IHVd01H7qa1p3QV9uH02rSCfB1HhAr00ToMa300HBDG02w.m3u8
isPublicLesson: true
---

# Creating a Modern UI With Tailwind CSS and Next.js

The story page takes center stage as our primary focus for development. In this lesson, our primary objective is to construct the user interface (UI) for the story page. Users will have the ability to seamlessly add or remove stories within this dynamic environment. Furthermore, the page boasts real-time sharing functionality, although we will delve into the intricacies of its logic at a later stage.

# Building an Interactive Storyboard Application with Next.js

## Introduction

This article aims to demonstrate how to create an application where users can add and share stories on a storyboard platform. The platform will be built using Next.js, a lightweight framework for static and server-rendered React applications. This tutorial will guide through the process of creating a storyboard page, authenticating users, building an interactive share component, and finally, constructing a functional 'New Story' feature. 

## Creating the Storyboard Page

To create the storyboard page, navigate to the 'app' folder and create a new folder named 'Storyboard'. Within this folder, create a new page called 'index.tsx'. You can also rename it to 'Storyboard.tsx' if you prefer. The page can be initialized by exporting a new function that returns a basic HTML element. With this, the storyboard page is set up. 

Malith

Building The Storypage With Tailwind and Next.js

Alright, you already created the home page and now we have this button start

So when you click on this button it goes to Storyboard.

Right now it's empty page and the page is not found.

So basically what we want to do is create a page where users can add stories

with others then they can also add stories.

So in order to do that with Nextures you go inside the app folder and create a

called Storyboard and inside here now you need a page.

It's X5 and first thing is you need to export a new function.

You can call it index or you can call it Storyboard and let's return something

And now if you go back to the browser now you see our Storyboard page.

And here what we want to do first is to check if user logged in and if user not

we need to redirect them back to the login page.

So as you already seen in the main page you can use the same super best method

So I'm going to copy this part and I'm going to import this and import this and

users and now what we can do we can check if user, let's say if not user then

Storydirect is a function that you get with Next Navigation.

So I'm logged in and I'm still here so if I go to a private window go to the

So same and I'm going to homepage and there's login but in our other case we

email and say hey I log out button but here we have a login button and you can

So first thing is we want to have a header.

So it looks like this but now we have a back button only thing this one is

a back button and what we need is we need a few more things here and right now

have these components so you can have, can comment this and come in soon and

is the body and what we need to do is we need to build all these different

One is to show user if they are sharing or not with another user or if it's not

we need to show a modal and let them enter an email address and then start

So first thing you need to do, you are in the storyboard page and you can start

a file called share.tsx and here let's create a simple function.

This will return a button, start sharing.

So let's uncomment this and we need to import it and right now it's not

So on the right side we have a start sharing button.

I'm going to add simple styling as a button here using tailwind CSS.

So I also want to show an icon of an eye.

So if it's sharing so a GIF that linking eyes so it looks much nicer.

So I'm going to do it so I'm going to wrap this inside a span and here I can

And so you can use image from my next JS image.

I need to import this image component from next JS.

And now if you look back there is a missing image so I'm going to find that

When you have an image in next JS you need to put it in the public folder.

So I'm going to create a public folder here.

And I'm going to also create folder called images.

Yes, if I give a refresh, there's the image.

So just to add a little bit of spacing here, class name here, ml means margin

there should be, this should be perfect now.

So I want to show this image only when you start sharing.

So I'm going to create a user, create a locally state called e-sharing.

And now I can, what I can do from here, I can check the image if user sharing.

I can do like this and move everything inside.

We get this error because our component is a server component by default.

We need to change it to client component.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript