CyclrAI

Inspiration

Although I always try to recycle whenever possible, in the past few months, I've found it to be increasingly taxing to figure out what I can and can't recycle. Sometimes, this made me recycle things that should've gone in the trash, and, other times, made me throw away perfectly recyclable trash. I knew that this uncertainty kept me from bettering the environment to my full potential, and I wondered to myself. Is there a way to make my recycling easier, and better? That is how I got my inspiration to create Cyclr AI.

What it does

Cyclr AI is a website that uses images as input. Once it receives an image, it scans for all possible items in that image, before telling the user if each item is recyclable or not, and how & where you should recycle that item.

How we built it

I built Cyclr AI by first dividing it into two parts: a frontend and backend. For the frontend, I used the markup language HTML, the stylesheet language CSS, and the programming language JavaScript. For the backend, I built a node.js server that runs on the render.com website, as well as integrating the Gemini API for its AI capabilities.

Challenges we ran into

One of my many challenges that I ran into was deciding what I should add, and how far should I take the project. Because I joined the hackathon a bit late, I had to work extra hard to get everything up and running, and, to be honest, it only fueled my passion for continuing forwards. The challenges in my journey has only made more more invested, because I --- love a challenge.

Accomplishments that we're proud of

I'm proud of all that I've procured in my journey through creating this project. This was my first ever hackathon, as well as my first experience with a bunch of new technology. I'm also proud of my project itself. Now, each time that I'm confused when trying to figure out if something is recyclable, I can just pull up my website, and I can figure everything out in seconds.

What we learned

Before this project, my skills with frontend programming were nonexistent, that is, I didn't know a single thing about HTML, CSS, or JS. Although JavaScript came a little easier to me due to its syntax similarity with Java, I basically had to start from scratch for each language. Fortunately, I was a fast learner. Three six-hour-long youtube videos later, I had grasped the fundamentals, and I could just look at code documentation for anything I didn't know from there. I've also learned a ton about website and server hosting, something that will help me for future projects.

What's next for CyclrAI

CyclrAI is far from reaching its final form. One problem with the website is that there is no incentive to recycle. I plan to "gamify" the website, similar to Duolingo --- adding experience, levels, streaks, and goals to make the user feel motivated to continue recycling, saving our planet, one piece of trash at a time.

Built With

• cors
• css
• dotenv
• express.js
• fs
• github
• google/generative-ai
• html
• javascript
• multer
• node.js
• render.com