DEV Community

Voke
Voke

Posted on

ACT 1 · Scene 1: Laying the Groundwork

#devjourney #webdev #buildinpublic #react

Table of Contents

Overview

Before any AI magic or hellYeah! moments, I had to do the boring but necessary part,
Set up a frontend that won’t fight me later, you know, like John Wick.

This scene is about foundations. Getting them right. right!

If the base is shaky, everything on top suffers, especially when you are dealing with async data, AI responses, and UX states.

The setup

I scaffolded the frontend using Vite + React + TypeScript.

Did I hear you ask Why?

Vite: reason being for its fast feedback loop

React: predictable UI composition.

TypeScript: forces clarity early (this will matter a lot once AI responses enter the app).

I initialized the project like this:

npm create vite@latest frontend
Enter fullscreen mode Exit fullscreen mode

Selected:

  • React as the framework.

  • TypeScript as the variant

  • Skipped experimental extras

Once the installation finished and the dev server spun up, I hit the browser and saw the default Vite screen.

Installing the essentials: well, not every one of 'em

Next, I added a few dependencies I know I will need early:

npm install @tanstack/react-query
npm install react-router-dom
npm install sass
Enter fullscreen mode Exit fullscreen mode

Why them?

Easy peasy:

React Query: This is app driven and not static (AI calls, loading states, retries, errors).
React Router: This will help us navigate around our app.
Sass: This is my personal preference for styling. I love its structure.

A small but intentional tweak: changing the port

By default, Vite runs on port 5173.

It works, but I standardized the dev server to run on port 3000 instead.

Why?
Zed, I am just kidding…😊

I made that change because once the backend enters the picture, consistency matters.
I like my frontend on 3000, backend on something else. Just a Simple mental model.

So I updated vite.config.ts:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
  },
});
Enter fullscreen mode Exit fullscreen mode

Now the app runs here:

http://localhost:3000
Enter fullscreen mode Exit fullscreen mode

Why this scene matters

As stated in the title, this is the setup. We have just setup the foundation in which we are going to be building on, well part of the foundation. And this part is extremely necessary. No codes, no AI, no scoring. And that is done intentionally.

Let’s move on to the Next Scene.

We are in the Building…
Building in Progress…

Top comments (0)