Metamorphosis Tracker

#devchallenge #githubchallenge #webdev #ai

This is a submission for the GitHub Copilot Challenge : New Beginnings

What I Built

Metamorphosis Tracker : A personal growth tool where users set a goal, track their progress, and earn butterfly badges.

Demo

Metamorphosis Tracker
Metamorphosis Tracker Demo

Repo

Metamorphosis Tracker GitHub Repo

Copilot Experience

I used the copilot with GPT-4o model extensively. So many prompts and so many code blocks generated. I'm very happy with the speed with which I completed this prototype, given that I'm a backend developer and most of the work in this web app was frontend related like the styling, layouts and all. Overall, it was a fun experience.

Conclusion

For this project I did a lot of brainstorming. I didn't want to make a simple habit tracker app, I wanted to make it something related to a metaphor. Like for now on the web app there are three butterfly badges. Monarch shows the metaphor of good health, Blue Morpho is all about self-awareness and Swallowtail is a metaphor for Ambition and Confidence (I researched a bit about butterflies to come up with these metaphors).

This project is a a very simple version of what I'm planning to include further. I will in the future try to add animations using html canvas that will show the process of caterpillar transforming to the butterfly with the help of Copilot (this is just one thought I have). I think I can accomplish that as well.

For now my minimalist but metaphorical Metamorphosis Tracker is what I present to the world through this contest.

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook