Build an Event Launch Page: Next.js 13, React, TypeScript, Tailwind CSS

hey everyone my name is vishwas and in this video we will build an event launch page using nextges App router typescript and table in CSS I am part of the team at builder.io a company some of you might be aware of we are getting ready for an AI launch event and the event registration experience we've built is one of the best I've seen in a really long time it has a grid pattern background a rotating icon animation an animated countdown timer and a brand color that continuously updates based on the framework or technology in view but the Highlight you can drag elements on the screen rearranging the user interface each time you make a change the corresponding layout code Auto generates in the code block below enter your email to claim your ticket customize it and share it on social media for a chance to win some exclusive Builder swag pause the video to visit velocity.builder.io claim and share your ticket on social media I promise you it's a quick 30 second process the entire site is built with quick which is a fantastic framework to work with however knowing that many of you on this channel are react and nexjs enthusiasts I thought it would be helpful to recreate this in next.js we will use Nexus app router typescript and Tailwind CSS this tutorial is just part one of building the event launch page I will have some questions for you at the end of this video about next shares and future content on the channel so please share your thoughts in the comment section the best way to learn is by doing so if your editor is ready let's dive in in vs code in the terminal I have navigated to a folder called Nexus event launch here run the command nbx create next app followed by a DOT this will create a new Nexus app within the same directory opt for typescript eslint Tailwind The Source folder app router and no customization of the default import Alias the command will take a few seconds to scaffold the project once done run npm run Dev to Kickstart the dev server and head to localhost Port 3000 to view the application now let's begin by simplifying the starter project in tailwind.config.ts modify extend to be an empty object next in the globals.css file retain the Tailwind inclusion and replace the remaining content with styles for the body tag we will reset padding margin and set the font color to white in layout.tsx update the title to Builder dot IO velocity and the description to AI launch event lastly in page dot TSX replace all code with just a main tag now our app should display a blank white background let's proceed revisiting velocity.builder.io the first thing you'll notice is the background it seems simple but consists of five distinct elements a black colored shade a grid of tiny squares a gradient that lightens at the top and darkens radially a subtle background color that shifts with the framework or technology and on page load a black overlay that fits revealing the content we will recreate each element step by step first up the square grid we will use a few assets that are hosted on Builders CDN as it simplifies the whole process of working with assets we will store all our asset URLs in an asset utils file inside the source folder create a new folder named utils within this folder create an asset utils.ts file here I will paste the list of assets we will be using starting with the square asset for the grid you can see it's a simple black box with a transparent border on the right and to the bottom back in page.tsx within the main tag insert a div tag this div tag should span the entire screen so we will use a fixed position with in set 0. these are Tailwind CSS classes we will also add an opacity 30 to tone down the grid next we will specify a background image and size using the style attribute as Tailwind doesn't offer specific classes for this it's a background image is a URL and this is going to be equal to assets Dot Square make sure to import assets from utils slash asset utils file the background size we restrict to 30 pixels we can also change this to a self-closing div tag save the file and you will see a grid set against a white backdrop next we will layer in the gradient using another asset URL called gradient it's an image where we have transparency at the top becoming opaque really outward in page.tsx at the top import image from next slash image above the previously added div tag invoke the image component set its width height roll is equal to presentation for visual purposes an ALT attribute Tailwind CSS classes to ensure it spans the entire screen so fixed in set 0 with screen height screen object cover and finally the source this is going to be equal to assets dot gradient when adding The Source XCS might flag an error about the hostname configuration to resolve this open next Dot config.js and add a new config for images specifying the domain as CDN dot Builder dot IO save the file and restart the browser if you have to if you encounter an error about broken svgs add another line to the image config to allow svgs dangerously allow SVG set to true save again refresh the browser and you should see the grid with a gradient that seems to emanate light from the top fading out as it descends our next task is to introduce a background color visible within the grid lines this requires a bit more coding let's begin by creating another utility file named framework utils dot TS here we will Define a new array of Frameworks and other Technologies like Chrome Safari Etc specifying as const is important for typescript next export a type named framework representing one of the array elements so type off Frameworks of number over framework and you can see the possible values now we will cycle through this array every two seconds updating the background color based on the framework's theme color in Pizza TSX import the framework type and array also import use State and use effect to track the current framework in the cycle and set an interval to rotate through the Frameworks within the home component invoke use state current framework Set current framework and the initial value is the first framework in the array which is react when you save the file nexgs will complain that the component uses State and should be a client component I am assuming you know the difference between client and server components if you don't let me know in the comment section if a video on the same topic would be helpful with the fix for this is to Simply include the use client directive at the top next when the home component invoke use effect we pass in a callback function and an empty dependency array within the Callback start with an array index of 0. next Define a function named rotate Frameworks set the initial value to the Frameworks of current index and in the next line increment the current index so current index is equal to current index plus 1 modulus Frameworks dot Len we do have a type error so after you state specify the type as framework call set interval passing in rotate Frameworks with a duration of two seconds lastly return a function to clear the interval when the component unmounts the const interval ID is equal to set interval and we return a function we recall clear interval passing in interval ID with the Frameworks changing every two seconds let's now add a div tag whose background color updates based on the current framework again we will use a fixed position with insert 0 a transition for the color property a delay a duration and an opacity but the question is how do we conditionally apply a class based on the current framework we will need a utility class let's create a Tailwind utility function to conditionally apply and merge class names in a new terminal within the same project folder run the command npm install clsx and Tailwind hyphen merge these packages facilitate working with conditional class names emerging Kelvin classes seamlessly in the details folder create a file named Tailwind utils dot TS here import type class value comma from clsx and import TW merge from Tailwind merge export a function called CN that accepts a list of classes of type class value array and returns a single string for the function body we return Tailwind merge passing in clsx passing in the list of classes really simple now in page.tsx let's update the div tag at the top import CN from Tailwind utils and the class name now is a function we call CN passing in list of class names as is then as a second argument we conditionally specify the classes to apply based on the current framework I will paste the code to save us some time for each framework we have a corresponding Tailwind CSS background class save the file and you will observe the color of the grid lines shifting every two seconds as we cycle through the framework array to enhance this effect change the background color from white to black in globals.css file simply adjust the background color of the body to one one one save the file and you will see a black backdrop with a more subdued grid a UI is gradually coming together for our final visual touch let's incorporate a reveal effect in page.tsx add a new state variable named show background with an initial value of false meaning all the UI we have created will initially be hidden then add a use effect that only runs on Mount here set show background to true Now using the show background State we will adjust the opacity of a black layer div element from 100 to 0. so all the way at the bottom insert a div tag for the class name use the CN utility function set the background color to Black use a fixed position and stretch it across the screen with inset 0. add a transition property for opacity and a duration of 1500 milliseconds as a second argument we will use conditional class names if you should not show the background make it opaque with opacity 100. if we should show the background make it transparent with opacity 0. if we save the file and refresh the browser we should start with a black background and then reveal the different layers with the background in place let's shift our attention to the overlay content the text figma to framework will never be the same the subtitle and the countdown timer let's begin by updating the font from enter to Poppins which is the font on the live side in layout.tsx remove the inter font then in page.tsx import Poppins from next slash font slash Google and for pop-ins we need to specify the font weight which in our case is 700. so read 700 and we also need to specify subset which is an array and we specify Latin for our next step let's start with the heading without any framework or color transitions we begin with a div tag to Center the content on the page and set a maximum width so max width 7 Excel some top margin and horizontally Center the content inside this div we create another div to stack child elements vertically and Center them horizontally so class name is equal to flex column items Center and we also ensure the stacking context is correct placing the content above other layers so relative position with the Z index 10. inside this div tag we add an H1 tag for our main heading the text should be large so 7xl have a Max width of 3XL centered and have a snug line height we also add a bottom margin to separate it from the next element which we will add shortly we will also apply the newly added Poppins font since we are working with back ticks we can use dollar curly braces Poppins dot class name within the heading we start with the figma logo followed by the text so for the logo we use the image component alt is equal to figma logo class name inline block some margin to the right and negative margin to the top we're going to set source to assets Dot figma which is present in our asset utils file we set width and height to 50. the image is followed by the text figma to framework will never be the same again we will animate the color of the word never so we wrap it in a span tag after saving the file you should see the heading displayed the font is a little too large let's change it to 5xl all right there are two tasks remaining for this H1 tag first to cycle through the Frameworks and second to animate the text color of the word never let's tackle the framework rotation first within the source folder create a new folder called components inside this folder create a file called framework rotation.tsx within the file Define a react component and Export it for the jsx we will carefully apply Tailwind classes to ensure the framework logos are positioned correctly so we return a div tag and specify its class name we set both red and height to 80 pixels add a horizontal margin and a negative top margin we align it to the middle and make it inline Flex finally we set its position to relative now let's implement the actual framework rotation logic start by importing the necessary components and utilities at the top the image component from next image the array of assets from acid utils the framework type and array of Frameworks from framework utils and the class name utility function for conditionally applying classes from Tailwind utils next we specify a current framework prop for the component of type framework which refers to the current framework being cycled through in page.tsx file inside the div tag we iterate over the array of Frameworks using Frameworks dot map and for each framework we render its logo as an image we set the key to the framework's name the source to the corresponding asset and specify dimensions and classes for the rotation animation width and height of 80. and for class name we use the CN function as a first argument with full height full object contain object Center absolute position top 0 left 0 transition all with a duration of 300 milliseconds and for the second argument if current framework is equal to the framework in rotation we set its opacity to 100 without any transformation however if the framework in the array appears before the current framework we set opacity to zero and a negative translate in the y direction the condition is opposite we set opacity to zero with a positive translation in the y direction we do have an error as I have misspelled the prop name now I will tell you the logic for this animation or transition can be refined further so please feel free to experiment back in page.dsx replace the word framework with the component framework rotation make sure to import it at the top from components slash framework rotation and specify the current framework prop which is equal to the current framework State variable Within page.tsx after saving the file you should see the framework rotating animation in action each framework having a theme color reflected in the background now let's update the classes for the word never to match the font color so class name is equal to the function CN and apply a transition to the colors property with a 200 millisecond duration so transition hyphen colors duration hyphen 200. within conditionally apply the text color based on the current framework so as the second argument we have an object and we copy paste the code from above for the background color and change all occurrences of BG to text after saving the file you will see the text color change in sync with the Frameworks theme color The Next Step involves adding simple text with logos for Builder and figma it is straightforward so I will paste the code and explain it after the H1 tag we paste a paragraph tag the paragraph tag has a bottom margin and inside we have a span tag with the text join us for an AI launch event by followed by two images the Builder logo and the figma logo both logos have specified dimensions and spacing you can see the paragraph on the right hand side being displayed as expected nothing too complex I hope next we'll add a simple claim ticket button so after the paragraph tag a div tag with a bottom margin and a button inside with the text claim ticket for the button classes we use the CN utility function as the buttons background color should change based on the current framework for the static classes let's set black color padding in the horizontal and vertical directions rounded Corners small text semi bolt font and we add transition for colors with a duration of 200 milliseconds we then copy paste the background color logic from above so the entire object copy and as the second argument to the class name function paste it after saving you will see a button whose background color matches the current framework theme for our final step we will implement the countdown timer this involves several components so we will address them sequentially first let's create a utility function to calculate the time remaining until the event so in the utils folder create a new file named countdown utils.ts Define a function named calculate time to event inside this function specify the event date as October 12 2023 at 9 00 am Pacific time you can make this event date more flexible by accepting it as a parameter once we have the event date get hold of the current date and compute the time difference between the event date and the current date so time remaining is equal to even date dot get time minus current date dot get time using this difference extract the number of days hours minutes and seconds this is a standard math formula so I'm going to paste the code we have our days hours minutes and seconds which we're going to return from the function as an object now let's create a component that uses this function in the components folder create a new file named countdowntimer.tsx here start with the necessary Imports we require calculate time to event function which we just defined the framework type since the component needs to know the current framework in rotation and use State as well as use effect hooks for an interval that updates every second next let's define the component the component name is countdown timer and this receives the current framework in rotation as a prop the current framework of type framework inside the component we maintain a state variable to continuously track the time left for the event let's call that countdown set countdown and the initial value we pass in the calculate time to event function make sure to call the function we then Define an effect that updates the countdown state every second empty dependency array const interval ID is equal to set interval call set countdown passing in calculate time to event and the interval is every second we also return a function to clear the interval for the jsx let's define a div tag that Returns the days hours minutes and seconds we will add Flex class a gap of 10 pixels and center the text however to display each of the units we will create another component before that let's quickly fix calculate time to event we should start with a lowercase now in the components folder create a file named time unit dot TSX start by importing the CN utility function as we will be adding conditional class names Define a component named time unit that accepts three props a label like days hours minutes or seconds a value which is the actual number and the current framework to adjust the label color based on the Frameworks theme label is of type string value of type number and current framework of type framework for the jsx we display the label below the value so start with a div tag with flex and flex column classes then add two div tags the first one displays the value with a white text color a font size of 3XL and a semi-bold font weight the second div uses the class name function to conditionally set the font color based on the current framework so class name CN the static classes text 8 pixels font medium the second argument we've already seen before so let me paste the code we have the text color dependent on the current framework this completes our time unit component however we would like to animate the value so let's create another component for that in the components folder create a new file named number rotation dot TSX here I'm going to paste the entire component code as I am pretty sure there are better ways to handle this animation that I can't think all the component receives the countdown value as a prop called number we generate an array of length 60 and use the array element value to compare with the passed in countdown value this determines if the value should exit to the bottom a reset to the top when transitioning from 0 to 59. we have the opacity and translation classes similar to the framework we've also applied several Tailwind classes to ensure the number renders in the same position while animating we can now import this component in time unit component and invoke it with value as number prop now let's include time unit in the countdown timer component with the right props import time unit from time unit and in the jsx invoke time unit component passing in label as days value is equal to countdown dot days and current framework is equal to current framework we're going to duplicate this three times and change these two r's minute and seconds finally integrate countdown timer in page.tsx countdown timer make sure to import it at the top we pass in the current framework Pro if we save the file our event launch page should work as expected we have the countdown timer taking every second and the framework rotating every two seconds the background also changes in sync with the framework theme all right this wraps up part one of building velocity dot Builder dot IO now I have two questions for you first do you enjoy content like this video where you build something from scratch and second would you be interested in an updated series on Nexus 13. there were numerous requests for react native but the viewership just hasn't matched the demand so if this video gets 5 000 likes that's a really good sign for me to move next year's series to the top of my priority list please share your answers to both questions in the comment section thank you for watching and I will see you in the next video

Channel: Codevolution

Views: 25,859

Keywords: Build an Event Launch Page: Next.js 13, Next.js, Next.js 13, React, TypeScript, Tailwind CSS, Codevolution Next.js, Codevolution Next.js 13, Project, Next.js 13 Project, React Project, React Landing Page, Next.js 13 Landing Page

Id: VPpw6_S44J0

Length: 39min 34sec (2374 seconds)

Published: Mon Sep 25 2023