Michelle Duke

Posted on Jan 14

♻️ RePurposeful: Recycle, upcycle, or donate your unwanted items ♻️

#devchallenge #githubchallenge #webdev #ai

This is a submission for the GitHub Copilot Challenge : Fresh Starts and can also be considered under Transitions and Transformations

What I Built 🛠️

A website that provides users with search functionality to help them find the best way to correctly dispose of items. This will enable us to save rubbish from landfill and ensure we have a brighter and greener planet.

Currently, the website is designed for those located in Merri-Bek City Council, however, check out "Next Steps" below, for things that I would love to include in this website.

This is something I've wanted to build for a while, and this hackathon has been the perfect excuse to try it out.

Demo

You can find the website live at: https://mishmanners.github.io/hard-rubbish-info-website/.

Head over to the search page and try out the main functionality for yourself:

Repo

mishmanners / hard-rubbish-info-website

Recycle, upcycle, or donate your unwanted items.

RePurposeful

Recycle, upcycle, or donate your unwanted items. This website provides users with search functionality to help them find the best way to correctly dispose of items. This will enable us to save rubbish from landfill and ensure we have a brighter and greener planet.

This website was originally built for a hackathon. You can read the full write-up about my submission and experience with GitHub Copilot on the DEV website, and you can see the whole thing live in action via the Twitch stream VOD.

Features

Search Functionality: Enter criteria to find specific disposal information.
Informational Pages: Learn about hard rubbish and its disposal guidelines.
Contact Form: Reach out with inquiries or feedback.

Usage Guidelines

Use the search form on the search page to find information about specific items.
Visit the about page for additional resources on hard rubbish disposal.
If you have…

View on GitHub

Copilot Experience

GitHub Copilot was so much fun to use on this project 🙌. I initially used GitHub Copilot to help setup the directory and basic code within each file. Later down the track however, I discovered that some of how the directory was structured wasn't useful for exactly what I wanted. For example, the src folder contained all the source for the website, including index.html. However, when using GitHub Pages, index.html needs to be in the main repo directory, otherwise the GitHub Page will show the README.md file as a website instead.

Using GitHub Copilot along the way significantly reduced the amount of time it took to code, giving me lots of time to hard code my knowledge and information into the site. This is something GitHub Copilot can't do, but by providing me with lots of generic code blocks, I was able to use that time to focus on other things.

For example, I love asking GitHub Copilot to "make website look better" and it just does it with the colours I requested:

I also utilised various types of GitHub Copilot, such as the chat feature, and in-line chat. At times I found it more useful to use chat, and other times I received better results from the in-line chat feature. Furthermore, I discovered a rather fun limitation. When I was copying and pasting my own code when I was putting all the information, the copy/paste function often places the indentation at the incorrect level. I figured I could just use GitHub Copilot when I was finished to "fix" all the indentation. However, the lines of text/code appeared to be too much for GitHub Copilot and it timed out around 100 lines in, and deleted the rest of the code in that block. I tried both with in-line chat, and the chat box and neither worked. I ended up having to revert one commit back to get the code that GitHub Copilot had deleted.

I do love how I can ask GitHub Copilot for help fixing this, or asking why something is a certain way. For example, asking why something is overflowing and receiving an explanation as to why that is the case, along with the code to fix the issue:

I also asked GitHub Copilot about various errors I received in the terminal both in VS Code and via the browser. GitHub Copilot was able to help explain some of these, and whilst it didn't always give the correct code, I was able to figure out the issue from the information provided.

Furthermore, I used GitHub Copilot for writing my tests. It gave me good code when I clearly prompted it. I was surprised however that I was using Playwright for all of my testing and I was prompting GitHub Copilot to "use Playwright", however after writing about five tests, I figured GitHub Copilot would know that I was using Playwright. When I prompted in-line "write me tests to...", GitHub Copilot returned code that was written in another testing language, which I thought was odd.

I used the in-line functionality for a lot of the test writing, and did find that many times the text was overlapping in the UI:

However, I was able to get all the tests running and working correctly. There's something so satisfying about getting all green ticks ✅:

Overall, the experience with GitHub Copilot is amazing. It probably would have taken me two weeks to build a site like this without GitHub Copilot. But with GitHub Copilot, I was able to complete the site in just a few hours 🥳.

GitHub Models

I tried two main models when using GitHub Copilot:

GPT 4o
Claude 3.5 Sonnet (Preview)

I also checked out some of the GitHub Models in the GitHub Marketplace. I was blown away by the shear number of models now available:

I found that when using Claude in VS Code, it often gave blocks of code that included a lot of lines of code. Most of it was either redundant or included unnecessary for loops. I ended up switching back to GPT 4o as it seemed to give more concise code blocks that worked more often.

Conclusion

This website took about six and half hours to build from start to finish, including READMEs, graphics, and test writing 😮. I had a lot of fun building with GitHub Copilot and learned a lot along the way. I got to where I wanted in this timeframe to build a decent working MVP, and with plenty of TODOs to expand functionality in the future.

I believe this fits both the Fresh Starts theme as the site is designed to reduce landfill and thus promote sustainability. RePurposeful can also be thought of as giving your useable hard rubbish a "fresh start". RePurposeful can also be considered under Transitions and Transformations as the site is designed to help people find ways to transform their hard rubbish into something that another could use, for example from a tin can into a handmade soy candle.

Next Steps

Hackathons are great ways to build really great products in a short space of time. On thing I love about them, is the additional scope you can go with your project. Even though this hackathon was only 24 hours, here are some of the things I would love to include as part of this project are:

Firstly, there are some TODOs that I'd like to finalise for phase one:

Connect the site to Netlify to handle the contact form
Fetch data from external sources related to hard rubbish disposal and build out the database (currently the search results are hard coded)

In future, I'd love to build out the functionality of this website:

Web Scraping: Fetch data from external sources related to hard rubbish disposal so we can build out the 'database' more fully.
Login: log in and track what items you are looking to get rid of.
Facebook plug-in: to list the Facebook pages in the area that deal with hard rubbish.
Locality: Build out the location data to include more council, states, and countries. Currently the website is only showing information for Merri-Bek Council.
Leaderboard: Track your items and collect points for items that you 'save' from hardrubbish; both as a "seller" and "buyer".
Connect with local businesses: offer free advertising in return for products, discounts, or services that can be used as rewards; gamify the site.