Skip to content

Commit 9bfb5ad

Browse files
bryceweeksbryceweeks
committed
Initial commit: Python Playground with Vue 3, Vite, Monaco Editor & Pyodide
 Features: - Real-time Python execution in browser - Monaco Editor with syntax highlighting - File upload/download functionality - Package manager for Python libraries - Responsive modern UI - Pre-built code examples - GitHub Actions deployment workflow Tech Stack: - Vue 3 + TypeScript + Composition API - Vite for build system - Pyodide for Python runtime - Pinia for state management - GitHub Pages deployment ready
0 parents  commit 9bfb5ad

36 files changed

+7912
-0
lines changed

‎.editorconfig‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue,css,scss,sass,less,styl}]
2+
charset = utf-8
3+
indent_size = 2
4+
indent_style = space
5+
insert_final_newline = true
6+
trim_trailing_whitespace = true
7+
8+
end_of_line = lf
9+
max_line_length = 100

‎.gitattributes‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
* text=auto eol=lf

‎.github/workflows/deploy.yml‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
name: Deploy to GitHub Pages
2+
3+
on:
4+
# Runs on pushes targeting the default branch
5+
push:
6+
branches: ['main']
7+
8+
# Allows you to run this workflow manually from the Actions tab
9+
workflow_dispatch:
10+
11+
# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
12+
permissions:
13+
contents: read
14+
pages: write
15+
id-token: write
16+
17+
# Allow one concurrent deployment
18+
concurrency:
19+
group: 'pages'
20+
cancel-in-progress: true
21+
22+
jobs:
23+
# Build job
24+
build:
25+
runs-on: ubuntu-latest
26+
steps:
27+
- name: Checkout
28+
uses: actions/checkout@v4
29+
30+
- name: Set up Node.js
31+
uses: actions/setup-node@v4
32+
with:
33+
node-version: '20'
34+
cache: 'npm'
35+
36+
- name: Install dependencies
37+
run: npm ci
38+
39+
- name: Build
40+
run: npm run build
41+
42+
- name: Setup Pages
43+
uses: actions/configure-pages@v4
44+
45+
- name: Upload artifact
46+
uses: actions/upload-pages-artifact@v3
47+
with:
48+
# Upload dist repository
49+
path: './dist'
50+
51+
# Deployment job
52+
deploy:
53+
environment:
54+
name: github-pages
55+
url: ${{ steps.deployment.outputs.page_url }}
56+
runs-on: ubuntu-latest
57+
needs: build
58+
steps:
59+
- name: Deploy to GitHub Pages
60+
id: deployment
61+
uses: actions/deploy-pages@v4

‎.gitignore‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
.DS_Store
12+
dist
13+
dist-ssr
14+
coverage
15+
*.local
16+
17+
/cypress/videos/
18+
/cypress/screenshots/
19+
20+
# Editor directories and files
21+
.vscode/*
22+
!.vscode/extensions.json
23+
.idea
24+
*.suo
25+
*.ntvs*
26+
*.njsproj
27+
*.sln
28+
*.sw?
29+
30+
*.tsbuildinfo

‎.prettierrc.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"$schema": "https://json.schemastore.org/prettierrc",
3+
"semi": false,
4+
"singleQuote": true,
5+
"printWidth": 100
6+
}

‎.vscode/extensions.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"recommendations": [
3+
"Vue.volar",
4+
"dbaeumer.vscode-eslint",
5+
"EditorConfig.EditorConfig",
6+
"esbenp.prettier-vscode"
7+
]
8+
}

‎README.md‎

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
# 🐍 Python Playground
2+
3+
A modern web-based Python playground built with Vue 3, Vite, Monaco Editor, and Pyodide. Write and execute Python code directly in your browser!
4+
5+
## ✨ Features
6+
7+
- 🎯 **Real-time Python execution** - Run Python code instantly in the browser
8+
- 📝 **Monaco Editor** - Full-featured code editor with syntax highlighting, autocomplete, and error detection
9+
- 🎨 **Modern UI** - Beautiful, responsive interface built with Vue 3
10+
- 📚 **Code Examples** - Pre-built examples to get you started quickly
11+
- 📁 **File Upload** - Upload and load Python files (.py, .txt, .pyw) directly into the editor
12+
- 💾 **Download Code** - Save your work as a Python file
13+
- 📦 **Package Manager** - Install and manage Python packages on-demand
14+
- 🔥 **Zero Setup** - No Python installation required, everything runs in the browser
15+
- 📱 **Responsive Design** - Works great on desktop and mobile devices
16+
17+
## 🚀 Technologies Used
18+
19+
- **Frontend Framework**: Vue 3 with TypeScript
20+
- **Build Tool**: Vite
21+
- **Code Editor**: @guolao/vue-monaco-editor
22+
- **Python Runtime**: Pyodide
23+
- **State Management**: Pinia
24+
- **Styling**: Modern CSS with responsive design
25+
26+
## 🛠️ Getting Started
27+
28+
### Prerequisites
29+
30+
- Node.js (version 16 or higher)
31+
- npm or yarn
32+
33+
### Installation
34+
35+
1. Clone the repository:
36+
```bash
37+
git clone https://github.com/hypnguyen1209/python-playground.git
38+
cd python-playground
39+
```
40+
41+
2. Install dependencies:
42+
```bash
43+
npm install
44+
```
45+
46+
3. Start the development server:
47+
```bash
48+
npm run dev
49+
```
50+
51+
4. Open your browser and navigate to `http://localhost:5173`
52+
53+
## 📋 Available Scripts
54+
55+
- `npm run dev` - Start the development server
56+
- `npm run build` - Build for production
57+
- `npm run preview` - Preview the production build
58+
- `npm run lint` - Run ESLint
59+
- `npm run format` - Format code with Prettier
60+
61+
## 🎯 Usage
62+
63+
1. **Write Code**: Use the Monaco Editor on the left to write your Python code
64+
2. **Upload Files**: Click "Upload File" to load existing Python files into the editor
65+
3. **Run Code**: Click the "Run Code" button to execute your Python code
66+
4. **View Output**: See the results in the output panel on the right
67+
5. **Load Examples**: Use the dropdown to load pre-built code examples
68+
6. **Install Packages**: Use the package manager panel to install additional Python libraries
69+
7. **Download Code**: Save your work using the "Download" button
70+
8. **Clear Output**: Use the "Clear Output" button to reset the output panel
71+
72+
## 📦 Available Python Packages
73+
74+
The playground comes with Python's standard library. Additional packages can be installed on-demand using Pyodide's package system. Common packages include:
75+
76+
- **numpy** - Numerical computing
77+
- **pandas** - Data analysis and manipulation
78+
- **matplotlib** - Plotting and visualization
79+
- **scipy** - Scientific computing
80+
- **pycryptodome** - Crypto library
81+
- **requests** - HTTP library
82+
- **beautifulsoup4** - Web scraping
83+
- **micropip** - Package installer for Pyodide
84+
85+
## 🎯 Example Code
86+
87+
The playground includes several built-in examples:
88+
89+
1. **Hello World** - Basic Python syntax
90+
2. **Data Structures** - Lists, dictionaries, and sets
91+
3. **Loops and Functions** - Control flow and function definitions
92+
4. **Data Analysis** - Statistics and data processing
93+
5. **File Processing** - Text analysis (great for testing uploads!)
94+
6. **Object-Oriented Programming** - Classes and objects
95+
96+
## 🚀 Live Demo
97+
98+
🌐 **Live Demo**: [https://hypnguyen1209.github.io/python-playground/](https://hypnguyen1209.github.io/python-playground/)
99+
100+
The application features:
101+
102+
1. Write or upload Python code
103+
2. Click "Run Code" to execute
104+
3. View results in real-time
105+
4. Install packages as needed
106+
5. Download your work when done
107+
108+
## 🔧 Architecture
109+
110+
- **Frontend**: Vue 3 with Composition API and TypeScript
111+
- **Editor**: Monaco Editor (same as VS Code) with Python language support
112+
- **Python Runtime**: Pyodide (CPython compiled to WebAssembly)
113+
- **State Management**: Pinia for reactive state
114+
- **Build System**: Vite with modern ES modules
115+
- **Styling**: CSS Grid/Flexbox with responsive design
116+
117+
## 🤝 Contributing
118+
119+
Contributions are welcome! Please feel free to submit a Pull Request.
120+
121+
## 🐛 Troubleshooting
122+
123+
### Common Issues
124+
125+
**Pyodide Loading Slowly**
126+
- Pyodide downloads ~6MB on first load
127+
- Subsequent loads are cached by the browser
128+
- Check browser console for loading progress
129+
130+
**Package Installation Fails**
131+
- Not all PyPI packages are available in Pyodide
132+
- Check [Pyodide package list](https://pyodide.org/en/stable/usage/packages-in-pyodide.html)
133+
- Some packages may require additional setup
134+
135+
**Code Execution Errors**
136+
- Check Python syntax in the editor
137+
- Some advanced Python features may not be supported
138+
- File system operations are limited in browser environment
139+
140+
### Browser Compatibility
141+
142+
- **Chrome/Edge**: Full support ✅
143+
- **Firefox**: Full support ✅
144+
- **Safari**: Full support ✅
145+
- **Mobile browsers**: Basic support ⚠️
146+
147+
## 🚀 Deployment
148+
149+
### Production Build
150+
151+
```bash
152+
npm run build
153+
```
154+
155+
The build output will be in the `dist/` directory, ready for deployment to any static hosting service.
156+
157+
### GitHub Pages Deployment
158+
159+
This project includes automatic deployment to GitHub Pages via GitHub Actions:
160+
161+
1. **Setup**: The repository includes a `.github/workflows/deploy.yml` workflow file
162+
2. **Automatic**: Deploys automatically on every push to the `main` branch
163+
3. **Manual**: Can also be triggered manually from the Actions tab
164+
4. **Live URL**: Once deployed, access at `https://hypnguyen1209.github.io/python-playground/`
165+
166+
#### Enable GitHub Pages:
167+
1. Go to your repository Settings
168+
2. Navigate to "Pages" in the sidebar
169+
3. Under "Source", select "GitHub Actions"
170+
4. The workflow will automatically deploy on the next push
171+
172+
### Other Deployment Options
173+
174+
- **Vercel**: `vercel --prod`
175+
- **Netlify**: Drag & drop the `dist/` folder
176+
- **Firebase Hosting**: `firebase deploy`
177+
178+
### Environment Variables
179+
180+
No environment variables required - everything runs client-side!
181+
182+
## 📄 License
183+
184+
This project is licensed under the MIT License.
185+
186+
## 🙏 Acknowledgments
187+
188+
- [Pyodide](https://pyodide.org/) - Python in the browser
189+
- [Monaco Editor](https://microsoft.github.io/monaco-editor/) - Code editor from VS Code
190+
- [Vue.js](https://vuejs.org/) - Progressive JavaScript framework
191+
- [Vite](https://vitejs.dev/) - Next generation frontend tooling
192+
193+
---
194+
195+
**🔥 Powered by hypnguyen1209**

‎env.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="vite/client" />

‎eslint.config.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { globalIgnores } from 'eslint/config'
2+
import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
3+
import pluginVue from 'eslint-plugin-vue'
4+
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
5+
6+
// To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
7+
// import { configureVueProject } from '@vue/eslint-config-typescript'
8+
// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
9+
// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup
10+
11+
export default defineConfigWithVueTs(
12+
{
13+
name: 'app/files-to-lint',
14+
files: ['**/*.{ts,mts,tsx,vue}'],
15+
},
16+
17+
globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),
18+
19+
pluginVue.configs['flat/essential'],
20+
vueTsConfigs.recommended,
21+
skipFormatting,
22+
)

‎index.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
6+
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
7+
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
8+
<link rel="shortcut icon" href="/favicon.ico">
9+
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
10+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
11+
<meta name="description" content="Python Playground - Write and execute Python code in your browser with Pyodide and Monaco Editor">
12+
<meta name="keywords" content="python, playground, code editor, pyodide, monaco editor, online python, browser python">
13+
<title>Python Playground</title>
14+
</head>
15+
<body>
16+
<div id="app"></div>
17+
<script type="module" src="/src/main.ts"></script>
18+
</body>
19+
</html>

0 commit comments

Comments
 (0)