Skip to content

Commit 2173194

Browse files
htdguidehtdguide
authored
Revise README for webOS project
Updated project name to 'webOS' and revised README content for clarity and conciseness, including badge additions and feature descriptions.
1 parent 25a69e4 commit 2173194

File tree

1 file changed

+49
-71
lines changed

1 file changed

+49
-71
lines changed

‎README.md‎

Lines changed: 49 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,75 @@
1-
# WebOS
1+
# webOS
22

3-
Welcome to **WebOS**! This project brings a desktop-like experience into your web browser using modern web technologies like React, WebAssembly, and Vite.
3+
Welcome to **WebOS**! This project brings a desktop-like experience into your web browser using modern web technologies.
44

5-
[Visit the Website](https://htdguide.com)
5+
<div id="top"></div>
66

7-
<img width="1792" alt="Screenshot 2025-05-21 at 7 35 52 PM" src="https://github.com/user-attachments/assets/59176430-205d-473a-b40b-c3640fe7f782" />
8-
<img width="1792" alt="Screenshot 2025-05-21 at 7 36 04 PM" src="https://github.com/user-attachments/assets/328ccca4-87a1-4c31-9f12-348607e8531b" />
9-
<img width="1792" alt="Screenshot 2025-05-21 at 7 37 13 PM" src="https://github.com/user-attachments/assets/bd8fba26-3958-4d2d-9229-43df9086a95f" />
7+
<div align="center">
108

9+
![last-commit](https://img.shields.io/github/last-commit/htdguide/webOS?style=flat&logo=git&logoColor=white&color=0080ff)
10+
![repo-top-language](https://img.shields.io/github/languages/top/htdguide/webOS?style=flat&color=0080ff)
11+
![repo-language-count](https://img.shields.io/github/languages/count/htdguide/webOS?style=flat&color=0080ff)
1112

12-
---
13+
*Built with the tools and technologies:*
14+
15+
![JSON](https://img.shields.io/badge/JSON-000000.svg?style=flat&logo=JSON&logoColor=white)
16+
![Markdown](https://img.shields.io/badge/Markdown-000000.svg?style=flat&logo=Markdown&logoColor=white)
17+
![npm](https://img.shields.io/badge/npm-CB3837.svg?style=flat&logo=npm&logoColor=white)
18+
![.ENV](https://img.shields.io/badge/.ENV-ECD53F.svg?style=flat&logo=dotenv&logoColor=black)
19+
![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E.svg?style=flat&logo=JavaScript&logoColor=black)
20+
![Vitest](https://img.shields.io/badge/Vitest-6E9F18.svg?style=flat&logo=Vitest&logoColor=white)
1321

14-
## **Explore More**
22+
![GNU Bash](https://img.shields.io/badge/GNU%20Bash-4EAA25.svg?style=flat&logo=GNU-Bash&logoColor=white)
23+
![React](https://img.shields.io/badge/React-61DAFB.svg?style=flat&logo=React&logoColor=black)
24+
![Docker](https://img.shields.io/badge/Docker-2496ED.svg?style=flat&logo=Docker&logoColor=white)
25+
![GitHub Actions](https://img.shields.io/badge/GitHub%20Actions-2088FF.svg?style=flat&logo=GitHub-Actions&logoColor=white)
26+
![Vite](https://img.shields.io/badge/Vite-646CFF.svg?style=flat&logo=Vite&logoColor=white)
27+
![ESLint](https://img.shields.io/badge/ESLint-4B32C3.svg?style=flat&logo=ESLint&logoColor=white)
1528

16-
For detailed documentation and insights into the project structure, visit [Wiki](https://github.com/htdguide/webportfolio/wiki).
29+
</div>
1730

31+
[Visit the Website](https://htdguide.com)
1832

19-
## **Key Features**
33+
---
2034

21-
- **Interactive React Interface**
22-
A sleek and responsive UI built with React, providing a dynamic and engaging interface with draggable, resizable app windows.
35+
<img width="1792" alt="Screenshot 2025-05-21 at 7 35 52 PM" src="https://github.com/user-attachments/assets/59176430-205d-473a-b40b-c3640fe7f782" />
36+
<img width="1792" alt="Screenshot 2025-05-21 at 7 36 04 PM" src="https://github.com/user-attachments/assets/328ccca4-87a1-4c31-9f12-348607e8531b" />
37+
<img width="1792" alt="Screenshot 2025-05-21 at 7 37 13 PM" src="https://github.com/user-attachments/assets/bd8fba26-3958-4d2d-9229-43df9086a95f" />
2338

24-
- **Dockerized Environment**
25-
Containerized using **Docker** for consistent environments and seamless deployment across platforms.
39+
---
2640

27-
- **Automated CI/CD Pipeline**
28-
Leveraging **GitHub Actions** for continuous integration and delivery, with automated Docker builds and deployments.
41+
## Overview
2942

30-
- **WebAssembly & C++ with Raylib**
31-
Integrates C++ code using **Raylib** and **WebAssembly** for performance-intensive tasks like algorithm visualization.
43+
webOS is a comprehensive platform that enables the development of interactive, desktop-like web experiences with seamless deployment, system management, and modular UI components. It combines React, WebAssembly, Docker, and automated workflows to deliver a flexible and scalable architecture for modern web applications.
3244

33-
- **Vite Build Tool**
34-
Improved build speed and performance with **Vite**.
45+
This project empowers developers to build sophisticated web environments with ease. The core features include:
3546

36-
- **Custom Build Automation**
37-
A **Makefile** automates the build process for C++ and WebAssembly components.
47+
- 🌐 **Device & Window Management:** Provides device-aware UI, multi-desktop support, and flexible window controls for a desktop-like experience.
48+
- 🚀 **Modular UI Components:** Supports mini-apps, notifications, wallpapers, and system controls for a rich user interface.
49+
- 🧩 **Extensible Architecture:** Facilitates easy integration of new features, apps, and system services within a cohesive environment.
50+
- 🛠️ **WebAssembly C++ modules** C++ apps running with native performance thanks to WebAssembly.
3851

3952
---
4053

41-
## **Technologies Used**
54+
### Installation
4255

43-
| **Category** | **Technologies** |
44-
|-----------------------|------------------------------|
45-
| **Frontend** | React, JavaScript, Vite |
46-
| **Containerization** | Docker |
47-
| **CI/CD** | GitHub Actions |
48-
| **Backend** | WebAssembly, C++ (Raylib) |
49-
| **Build Tools** | Makefile, Emscripten |
56+
Build webOS from the source and install dependencies:
5057

51-
---
52-
53-
## **What's Inside**
54-
55-
### **React Frontend**
56-
The UI is built with React and Vite, offering:
57-
- A **desktop-inspired design** with draggable, resizable app windows.
58-
- Interactive elements like desktop icons and background video wallpapers.
59-
- Smooth performance with optimized build times.
60-
61-
### **WebAssembly Integration**
62-
- **C++ and Raylib**:
63-
WebAssembly enables running C++ code in the browser, supporting features like:
64-
- A **Sorting Algorithms Visualizer**.
65-
- Experiments with game-like functionality.
66-
- **Performance Benefits**:
67-
Near-native performance for compute-heavy operations.
68-
69-
### **Dockerized Setup**
70-
- **Consistent Environments**:
71-
Docker ensures compatibility across development, testing, and production environments.
72-
- **Automated Deployment**:
73-
Images are built, pushed to Docker Hub, and pulled by the server automatically.
74-
75-
### **Automated CI/CD**
76-
- **Continuous Deployment** via **GitHub Actions**:
77-
- Docker builds and pushes images.
78-
- Updates the live server seamlessly.
79-
80-
### **Makefile Automation**
81-
Simplifies WebAssembly builds:
82-
- Automates compilation with Emscripten.
83-
- Optimizes binaries for better performance.
84-
85-
### **Vite Integration**
86-
- Faster builds and hot module replacement (HMR) for improved development experience.
58+
1. **Clone the repository:**
8759

88-
---
60+
```sh
61+
git clone https://github.com/htdguide/webOS
62+
```
63+
2. **Open repo and install node modules**
8964

90-
## **Screenshots**
91-
<img width="950" alt="Screenshot 2025-01-24 at 8 29 42 PM" src="https://github.com/user-attachments/assets/4ea658f1-1b8a-4194-9a5e-0da7e2658376" />
92-
<img width="951" alt="Screenshot 2025-01-24 at 8 29 58 PM" src="https://github.com/user-attachments/assets/f9ac9e0a-3c75-4043-b805-bd78fa2b8077" />
65+
```sh
66+
npm install
67+
```
68+
3. **Run development environment**
9369

94-
---
70+
```sh
71+
npm run dev
72+
```
9573

9674

9775

0 commit comments

Comments
 (0)