RecyclePassport

Home page. There is a search part where users can enter the zip code or the city name of the current location.
User profile. It displays different features, and some of them are related to recycling.
Locations of main cities where users can enjoy the services. It allows choosing by clicking.
About (our idea)page + search bar display
About (our idea)page + search bar display

Please refer to the gallery. Before starting the introduction video, please note that we made some changes including adding an essential search bar modifying the button's name. Now, the users can type in the zip code and the city name to access more city recycling regulation resources.

Hackathon track

We will be on the beginner track and smart cities/urban planning track.

Inspiration

We were inspired by wanting to build an eco-friendly website. Perhaps most people are environmentally conscious but are unsure of the right way to turn on the ring. For example, where does a pizza box, a glass bottle, a contaminated plastic bag ...... should go? At the same time, different cities have different recycling regulations. How to travel while sticking to the recycling rules and ensuring environmental protection while setting our footprints around the world is also a matter of concern. We wanted to incorporate technology, user interaction, and climate change action in a way that is fun, easy to use, and informative.

What it does

We built the front end of the website. It can link the users to the recycling regulations of a specific city by inputting the current zip code or city name. It displays a user's profile, the ability to look at and select different locations, and our website's mission statement.

How we built it

We built our website utilizing a combination of CSS, JavaScript, and HTML. We cooperate through GitHub by constantly merging our code.

Challenges we ran into

One of the main issues we had was utilizing GitHub to work collaboratively to create pull requests and merge our code. Once we overcame this hurdle, our next challenge was crafting a fully functional and aesthetically pleasing website with a strict deadline. We have always encountered many unexpected components dislocation, and it was hard to troubleshoot these issues by searching for the relevant code line by line and division by division.

Accomplishments that we're proud of

We were teaching ourselves HTML, CSS, and JavaScript from scratch with almost no web dev background(just one person in our group had some web dev experience), learning how to configure Github effectively, and getting familiar with using it for teamwork. We built the whole website in about 15 hours, with a nervous and stressful beginning in the face of a blank web page. Luckily, we ended up immersed in this collaborative environment, and we even did not know each other until we made it a team at the kick-off party.

What we learned

We learned how to utilize CSS, JavaScript, and HTML and work collaboratively as a team. We also became well-versed in GitHub.

What's next for RecyclePassport

An app that would allow the website to be integrated into a person's mobile device would also have a scanning feature to scan recyclable items to see whether they are recyclable. If the scanning feature is not utilized, the user can also answer questions where the app will use an algorithm to assess whether the material is recyclable and where/how it can be recycled based on their location, back-end development of the app, database incorporation for the location aspect of the website and app where the database would have countries + recycle rules, location tracker for the main profile so that the website and app can automatically recognize where you are