Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ksanjeeb/mit-scratch-blockly
This project is a web-based clone of the MIT Scratch app, using Blockly for block-based coding. It enables users to create interactive stories, games, and animations through a visual programming interface.
https://github.com/ksanjeeb/mit-scratch-blockly
blockly blocks code-block google-blockly javascript mit-scratch reactjs scratch sprite
Last synced: about 2 months ago
JSON representation
This project is a web-based clone of the MIT Scratch app, using Blockly for block-based coding. It enables users to create interactive stories, games, and animations through a visual programming interface.
- Host: GitHub
- URL: https://github.com/ksanjeeb/mit-scratch-blockly
- Owner: ksanjeeb
- Created: 2024-08-05T16:52:33.000Z (5 months ago)
- Default Branch: master
- Last Pushed: 2024-08-07T10:19:37.000Z (5 months ago)
- Last Synced: 2024-10-10T19:27:40.909Z (2 months ago)
- Topics: blockly, blocks, code-block, google-blockly, javascript, mit-scratch, reactjs, scratch, sprite
- Language: JavaScript
- Homepage: https://scratch0.vercel.app/
- Size: 255 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# MIT Scratch Clone
A modern web-based implementation of MIT Scratch, built with React, Vite, Blockly, and React-Draggable. This application allows users to visually program and animate sprites through a drag-and-drop interface.
## Features
- **Block-Based Programming**: Utilize Blockly to create visual scripts by snapping blocks together.
- **Sprite Manipulation**: Control sprite movements, rotations, and other actions.
- **Draggable Interface**: Easily move and position sprites on the canvas.
- **Undo/Redo**: Easily undo and redo actions to manage changes.
## Tech Stack
- **React**: For building the user interface.
- **Vite**: For fast development and build processes.
- **Blockly**: For creating block-based programming environments.
- **React-Draggable**: For enabling draggable functionality in React components.
## Getting Started
### Prerequisites
Ensure you have the following installed:
- **Node.js** (version 14 or higher) - I have tested with v18
- **npm** (Node Package Manager)
### Installation
1. **Clone the Repository**
```bash
git clone https://github.com/ksanjeeb/mit-scratch-clone.git
cd mit-scratch-clone
```
2. **Install Dependencies & Run**
```bash
npm install
```
```bash
npm run dev
```
### Your app will be up and running at localhost:5173
For questions or feedback, please reach out at [email protected].