Synthwave OS

Bootup animation
Start-up Menu
Desktop apps opened up
First look of desktop

Inspiration

We used Windows XP while growing up and always loved its simple, friendly desktop. We also love the bold colors and music of synthwave. The nostalgia was the driving factor.

What it does

SynthwaveOS is our way of bringing back old-school vibes with a neon twist.

How we built it

We used React and TailwindCSS for the frontend, and react-rnd for the window system. Each app (like the terminal, notepad, and meme gallery) is a React component. We managed everything with React hooks and deployed the project using Netlify.

Challenges we ran into

Getting the windows to move, resize, and stack nicely took some work. Making the synthwave look consistent across all apps was also tricky. We had to solve some issues with browser audio and make sure everything worked after deployment.

What we learned

We learned a lot about React, especially how to manage state and build interactive UIs. Making draggable and resizable windows was new for us. We also figured out how to play music in the browser, use cool CSS for glowing effects, and deploy a site with Netlify.