A macOS desktop clone. I created this project out of fascination for the Mac/Apple desktop UI and wanted to try to replicate it as closely as possible, even with the dynamic dock behavior.
ViteReact.jsTypeScriptZustandFramer Motion
- Light and Dark Mode: Seamlessly switch between light and dark themes for a personalized experience.
- Custom Background Colors: Tailor your desktop with the ability to change the background color to suit your style.
- System Color Preferences: Customize your system's color scheme with options like blue, green, orange, and more.
I began by gathering all the necessary images for the dock and wallpaper. Then, I established constants and implemented Zustand for state management. Next, I worked on the navigation bar and system preference color functionalities. After that, I tackled the dynamic dock, which was a bit challenging to animate. Each dock item scales slightly when selected, creating a realistic effect. I also created a settings modal, allowing users to switch between dark and light modes and change background colors.
Start by adding an introductory loading screen, like the one you see on a Mac with the progress bar and Apple's logo. To make this project even better, think about making features like the calculator and calendar docks actually work. In other words, try to make your project function just like the real macOS desktop.
To run the project in your local environment, follow these steps:
- Clone the repository to your local machine.
- Navigate to the project directory and run
npm installoryarnto install the required dependencies. - Start the project with
npm run devoryarn dev. - Open http://localhost:5173 (or the address displayed in your console) in your web browser to view the application.