https://github.com/mirayatech/macos-big-sur-clone

🍏 MacOS Big Sur UI clone for the web built with React, TypeScript, and Styled-Components.
https://github.com/mirayatech/macos-big-sur-clone

bigsur bigsur-clone framer-motion macos macos-clone react styled-components typescript ui ux zustand

Last synced: 29 days ago
JSON representation

🍏 MacOS Big Sur UI clone for the web built with React, TypeScript, and Styled-Components.

• Host: GitHub
• URL: https://github.com/mirayatech/macos-big-sur-clone
• Owner: mirayatech
• Created: 2023-08-28T18:52:26.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-02-05T05:54:51.000Z (9 months ago)
• Last Synced: 2024-10-01T00:42:52.881Z (about 1 month ago)
• Topics: bigsur, bigsur-clone, framer-motion, macos, macos-clone, react, styled-components, typescript, ui, ux, zustand
• Language: TypeScript
• Homepage: https://macos-big-sur-clone.vercel.app/
• Size: 13 MB
• Stars: 37
• Watchers: 2
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# MacOS Big Sur Clone 🍏 

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.

## ⚡ Technologies

- `Vite`

- `React.js`

- `TypeScript`

- `Zustand`

- `Framer Motion`

## 🚀 Features 

- **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.

## 💭 Process

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.

## 🤔 How can it be improved?

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.

## 🎥 Demo/Preview



## 🚦 Running the Project

To run the project in your local environment, follow these steps:

1. Clone the repository to your local machine.

2. Navigate to the project directory and run `npm install` or `yarn` to install the required dependencies.

3. Start the project with `npm run dev` or `yarn dev`.

4. Open http://localhost:5173 (or the address displayed in your console) in your web browser to view the application.