Notes on Auto Gen Code Tools

Synopsis

There are tools like lovable, bolt.new that will generate full stack applications based on prompting.

Some of the popular tools are:

bolt.new (Pros: Fullstack, commerical features; Cons: Lacks versioning, Regenerates all code each time)
bolt.diy (Opensource version of blot.new from stackblitz-labs, less expensive)
loveable.dev
Softgen
v0 by vercel (only to generate front-end prototypes, but easy to copy-paste)
Replit (Less control over the generated stack)
Bind AI (good for Python, Java Backend Applications)

Notes from autogen code using lovable.app

Lovable currently excels at building front-end applications. However, pairing Lovable with other tools will allow you to build full-stack web apps.

Capability	Description	Maturity Level
Frontend / UI	Build user interfaces & frontend	🟢 Mature
Persistence	Store and retrieve data	🟢 Mature
Authentication	Handle user login and accounts	🟢 Mature
Backend endpoint	API key protected endpoint such as OpenAI	🟢 Mature
Deployment	Publish, custom domains & deploy	🟢 Mature

UI - Framework

Note: shadcn is UI toolkit which will copy css into code without any fixed package dependencies.

package.json:

{
  "name": "vite_react_shadcn_ts",
  ...
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "build:dev": "vite build --mode development",
    "lint": "eslint .",
  },
  "dependencies": {
    "@hookform/resolvers": "^3.9.0",
    "@radix-ui/react-accordion": "^1.2.0",
    "@radix-ui/react-alert-dialog": "^1.1.1",
    ...
    "next-themes": "^0.3.0",  <== dynamic light/dark theme management.
    "react": "^18.3.1",
    "react-dom": "^18.3.1",

    "recharts": "^2.12.7",             <== Analytics
    "sonner": "^1.5.0",
    "tailwindcss-animate": "^1.0.7",   <== Tailwind runtime
    ...
  },
  "devDependencies": {
    "@eslint/js": "^9.9.0",
    "@tailwindcss/typography": "^0.5.15",
    "@types/node": "^22.5.5",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",

    "postcss": "^8.4.47",
    "tailwindcss": "^3.4.11",    <== Tailwind build time copy css.
    "typescript": "^5.5.3",
    "typescript-eslint": "^8.0.1",
    "vite": "^5.4.1"
  }
}

. ├── README.md ├── bun.lockb ├── components.json ├── eslint.config.js ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── public │ ├── favicon.ico │ ├── og-image.png │ └── placeholder.svg ├── src │ ├── App.css │ ├── App.tsx │ ├── components │ │ ├── layout │ │ │ └── Navbar.tsx │ │ └── ui │ │ ├── accordion.tsx │ │ ├── alert-dialog.tsx │ │ ├── ... │ │ └── use-toast.ts │ ├── hooks │ │ ├── use-mobile.tsx │ │ └── use-toast.ts │ ├── index.css │ ├── lib │ │ └── utils.ts │ ├── main.tsx │ ├── pages │ │ ├── Index.tsx │ │ ├── NotFound.tsx │ │ └── auth │ │ ├── Login.tsx │ │ └── Register.tsx │ ├── routes │ │ └── index.tsx │ └── vite-env.d.ts ├── tailwind.config.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts

11 directories, 79 files