Merge pull request #374 from sensebox/development

Development

Author: Thiemann96

.env

@@ -1,4 +1,5 @@
-REACT_APP_COMPILER_URL=https://compiler.sensebox.de
+REACT_APP_INITIAL_COMPILER_URL=https://compiler.sensebox.de
+
 REACT_APP_BOARD=sensebox-mcu
 REACT_APP_BLOCKLY_API=https://api.blockly.sensebox.de
 

README.md

@@ -1,32 +1,122 @@
- <img src="/src/components/sensebox_logo.svg?raw=true" height="128" alt="senseBox Logo"/>
-
 # React Ardublockly
 
-This repository contains the source code and documentation of [sensebox-ardublockly](https://sensebox-ardublockly.netlify.app/).
+<div align="center"> 
+<img src="/src/components/sensebox_logo.svg?raw=true" height="128" alt="senseBox Logo"/>
+</div>
+
+[![Netlify Status](https://api.netlify.com/api/v1/badges/YOUR-BADGE-ID/deploy-status)](https://app.netlify.com/sites/sensebox-ardublockly/deploys)
+[![GitHub license](https://img.shields.io/github/license/sensebox/React-Ardublockly)](https://github.com/sensebox/React-Ardublockly/blob/master/LICENSE)
+
+A modern, React-based version of the [senseBox](https://sensebox.de) Ardublockly environment. This project is the continuation of [blockly.sensebox.de](https://blockly.sensebox.de/ardublockly/?lang=de&board=sensebox-mcu) and offers an improved user interface and new features.
+
+## 🚀 Features
+
+- 📱 Modern, responsive user interface
+- 🧩 Visual programming with Blockly
+- 💾 Automatic project saving
+- 🔄 Easy code export
+- 📊 Support for various senseBox boards
+- 🌍 Multilingual interface (German/English)
+- 📱 Integration with senseBox Connect App
+
+## 🛠 Installation
+
+### Prerequisites
+
+- [Node.js](https://nodejs.org/en/) (Version 10.x or higher)
+- npm (comes with Node.js)
+- Git (optional, for version control)
+
+### Setting up the Development Environment
+
+1. Clone or download repository:
+
+   ```bash
+   git clone https://github.com/sensebox/React-Ardublockly.git
+   # or
+   # Direct download: https://github.com/sensebox/React-Ardublockly/archive/master.zip
+   ```
+
+2. Change to project directory:
+
+   ```bash
+   cd React-Ardublockly
+   ```
+
+3. Install dependencies:
+
+   ```bash
+   npm ci   # Recommended for reproducible builds
+   # or
+   npm install   # Alternative
+   ```
+
+4. Start development server:
+
+   ```bash
+   npm start
+   ```
+
+5. Open browser and navigate to [http://localhost:3000](http://localhost:3000)
+
+## 🔧 Configuration
+
+### Board Selection
+
+- **senseBox MCU**: Standard board with Arduino compatibility
+- **senseBox MCU-S2**: ESP32-based board with extended functionality
+
+### Compiler Settings
+
+The compiler URL can be configured in the `.env` file:
+
+```
+REACT_APP_COMPILER_URL=https://compiler.sensebox.de
+```
+
+## 📝 Development Guidelines
+
+### Code Style
+
+- We use [Prettier](https://prettier.io) for consistent formatting
+- Configuration in `.prettierrc.json`
+- ESLint for JavaScript/React best practices
 
-This project was created with [Create React App](https://github.com/facebook/create-react-app) and represents the continuation or improvement of [blockly.sensebox.de](https://blockly.sensebox.de/ardublockly/?lang=de&board=sensebox-mcu).
+### Branching Strategy
+If you want to contribute **please use the development branch** ! The main branch is only used for production and may be outdated!
+- `main`: Production branch 
+- `development`: Development branch
+- Feature branches: `feature/name-of-feature`
+- Bugfix branches: `bugfix/name-of-bug`
 
-## Getting Started
+## 🤝 Contributing
 
-1. [Download](https://github.com/sensebox/React-Ardublockly/archive/master.zip) or clone the GitHub Repository `git clone https://github.com/sensebox/React-Ardublockly` and checkout to branch `master`.
+1. Create a fork
+2. Create feature branch (`git checkout -b feature/AmazingFeature`)
+3. Commit changes (`git commit -m '[Area] Add amazing feature'`)
+4. Push branch (`git push origin feature/AmazingFeature`)
+5. Create Pull Request
 
-2. install [Node.js v10.xx](https://nodejs.org/en/) on your local machine
+## 🐛 Known Issues
 
-3. open shell and navigate inside folder `React-Ardublockly`
+- Redux DevTools must be installed or the corresponding line in `store.js` must be commented out
+- Some boards require special drivers for USB connection
 
-   - run `npm ci`
-   - run `npm start`
+## 📚 Documentation
 
-4. open [localhost:3000](http://localhost:3000)
+- [User Manual](https://docs.sensebox.de/docs/category/blockly-2)
+- [Hardware-Glossar](https://docs.sensebox.de/docs/category/glossar)
 
-## Troubleshoot
+## 🌐 Demo
 
-Ensure that line 14 in [store.js](https://github.com/sensebox/React-Ardublockly/blob/master/src/store.js#L14) is commented out or otherwise you have installed [Redux DevTools Extension](http://extension.remotedev.io/).
+A live demo of the current version can be found at [https://blockly.sensebox.de/](https://blockly.sensebox.de/)
 
-## Demo
+## 📄 License
 
-A demo of the current status of the master branch can be accessed via [https://blockly-react.netlify.app/](https://blockly-react.netlify.app/) :rocket:.
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
 
-## Coding Guidelines
+## 🙏 Acknowledgments
 
-We use the code formatter [prettier](https://prettier.io) for consistancy. The coresponding formatting settings can be found in the `.prettierrc.json` file. Possible options can be found [here](https://prettier.io/docs/en/options) but should only be changed if necessary.
+- [Blockly](https://developers.google.com/blockly) - Google's visual programming language
+- [Create React App](https://github.com/facebook/create-react-app) - React project template
+- [Material-UI](https://material-ui.com/) - React UI Framework