alexjuca / macos-monterey Goto Github PK

Clone of macOS Monterey that runs in your browser. (website disabled)

HTML 1.14% JavaScript 52.57% SCSS 46.29%

macos-monterey's Introduction

macOS Monterey

This project is a clone of macOS Monterey that runs in your browser. It was built using HTML, CSS, Javascript and React.

Why was this project created?

Simple really. I am a backend engineer but I recently had to learn React. So, after following this tutorial by Tania Rascia and reading the official React documentation I challenged myself to build a clone of macOS Monterey that runs in the browser.

Current State of Affairs

This is how our current UI is, we aim to bring it as close as possible to macOS as possible. Help Us!

To view what we have so far check out this link

Roadmap

Currently, this is being tracked in a private Notion board but the general idea is to make this look and work as much as possible to the native version of macOS.

Development

To get up and running, run:

git clone [email protected]:AlexJuca/macos-monterey.git
cd macos-monterey/

npm install

npm start

# To run on a specific port
HOST=YOUR_IP npm start

License

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at [http://www.apache.org/licenses/LICENSE-2.0](http://www.apache.org/licenses/LICENSE-2.0)

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

macos-monterey's People

Contributors

Stargazers

Watchers

macos-monterey's Issues

window:Currently focused window should should on top z-stack

Currently the focused window does appear as the window with highest z-stack priority. Adding this to the Window component would enhance the overall behaviour of the system.

filesystem: Add cloud file system

System should be able to access some form of cloud storage to emulate the macOS's file system.

User should be able to create, modify and remove files.

What service can be used for file storage?

Amazon S3 - https://aws.amazon.com/s3/
Storj - https://www.storj.io

For initial testing I will use Storj (To use S3, Amazon requires I have at least some cash in my VISA to signup for the free tier)
What is Storj?

Strorj is S-3 compatible object storage system that allows one to store files securely and in a decentralized manner.

It provides 50GB free So I will use this for now.

All files can be store in Storj and interfaced with by means of a UI application (Finder).
An abstraction layer would be used between Storj and the UI interface to that storage.

Considerations would have to be made as to how to design this.

window:Minimize and Restore Window

Add functionality to the Window component so windows can be minimized and restored.

Add basic Internationlization support

Languages to support:

English
Egyptian Arabic
Portuguese

Add Apple Stock Widget

Create an extensible Widget Component that can be used to build Custom Widget applications.
With this, create an Apple Stock widget using the following API:

https://api.lil.software/stocks?symbol=AAPL

{
"open": 116.57,
"high": 117.49,
"low": 116.22,
"current": 116.59,
"previous_close": 116.03,
"name": "Apple Inc"
}

window: Add support for Dark Mode

Install and configure linter and pre-commit hooks

To maintain a consistent code base and coding style as we move forward I will have to select a linter or auto-formatter.

From my research the two most used options in the Javascript community are:

EsLint
Prettier

We will use both in this project as they play pretty well together.

Failed to compile - Delete `␍` prettier/prettier

This error appears after installing and starting the project.

src\App.js Line 1:36: Delete ␍ prettier/prettier Line 2:1: Delete␍ prettier/prettier Line 3:41: Delete␍ prettier/prettier Line 4:20: Delete␍ prettier/prettier Line 5:42: Delete␍ prettier/prettier Line 6:57: Delete␍ prettier/prettier Line 7:45: Delete␍ prettier/prettier Line 8:48: Delete␍ prettier/prettier Line 9:26: Delete␍ prettier/prettier Line 10:39: Delete␍ prettier/prettier Line 11:55: Delete␍ prettier/prettier Line 12:48: Delete␍ prettier/prettier Line 13:42: Delete␍ prettier/prettier Line 14:1: Delete␍ prettier/prettier Line 15:30: Delete␍ prettier/prettier Line 16:23: Delete␍ prettier/prettier Line 17:17: Delete␍ prettier/prettier Line 18:19: Delete␍ prettier/prettier Line 19:19: Delete␍ prettier/prettier Line 20:10: Delete␍ prettier/prettier Line 21:24: Delete␍ prettier/prettier Line 22:20: Delete␍ prettier/prettier Line 23:26: Delete␍ prettier/prettier Line 24:29: Delete␍ prettier/prettier Line 25:11: Delete␍ prettier/prettier Line 26:10: Delete␍ prettier/prettier Line 27:25: Delete␍ prettier/prettier Line 28:20: Delete␍ prettier/prettier Line 29:28: Delete␍ prettier/prettier Line 30:29: Delete␍ prettier/prettier Line 31:11: Delete␍ prettier/prettier Line 32:10: Delete␍ prettier/prettier Line 33:31: Delete␍ prettier/prettier Line 34:20: Delete␍ prettier/prettier Line 35:28: Delete␍ prettier/prettier Line 36:29: Delete␍ prettier/prettier Line 37:11: Delete␍ prettier/prettier Line 38:10: Delete␍ prettier/prettier Line 39:35: Delete␍ prettier/prettier Line 40:20: Delete␍ prettier/prettier Line 41:28: Delete␍ prettier/prettier Line 42:29: Delete␍ prettier/prettier Line 43:11: Delete␍ prettier/prettier Line 44:9: Delete␍ prettier/prettier Line 45:6: Delete␍ prettier/prettier Line 46:4: Delete␍ prettier/prettier Line 47:1: Delete␍ prettier/prettier Line 48:24: Delete␍ prettier/prettier Line 49:49: Delete␍ prettier/prettier Line 50:4: Delete␍ prettier/prettier Line 51:1: Delete␍ prettier/prettier Line 52:27: Delete␍ prettier/prettier Line 53:52: Delete␍ prettier/prettier Line 54:4: Delete␍ prettier/prettier Line 55:1: Delete␍ prettier/prettier Line 56:22: Delete␍ prettier/prettier Line 57:13: Delete␍ prettier/prettier Line 58:12: Delete␍ prettier/prettier Line 59:22: Delete␍ prettier/prettier Line 60:21: Delete␍ prettier/prettier Line 61:23: Delete␍ prettier/prettier Line 62:23: Delete␍ prettier/prettier Line 63:23: Delete␍ prettier/prettier Line 64:17: Delete␍ prettier/prettier Line 65:19: Delete␍ prettier/prettier Line 66:13: Delete␍ prettier/prettier Line 67:6: Delete␍ prettier/prettier Line 68:4: Delete␍ prettier/prettier Line 69:1: Delete␍ prettier/prettier Line 70:13: Delete␍ prettier/prettier Line 71:59: Delete␍ prettier/prettier Line 72:4: Delete␍ prettier/prettier Line 73:2: Delete␍ prettier/prettier Line 74:1: Delete␍ prettier/prettier Line 75:19: Delete␍` prettier/prettier

src\apps\hello-world\HelloWorld.js
Line 1:26: Delete ␍ prettier/prettier
Line 2:53: Delete ␍ prettier/prettier
Line 3:52: Delete ␍ prettier/prettier
Line 4:1: Delete ␍ prettier/prettier
Line 5:34: Delete ␍ prettier/prettier
Line 6:23: Delete ␍ prettier/prettier
...
...`