At this point, you should have installed everything necessary to start the development of this project! In this section, we won’t be creating any new content. We will simply set up our Integrated Development Environment (VS Code in this case) so that it’s ready for us to start creating our full-stack application.

Overview:

• Initialize our React Project using Vite (a JavaScript build tool)
• Install Tailwind CSS into our project
• Adding a custom font
• Adding custom colors

<aside> 🚧

Are you familiar with Github? Do you know how to create branches so that your team members can work in parallel? If not, we have some resources to get you started on understanding Github and the work flow. All Resources

It’s imperative that your team understands how to handle merge conflicts and create pull requests. Without this knowledge, working on a project seamlessly together will prove challenging.

Once the project is setup and everyone has access to it, that is when you guys should begin working in separate branches. Don’t make the mistake of everyone creating their own independent project and trying to copy/paste code into each other’s IDEs to combine it.

</aside>

File Directory Setup

Before we get into creating our first project, we want to make sure that we know where we’re building it.

1. Open Visual Studio Code
2. Click on “File” in the top left corner and click on “Open Folder”
3. Navigate to where you want to create your folder. Right-click in the file explorer to create a new folder to hold your project directory. *You can skip this step if you already have a folder dedicated to your projects.

   1. Do note that this folder will be the parent folder and will not be the folder of the actual project files. This means that this folder should be titled something generic such as “Projects” or even simply choose your Desktop.

   2. When we run the commands in the future steps, we will be creating a new folder dedicated to the project itself within the folder we are currently in.

      

      Screenshot of adding a folder to Desktop and selecting it.

   3. At this point, your VS Code should be in the working directory of the folder you have recently or previously created.

Vite

1. Go to your web browser and search up Vite (or click the embedded link)

   1. This will link you to the documentation page of Vite.
   2. *An essential skill of a programmer is to become comfortable with reading these pages. *

2. Scroll down to “Scaffolding Your First Vite Project”

   1. You can follow any of the installation methods listed, but we recommend running this single line in your VS Code terminal.

3. In your terminal, run the following command: npm create vite@latest

   1. To open your terminal, you can find the button in the top bar of VS Code as shown below. You could also use the shortcut `Ctrl+Shift+`` where the last symbol is “back-tick” which can be found below the Escape key.

      

4. Follow the instructions for the installation

   1. You will be prompted to install a package, name your project (whatever you want), and choose what framework you will be using. Below is an example of what this process would look like.

      PS C:\\Users\\diamo> npm create vite@latest
      Need to install the following packages:
      [email protected]
      Ok to proceed? (y) y
      ? Project name: » HackUTD Guided Project
      ? Package name: » hackutd-guided-project (Press enter)
      ? Select a framework: » - Use arrow-keys. Return to submit.
          Vanilla
          Vue
      >   React
          Preact
          Lit
          Svelte
          Solid
          Qwik
          Angular
          Others
      ? Select a variant: » - Use arrow-keys. Return to submit.
          TypeScript
          TypeScript + SWC
      >   JavaScript
          JavaScript + SWC
          Remix ↗