Windows 95 Emulator

: )
Landing Page
About
Media Player
"Bootloader" Screen
Pokedex

Inspiration

My inspiration for this project comes from a fascination of old operating systems and computers! Macintosh, Windows XP, Windows95, you name it! They were all vital in crafting the modern operating systems that we know and love today.

What it is

This project is an emulator, meaning it simply emulates the Windows95 operating system, but in the browser. You first are greeted by the nostalgic cloudy background, then the UI boots up once you click “Get Started”. After that, you can use the fully-functional media player to listen to the Pokémon theme song, explore the Pokédex, and play around in MS Paint.

What I used to built it

The core experience of this emulator is powered by React. I used some libraries to make the development and emulation of the Windows 95 operating system easier as well. The full list of technologies is as follows:

React for building the components
TypeScript for static types
Redux Toolkit for global state management
Styled-components for component styling
Ofetch for a simpler data fetching API
"React 95" Component Stories for the Windows 95 look and feel
PokeAPI for Pokémon sprites and data
React Router for navigation
Vercel for deployment
Vite/Esbuild for bundling and building

Challenges I ran into

Rendering windows optimally
Data fetching and memoization
UI regressions
Crafting custom extensions of the given component
Finding time to work (I started 24 hours before the hackathon ended 😅)

Accomplishments that I'm proud of

Getting it working
Deploying the application to Vercel successfully
Hacking out the build process (my build tooling didn't like the mismatched dependencies)
Wrangling a lot of packages and libraries from pre-2018 React

What we learned

How to emulate an operating system in the browser
Re-thinking rendering and how to best optimize components
Styled-components
Deploying to Vercel with a bunch of outdated and unmaintained packages/polyfills