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.
Top comments (0)