DEV Community

Voke
Voke

Posted on

Building in Public: CV Analyzer - ACT 1 · Scene 2: Clearing the Noise

#buildinginpublic #react #webdev #devjourney

Click here for Act 1 · Scene 1

Table of Contents

Overview

Before adding features, routes, or AI logic, I needed one thing:

A quiet starting point.

The default Vite template is great for demos, but for an actual product, it’s just noise. Logos, counters, and styles, all of which are not needed in this app.

So this scene is about wiping the slate clean. Got it? wiping the slate clean. Somebody hand me a board wiper.

Cleaning up the default template

By default, App.tsx comes with logos and example JSX meant to show Vite + React working.

Yeah! yeah! It works, but we won't be needing it.

I opened src/App.tsx and removed:

  • the demo state
  • the Vite + React logos
  • the example markup
  • the default styles tied to that demo

The goal wasn’t to refactor anything, but to get it blank so I could put anything I want there.

After stripping the template down, App.tsx was reduced to the bare minimum:

function App() {
  return <></>;
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Reloading the app gave me a blank page.

Image below:

Putting something back: voke is going in…

A completely blank screen is expected, but I wanted a visible confirmation that:

  • The app is alive
  • Hot reload is working
  • And I am now in control of what shows up.

So I added a simple line:

function App() {
  return (
    <>
      <h2>Voke is going in...</h2>
    </>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Image below:

Nothing special.
Just a marker that says: “Yeah, this is mine now.”

Why the text looked centered (and why I fixed it)

When that text showed up, it was centered on the page. As you can see in the image above.

That wasn’t coming from React; it was coming from the default CSS Vite ships with.

Those styles are great for demos, but they silently influence layout in ways you don’t want once you start designing real UI.

So I went into index.css and App.css and commented out the default styles.

I want layout decisions to be:

  • explicit
  • intentional
  • owned by the app, not the template

Once the styles were cleared, the text appeared at the top.

Image below:

Much better, if you asked me.

Why this scene matters

This isn’t just about deleting boilerplate.

It’s about:

  • eliminating hidden behavior
  • starting from a neutral baseline

When this app later deals with:

  • loading states
  • AI responses
  • error screens
  • multi-step flows

…I don’t want to be fighting leftover demo styles or layout issues that I forgot to deal with earlier.

Let’s move on to the Next Act.

We are in the Building…
Building in Progress…

Top comments (0)