Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gianlucajahn/macos-react
A macOS desktop clone built with TypeScript React, SASS and Framer Motion.
https://github.com/gianlucajahn/macos-react
clone framer-motion mac-clone macos macosx nextjs reactjs sass tailwindcss typescript
Last synced: 28 days ago
JSON representation
A macOS desktop clone built with TypeScript React, SASS and Framer Motion.
- Host: GitHub
- URL: https://github.com/gianlucajahn/macos-react
- Owner: gianlucajahn
- License: mit
- Created: 2022-11-27T18:36:59.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-10T16:59:01.000Z (9 months ago)
- Last Synced: 2024-10-10T10:43:08.470Z (28 days ago)
- Topics: clone, framer-motion, mac-clone, macos, macosx, nextjs, reactjs, sass, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://gianlucajahn.github.io/macOS-react
- Size: 48.6 MB
- Stars: 103
- Watchers: 4
- Forks: 9
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
MacOS in React
A MacOS Clone built in TypeScript React with SASS and Framer Motion, tested with Jest.
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](https://gianlucajahn.github.io/macOS-react) 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](https://github.com/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](https://github.com/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