In this episode, we're kicking things off by setting up the two separate projects we'll need for our app: the Laravel API and the Vite-powered Vue client.
First, we create a new directory to keep things organized, and inside that, we generate a fresh Laravel project (without any starter kit, since we'll add Laravel Fortify for authentication later) and set it up with MySQL. We run the migrations, make sure the database is working, and check that we can access the default Laravel welcome page in the browser—basically ensuring the backend is ready to go.
Next, we jump over to the frontend. We use the Vite scaffolding tools (with npm) to spin up a new Vue project, call it the client, and configure it with Vue Router but skip extras like TypeScript, state management, or linting for now. Once it's set up and running, we again check in the browser that the project loads fine.
Finally, we fire up both projects in our code editor (PhpStorm), place them side by side, and make sure everything's good to go for development. So by the end of this episode, you’ll have both your backend API and your frontend client set up, running, and ready for us to start building cool stuff.