Windows XP

By on

This project is a partial recreation of the classic Windows XP operation system, but this time inside the browser.

Motivation

I wanted to create a silly project that involved a lot of UI interactions like clicking, dragging, etc. I stumbled upon someone’s portfolio webiste which was styled like Windows 98, so I took that idea to build a somewhat functional Windows XP clone in TypeScript

The CSS of this project was particularly fun and challenging. It’s not meant to be responsive, so if you are viewing the project on a mobile device it might not work well.

Features

Of course I didn’t implement a fully functional operating system in the browser, but I made some general file system logic which is tied the the elements the user interacts with. This project was made without a JavaScript framework such as React, Vue or Svelte.

Here’s a list of things that I implemented:

  • A startup screen
  • A login screen
  • A web browser that only supports the “websites” you see on the desktop. You can even use the address bar to switch between the two.
  • Folder structure
  • Right click menu with “create new folder”
  • Functioning task bar
  • Window opening, minimizing, maximizing, moving and closing.
  • Fake start menu
  • System clock

The Windows XP login screen

Technologies

Some of the technologies used to make this project:

  • TypeScript
  • Webpack (replaced original Parcel usage)
  • CSS
  • InteractJS

The Windows XP startup screen

Project status

I stopped working on this project once I had learned the things I wanted to learn. It is not completely finished, but I had my fun with it.

The Windows XP desktop


Other work

    • NextJS
    • TypeScript
    • React Query
    • React Testing Library

    Dev Quotes

    A NextJS Quotes application with a professional setup and a lot of testing

    See the project details
    • Gatsby
    • React
    • Styled Components
    • TypeScript

    Portfolio website

    A 100% custom Gatsby website built with modern technologies.

    See the project details
Back to projects

Say hello! 👋

If you want to talk to me about something that could interest me, you can send me an email at hey@eddy.codes. I check my inbox a couple times during the week.

You can also find me on Twitter (@eddyvinckk) or LinkedIn.

(I get a lot of messages, so sadly I can't get back to everyone)