Introduction and Next.js app

0:00 how it brings the realtime search information directly to you in a proper format along with the sources which it fetch the data from and many other uh features that peripity provide for you and everything we are going to build in this particular video. Let me walk through this demo of our application which we are going to build in this video. If you see we have this landing screen where we have the sidebar with an option like home, discover, library and here you have option to ask or search anything.

0:50 You can even switch from search to research. You also have different model provided by this particular project. Then you can search anything. Let's search about Mr. Beast and then click enter. Here immediately you will get the all the sources where the data is getting for you and this is a realtime data which you will find it over here. Once we get the all the sources with the help of search APIs then it will summarize all the details for you from the different different sources and everything you're going to learn in this video.

1:13 How we bring all these things together. Not only this but we also going to show all the images which we are getting from the internet and the all the list of sources. How cool. At the bottom side you can search further more. Let's search Mr. Beast popular videos and click enter and then you will find it will generate the source for you. First you will see the all the sources where it bringing this data in real time and then it will format your information and display it for you.

2:03 That's how cool it is right and this is what the perplexity do for you. Then you can even go to the library section where you will see all your searches and anytime you can go back to your search from this particular page and boom. Then in the discover section you will find all the latest and top news the top updates in a real time like top tech and science finance and many other things and everything you going to learn the how to integrate that in a step by step in a chapter by chapter.

2:25 I divided this complete video in a small small chapter so you can learn more easily. The assets for this particular uh project is available completely for free. I will put the link in the description and also the source code you will find on the touji.com. With the help of inest we added this AI LLM model uh integration along with the tracking all our APIs and each of our API call and integration with the LLM model we are doing with the help of ingest which provide you this reliable solution to building any AI uh SAS product and SAS application for you.

3:14 Now this inest platform designed to simplify the creation of durable eventdriven workflow without need of managing complex infrastructure. It replaces a traditional Q system state management and scheduling with the streamline approach that enables developer to build a reliable AI ready step function more efficiently as we are using a lot of different AI model and that's the reason we are going to use inest to streamline our flow and avoid any missing API call. So, so guys that also we're going to learn and in the last uh at the end of this tutorial you're going to learn how can we deploy this application in the production on the cloud so that you can uh share this with your friends and family.

4:00 So guys, if you you are new to this channel, don't uh forget to subscribe to our channel. Press notification bell icon so that you'll not miss any update and press like button if really enjoying this video so far. Also if you want to access the source code then go to the tubegury.com join the membership and here you will find all the exclusive source code um courses and you can get access more than 50 plus a AI base and other projects as well.

4:51 So just go ahead join the membership and get advantage of this platform. So guys without doing any further delay let's begin to develop the periplexity.aiic clone application with the help of react neckjs inest and many other text act. Now let's create the nextjs application. So simply go to the nexj.org org where you will find the all the documentation about the NexJS which is official website of the NexJS. Uh it's very easy to create a NexJS application but just wanted to inform you that uh the feature that NexJs provided the most important feature which is the react server component along with the folderbased routing which and also they have the client server rendering as well.

5:38 So it will be easy fast to develop any web application. So simply uh copy this command if you see. So it's just saying npx create next app at latest. So we'll copy this command then open a folder where you want to create a project. Open a terminal at that folder and simply paste the command. So it's jpx create next app at latest. Now at latest will in install the latest version of the next js. So depends on when you are developing this application, you can also add the version number over here.

6:01 Then click enter and then it will ask you the project name. So we'll give the name perplexity AI AI clone. Then would you like to use TypeScript? We'll say no. ESLint no. The Tailwind says yes say yes. Source to no. App router to yes. and turbopac to know. Okay. Now this command will also install the tailwind CSS for us and it will install the tailwind CSS version 4 which is the latest version of the tailwind CSS.

6:48 And if you see our application now is ready. Now simply open a VS code and open a folder which you just created this project. And then once you open this project in VS code you will see on the left hand side some files and folder. Let walk through one by one. The very first folder which is the app folder which contain all our pages route everything which we are going to add it is inside this app folder which contain the global CSS file.

7:12 So whatever CSS applied throughout the application is or can be accessible to any component uh you can put it inside the global CSS file. Then we have the layout.js file which is the root layout of your NexJS application which contain the metadata for SEO. Then you will see this HTML body tag and in that the children are rendering. So all the routes are going to render through this root layout. Then the next is page.js js file which is the default page of our application.

8:02 Now once we run our application you will get to know that how it is going to render. Next we have the node module which contain the whatever the packages we installed that all packages is inside this node module. Obviously we are not going to touch this node module folder at all. Then we have the public folder which contain all the images, fonts which you want to use from your local application. So you can keep it inside the public folder and then directly you can use it.

8:26 You'll get to know once we start developing our application. Then we have the next doconfig.mjs file which contain the next js related configuration. Then we have package lock and package.json JSON which contain the name of your application, the version, the script to run and build your application and here you will find the dependency. Now whatever the library or dependency we are going to install, we'll find under this dependency section along with their version. Currently it has a React 19 version but we are going to update to 18 because many latest library are not yet supported to the React 19 version.

8:50 So make sure to update to 18 and the dev dependency for the tailwind CSS. Here we have post CSS.config.m mgjs file which related to the tailwind CSS. Now we don't have any separate tailwind CSS. Okay. Now it's merged to the global CSS file. So you don't need a separate tailwind CSS. Now whenever you update any version inside your uh dependencies make sure to install this by using this npm install command. So once you run this command so it will install now and update the react version from 19 to 18.

9:38 Okay, that is very important. Now you have two option to open a terminal by going to this terminal new terminal or you can just drag this up and it will open a terminal for you. It's an npm rundev. Okay. So, make sure to enter npm rundev and then it will open the local host on a port 3000. Now, open this inside your browser and then you will see this uh default page is getting rendered. Now, if I go back to our application, go to the app folder and inside the page.js, this is the default uh line of code which is displaying on the screen.

10:26 Now I will remove all of this div and simply we'll add a default div or empty div and inside that we'll add a h2 tag. We'll say subscribe to tubeorg. So guys if you did not subscribe to our channel please please please do subscribe. Once you save this one and made the change you will see without refresh it is rendering on the screen and it just showing the text which we just added to our uh default page.

10:51 So that's how easily you can create the NexJS application and run very first time. Now the next important thing we want to install is telling CSS based UI component library which is a shad CN. Shad CN is quite popular among the developers which help us to develop the UI component much faster. Simply go to the UI.shadcen.com shad cnen.com and then go to the components folder or go to the document folder where you will find this installation step.

11:16 Now select the correct framework. It pro it available for a different framework as well. So currently we'll select the Njs and this is the command to initialize the shad C. If you are not using the tailwind CSS version 4 then you can go to this shaden version or you can use that by mentioning this version as well as we we are using the tailwind CSS version 4 then we'll simply use this command. So go back to your application inside the terminal I will add a new terminal by pressing this plus icon.

11:41 So it will add the new terminal and then we'll execute this shad CN command. Now once you execute it will ask you the base color. So I will select this slate as a base color but you can select anything and then click enter. Once you click enter install it will install the chat scen inside your project and most important thing over here on the left hand side the new folder get added which is a utils.js file and then component.json JSON file which contain the shared CN related components where you will find the tailwind where it actually uh available where to add the CSS related to a tailwind uh classes then you will find this all as well and the different style which style you applied.

12:53 Now inside the global CSS you will see some of the colors get added. See? Okay. Now, anytime if you want to change your primary color of your shad CN theme, you can just go to the global CSS and then you can just change this primary color or secondary color or so on. Now, this OKLC format is newly introduced. Many developers don't know. So, simply go to the site. Okay. So this oklcs.com and then here you can select the color which you want and simply copy this uh code for the color code.

13:17 Okay. And then paste it here. I will show you in a moment. But before that now once you initialize the shad CN let's try to install some basic component. So let's consider that you want to install a button component. So I will go to the button component and here we have this button component. uh CLI. Okay. So whenever you want to use any shared CN component, make sure to install that component. So we'll install this button component.

13:41 Once you install, you will see this new folder called components get created under the uh root directory. And inside that we have UI folder where we have the button.jsx file. Inside this obviously you can make a modification customization to your button. But whenever you want to use button inside your application, simply import this button component from the components UI button. Then add text whatever text you want. Save it. And if I go back to our application, let me refresh.

14:29 So right now, if you see this button is not getting applied, the styling is not getting applied due to uh some styling issue. So after reloading our application, it might work. Sometimes you just need to remove this TWW animate CSS bug because many times this library is not installed automatically with Telwin version. Telwin CSS version 4 is not that much stable yet. But try to return your application or try to remove this one and keep adding back and then it will solve your issue.

14:51 Okay. And now if you see we have this beautiful button component ready to use. So that's how you can use the shad CN components. Now for the our primary default color if you see uh this mockup right this is how the perplexity uh UI will look like here I added some colors as well. So over here um for our primary color I'm going to use this hex code. Right now in order to get this um oklch color format just paste this hex code.

15:16 Okay. And then you'll you can just copy this code format and then go to the global CSS search for the primary color and then replace it and save it. After that if I go back to to our application you will see the primary color of our uh shad scen component is now changed the the one which we want that's how easy you can do it okay but there are other way that you can follow to apply the primary color style as well but this is the easiest way and it does not affect anything anytime if you want to change any color just update the global CSS This when you open the perplexity application we have the sidebar on the left side along with these options and