Win11React

Android recreated in react

NEW: Android in React

We have replicated the windows 11 exspirence for those who can't update to it.


Realistic Desktop

Lots of people have used the Win11React project since its creation. However lots of people miss the functionality that we have embeded.

We have a working notepad application that you can write and save text documents.![](/images/Screenshot%202022-07-18%20162418.png)

We also have a community App Store with apps submited by users on GitHub.

![](/images/Screenshot%202022-07-18%20162553.png)


What features we now support!

Hello, I am Lukas Batema. Here is the story of my life how I became first interacted in the Win11React GitHub Repository
On the 2nd of August, 2021. I started by asking a dumb question in the image below:

![](/images/Screenshot%202022-05-20%20163250.png)

This, as you can see, sparked some outrage with a couple of people, as they disliked my apparently obvious question, but BlueEdgeTechno (which I will now refer to as, “Blue”, on forward) came back with a very polite question, asking for clarification to my question. Below are my responses to the clarification request, where one is pretty dumb, and the other one is, well, never mind.



![](/images/Screenshot%202022-05-20%20163418-9f546080.png)

That is how I first interacted with the project!


Lukas' first interactions

Today we have launched [Android in React](https://android.blueedge.me/). The project trys to emulate the android exsperience in your web browse. The project was started by Blue early this year. So far the project has not yet gained the same amount of traction as [Win11React](https://win11.blueedge.me/). This is mainly due to Windows 11 was not released at the time willreact became public, but android has been arround for a number of years.  The new project already had it's[ desktop build](https://github.com/blueedgetechno/androidInReact/releases/tag/0.0.2) released. We currently support Linux, windows and Mac for these builds.

![](/images/7974565e-ed1b-410b-8aa4-b186cd93f189-ffaf9c7f.png)


Android In React

Today we are happy to launch our own deployment preview system! The system is powered by [GitHub Actions](https://github.com/features/actions) and runs automaticly on every pull request.  The system is currently slower than netlify's system but at least its free and we can customise it to suit our needs best.



The current WORKFLOW.

```
```

```
name: Generate Preview
```

```
on:
pull_request:
types: [opened]
```

```
jobs:
repo:
name: Repo
runs-on: ubuntu-latest
```

```
steps:

- name: create git
  run: git init my-project && cd my-project

    
- name: create repo
  run: gh repo create win11bot/pr-${{ github.event.pull_request.number }} --public -y
  env:
    GITHUB_TOKEN: ${{ secrets.BOT }}
    
- name: Checkout code
  uses: actions/checkout@v2
  with:
    repository: win11bot/win11bot
    path: ./build
 
- name: Deploy to gh-pages
  uses: peaceiris/actions-gh-pages@v3
  with:
    personal_token: ${{ secrets.BOT }}
    publish_dir: ./build
    cname: ${{ github.event.pull_request.number }}.pr.blueedge.me
    external_repository: win11bot/pr-${{ github.event.pull_request.number }} 
```

```
build:
name: Build
needs: repo
runs-on: ubuntu-latest
```

```
steps:

    
- uses: actions/checkout@v1
  # Find the PR associated with this push, if there is one.
  # This will echo "Your PR is 7", or be skipped if there is no current PR.
- run: echo "Your PR is ${PR_NUMBER}"
  env:
   PR_NUMBER: ${{ github.event.pull_request.number }}

- name: Checkout code
  uses: actions/checkout@v2

- name: Install Node.js
  uses: actions/setup-node@v1
  with:
    node-version: '16.6.1'

- name: Install NPM packages
  run: npm ci

- name: Build project
  run: CI=false npm run build

- name: Upload production-ready build files
  uses: actions/upload-artifact@v2
  with:
    name: production-files
    path: ./build
```

```
deploy:
name: Deploy
needs: build
runs-on: ubuntu-latest
```

```
steps:
- name: Download artifact
  uses: actions/download-artifact@v2
  with:
    name: production-files
    path: ./build
    
- name: Deploy to gh-pages
  uses: peaceiris/actions-gh-pages@v3
  with:
    personal_token: ${{ secrets.BOT }}
    publish_dir: ./build
    cname: ${{ github.event.pull_request.number }}.pr.blueedge.me
    external_repository: win11bot/pr-${{ github.event.pull_request.number }}

- name: Comment PR
  uses: thollander/actions-comment-pull-request@main
  with:
     message: |
          ⌛ Deploy Preview - Build in Progress 
     GITHUB_TOKEN: ${{ secrets.BOT }}
     
- name: Sleep for 120 seconds
  uses: jakejarvis/wait-action@master
  with:
    time: '120s'
    
- name: Comment PR
  uses: thollander/actions-comment-pull-request@main
  with:
     message: |
          ✔️ Deploy Preview for win11blue ready! 
          😎 Browse the preview: https://${{ github.event.pull_request.number }}.pr.blueedge.me !
          🔨 If you experience an SSL issue then wait 2 minutes and try gain.
     GITHUB_TOKEN: ${{ secrets.BOT }}
```



Deploy Preview system

Hello devs,

So this is a windows 11 clone that I made in React in the span of 7 days. Would you like to check out? I bet you wont be able to tell the difference in full screen mode.

Website: [win11.blueedge.me](http://win11.blueedge.me/)
Github: [blueedgetechno/windows11](https://github.com/blueedgetechno/windows11)

[![](https://res.cloudinary.com/practicaldev/image/fetch/s--r-MGvWr9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw\_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pqwvwq6tcc94ju61aoj6.png)](https://res.cloudinary.com/practicaldev/image/fetch/s--r-MGvWr9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw\_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pqwvwq6tcc94ju61aoj6.png)

[![](https://res.cloudinary.com/practicaldev/image/fetch/s--fbGa45J6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw\_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8a06rq28d4r87s5npjrq.png)](https://res.cloudinary.com/practicaldev/image/fetch/s--fbGa45J6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw\_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8a06rq28d4r87s5npjrq.png)

[![](https://res.cloudinary.com/practicaldev/image/fetch/s--jwPoaahD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw\_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wj7tsst2owlwi2cv0oqa.png)](https://res.cloudinary.com/practicaldev/image/fetch/s--jwPoaahD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw\_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wj7tsst2owlwi2cv0oqa.png)

And this is just the tip of the iceberg, visit: [win11.blueedge.me](http://win11.blueedge.me/)



NEW: Android in React

Realistic Desktop

Recent posts

What features we now support!

Lukas' first interactions

Android In React

Deploy Preview system

Windows 11 in React Js 💻 🌈

Home

NEW: Android in React

Realistic Desktop

Recent posts

What features we now support!

Lukas' first interactions

Android In React

Deploy Preview system

Windows 11 in React Js 💻 🌈