https://github.com/minhtrifit/windows-11-clone
Simulate Operating System Application
https://github.com/minhtrifit/windows-11-clone
firebase nextjs14 operating-system shadcn-ui tailwind-css windows-11
Last synced: 2 months ago
JSON representation
Simulate Operating System Application
- Host: GitHub
- URL: https://github.com/minhtrifit/windows-11-clone
- Owner: minhtrifit
- Created: 2024-09-11T01:19:48.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-29T03:15:12.000Z (over 1 year ago)
- Last Synced: 2025-04-08T12:30:33.652Z (12 months ago)
- Topics: firebase, nextjs14, operating-system, shadcn-ui, tailwind-css, windows-11
- Language: TypeScript
- Homepage:
- Size: 57.9 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# WINDOWS 11 CLONE DOCUMENTATION
# 📋 Table of Contents
1. [Technical Stack](#technical-stack)
2. [Project Showcase](#project-showcase)
3. [Project Setup](#project-setup)
1. [Firebase setup](#firebase-setup)
2. [Source code setup](#source-code-setup)
4. [Developer Workspace](#developer-workspace)
1. [Conflict npm packages](#conflict-npm-packages)
2. [Add more apps](#add-more-apps)
- [Next.js14](https://nextjs.org) - The React Framework for the Web
- [React.js](https://react.dev) - The library for web and native user interfaces
- [Shadcn UI](https://ui.shadcn.com) - Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
- [Tailwind CSS](https://tailwindcss.com) - Rapidly build modern websites without ever leaving your HTML
- [TypeScript](https://www.typescriptlang.org) - JavaScript with syntax for types.
- [Firebase](https://firebase.google.com) - Build & Run AI-Powered Apps.
- Login Screen
- Home Screen
- Browser Feature
- File Explorer Feature
- Image Feature
- Video Feature
- Text Document Feature
- Visual Code Feature
- Paint Feature
- Settings Feature
- Calculator Feature
- Spotify Feature
- Calendar Feature
- [This project use Firebase for some features (Click to see basic setup).](https://mydevpa.ge/blog/how-to-setup-firebase-firestore-with-nextjs-14)
- This project doesn't have server, so you can add your own data to Firebase for testing app manually.
**Make sure that you have enabled following firebase services:**
- Storage (Files storage).
- Firestore Database (Real time database).
- Authentication (This project default use email & password only).
**1. Storage have default structure:**
This 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 Source code setup.
**Storage for this project has format:**
- `file_explorer/pictures`
- `file_explorer/music`
- `file_explorer/videos`
Picture files (.png, .jpg,...) example (same for videos & music files)
**2. Firestore Database:**
- type list: ["text_document", "pictures", "videos", "music"]
- content is url for: `pictures`, `videos`, `music` (provided by [Storage](https://firebase.google.com/docs/storage/web/start))
⚙️ Config [.env]() file in client dir with path `./client/.env`:
```bash
NEXT_PUBLIC_API_URL=
NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
NEXT_PUBLIC_FIREBASE_PROJECT_ID=
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
NEXT_PUBLIC_FIREBASE_APP_ID=
NEXT_PUBLIC_FIREBASE_FILE_EXPLORER_COLLECTION=file-explorer-list
NEXT_PUBLIC_FIREBASE_PICTURE_STORAGE_PATH=file_explorer/pictures
NEXT_PUBLIC_FIREBASE_VIDEO_STORAGE_PATH=file_explorer/videos
NEXT_PUBLIC_FIREBASE_MUSIC_STORAGE_PATH=file_explorer/music
NEXT_PUBLIC_MY_PORTFOLIO_APP_URL=https://sparkling-nasturtium-3d4d3c.netlify.app
```
📥 Installation packages:
Intall packages & dependencies (use --force tag to install conflict packages version, detail in **Conflict npm packages** topic).
```console
npm install --force
```
Or install packages with legacy peer dependencies.
```console
npm install --legacy-peer-deps
```
Run client project (supported by [Create Next App](https://nextjs.org/docs/getting-started/installation))
```console
npm run dev
```
This project use somes old node version npm packages (< ver 18.), list is below. If you want to install more packages, you can choose some options:
1. Uninstall list below & install packages you want. Then reinstall.
2. Use `--force` tag after install command. For example: `npm i uuid --force`.
```console
# react-canvas-draw (This package need install more @types package for Typescript)
npm install react-canvas-draw@1.2.1 --force
npm i --save-dev @types/react-canvas-draw@1.2.3 --force
```
### ⌨️ Add more apps for project
You are developer & want to improve this project. Follow these steps:
1. Go to `WindowContainer.tsx` file, this includes app profile on desktop page, add new object like this:
2. Declare app name in file `utils.ts`
Your new app will display on desktop:
3. You can develop & put new app content file for `targetElement` with url: `src/components/WindowContentCpn`:
## ▶️ YouTube Demo
[](https://youtu.be/PtsflG2W43g)
## 💌 Contact
- Author - [minhtrifit](https://minhtrifit-dev.vercel.app)
- [Github](https://github.com/minhtrifit)
> CopyRight© minhtrifit