I.DIY!

Do It Yourself, Sustainably! Find creative videos to upcycle household items like cardboard boxes and plastic bottles into DIY projects and help create a sustainable world!

Comment

Inspiration

As humans, we love to craft - it is one of the best ways to get some dopamine. But the age of technology means we are quite easily distracted. Hop on to YouTube to get some ideas for crafting and you are instantly bombarded with distractions - recommended videos, notifications from subscribed channels, hundreds of shorts - click on anything, and there goes your time for crafting!

I.DIY! aims to solve this issue by keeping the home page simple - nothing to distract you from what you came here for - crafting.

'How does this help the environment?' - By promoting and helping users practice sustainability. The easiest way anyone can contribute to a sustainable lifestyle is by recycling or upcycling things you have at home. This could be anything from plastic water bottles to cardboard boxes.

What it does

Simply type in the recyclables you have at home into the search bar and I.DIY will list out relevant YouTube videos you can follow to turn your waste into art!

Small creative efforts, like upcycling everyday items, can make a significant impact on sustainability. My goal was to build a web application that could potentially encourage people to repurpose what they already have, thus lending a hand to a sustainable future.

How I built it

  1. Planning: I had a very basic idea of I.DIY in the beginning. But it was far from what it is now. I had planned for a Search feature to return blogs, not videos (but I changed my plan because not everyone will be interested in reading and crafting - watching a video would be easier), a 'Tip of the Day' section, a 'Play a Game' section, and a place for users to upload their DIY projects. I quickly realized I was wasting a lot of time on planning and not spending enough time on actually developing things. So, one fine day (a day before my midterm exams), I sat down and did the following:

    • Decided on the core features: a place where users can input the materials they have, and the site suggests DIY ideas. And a game section where users can play games related to sustainability.
    • Designed these features: on paper first, and then on Canva.
    • Started writing code!

  2. Development:

    • Used HTML for structure and CSS for styling to bring the design to life.
    • Used JavaScript for both the game's logic and fetching the videos of DIYs from YouTube.
    • Integrated APIs (specifically, YouTube's Data API(v3)) to fetch videos based on user input.

  3. Testing & Refinement:

    • Making sure the site was responsive across device sizes was what I majorly worked on during this period.
    • Further simplified the site's design and color scheme to reduce distractions.
    • Added an instructions pop-up for the game when my friend pointed out that I was the only one who already knew what to do.

Challenges I ran into

  1. Integrating the API:

    • I spent quite some time figuring out the best way to fetch DIY content that was relevant to the user's input. Ensuring the responses were accurate to the user’s input took time and experimentation.

  2. Responsive Design:

    • Using Bootstrap ensured most of my website was accessible and visually appealing on both mobile and desktop devices, but making the entire site responsive required several trial and error iterations.

  3. Time Management:

    • Having only two weeks to develop the project made me realise I had to get my priorities straight. I focused on getting out the essential functionalities first and left the advanced ideas for future updates. I am looking forward to working on the site further after Nature Hacks' results are declared.

Accomplishments that I'm proud of

  • Successfully building a functional web app as a beginner in web development.
  • Creating a platform that promotes sustainability and assists people in finding their next creative project :)

What I learned

  • Fundamentals of web development and using HTML, CSS, and JavaScript to create an interactive and visually appealing website.
  • How to fetch data through APIs.
  • Focusing on creating a simple, intuitive interface to enhance user experience.
  • Responsive web design techniques to make our app accessible across different devices.
  • The importance of time management and breaking the project into manageable tasks.
  • Unexpected issues with functionality and design helped develop my problem-solving skills.

What's next for I.DIY!

In the future, I want to:

  • Expand the games section to include more games related to sustainability and add levels.
  • Introduce a user-upload feature, allowing people to share their upcycling projects with the community, including badges or points, to encourage users to complete projects and reduce waste.

☘️ Let’s upcycle and make the world a greener place, one DIY project at a time! ☘️

This project was built by a college student.

Share this project:

Updates