JohnReedLOL/Windows11-3.0

Experience the look and feel of Windows 11 directly in your browser with this web-based clone. Enjoy a similar user interface and functionality.

โ˜… 0Forks 0GitHub โ†—Compare

Project website โ†—

README

๐Ÿ–ฅ๏ธ Windows 11

Welcome to the Windows Clone app built with React.js! ๐ŸŽ‰ Dive into this interactive simulation of the Windows operating system, packed with apps and features to play around with. Letโ€™s get started!

desktop lockscreen

You can enter anything on the login page to gain access to the app. No need for actual credentials!

๐ŸŽจ Features

  • ๐ŸŒ Chrome: Surf the web just like in a real Chrome browser.
  • ๐Ÿงฎ Calculator: Perform basic arithmetic operations with this handy calculator.
  • ๐Ÿ’ป VS Code: Virtual Visual Studio Code environment.
  • ๐Ÿ•น๏ธ Emoji Tic-Tac-Toe: Play a fun game of Tic-Tac-Toe using emojis!
  • ๐ŸŽต Spotify: Enjoy a simulated music player interface.
  • ๐Ÿ“ About Me: Learn about ME.

๐Ÿš€ Installation

To get this project running on your local machine, follow these simple steps:

  1. Clone the repository:

    git clone https://github.com/MishanPoudel/Windows11-3.0
  2. Navigate to the project directory:

    cd Windows11-3.0
  3. Install the dependencies:

    npm install
  4. Start the development server:

    npm start

    Your app will open in your default web browser at http://localhost:3000 ๐ŸŽ‰

๐Ÿ’ป Usage

  • Login Page: You can enter anything on the login page to gain access to the app. No need for actual credentials! ๐Ÿ”
  • Click on the icons on the desktop to open the different apps.
  • Use the taskbar to switch between open applications.
  • Interact with the apps to explore their features and functionalities!

๐Ÿ› ๏ธ Technologies Used

  • React.js: For building the interactive user interface.
  • Tailwind CSS: For styling the components and creating a desktop-like experience.
  • React Router DOM: For managing navigation and routing within the app.
  • Framer Motion: For adding animations and transitions.
  • React Draggable: For making elements draggable.

๐Ÿค Contributing

Want to contribute? Weโ€™d love your help! Fork the repository, make your changes, and submit a pull request. Please follow the coding standards and include tests where necessary.

โญ Support

If you enjoy this project or find it useful, please consider giving it a star on GitHub. Your support means a lot and helps encourage further development! ๐ŸŒŸ

Contact

Got questions or feedback? Reach out at [email protected]. Weโ€™d love to hear from you!

๐Ÿšง Note

Iโ€™m a beginner in React.js and web development, so my code might not be perfect. Iโ€™m constantly learning and improving, so any constructive feedback is appreciated!

๐Ÿ“ธ Screenshots

desktop browser vscode calculator emoji explorer switch sleep spotify startmenu aboutme

๐Ÿ’ก Inspiration

This project was slightly inspired by Vivek Patel's portfolio. Check it out for more creative ideas and inspiration!

gif

Enjoy exploring your Windows Clone app! ๐ŸŽ‰๐Ÿ’ป๐Ÿ–ฑ

Contributors

MishanPoudel

Issues