I Built a Star Wars Mandalorian Movie Countdown Site with React + Vite

Source: Dev.to

I’m a huge Star Wars fan, and with The Mandalorian & Grogu hitting theaters on May 22, 2026, I couldn’t just sit and wait — I had to build something.

So I created a countdown website: Mandalorian Cinema Countdown

What’s on the site?

• ⏳ Live countdown timer (days, hours, minutes, seconds)
• 🌟 Animated starfield background
• 🎬 Embedded official trailer
• 👤 Character cards for Din Djarin & Grogu
• 📱 Fully responsive design

Tech Stack

• React 18 with Vite
• Pure CSS (no UI framework) — custom Star Wars‑inspired dark theme with gold accents
• Deployed on Netlify (free tier, zero config)

The Fun Part: Pure CSS Starfield

Instead of a canvas library, I used a pure CSS animated starfield with layered box-shadow on pseudo‑elements. It’s lightweight and looks great:

.stars::before {
  content: '';
  position: fixed;
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: /* 200 random positions generated */ ...;
  animation: twinkle 4s infinite alternate;
}

What I learned

• Vite is ridiculously fast for React projects.
• Netlify deploys a Vite build in under 30 seconds.
• A well‑chosen color palette (gold #C9A84C + near‑black) carries a whole theme without needing images.