{"id":15164210,"url":"https://github.com/minhtrifit/windows-11-clone","last_synced_at":"2026-01-20T07:33:11.833Z","repository":{"id":256502551,"uuid":"855505064","full_name":"minhtrifit/windows-11-clone","owner":"minhtrifit","description":"Simulate Operating System Application","archived":false,"fork":false,"pushed_at":"2024-09-29T03:15:12.000Z","size":60679,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-08T12:30:33.652Z","etag":null,"topics":["firebase","nextjs14","operating-system","shadcn-ui","tailwind-css","windows-11"],"latest_commit_sha":null,"homepage":"","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/minhtrifit.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-09-11T01:19:48.000Z","updated_at":"2025-02-14T01:53:48.000Z","dependencies_parsed_at":null,"dependency_job_id":"a38d0752-035d-404d-badd-dcdfdd02a995","html_url":"https://github.com/minhtrifit/windows-11-clone","commit_stats":null,"previous_names":["minhtrifit/windows-11-clone"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/minhtrifit/windows-11-clone","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minhtrifit%2Fwindows-11-clone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minhtrifit%2Fwindows-11-clone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minhtrifit%2Fwindows-11-clone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minhtrifit%2Fwindows-11-clone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/minhtrifit","download_url":"https://codeload.github.com/minhtrifit/windows-11-clone/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minhtrifit%2Fwindows-11-clone/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28598159,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-20T02:08:49.799Z","status":"ssl_error","status_checked_at":"2026-01-20T02:08:44.148Z","response_time":117,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["firebase","nextjs14","operating-system","shadcn-ui","tailwind-css","windows-11"],"created_at":"2024-09-27T03:02:00.227Z","updated_at":"2026-01-20T07:33:11.817Z","avatar_url":"https://github.com/minhtrifit.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WINDOWS 11 CLONE DOCUMENTATION\n\n\u003cimg src=\"https://img.shields.io/github/stars/minhtrifit/windows-11-clone\"/\u003e ![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/minhtrifit/windows-11-clone)\n\n![Thumbnail](./showcase/thumbnail.png)\n\n# 📋 Table of Contents\n\n1. [Technical Stack](#technical-stack)\n2. [Project Showcase](#project-showcase)\n3. [Project Setup](#project-setup)\n   1. [Firebase setup](#firebase-setup)\n   2. [Source code setup](#source-code-setup)\n4. [Developer Workspace](#developer-workspace)\n   1. [Conflict npm packages](#conflict-npm-packages)\n   2. [Add more apps](#add-more-apps)\n\n## 📁 Technical Stack \u003ca name=\"technical-stack\"\u003e\u003c/a\u003e\n\n\u003cp align=\"left\"\u003e \u003ca href=\"https://reactjs.org/\" target=\"_blank\" rel=\"noreferrer\"\u003e \u003cimg src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/react/react-original-wordmark.svg\" alt=\"react\" width=\"40\" height=\"40\"/\u003e \u003c/a\u003e \u003ca href=\"https://tailwindcss.com/\" target=\"_blank\" rel=\"noreferrer\"\u003e \u003cimg src=\"https://www.vectorlogo.zone/logos/tailwindcss/tailwindcss-icon.svg\" alt=\"tailwind\" width=\"40\" height=\"40\"/\u003e \u003c/a\u003e \u003ca href=\"https://www.typescriptlang.org/\" target=\"_blank\" rel=\"noreferrer\"\u003e \u003cimg src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/typescript/typescript-original.svg\" alt=\"typescript\" width=\"40\" height=\"40\"/\u003e \u003c/a\u003e \u003c/p\u003e\n\n- [Next.js14](https://nextjs.org) - The React Framework for the Web\n- [React.js](https://react.dev) - The library for web and native user interfaces\n- [Shadcn UI](https://ui.shadcn.com) - Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.\n- [Tailwind CSS](https://tailwindcss.com) - Rapidly build modern websites without ever leaving your HTML\n- [TypeScript](https://www.typescriptlang.org) - JavaScript with syntax for types.\n- [Firebase](https://firebase.google.com) - Build \u0026 Run AI-Powered Apps.\n\n## 🔮 Project Showcase \u003ca name=\"project-showcase\"\u003e\u003c/a\u003e\n\n- Login Screen\n\n![login](showcase/login.png)\n\n- Home Screen\n\n![Home](showcase/home.png)\n\n- Browser Feature\n\n![Home](showcase/browser.png)\n\n- File Explorer Feature\n\n![Home](showcase/file_explorer.png)\n\n- Image Feature\n\n![Home](showcase/image.png)\n\n- Video Feature\n\n![Home](showcase/video.png)\n\n- Text Document Feature\n\n![Home](showcase/text_document.png)\n\n- Visual Code Feature\n\n![Home](showcase/vscode.png)\n\n- Paint Feature\n\n![Home](showcase/paint.png)\n\n- Settings Feature\n\n![Home](showcase/settings.png)\n\n- Calculator Feature\n\n![Home](showcase/calculator.png)\n\n- Spotify Feature\n\n![Home](showcase/spotify.png)\n\n- Calendar Feature\n\n![Home](showcase/calendar.png)\n\n## 💽 Project Setup \u003ca name=\"project-setup\"\u003e\u003c/a\u003e\n\n### 🔥 Firebase setup \u003ca name=\"firebase-setup\"\u003e\u003c/a\u003e\n\n- [This project use Firebase for some features (Click to see basic setup).](https://mydevpa.ge/blog/how-to-setup-firebase-firestore-with-nextjs-14)\n- This project doesn't have server, so you can add your own data to Firebase for testing app manually.\n\n**Make sure that you have enabled following firebase services:**\n\n- Storage (Files storage).\n- Firestore Database (Real time database).\n- Authentication (This project default use email \u0026 password only).\n\n**1. Storage have default structure:**\n\nThis topic and **2. Firestore Database** show how to add your own data to app. If you just want to run app only, you can move to \u003ca name=\"source-code-setup\"\u003eSource code setup\u003c/a\u003e.\n\n**Storage for this project has format:**\n\n- `file_explorer/pictures`\n- `file_explorer/music`\n- `file_explorer/videos`\n\n![firebase example 1](showcase/6.png)\n\nPicture files (.png, .jpg,...) example (same for videos \u0026 music files)\n\n![firebase example 2](showcase/7.png)\n\n**2. Firestore Database:**\n\n- type list: [\"text_document\", \"pictures\", \"videos\", \"music\"]\n- content is url for: `pictures`, `videos`, `music` (provided by [Storage](https://firebase.google.com/docs/storage/web/start))\n\n![firebase example 3](showcase/8.png)\n\n![firebase example 4](showcase/9.png)\n\n![firebase example 5](showcase/10.png)\n\n### 📦 Source code setup \u003ca name=\"source-code-setup\"\u003e\u003c/a\u003e\n\n⚙️ Config [.env]() file in client dir with path `./client/.env`:\n\n```bash\nNEXT_PUBLIC_API_URL=\nNEXT_PUBLIC_FIREBASE_API_KEY=\nNEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=\nNEXT_PUBLIC_FIREBASE_PROJECT_ID=\nNEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=\nNEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=\nNEXT_PUBLIC_FIREBASE_APP_ID=\nNEXT_PUBLIC_FIREBASE_FILE_EXPLORER_COLLECTION=file-explorer-list\nNEXT_PUBLIC_FIREBASE_PICTURE_STORAGE_PATH=file_explorer/pictures\nNEXT_PUBLIC_FIREBASE_VIDEO_STORAGE_PATH=file_explorer/videos\nNEXT_PUBLIC_FIREBASE_MUSIC_STORAGE_PATH=file_explorer/music\nNEXT_PUBLIC_MY_PORTFOLIO_APP_URL=https://sparkling-nasturtium-3d4d3c.netlify.app\n```\n\n📥 Installation packages:\n\nIntall packages \u0026 dependencies (use --force tag to install conflict packages version, detail in **Conflict npm packages** topic).\n\n```console\nnpm install --force\n```\n\nOr install packages with legacy peer dependencies.\n\n```console\nnpm install --legacy-peer-deps\n```\n\nRun client project (supported by [Create Next App](https://nextjs.org/docs/getting-started/installation))\n\n```console\nnpm run dev\n```\n\n## 💻 Developer Workspace \u003ca name=\"developer-workspace\"\u003e\u003c/a\u003e\n\n### 🛡️ Conflict npm packages \u003ca name=\"conflict-npm-packages\"\u003e\u003c/a\u003e\n\nThis project use somes old node version npm packages (\u003c ver 18.), list is below. If you want to install more packages, you can choose some options:\n\n1. Uninstall list below \u0026 install packages you want. Then reinstall.\n2. Use `--force` tag after install command. For example: `npm i uuid --force`.\n\n```console\n# react-canvas-draw (This package need install more @types package for Typescript)\nnpm install react-canvas-draw@1.2.1 --force\nnpm i --save-dev @types/react-canvas-draw@1.2.3 --force\n```\n\n### ⌨️ Add more apps for project \u003ca name=\"add-more-apps\"\u003e\u003c/a\u003e\n\nYou are developer \u0026 want to improve this project. Follow these steps:\n\n1. Go to `WindowContainer.tsx` file, this includes app profile on desktop page, add new object like this:\n\n![add app example 1](showcase/1.png)\n\n2. Declare app name in file `utils.ts`\n\n![add app example 2](showcase/2.png)\n\nYour new app will display on desktop:\n\n![add app example 3](showcase/3.png)\n\n![add app example 4](showcase/4.png)\n\n3. You can develop \u0026 put new app content file for `targetElement` with url: `src/components/WindowContentCpn`:\n\n![add app example 5](showcase/5.png)\n\n## ▶️ YouTube Demo\n\n[![Thumnail](./showcase/thumbnail.png)](https://youtu.be/PtsflG2W43g)\n\n## 💌 Contact\n\n- Author - [minhtrifit](https://minhtrifit-dev.vercel.app)\n- [Github](https://github.com/minhtrifit)\n\n\u003e CopyRight© minhtrifit\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fminhtrifit%2Fwindows-11-clone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fminhtrifit%2Fwindows-11-clone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fminhtrifit%2Fwindows-11-clone/lists"}