Did you read part 1 yet? 👀 …..Okay, cool.

Let’s dive in!

Building NovaVR was a true challenge. I wanted to explore using frameworks while getting more familiar with Tailwind CSS, so this was the perfect opportunity to practice. Another big reason I wanted to build this live was for the animations. The changing landscape of design is leaning heavily into micro-interactions, and I need to stay in the loop. My chosen tech stack?
This was my first time building with Vite, and what a learning experience that was.

Setting Up the Project

Coding starts before you even write a single line. You need to map out the infrastructure and plan your logic. The first thing I did was sketch out my layout. Normally, I’d break everything into separate components—the navbar, product sections, arrows—but since this was a single landing page with minimal interactivity, I kept everything in one component. If I ever decide to expand NovaVR into a full-fledged product line or an e-commerce site, I’ll have to refactor this, but for now, it worked. My main goal was to practice design and animations.

Once I had my structure planned out, I created my repository and got to work. First, I installed my dependencies—Tailwind, Vite, and PostCSS. Everything was running smoothly. I built out my navbar, added my elements to the page, imported my graphics—it was all going well. Then, I made a seemingly simple change.

I flipped the direction of one of the arrows. And I broke everything.

The PostCSS and Vite Dependency Nightmare

At first, I didn’t know what happened. The styles disappeared, the layout was messed up, and no matter what I did, nothing worked. I spent an entire day trying to get my styles back. I banged my head against the wall, checking my CSS, reviewing the components, and testing different tweaks, but nothing brought back the wonderful styles I had in place.

That’s when I realized I needed to dig into the documentation and I turned to Claude AI
for help and started troubleshooting. After hours of research, I finally figured out the problem:

What Went Wrong?

1. My package.json showed React 18.3.1, which can conflict with Vite.

2. Tailwind had just released v4, causing unexpected compatibility issues.

3. My Tailwind dependencies were incorrectly set up:

{
  "devDependencies": {
    "tailwindcss": "^3.4.1",
    "postcss": "^8.4.35",
    "@tailwindcss/postcss7-compat": null,
    "@tailwindcss/postcss": null
  }
}

4. PostCSS was misconfigured, and Vite and Tailwind dependencies were conflicting with each other.

The Fix

After debugging for hours, I took detailed notes. I recorded the versions of Tailwind, Vite, and PostCSS I was using and examined my config files. The issue stemmed from my postcss.config.js, which was incorrectly formatted. Here’s what I changed it to:

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

I then uninstalled the problematic dependencies and installed the correct versions:

npm uninstall @tailwindcss/postcss @tailwindcss/vite
npm install -D

I verified my package.json to ensure it now looked correct:

{
  "devDependencies": {
    "tailwindcss": "^3.3.0",
    "postcss": "^8.4.31",
    "autoprefixer": "^10.4.20"
  }
}

Finally, I cleaned up my project:

rm -rf node_modules package-lock.json
npm install
npm

At this point, I had found the fix, but I had messed up my dependencies so badly during troubleshooting that I couldn’t even remember what my original issue was anymore. That’s when I knew I had to wipe the slate clean.

Blowing It All Up and Starting Over

Instead of patching together a half-broken build, I decided to start from scratch. This time, I followed my notes carefully, ensuring:

• 
  All dependencies were installed correctly from the beginning.

• Files were structured properly with no conflicts.

• My configurations were aligned before running the project.

When I ran into the same issue again, I knew exactly what to do. Thanks to my notes, I fixed it in under
an hour—a huge improvement from the first attempt.

Adding the Finishing Touches

With the dependency issue behind me, I could finally focus on the fun part—design. I adjusted the animations, refined the layout, and even added hovers to the mock buttons, even though they don’t actually go anywhere. Watching everything come to life was the best part.

Final Thoughts

This build was a huge learning experience. I realized that I need to build more. I love focusing on making things look good, but troubleshooting backend issues is just as important. As I move toward learning more frameworks, I need to strengthen my knowledge of dependencies to avoid issues like this in the future.

Despite the struggles, I loved creating the assets, experimenting with animations, and seeing my vision come to life. If you want to check out the live version, here’s the link: Live Demo. You can also view my GitHub repo here: GitHub Repo.