Desktop showcase without any modals

Short Description

A MacOS Clone built with React. Imitates the usual desktop features, wallpaper settings, system settings, an integrated weather app (and more to come). Detailed feature-list can be found below.

🔴 Demo

🧪 Live Demo available. Click “Live Demo” to open it.

Showcase

You can see images and a GIF of the project in user interaction below. The GIF does not show all features of the application, it only shows the most elementary user interactions.

Features

• ✔️ Bootup Window similar to the original MacOS
• ✔️ System Settings, Color and Wallpaper preferences
• ✔️ Local storage and session storage saving user preferences
• ✔️ Integrated Weather App including geolocation to fetch forecasts for the user’s location
• ✔️ Wallpaper Selection window to switch desktop backgrounds
• ✔️ Custom Context Menu and System Navigation Bar
• ✔️ Smooth Animations w/ Framer Motion
• ❌ (WIP) Calculator and Calendar Apps

Stack

• Framework: React
• Language: TypeScript
• Motion Library: Framer Motion
• Component Library: none
• Stylesheet: SCSS

Motivation

My initial motivation in building this was honestly not to build it at all. Because as you can see by this project’s folder structure, it was in fact not supposed to be a mac os clone but just a simple weather app when I was starting out. I was trying to revisit API usage to get muscle memory and a better understanding of working with APIs in general down but ended up being a bit bored and built a MacOS around it.

🤝 Contributions

This project is open to contributions! I am still working on some features (Calculator, Calendar, VSCode, Music App) and there’s probably a ton of things to add/change/fix. Feel free to fork it and create a PR!

Credits

PuruVJ: I built this clone entirely inspired by this MacOS Clone in Svelte, although I reverse-engineered it, meaning I didn’t re-use anything from the project.

All rights to all pictures, products and names on this website belong to Apple Inc. I only used them to build an environment for myself to learn coding in React with. This page is not being used commercially. If you are an owner of the copyrighted material, please let me know if you have any issues with this page and I’ll take it down immediately

GitHub

View Github