00:00:02 To get started building our amazing travel agency dashboard application, we'll head over to Vite.dev, the build tool for the modern web.

00:00:12 See, the application you'll build in this video is a dashboard and React excels at dashboards.

00:00:20 so technically here we don't have a need for Next.js.

00:00:23 So in this case, I'll use React and I'll quickly spin it up with Vite for instant service starts and out-of-the-box support for TypeScript and more.

00:00:32 But with that said, if you want to follow along with Angular, Next.js, View, or any other technology you want, you're completely free to do that.

00:00:41 I'll show the setup for the technologies I'm using, but later on when we're implementing the design, if you want to try out some other technologies,

00:00:48 you're free to do that.

00:00:50 Still, in this case, I want to make it work with Vite.

00:00:53 So right here under Getting Started, scroll down to Scaffolding Your First Vite project, we'll use npm and vd add latest.

00:01:01 So I'll copy this command and head over to my IDE.

00:01:05 Throughout this course, I'll be using WebStorm, a super powerful JavaScript and TypeScript IDE that as of recently became completely free for non-commercial use.

00:01:15 Before you had to pay to use all of these great functionalities, but now you can use it for free.

00:01:21 So throughout the video, if you see me use some cool features that pop up and they're maybe not available in your text editor,

00:01:27 well, that must mean that they're built into WebStorm.

00:01:29 So if you want to follow along with that as well, you can download it and start using it there.

00:01:34 Once you're in, feel free to create a new folder already and then jump right into it.

00:01:38 Within it, open up a new terminal and paste the Veed command we just copied.

00:01:43 If you're not already within an empty folder, you'll want to add a travel app right here, which is the name of the application.

00:01:49 So it actually creates a new folder.

00:01:51 But because I already created a new empty folder, I'll just say npm create VeedAddLatest.slash to set up the application in the current repository.

00:02:01 And I'll say why to install the Veed installer.

00:02:03 Now it'll ask us a couple of questions.

00:02:06 I'll just say ignore files and continue.

00:02:08 choose our own framework.

00:02:10 In this case, of course, we're continuing with React.

00:02:12 And it's asking us to choose a variant of a React application.

00:02:16 We have TypeScript, JavaScript, but we also have this new React router, V7.

00:02:23 Yep, that's right.

00:02:25 In this course, not only will you learn how to build your own React dashboard, but you'll learn how to route it using the newest version of React Router.

00:02:34 So press Enter and install the Create React Router installer.

00:02:39 This took just a couple of seconds, and it's asking me whether I want to initialize a new Git repository.

00:02:45 And you know what?

00:02:46 Let's go ahead and do that.

00:02:47 So I'll say yes, initialize it.

00:02:49 Install dependencies with npm.

00:02:51 Yep, we could say yes to that as well.

00:02:53 In a couple of seconds, dependencies will be installed.

00:02:56 And this developer experience is just getting better and better.

00:02:59 I mean, you now have loading bars right within your terminal.

00:03:02 There we go.

00:03:03 Get initialized, dependencies installed, and we are ready to run our application.

00:03:08 If you didn't have a new folder before, you'll have to cd into this travel app you created, but in this case, we're already in.

00:03:15 So I have all of my files right here.

00:03:17 The only thing I have to do is just run npm run dev, which will spin up the application on localhost 5173. So back into the browser,

00:03:27 if you open it, you should be able to see something that looks like this.

00:03:31 You can go ahead and open up this React Router docs.

00:03:35 It's pointing us here because I'm guessing this is something that is new to a lot of people.

00:03:40 They've made some significant changes from v6 to v7, and I want to make sure that you understand exactly how everything works so you can not only make

00:03:49 it work for this application, but every future application you're working on.

00:03:53 We'll dive a bit deeper into this later on.

00:03:55 For now, just keep it open.

00:03:57 Let's take a second to clean up our file and folder structure.

00:04:00 Currently, we have the folder called welcome here, which I will completely delete.

00:04:05 I will also clean up our root home.tsx by simply running RAFCE within it, which will just spin up a new React functional component called home.

00:04:18 If this shortcut didn't work for you, that must mean that you don't have a React plugin installed.

00:04:23 So just search for plugins or extensions and search for modern React snippets, which will allow you to very quickly spin up new React components.

00:04:33 Great.

00:04:34 Let's also head over into the app.css and remove everything besides the import of Tailman CSS.

00:04:42 We'll definitely need that.

00:04:43 Now, since we'll be using Tailwind, we also want to add some Tailwind power-ups.

00:04:48 So, right within our terminal, I'll open up the second one.

00:04:51 I'll call the first one DevEnvironment, or we can call it just Dev, and I'll call the second one Terminal.

00:04:58 So, when we need to install some additional packages, we can do that right here while we know that our development environment is still running.

00:05:06 So let me run npm install clsx as well as tailwind-merge right here and press Enter.

00:05:15 These packages will allow us to use tailwind a bit more responsibly so we don't go ahead and override some styles without knowing it.

00:05:23 And it also allows us to very easily add dynamic styles using tailwind.

00:05:28 This should leave you with a very simple, plain-looking homepage.

00:05:32 But keep in mind that our app is big, and I really do mean it.

00:05:37 Throughout this course, we'll first build the admin dashboard that'll consist of this nice-looking authentication page.

00:05:43 We'll then switch over to building this dashboard, which has a lot of moving pieces, and then we'll continue with all of the other pages as well.

00:05:50 The ability to add trips, see them right here, and even generate AI itineraries.

00:05:57 The dashboard part of the application where you can see the users, where you can create new trips and see them on the dashboard will be released completely

00:06:05 for free on YouTube.

00:06:07 But in case you want to take it a step further and also build a public-facing website that works seamlessly with the dashboard we'll create,

00:06:16 but this time for the users trying to book some trips, not for the admins trying to generate them.

00:06:22 you can access it on jsmastery.pro where you'll be able to watch this entire course lesson by lesson.

00:06:29 And for each lesson, have a lecture summary, a transcript, a branch including only the code for that specific lesson that shows you exactly what has been

00:06:39 implemented up to that point, and even a quick quiz making sure that you have properly adopted all of the knowledge within that specific lesson.

00:06:47 Or if you maybe didn't and you got stuck, you can ask questions directly within that lesson and get immediate help.

00:06:54 Oh, and I almost forgot.

00:06:56 Alongside the public-facing website, we'll also integrate Stripe with your dashboard so that we can process payments and actually allow people to go on

00:07:04 these trips.

00:07:05 So, if that sounds interesting, click the link down in the description.

00:07:09 But with that said, even the content you're watching right now is far more than what you can find in other paid courses.

00:07:16 This admin dashboard you'll develop will be enterprise ready, using the tech that the biggest companies in the industry use.

00:07:23 So I'm super excited to share a bit more about that later on.

00:07:26 But with that said, let's ensure that we have everything we need in order to develop this application.

00:07:31 Everything from this nice looking background on the auth, even to the smallest detail like this logo icon.

00:07:39 I want to make sure that we have everything you need in order to develop this seamlessly and focus on improving your skills rather than searching for different

00:07:47 icons online.

00:07:47 So, for that reason, I prepared all of the assets you need right within this project's video kit.

00:07:53 You can find it in the description and then click over on the assets.

00:07:57 That'll point you over to Google, so you can simply right-click it and download them.

00:08:02 Once they're downloaded, make sure to unzip them, And within it, you'll find the app and the public folder.

00:08:09 The public folder will contain all of the assets that we'll need, such as the icons and the images.

00:08:15 So, let's go ahead and delete the current public folder and just drag and drop this new one right in.

00:08:22 make sure to put it at the root of your directory.

00:08:25 And we'll do the same thing with the app.

00:08:27 We don't really have anything in there, so let's just delete it.

00:08:30 And now I'll drag and drop the app right within it.

00:08:34 And if you check it out, you'll notice that it's still almost the same as we left it before.

00:08:38 It has a home, the root where we have the HTML file, and just one single route right now.

00:08:45 But what I've added are some types that are going to make it easier for us to use TypeScript types in the future, as well as some fonts in which we've

00:08:53 set up the theming of our application so that we don't have to write all of these styles one by one, rather we have them right here.

00:09:00 But don't worry, this contains zero logic.

00:09:03 It just contains some CSS that's going to make it easier for us to style specific aspects of the application.

00:09:08 Now, if you go back and reload, you'll still be able to see the same thing that we had just before.

00:09:12 So with that, we've got the setup out of the way, which allows us to already in the next lesson, dive into the setup of the complete React UI components

00:09:23 library called Syncfusion.

00:09:25 We'll still use Tailwind CSS to style our application, but Syncfusion will provide us with over 90 high-performance, lightweight,

00:09:33 modular responsive components that are perfect for building dashboards.

00:09:38 And Syncfusion isn't really like Material UI.

00:09:41 They're used by some of the biggest companies in the world, such as Visa, Apple, Disney, McDonald's, Netflix, Starbucks,

00:09:49 and IBM.

00:09:50 Do I have to go any further?

00:09:52 Hopefully you're excited, because in the next lesson, we'll set it all up.