Leaf The World Alone

Action today save earth tomorrow

This is what team #2 worked on in Sudothon

Inspiration

The Earth is our home and we need to take care of it. Our inspiration comes from our passion for climate action, we wanted to be able to make a website that highlights the importance of climate change and allow users to be able to interact with a chatbot who's name is leafy. Due to our love for sarcasm we wanted to also make the website fun by having our chat bot's personality a bit meaner than other chatbots!

What it does

It is designed to bring information to the public about their carbon footprint and how they can reduce it. We hope our website can be informative and spread awareness to those who enter our site. And due to the chatbot's interesting personality we hope that this leads to some attraction to the site.

How we built it

We developed it through FIGMA, Open AI, REACT, and Rendition.

Challenges we ran into

Integrating front-end and back-end. Due to the majority of our team, who were beginners. We had spent a lot of time learning and trying to implement what we learned. Since figma and react, and machine learning were something we were relatively new to, We had trouble trying to string everything together.

Accomplishments that we're proud of

Developing a concept we all believe in and being able to put together a project that showcases our ideas. We are also proud of the fact that our idea was almost see through if given more time. Proud of everything we have learned as well as becoming friends with one another!

What we learned

We learned more about the front-end development, back-end development, and working with a team. We learned about machine learning, react, figma, and gain experienced with front-end development.

What's next for Leaf The World Alone

The next step is to continue developing an integrated webpage. We love this project so hopefully, We can actually improve and release it.

Built With

figma
flask
openai
python
react

Submitted to

Sudothon 1.0

Created by

I worked on the front-end and through a collaboration with my team where we developed a front-end webpage that hosts a home page, about page, a chat page along with a donation page. After implementing these steps together we learned how to change the design to code through using rendition. And took the code and pasted in react and learned how to route the pages. After this we began working on the interactions of the website after loading the react page

Saara Y. Uthmaan
Hi, my name is Ruweyda Abdi. I am a non- CS major wanting to learn website development using front-end development. I worked with other beginners to work in front-end development. We designed the entire website using figma, and coded it out! My goal was to learn figma and gain experience with react and front-end. Sadly our website had some last minute coding errors. So we weren't able to showcase our website with the applied map application. But our goals of learning how to use machine learning and figma as well as react. Was almost entirely reached. Though I wish we could have learned how to use react more properly, and been able to apply the map onto our website without issues. I’m glad to say that I’m happy with all the learning we did, trying something new and gaining experience in something we lacked in. I helped along with the design process using figma and downloading extensions (react) to have the code implemented in our overall project, learning how to collaborate on github, compromising on design ideas, coming up with the problem we wanted to face, and of course i’m most proud of contributing so well in a team of beginners. I’m happy with how as beginners we all helped each other out in solving errors and distributing tasks with one another to hopefully see our entire design through.

Ruweyda Abdi
Hi, Im Evan. I developed the React-based web application that visualizes CO2 emissions data across the globe using D3.js. My main focus was on creating an interactive choropleth map where countries are color-coded and circles dynamically change in size to represent varying levels of CO2 emissions. To ensure the map's responsiveness on different devices, I implemented a custom hook, useResizeObserver, which adjusts the map according to the browser's size. I also included a slider component that allows users to select and view data from different years, making the map dynamically update to show the corresponding information. For styling, I chose styled-components to give the application a sleek and modern look. By combining React's reactive capabilities with D3's powerful data visualization tools, I created an engaging and informative tool that effectively conveys complex environmental data in a user-friendly manner.

Evan Scott
I played a role in enhancing the backend of the application by utilizing the OpenAI ChatGPT API. My focus was on developing a responsive and intelligent chatbot capable of addressing inquiries related to global climate conditions. This project offered a valuable opportunity to expand my technical expertise.
My goal when coming into the hackathon was to learn more about API's and machine learning and I was able to learn a lot through collaboration with the other beginners on my team.
Unfortunately, we were not able to completely finish due to some minor errors in the codebase

Ayo Adeleye
I worked on the front-end and collaborated with my teammates in order to develop the concept about reducing our carbon footprint. I helped design the FIGMA website which had a home page, about page, chat page, and a page for donations. The buttons on the pages transitioned to go to different pages based on what you clicked. I helped with formatting as well as ensuring our MVP was focused on. I worked on the slides with my team, and contributed to the presentation.

Ethan Grant

Updates

Saara Y. Uthmaan started this project — Dec 03, 2023 03:56 PM EST

Leave feedback in the comments!

Log in or sign up for Devpost to join the conversation.