Code Deck: An Online Coding IDE

Welcome to Code Deck, a feature-rich online coding IDE built using React and styled-components. This project is designed to provide a seamless coding experience with live preview functionality. It supports writing and testing HTML, CSS, and JavaScript in real time.

Features

• Responsive Layout: Automatically adjusts layout based on screen size.
• Live Preview: Real-time preview of your HTML, CSS, and JavaScript code.
• Playground: A dedicated section to experiment with your code.
• Modern UI: Built using styled-components for a clean and modern look.
• Error Handling: Includes a custom Error404 page for invalid routes.

---

Tech Stack

• Frontend: React, React Router
• Styling: Styled-components
• Bundler: Vite for fast builds and development

---

Demo

Check out the live demo of the project here.

---

Getting Started

Follow these steps to set up the project locally:

Prerequisites

• Node.js installed on your system
• Git for version control

Installation

1. Clone the repository:

   git clone https://github.com/HariPasapuleti/Code-deck.git

2. Navigate to the project directory:

   cd Code-deck

3. Install dependencies:

   npm install

4. Start the development server:

   npm run dev

---

Usage

1. Home Page: Browse to the home page and select a playground.
2. Code Deck: Write your HTML, CSS, and JavaScript code in the provided editors.
3. Live Preview: The output updates in real time as you write your code.