Learning by doing is our favourite way to explore new technologies, frameworks, and methodologies. That’s one of the reasons we enjoyed our ChatGPT Hackathon this summer. Three of the four teams created new mobile applications in one day, including applications to simplify writing with ChatGPT, generate icon sets, and even a mobile application to improve the experience of Dungeon Masters in Dungeons & Dragons campaigns.
The fourth team of myself and our CEO Wes Worsfold went in a different direction. Instead of using ChatGPT to create an application, we used it to help us develop a landing page website for our Water My Lawn application.
The Idea
Landing pages are a must-have resource for mobile applications. These pages can be built into your existing website or standalone site. Meta launched its X (formerly Twitter) competitor Threads with the landing page threads.net. The simple landing page includes an animated background with a QR code and links to download Threads' iOS and Android versions.
Wes and I started our hackathon project by considering what information we wanted to include on the landing page. Our list included:
- A large banner with the application name
- A section with the application description in English and French (we are in Canada, after all)
- Links to download the application on iOS and Android devices
- A section with information about BitBakery
When it came to the application download links, I wanted to have them appear in a fixed floating widget. It’s a UX design that I’ve seen on a few landing pages and websites that I’ve always thought worked smoothly.
Building the app
Wes and I have experience in software development, but for this project, we tried to use as much of the code generated by ChatGPT as possible. First, we asked ChatGPT to generate an HTML 5 Bootstrap template with four full-width sections and a footer.
The code was decent, giving us the foundation we needed for the landing page.
Next, we went to work on the floating widget. We started with the prompt:
The generated code worked, but it didn’t move like I had imagined. This is an example of how generative AI tools can be powerful, but only if you know how to write the correctly worded prompt. For a second pass, I gave ChatGPT the prompt:
This prompt generated code that closely matched what we were hoping for. We made a few changes to the prompt and created the look and feel we wanted. All we needed to do was add the app store logos and links.
We also used ChatGPT to generate a description for the application and then used Google Translate for the French translation. We had started by asking GhatGPT to create Lorem Ipsum text using Drake lyrics, but using the actual copy is always the preferred way to design a website.
ChatGPT helped us generate the code to allow users to switch between the two languages.
Wes came up with an additional feature during the hackathon. We have an API available for Water My Lawn, and he suggested adding that to the landing page. With some help from Joe Reda, our CTO, we used ChatGPT to generate code to get the user’s latitude and longitude and pass it to the Water My Lawn API.
What I found interesting is how specific you can get with prompts. I wanted the site to say ‘Made with love in Kitchener,’ but replace the word love with a red heart. ChatGPT gave me the code for it on the first prompt. I could figure it out on my own, but getting it done quickly with ChatGPT was amazing.
One last thing — the graphic at the top of the landing page was created using the beta of Adobe’s Express generative AI tool.
What we learned
Working on this project reminded me of a quote that pops up on LinkedIn often - “You won’t be replaced by AI, you’ll be replaced by someone that uses AI.” Each time I had a problem with something in the project, I was able to use ChatGPT to find an answer or alternative way of approaching the problem.
Yes, there are websites and forums that can help with this. But those tools give you answers that are either too general or specific to someone else’s project. Writing the correct prompt with context enables ChatGPT to provide you with a response tailored to what you’re working on. But Joe pointed out that writing the correct prompt can be challenging.
“If I'm asking for help with a programming language or technology, it'll give me an answer for one specific version, but it doesn't tell me which version,” Joe said. “If I give it an error message, it will produce an answer, but what I need to do is tell it what version of the software I’m working with. You need to know enough to know when it's wrong, and to know maybe why it's wrong. But it can teach you which is also the good part.”
The winner is…
Hackathons have to end with a winner, and our first ChatGPT Hackathon winning team was Writing Assistant from our User Experience Director, Attila Schmidt and our Director of Product, Daniel MacKenzie.
Wes was overwhelmed with what the teams could produce in such a short time.
“It's awesome that in essentially the equivalent of a day, we were able to build these projects from scratch. That not only speaks to the talent on our team but also how we're able to use technology to get things done quickly,” Wes said.
Want to learn more about how you can add generative AI to your solution? Get in touch with us today to learn more.
