SQL to React Components in seconds

Juan David Restrepo — Fri, 09 Aug 2024 04:09:05 +0000

Can you imagine being able to write an SQL clause and not worry about your backend or servers?

From this

SELECT * FROM users LIMIT 100;

To this

const View = () => {
  return <ListUsers />;
};

Or even being able to create a complete flow for your application with short clauses:

-- <ListUsers />
SELECT * FROM users LIMIT 100;
-- <User userId={id} />
SELECT * FROM users WHERE id = :userId;
-- <UpdateUser userId={id} form={form} />
UPDATE users SET name = :name, image = :image WHERE id = :userId;
-- <DeleteUser userId={id}/>
DELETE FROM users WHERE id = :userId;

And if you didn't have to worry about developing the backend, deploying, connecting to a database, etc., how quickly could you develop and iterate your product?

Presenting to Blokay

Blokay is an open-source tool that allows developers to create backend code blocks, and it automatically generates the frontend for the component.

Connect your favorite frontend framework
SQL to (React, Vue, etc) components
Generate Cron Job in seconds
Generate Charts, APIS, components
AI Prompt to features

How does it work?

Blokay allows developers to create complete workflows and then progressively integrate them into their own applications.

LLM Generation

Prompt: Show a table of the created users

It should generate something like this:

const fn = async function (args: Args) {
  let sql = `SELECT * FROM users ORDER BY id DESC LIMIT 100`;
  let results = await args.query(sql);
  return args.table(results);
};

and consequently a ready-to-use React, Vue, Angular, etc. component.

const View = () => {
  return <ListUsers />;
};

Start now

You can create a free account at blokay.com and start your project instantly.