{"id":26121766,"url":"https://github.com/bastien2203/react-ts-os","last_synced_at":"2026-04-17T16:05:01.306Z","repository":{"id":268911722,"uuid":"903006209","full_name":"Bastien2203/react-ts-os","owner":"Bastien2203","description":"Mini OS is a web application simulating an operating system, built with React and TypeScript, and deployed on Vercel. It offers an interactive user interface with windows, allowing users to experience a desktop-like environment directly in their browser.","archived":false,"fork":false,"pushed_at":"2024-12-19T16:15:33.000Z","size":72,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-19T17:26:44.643Z","etag":null,"topics":["react","simulation","typescript"],"latest_commit_sha":null,"homepage":"https://react-ts-os.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Bastien2203.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-13T18:15:26.000Z","updated_at":"2024-12-19T16:15:37.000Z","dependencies_parsed_at":"2024-12-19T17:26:54.765Z","dependency_job_id":"5536b607-34f2-48e8-aa78-fa9964b7d5ef","html_url":"https://github.com/Bastien2203/react-ts-os","commit_stats":null,"previous_names":["bastien2203/react-ts-os"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bastien2203%2Freact-ts-os","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bastien2203%2Freact-ts-os/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bastien2203%2Freact-ts-os/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bastien2203%2Freact-ts-os/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Bastien2203","download_url":"https://codeload.github.com/Bastien2203/react-ts-os/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242870287,"owners_count":20198802,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","simulation","typescript"],"created_at":"2025-03-10T14:36:21.499Z","updated_at":"2026-04-17T16:05:01.298Z","avatar_url":"https://github.com/Bastien2203.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"React TS OS\n===========\n\n🖇 https://react-ts-os.vercel.app/\n\n## Create new window\n\n1. Create a new component in `src/components/windows/`, for example `src/components/windows/MyWindow.tsx`:\n\n```tsx\nexport const MyWindow = (props: {\n  mywindowprops?: string\n}) =\u003e {\n  return \u003cdiv\u003e\n    {props.mywindowprops ? \u003cp\u003e{props.mywindowprops}\u003c/p\u003e : \u003cp\u003eno props\u003c/p\u003e}\n  \u003c/div\u003e\n}\n```\n\n2. Add the new window to property `window`of the `WindowManager` service in `src/services/WindowManager.ts`:\n\n```ts\nclass WindowManager {\n  private windows: { [key: string]: Window } = {\n    // ...\n    \"mywindow\": {\n      component: MyWindow, // The component of the window\n      title: \"My Window\", // The title of the window\n      icon: JSXIconForMyWindow, // A tsx component that represents the icon of the window\n    },\n  }\n\n  // ...\n}\n```\n\n## Create new setting and import it in your component\n\n1. Create a new setting in `src/services/Settings.ts`:\n\n```ts\nclass Settings {\n  private preferences: { [key: string]: PreferencesSection } = {\n    // ...\n    mysettingsection: {\n      title: \"My Setting Section\",\n      properties: {\n        mysetting: {\n          name: \"My Setting\",\n          type: \"text\",\n          value: \"default value\",\n        },\n      },\n    },\n  }\n\n  // ...\n}\n```\n\n2. Import the setting in your component:\n\n```tsx\nexport const MyWindow = (props: {\n  mywindowprops?: string\n}) =\u003e {\n  const [mysetting] = useSetting(\"mysettingsection\", \"mysetting\")\n  return \u003cdiv\u003e\n    \u003cp\u003e{mysetting}\u003c/p\u003e\n    {props.mywindowprops ? \u003cp\u003e{props.mywindowprops}\u003c/p\u003e : \u003cp\u003eno props\u003c/p\u003e}\n  \u003c/div\u003e\n}\n```\n\n\n-------------------\n\nTODO :\n\n- Add User and sessions\n- Handle file permissions\n- Fix activity monitor bug\n- update instantly display when file is created/deleted (e.g. i create a file with a command in the term, i want to see\n  it in the file explorer directly)\n- Handle file creation directly in the editor","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbastien2203%2Freact-ts-os","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbastien2203%2Freact-ts-os","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbastien2203%2Freact-ts-os/lists"}