LiveCodeCraft 🚀

Welcome to LiveCodeCraft, a blazing-fast online HTML/CSS/JS code playground built from scratch. This tool allows you to write code, see an instant preview, and craft beautiful web snippets in real-time. Think of it as your personal mini CodePen, made with 💙 by Ajoy.

Table of Contents

• Features
• Technologies Used
• Getting Started
• Usage
• Contributing
• License
• Contact

Features

• Instant Preview: Write your code and see changes immediately.
• User-Friendly Interface: Simple layout for easy navigation.
• Support for Multiple Languages: HTML, CSS, and JavaScript.
• Responsive Design: Works well on both desktop and mobile devices.
• Customizable Themes: Choose from various themes to suit your style.
• Export Options: Download your projects for offline use.
• Real-Time Collaboration: Work with others in real-time.

Technologies Used

LiveCodeCraft leverages the following technologies:

• HTML: For structure.
• CSS: For styling, utilizing Tailwind CSS for a modern look.
• JavaScript: For functionality and interactivity.
• React: For building user interfaces.
• Node.js: For server-side logic.
• WebSocket: For real-time communication.

Getting Started

To get started with LiveCodeCraft, visit the Releases section. Download the latest version and execute the files as per the instructions provided.

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (version 14 or later)
• npm (Node package manager)

Installation

1. Clone the repository:

   git clone https://github.com/Kros13/LiveCodeCraft.git
   

2. Navigate into the project directory:

   cd LiveCodeCraft
   

3. Install the dependencies:

   npm install
   

4. Start the development server:

   npm start
   

5. Open your browser and navigate to http://localhost:3000.

Usage

Once you have the application running, you can start using it immediately. The interface consists of three main sections:

1. Code Editor: Write your HTML, CSS, and JavaScript code here.
2. Preview Pane: See the output of your code in real-time.
3. Settings: Customize your experience, including themes and export options.

Creating a New Snippet

1. Click on the "New Snippet" button.
2. Enter your code in the respective sections.
3. Save your snippet to revisit later.

Collaborating with Others

To collaborate, share the generated link with your friends or colleagues. They can join your session and edit the code in real-time.

Contributing

We welcome contributions to LiveCodeCraft! If you would like to contribute, please follow these steps:

1. Fork the repository.
2. Create a new branch:

   git checkout -b feature/YourFeature
   

3. Make your changes and commit them:

   git commit -m "Add some feature"
   

4. Push to the branch:

   git push origin feature/YourFeature
   

5. Open a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Contact

For any inquiries or feedback, feel free to reach out:

• Ajoy: [email protected]
• Follow me on GitHub: Kros13

Thank you for checking out LiveCodeCraft! We hope you enjoy using it as much as we enjoyed building it. Don't forget to check the Releases for updates and new features. Happy coding!