Skip to content

Commit de5d1e5

Browse files
davy39davy39
committed
Readme
1 parent 5ad5518 commit de5d1e5

1 file changed

Lines changed: 157 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
# ⚡ FrontStudio
2+
![alt text](https://img.shields.io/badge/demo-online-2ea44f.svg?style=for-the-badge&logo=github&logoColor=white)
3+
![License](https://img.shields.io/badge/license-%20%20GNU%20GPLv3%20-green?style=for-the-badge&logo=gnu)
4+
![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-3178C6?logo=typescript&logoColor=white&style=for-the-badge)
5+
![React](https://img.shields.io/badge/React-18-61DAFB?logo=react&logoColor=white&style=for-the-badge)
6+
![Vite](https://img.shields.io/badge/Vite-5.0+-646CFF?logo=vite&logoColor=white&style=for-the-badge)
7+
8+
9+
**FrontStudio** is a sophisticated, browser-based Integrated Development Environment (IDE) tailored for React development. It offers a VS Code-like experience directly in the browser, allowing developers to write, preview, manage dependencies, and share React projects instantly without any local setup.
10+
11+
Built on top of the powerful **Sandpack** ecosystem, FrontStudio provides a fully functional ephemeral file system, live preview, and intelligent code editing capabilities.
12+
13+
---
14+
15+
## 🚀 Features
16+
17+
* **💻 Full-Featured Code Editor:**
18+
* Powered by **Monaco Editor** (VS Code's core).
19+
* Syntax highlighting, line numbers, and minimap.
20+
* **IntelliSense & Type Acquisition:** Automatic downloading of TypeScript types (`@types/pkg`) for imported libraries.
21+
* **Prettier Integration:** Auto-format code with a click.
22+
* **wm File Explorer:**
23+
* Create, rename, delete, and move files and folders.
24+
* Drag-and-drop support for organizing project structure.
25+
* Context menus for quick actions.
26+
* **Mk Live Preview:**
27+
* Instant feedback with a hot-reloading preview panel.
28+
* Error overlays and status indicators.
29+
* **📦 Dependency Manager:**
30+
* visual interface to add/remove NPM packages via `package.json`.
31+
* **Auto-Install:** Detects new `import` statements in your code and automatically adds them to dependencies.
32+
* **wn Console & Debugging:**
33+
* Integrated console to view logs, warnings, and errors from the preview environment.
34+
* **🔗 Sharing & Persistence:**
35+
* **Share via URL:** Compresses the entire project state into a shareable URL hash.
36+
* **Import/Export:** Save projects as JSON files or load existing ones.
37+
* **🎨 UI/UX:**
38+
* Fully responsive layout with resizable panels.
39+
* Dark/Light mode support (System sync).
40+
* Clean, modern interface built with **Shadcn UI**.
41+
42+
---
43+
44+
## 🛠️ Tech Stack & Libraries
45+
46+
FrontStudio relies on a robust stack of modern web technologies.
47+
48+
### Core Architecture
49+
* [**React 18**](https://react.dev/) - The library for web and native user interfaces.
50+
* [**TypeScript**](https://www.typescriptlang.org/) - Strongly typed JavaScript for scalable development.
51+
* [**Vite**](https://vitejs.dev/) - Next Generation Frontend Tooling for fast builds.
52+
53+
### IDE Engine
54+
* [**@codesandbox/sandpack-react**](https://sandpack.codesandbox.io/) - The component toolkit that powers the in-browser bundling and preview engine.
55+
* [**@monaco-editor/react**](https://github.com/suren-atoyan/monaco-react) - React component for the Monaco Editor (VS Code).
56+
* [**@typescript/ata**](https://github.com/hediet/typescript-ata) - Automatic Type Acquisition to fetch `.d.ts` files for IntelliSense.
57+
* [**Prettier**](https://prettier.io/) - An opinionated code formatter run in the browser.
58+
59+
### UI & Styling
60+
* [**Tailwind CSS**](https://tailwindcss.com/) - A utility-first CSS framework.
61+
* [**Shadcn UI**](https://ui.shadcn.com/) - Re-usable components built using Radix UI and Tailwind CSS.
62+
* [**Radix UI**](https://www.radix-ui.com/) - Unstyled, accessible components for building high-quality design systems.
63+
* [**Lucide React**](https://lucide.dev/) - Beautiful & consistent icons.
64+
* [**React Resizable Panels**](https://github.com/bvaughn/react-resizable-panels) - For the adjustable IDE layout.
65+
* [**Next Themes**](https://github.com/pacocoursey/next-themes) - Perfect dark mode implementation.
66+
* [**Sonner**](https://sonner.emilkowal.ski/) - An opinionated toast component for React.
67+
68+
### Utilities
69+
* [**LZ-String**](https://github.com/pieroxy/lz-string) - Fast compression algorithm to store project code within the URL hash.
70+
* [**React DnD**](https://react-dnd.github.io/react-dnd/) (via Sandpack internal utils) - Handling drag-and-drop operations.
71+
72+
---
73+
74+
## ⚙️ How It Works
75+
76+
### 1. The Sandpack Core
77+
FrontStudio wraps the application in a `SandpackProvider`. This creates a virtual file system and handles the bundling logic. Unlike traditional bundlers that run on a server, Sandpack runs entirely in the browser using Service Workers to intercept requests and serve the compiled React code.
78+
79+
### 2. File System & Explorer
80+
The `FileExplorer` component visualizes the virtual file system provided by Sandpack. It transforms the flat file list (e.g., `{"/src/App.tsx": "..."}`) into a nested tree structure.
81+
* **Operations:** When you rename or move a file, the app updates the Sandpack state, which triggers a re-bundle.
82+
* **Context:** A `SettingsContext` is used to toggle visibility of configuration files (like `vite.config.ts` or `tsconfig.json`).
83+
84+
### 3. Dependency Management & Auto-Import
85+
The `CodeEditor` component uses regex (`IMPORT_REGEX`) to scan the active code for import statements.
86+
* If a user types `import { motion } from "framer-motion"`, the system checks `package.json`.
87+
* If missing, it automatically installs the "latest" version by updating the virtual `package.json` file.
88+
89+
### 4. URL Sharing Mechanism
90+
To make projects shareable without a database:
91+
1. The `files` object from Sandpack is serialized to JSON.
92+
2. `lz-string` compresses this JSON into a URL-safe string.
93+
3. This string is appended to the URL hash (`#`).
94+
4. On load, `Index.tsx` checks for a hash, decompresses it, and hydrates the IDE state.
95+
96+
---
97+
98+
## 📦 Installation
99+
100+
To run FrontStudio locally:
101+
102+
1. **Clone the repository:**
103+
```bash
104+
git clone https://github.com/your-username/frontstudio.git
105+
cd frontstudio
106+
```
107+
108+
2. **Install dependencies:**
109+
```bash
110+
npm install
111+
# or
112+
bun install
113+
```
114+
115+
3. **Start the development server:**
116+
```bash
117+
npm run dev
118+
```
119+
120+
4. Open your browser at `http://localhost:8080`.
121+
122+
---
123+
124+
## 📖 Usage Guide
125+
126+
### Creating Files
127+
1. Open the **File Explorer** (Files icon in the sidebar).
128+
2. Right-click on a folder or use the `+` buttons at the top to create a New File or Folder.
129+
3. Files ending in `.tsx`, `.ts`, `.css`, etc., will be handled automatically.
130+
131+
### Managing Dependencies
132+
1. Click the **Package** icon in the Activity Bar (sidebar).
133+
2. Type the name of a package (e.g., `canvas-confetti`) and click **Add**.
134+
3. Alternatively, simply `import` the package in your code, and FrontStudio will attempt to auto-install it.
135+
136+
### Sharing Code
137+
1. Click the **Share** button in the top toolbar.
138+
2. The URL in your browser bar is automatically updated.
139+
3. The link is copied to your clipboard. Send this link to anyone to share your exact project state.
140+
141+
---
142+
143+
## 🤝 Contributing
144+
145+
Contributions are welcome! Please feel free to submit a Pull Request.
146+
147+
1. Fork the project.
148+
2. Create your feature branch (`git checkout -b feature/AmazingFeature`).
149+
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`).
150+
4. Push to the branch (`git push origin feature/AmazingFeature`).
151+
5. Open a Pull Request.
152+
153+
---
154+
155+
## 📄 License
156+
157+
Distributed under the MIT License. See `LICENSE` for more information.

0 commit comments

Comments
 (0)