Fresh Starts : GitHub Co-Pilot One Day Challenge

This is a submission for the GitHub Copilot Challenge : Fresh Starts

What I Built

Anyone who remotely knows me will know that I am big sucker for fashion trends. I love to buy clothes and bags and shoes and jewelry.

*You name it, I can run around a shopping mall for hours. Yes. *

However when I think about sustainability, the "buy and throw" attitude underlying fast fashion leads to a lot a waste.

Therefore, whenever I have a moment of strength to not buy another handbag, I always think about giving my fashion items a "Fresh Start"

And I thought, why not build a mini-app powered by ChatGPT to provide suggestions on how I can do just that.

Demo

Demo

Repo

Repository is here [(https://github.com/aislinngreycat/wearagain])

Copilot Experience

While I have completed numerous projects with Javascript, Node.js and Vue.Js, I have never ever used React or Next.js. I wanted to test out just how good GitHub Co-Pilot is when I am using a completely new framework. Many people talk about "AI replacing developers". How true is this?

It is also my first time using GPT-APIs in an app.

Scaffolding the App
The first thing I wanted to do was in fact to scaffold the app.
Typically if you are using a framework like Next.js, you can simply use the CLI. Also, organizing the folders for a app is normally something done by the Team Lead in a bigger development team. How good is Co-Pilot at doing this?

Anyway, I gave Co-Pilot a prompt
"I want to create a javascript project which allows users to upload images to a blob storage, which in turn gets uploaded to an OpenAI model for a response. I want to create this using one single JS file. Please generate for me the workspace."

Ok, so this does not sufficient information on the framework to be used.

I gave up a little after this. Instead, I scaffolded the project directly with the Next.js CLI and then I proceeded with the following prompt

This result was somehow better, and it provided with the different functional blocks which I then used as a guide.
What it did not do though was to provide suggestions directly as to how to divide the functions into different modules or js/jsx files.
Perhaps it can with the right prompts.

Calling Azure OpenAI

As I am using the gpt models for the first time, I tried to skip reading the documentation altogether and asked GitHub Co-Pilot to generate me the code to call the API with the prompt I wanted.

What I got initially was this

Ah well I forget at first that the model that needs to be called is the one hosted on Azure, so the baseURL of the API needs to change. I faced some problems with the code generated by GitHub Co-Pilot so in the end, I used the sample code from the documentation on GitHub.

Fixing Missing Dependencies and Errors

It could be nice if GitHub Co-Pilot actually detected the missing dependencies in the package.json but it did not, so this error was only detected when attempted to run the code.

You can ask Co-Pilot to detect it in the workspace, which I did, and they provided a comment on where it should be added.
However, it does not provide too much value because as a seasoned node.js developer, I already know this.

I suppose however, that this serves newbies well.

Code Completion

This is one of the most useful functionalities. When the result from the GPT prompt was returned, I needed to style it so that it can be displayed to the user. Based on earlier inputs within the context, it was able to detect that I wanted to display an array of results.

Code Suggestions

When I first got the results returned from GPT, it looked like this -

It looked, awful to say the least. I wanted to reformat it so that it became concise and readable. I changed the prompt so that it returned me the results in JSON format. Then I asked Co-Pilot to the buttons and page.

_Converting to Paragraphs to Lists

GitHub Models

I used the Azure Open AI to drive the functionality of analyzing the image uploaded by the user.

Conclusion

One of the criteria was that the project should be completed in one day. I assume that one day = 24 hours. Was I able to complete the project within 24 hours in one go?
No because it was the weekend and in between I had a short trip and I also had to do my laundry which did take a significant amount of time. You know how it is :-)

Would it have been possible to complete the project within a day?

Probably, but granted I was using Next.js for the first time and the scaffolding from GitHub co-pilot did set me back a little bit. In the end I referred to the next.js documentation and after 30 mins I understood the folder structure and I used the Next CLI instead to generate the app.

Some of the code suggestions also did throw me off as it does not consider the whole context of the project in the workspace. Where it can increase efficiency significantly is with little code snippet suggestions like when you need to do something discrete like "Iterate through this array and display it" or "Fix this errors".

If you needed to optimize across the entire workspace, it appears to have a problem understanding the wholistic context.

And back to the question of "Can AI replace developers?" which I know is not the point of this challenge but is still something that I have pondered by-and-by as I worked through this mini-project.

My conclusion now is absolutely not because there are some design decisions that will still need to be made based on the context. And the context is often not just a technical one, but also one that considers organizational and non-technical factors - for example, future ease of maintenance, team size both current and future.

That said, I am amazed at how much efficiency you can achieve Git Co-Pilot built into your workbench. You do not have to Google search for code-snippets on how to approach and solve some small discrete tasks.

Perhaps for very senior developers, such "code-snippets" come naturally in their heads but if there is something that you have not encountered in a long while, there is a tendency to forget. Having this built into the workbench saves you a tremendous amount of time, and for newbies it helps cut down a significant amount of effort spent in searching for answers.

Although, thankfully you will still need your brain to put all the pieces together, so I hope everyone can make good use of your very gifted developer brains!

Thanks for reading!