macOS System Window 💻

A simplified recreation of macOS's dark-themed home screen, featuring functional UI components and a special emphasis on the system window. This window is fully interactive, allowing users to effortlessly drag, resize, and utilize various other features typically found in native macOS window components. Vercel Deployment.

🚨 The background image has a really high resolution, which might result in a slight delay while the page fully loads. Please allow a few seconds for optimal display.

• 🔗 Vercel deployment – macOS System Window
• 🏗️ CodeSandbox – macOS System Window Sandbox

Introduction

Run the application

npm install
npm start

The main objective of this project was to meticulously reverse-engineer one of macOS's most renowned interfaces, all without relying on any pre-existing templates. My aim was to preserve the core functionality of the user interface as faithfully as possible but simplify it where necessary.

Highlighted features of this project include:

• A draggable and resizable system window, which offers a pseudo full-screen mode, the ability to resize and hide the sidebar (automatically hidden when the modal reaches a certain minimal size, and restored upon returning to the normal size);
• Fold/unfold directories, choose different directories;

• Functional navbar with dynamic dropdown content options;

• Interactive controls for navigating back and forward within directories;
• Dock with informative tooltips. Clicking on the Finder icon will reopen the modal if it was previously closed.

Tech stack

• React + Typescript, Vite;
• Mantine;
• styled-components;
• react-rnd;
• react-resizable-panels;
• faker.js.