Project Structure Generator

Organize your monolithic code into a modular project structure with proper folder hierarchy and imports

Your Code

Project Name

Project Architecture Framework

Paste your monolithic code here:

Generated Structure

Folder Structure

my-awesome-project/

src/

components/

Card.js

services/

api.js

utils/

helpers.js

index.js

public/

index.html

styles.css

package.json

README.md

Generated Files

src/services/api.js

// API service for data fetching
export function getData() {
    return fetch('/api/data').then(res => res.json());
}

src/components/Card.js

// Card component for displaying data
export function renderData(data) {
    const container = document.getElementById('data-container');
    container.innerHTML = data.map(item => `
        <div class="card">
            <h3>${item.title}</h3>
            <p>${item.description}</p>
        </div>
    `).join('');
}

How It Works

Paste Your Code

Simply paste your monolithic code into the editor. Our analyzer will understand your project structure.

Generate Structure

We'll create a logical folder structure with proper separation of concerns and component organization.

Export & Download

Download your organized project as a ZIP file with all files properly structured and imported.

Made with DeepSite - 🧬 Remix

`; } function createPackageJson(projectName, framework) { const baseConfig = { name: projectName, version: "1.0.0", description: "A project generated with Project Structure Generator", scripts: { start: "npx serve public", build: "vite build", dev: "vite" }, dependencies: {}, devDependencies: { "vite": "^4.4.0" } }; switch(framework) { case 'react': case 'react-ts': baseConfig.main = framework === 'react-ts' ? "src/index.tsx" : "src/index.jsx"; baseConfig.dependencies = { "react": "^18.2.0", "react-dom": "^18.2.0" }; baseConfig.devDependencies = { ...baseConfig.devDependencies, "@vitejs/plugin-react": "^4.0.0", "@types/react": "^18.0.0", "@types/react-dom": "^18.0.0" }; if (framework === 'react-ts') { baseConfig.devDependencies.typescript = "^5.0.0"; } break; case 'vue': case 'vue-ts': baseConfig.main = "src/main.js"; baseConfig.dependencies = { "vue": "^3.2.47" }; baseConfig.devDependencies = { ...baseConfig.devDependencies, "@vitejs/plugin-vue": "^4.0.0", "@vue/compiler-sfc": "^3.2.47" }; if (framework === 'vue-ts') { baseConfig.devDependencies.typescript = "^5.0.0"; baseConfig.devDependencies["@vue/runtime-core"] = "^3.2.47"; } break; case 'angular': baseConfig.main = "src/main.ts"; baseConfig.dependencies = { "@angular/core": "^15.2.0", "@angular/common": "^15.2.0", "@angular/platform-browser": "^15.2.0" }; baseConfig.devDependencies = { ...baseConfig.devDependencies, "@angular/cli": "^15.2.0", "@angular/compiler-cli": "^15.2.0", "typescript": "^5.0.0" }; break; default: // vanilla baseConfig.main = "src/index.js"; } return JSON.stringify(baseConfig, null, 2); } });