[Storybook GPT] Design and implement application UI

#webdev #githubhack23 #tailwindcss #uidesign

The last thing that is has to be done is the UI, it is important to ensure that it has to be intuitive and easy to use. With those things in mind and to gather inspiration and ideas, I started looking for some design references on Dibbble and Behance. After a few hours tinkering in Figma, this is the design I came up with:

As I mentioned before, on the left we have two inputs where the use can add the OpenAI API Key and the React Component that will be converted. On the right we have one big text area input to show the user the Storybook story. This input is read-only and allows the user to copy the content by clicking on it.

To make it mode secure I also added form validation for the two input fields:

After completing some code refactoring, the application is ready to be deployed on Vercel to be a part of the vastness of the internet.

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.