A blog that delves into captivating anecdotes and explores fascinating use cases of ChatGPT.
In the first part of our blog series, we explored the immense potential of leveraging ChatGPT3.0 for streamlined application development. We shared our experiences with using ChatGPT to generate code for an Employee Portal application, highlighting both the advantages and limitations we encountered along the way. Now, in the second part, we delve deeper into the frontend development phase and take you through the journey of deploying the application. Join us as we discuss how ChatGPT influenced our approach in each stage of development and unveil the unique challenges and opportunities we encountered. Get ready for an insightful exploration of the capabilities of this groundbreaking technology in frontend development. Let's continue our exploration with ChatGPT
The frontend application was decided to be built on React using the create-react-app boilerplate. This portion did not require any inputs from ChatGPT as this is mostly dependent on the team’s preference. We had a figma design in hand to follow. The first task was to create different UI layouts and views which act as a skeleton to the whole application. We had a login page, employee list page, employee view page, employee edit page, and employee create page. All of the pages except the login page had a header and left navigation. So we gave all these inputs to ChatGPT in a single prompt and asked to create the code for basic layout, routing, and the login form. ChatGPT provided the code for the layouts and routing, but it belonged to an older version of react-router. As we did not receive the output as expected, we specified the required react-router version in our next prompt. For this, ChatGPT replied with another code set with different naming conventions and coding structures. This was a bit challenging because we had to fit the new react-router code into the previous code given by ChatGPT. In short, we had to do a bit of manual work to get the ChatGPT’s code working. The login form was good and clean, though.
Prompt for the login form
Further, we gave the prompt by converting the design to natural language to the best of our ability. This helped in getting a basic html/CSS layout from ChatGPT. For example, the login page design was in such a way that there were two parts divided vertically by a line.