VS Code Clone

This project is a web-based clone of Visual Studio Code (VS Code) built using modern web technologies. The application is developed with React, TypeScript, Redux for state management, and styled using Tailwind CSS.

Tech Stack

React

TypeScript

Redux

Tailwind CSS

Table of Contents

• Features
• Tech Stack
• Getting Started
  • Prerequisites
  • Installation
  • Running the Project

Features

Features

• File Tree Display: A dynamic file tree that represents the project's directory structure, allowing easy navigation through files and folders.
• Tab Bar for Opened Files: Displays a tab bar for all currently opened files, making it easy to switch between files.
• File Content Display with Syntax Highlighting: Each file's content is displayed with proper syntax highlighting using React Syntax Highlighter, enhancing code readability.
• Context Menu on Tab Bar:
  • Close: Closes the clicked file's tab.
  • Close All: Closes all opened file tabs.
  • Close Others: Closes all file tabs except the clicked one.
• State Management: Efficient state handling with Redux.
• Responsive Design: Fully responsive UI with Tailwind CSS.

Tech Stack

• React: A JavaScript library for building user interfaces.
• TypeScript: A typed superset of JavaScript that compiles to plain JavaScript.
• Redux: A predictable state container for JavaScript apps.
• Tailwind CSS: A utility-first CSS framework for rapid UI development.
• React-Redux: Official React bindings for Redux.

Getting Started

Prerequisites

Make sure you have the following installed:

• Node.js (v14.x or higher)
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/ahmedabdelrshed/VS-Code.git
   cd vs-code-clone

2. Install dependencies:

npm install