DEV Community

Cover image for SQL to React Components in seconds
Juan David Restrepo
Juan David Restrepo

Posted on

2

SQL to React Components in seconds

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;
Enter fullscreen mode Exit fullscreen mode

To this

const View = () => {
  return <ListUsers />;
};
Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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);
};
Enter fullscreen mode Exit fullscreen mode

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

const View = () => {
  return <ListUsers />;
};
Enter fullscreen mode Exit fullscreen mode

Start now

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

Top comments (0)

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API