Viewport-Framer-Clone

Viewport is a dynamic web development platform designed to simplify the design-to-code workflow. With its intuitive drag-and-drop interface, developers and designers can easily create, customize, and deploy responsive websites without needing to write code manually. Viewport aims to streamline collaboration, enhance productivity, and turn designs into production-ready code effortlessly.

Table of Contents

• Overview
• Features
• Dependencies
• Git Setup
• Client Setup
• Server Setup
• Usage
• Contributors

Overview

• Viewport empowers developers and designers by providing a drag-and-drop interface that converts their designs into clean, production-ready code. Its versatile platform supports responsive design, code export, and real-time collaboration, enabling teams to build and deploy web applications faster than ever.

Features

• Drag-and-Drop Interface: Intuitively design layouts with easy-to-use drag-and-drop functionality.
• Code Export: Convert designs into clean, production-ready HTML, CSS, and JavaScript.
• Responsive Design: Automatically adjust layouts for different devices and screen sizes.
• Real-Time Collaboration: Work with team members in real-time to iterate and refine designs.
• Component Library: Access reusable components to speed up your design process.
• Custom Code Support: Easily add custom code snippets for unique functionality.

Dependencies

• Konva.js
• lucide-react

Git-Setup

Clone the repository:

git clone https://github.com/user-name/Viewport-Framer-Clone
cd Viewport-Framer-Clone

Setup

Install the dependencies:

pnpm install

Run client Interface:

pnpm dev

Usage

Access the app in your web browser at http://localhost:3000/.

Contributors

• Shaurya (LinkedIn)