TG Blocks

TG Blocks is an interactive learning platform designed to help beginners in programming, particularly first-year computer science students, understand algorithms through visual representation. It offers a block-based learning environment with interactive challenges and real-time code generation.

📌 Index - Specifications

• TG Blocks
• I. Overview
• II. Features
• III. Technologies Used
• IV. Installation Guide
• V. Target Audience
• VI. Keywords

---

I. Overview

TG Blocks provides a visual representation of algorithms alongside their corresponding C code. The platform enables users to build and understand algorithms using block-based programming while simultaneously viewing the equivalent code. Additionally, TG Blocks offers interactive learning services with step-by-step challenges to reinforce algorithmic thinking.

---

II. Features

✅ User-friendly Interface – Built with React for a smooth and interactive user experience.

✅ Interactive Learning – Users can complete challenges and solve algorithmic problems.

✅ Visual Representation – Uses block-based programming to simplify algorithm design.

✅ Multiple Programming Languages – Primarily supports C, with future expansions planned.

✅ Offline Version – The platform is available as a standalone desktop application.

✅ Contribution Feature – Users can add or modify algorithms within the platform.

✅ Authentication System – Allows users to save progress and contributions (not included in the offline version).

---

III. Technologies Used

Frontend

• React.js – Provides an interactive user interface.
• Electron.js – Used for the offline desktop version.

Backend

• PHP – Handles server-side logic and API requests.
• Laravel – Backend framework for efficient development.

Database

• MySQL – Manages user data and algorithm storage.

Primary Programming Language

• C – The main language used for algorithm implementation and execution.

---

Live preview (Beta version) available

check it on : https://tg-blocks.vercel.app/

IV. Installation Guide

Prerequisites

• Node.js and npm (for frontend setup)
• PHP and Composer (for backend setup)
• MySQL (for database management)

Steps to Run Locally

1. Clone the Repository

   git clone https://github.com/Sidali-Djeghbal/BLOCKS.git
   cd BLOCKS
   npm install
   npm run Start

2. Access the Application Open http://localhost:3000 in your browser.

---

V. Target Audience

🎯 First-year computer science students.

🎯 Beginners in programming.

🎯 Instructors seeking interactive algorithm teaching tools.

---

VI. Keywords

🔎 #React #PHP #Laravel #C #Algorithms #Programming #Block-Based-Programming #Electron.js #InteractiveLearning