AI Coding with
Flask

@app.route('/users')
def get_users():
    cur.execute("""
        SELECT id, name, email
        FROM users
        WHERE active = true
    """)
    users = cur.fetchall()
    return render_template('users.html', users=users)

Crystal clear. You see the exact SQL.

// app/users/page.tsx
import { prisma } from '@/lib/prisma'

export default async function UsersPage() {
  const users = await prisma.user.findMany({
    where: { active: true },
    select: { id: true, name: true, email: true }
  })

  return (
    <div>
      {users.map(user => (
        <UserCard key={user.id} user={user} />
      ))}
    </div>
  )
}

// What SQL does Prisma generate? 🤷
// Does it use indexes? 🤷
// How do you verify it? Run it and check logs.

Hidden SQL. TypeScript overhead. JSX complexity.

@app.route('/users', methods=['POST'])
def create_user():
    email = request.form['email']
    name = request.form['name']

    # Validation
    if not email or '@' not in email:
        return "Invalid email", 400

    # Insert
    cur.execute("""
        INSERT INTO users (email, name)
        VALUES (%s, %s)
        RETURNING id
    """, (email, name))
    conn.commit()
    return redirect('/users')

Explicit validation. Visible SQL. Easy to debug.

// app/api/users/route.ts
import { prisma } from '@/lib/prisma'
import { z } from 'zod'

const userSchema = z.object({
  email: z.string().email(),
  name: z.string().min(1)
})

export async function POST(req: Request) {
  try {
    const body = await req.json()
    const { email, name } = userSchema.parse(body)

    const user = await prisma.user.create({
      data: { email, name }
    })

    return Response.json(user, { status: 201 })
  } catch (error) {
    if (error instanceof z.ZodError) {
      return Response.json(
        { errors: error.errors },
        { status: 400 }
      )
    }
    return Response.json(
      { error: 'Server error' },
      { status: 500 }
    )
  }
}

// Plus client-side form with React Hook Form
// Plus TypeScript types
// Plus error handling UI
// Plus loading states...

Zod schema + Prisma schema + TypeScript types. So much indirection.

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    
  </tbody>
</table>

Pure HTML. View Source shows exactly this.

// components/UserTable.tsx
import { User } from '@/types'

interface Props {
  users: User[]
}

export default function UserTable({ users }: Props) {
  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        {users.map((user) => (
          <tr key={user.id}>
            <td>{user.name}</td>
            <td>{user.email}</td>
          </tr>
        ))}
      </tbody>
    </table>
  )
}

JSX + TypeScript interface + separate @/types import. Structure for its own sake at this scale.