Webweaver: An Online Web Development Ide

WebweaverWebWeaver is an open-source, lightweight, and powerful online IDE for frontend designers and developers. It allows you to quickly build, test, and deploy frontend code using HTML, CSS, and JavaScript, all within your browser. With WebWeaver, you can write your code, see live previews, and experiment in real-time.It is built with React, Tailwind and powered by the Express.js backend restful api for authentication and saving user code . It provides a seamless environment for developers to write, execute, and style their code directly in the browser.

Features

• Real-Time Preview: See live updates of your code as you type.
• Multi-Language Support: Write HTML, CSS, and JavaScript seamlessly.
• No Setup Needed: Instantly start coding with no installation or configuration.
• Collaboration: Share your pens with others and explore open-source community projects.
• Customizable Layout: Organize your workspace for a more efficient development experience.
• Minimalist UI: Clean and distraction-free interface to help you focus on coding.
• Inspiration Hub: Discover, remix, and learn from the creative work of others in the WebWeaver community.

How to Use

1. Start a New Project:

   • Go to WebWeaver on CodePen.
   • Click on Create New Pen to start building your frontend code.
   • Select the desired language (HTML, CSS, JavaScript) for your project.

2. Write Code:

   • Add HTML in the HTML section.
   • Style it with CSS in the CSS section.
   • Add interactivity with JavaScript in the JS section.

3. Live Preview:

   • See the live preview of your project in real-time.
   • Make changes, and the preview will automatically update.

4. Save & Share:

   • Save your pen, and share it with others via a URL or directly to your social media platforms.
   • You can also view and remix public pens from other developers for inspiration

Why WebWeaver?

WebWeaver is designed for frontend developers who need a fast, efficient, and powerful way to build and experiment with their code. Whether you are just learning to code or are a seasoned professional, WebWeaver provides the tools to make frontend development more accessible, enjoyable, and efficient.

Features at a Glance:

• Supports HTML5, CSS3, and ES6 JavaScript.
• Responsive design previews – view how your work will look on various devices.
• Code collaboration – share your pens with others for feedback or collaboration.
• Quick deployment – test your code instantly without needing a server.

Technology Stack:

• Frontend: React.js
• UI Library: Tailwind css
• Backend: Expressjs
• Database: monogodb
• ODM: mongoose
• **auth:**jwt
• Styling: CSS

Getting Started:

Installation

1. Clone the repository:

   git clone https://github.com/ShivanshKumar760/Webweaver.git
   

Prerequisites:

• Node.js (v14.x or higher)

---

Frontend Setup:

1. Navigate to the frontend directory:

   cd client

2. Install dependencies:

   npm install or npm i or pnpm install

3. Run the React server:

   npm run dev or pnpm run dev
   

Backend Setup

1. Navigate to the server directory:

   cd server

2. Install dependencies:

   npm install or npm i or pnpm install

3. Run the React server:

   npm start or node server.js