Human to JS

Human to JS diagram

This project has been achieved.

Background

I’m always looking to grow my career by learning new technologies as well known Software Engineer; however, that could be dangerous because Software Engineer is not about using the ultimate tech stack but making things happen.

Inspiration source

I was checking Twitter until I found a tweet where a person created a side project over a weekend. That project is SQL Translator, a simple UI to put text input describing a query; then you get the query into SQL, simple!

@whoiskatrin used ChatGPT API to send a prompt typed by the user, and then show SQL response into a component to copy to the clipboard. That was enough to get the deserved attention of the community. Tweet link

My idea

“Why not a web app to type a prompt to generate JavaScript code?”

So I started to build my idea using this tech stack:

• Next.js: Web framework to build the UI and Next.js provides you with an API directory to communicate with ChatGPT API
• MUI: To use the UI components and as a design system
• Formik & Yup: To manage the state of the prompt form and create validation schemas

Using all these technologies I build a simple UI with a MUI Card component, then I created a form where I manage all the inputs with Formik, the text and select inputs are directly from MUI, and to create the validation schema I used Yup to mark as required those fields and don’t send them empty.

With the UI finished, I started creating the endpoint in the API directory to consume ChatGPT’s API, just using a fetch like @whoiskatrin’s project, indicating which OpenAI model to use, in this case, text-davinci-003, you can learn more about those models here. Obviously, in that request, I send the prompt from the user into a string indicating ChatGPT to only give me the code, without comments or more results.

Added value

Yes, there’re options like GitHub Copilot that resolve that problem, that’s why I added a select option to choose if the syntax should be an arrow function or a simple function.

I’ll add more features, like a TypeScript option, and use a TS Interface to use as a reference, but now I’m working on more projects!

Inspiring people!

The cool thing about side projects is that inspires people like us, we can use our tech skill that serves the bread on the table to transform ideas into products, and products into a community, as @Serudda talks in this video (video audio in Spanish).

Posted: April 14, 2023