https://github.com/ksanjeeb/mit-scratch-dnd

This project is a web-based clone of the MIT Scratch app, using custom block based on react beautiful dnd for block-based coding.
https://github.com/ksanjeeb/mit-scratch-dnd

drag-and-drop javascript mit react-beatutiful-dnd react-dnd reactjs scratch scratch-app sprite

Last synced: 15 days ago
JSON representation

This project is a web-based clone of the MIT Scratch app, using custom block based on react beautiful dnd for block-based coding.

• Host: GitHub
• URL: https://github.com/ksanjeeb/mit-scratch-dnd
• Owner: ksanjeeb
• Created: 2024-08-09T19:11:18.000Z (5 months ago)
• Default Branch: master
• Last Pushed: 2024-08-12T16:18:40.000Z (5 months ago)
• Last Synced: 2024-10-31T20:44:05.188Z (2 months ago)
• Topics: drag-and-drop, javascript, mit, react-beatutiful-dnd, react-dnd, reactjs, scratch, scratch-app, sprite
• Language: JavaScript
• Homepage: https://scratch-playground.vercel.app
• Size: 243 KB
• Stars: 1
• 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, React Beautiful Drag-and-drop, and React-Draggable. This application allows users to visually program and animate sprites through a drag-and-drop interface.

## Features

- **Block-Based Programming**: Utilize custom block using react drag and drop 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.

- **React Beautiful DND**: For creating drag and drop 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**

2. **Install Dependencies & Run**

```bash

  npm install

```

```bash

  npm run dev

```

### Your app will be up and running at localhost:5173

**To Check Same implementation using Google Blockly Please got to this url - https://github.com/ksanjeeb/MIT-Scratch-Blockly** 

For questions or feedback, please reach out at [email protected].