Ocean Bot

"OceanBot: An interactive chatbot that educates and empowers users to take action against ocean pollution by learning about garbage patches and recycling tips, all in one easy-to-use web app."

Comment

Inspiration

The inspiration behind this project came from the growing concern over ocean pollution and its harmful effects on marine life and ecosystems. The idea was to build an interactive tool to raise awareness about the great garbage patches in the oceans, provide valuable information about recycling, and help users understand how they can contribute to preserving the environment. With an easy-to-use Flask web application, the goal was to combine education and technology to create an engaging experience for users interested in making a positive impact on the world.

What it does

The project is an interactive chatbot called OceanBot that educates users about ocean pollution, provides information on the major garbage patches in the oceans, and offers recycling tips. The main functionalities include:

  • The chatbot introduces itself and asks the user for their name.
  • It explains what ocean pollution is and its environmental impact.
  • It provides detailed information about the 5 major garbage patches in the oceans, letting the user choose which one they want to learn more about.
  • The bot offers actionable recycling tips to reduce waste and help clean up the environment.
  • The conversation ends with a thank-you message, encouraging users to continue learning and taking action.

How we built it

The project was built using the following technologies:

  • Python (Flask): Flask was used as the backend web framework to handle routes, manage user interactions, and serve dynamic content.
  • HTML & CSS: These technologies were used for building the front-end to create visually appealing and user-friendly web pages.
  • Jinja2 Templating: Flask’s Jinja2 templating engine was used to render dynamic content based on user inputs (such as garbage patch details and recycling tips).

The process involved creating a Flask app that would interact with the user through forms and buttons. By gathering input from the user, the app dynamically rendered different pages, such as information on the ocean garbage patches or recycling tips.

Challenges we ran into

  • Handling User Inputs: One of the main challenges was ensuring that user inputs (such as selecting a garbage patch or recycling tip) were correctly processed and stored for dynamic rendering of relevant information.
  • User Experience (UX): Designing an intuitive flow for users to navigate through different options (e.g., learning about patches, choosing recycling tips) while keeping the interface clean and engaging was a challenge.
  • Dynamic Content Rendering: Ensuring that content like garbage patch descriptions and recycling tips were displayed based on user selections required careful handling of routes and templates in Flask.

Accomplishments that we're proud of

  • Successfully built and deployed a web-based chatbot using Flask, allowing users to interact and learn about ocean pollution and recycling.
  • Integrated dynamic content rendering with Jinja2 templating, which allows users to receive personalized responses based on their choices.
  • Deployed the app to Heroku, making it accessible to the public with a unique URL.
  • Designed a user-friendly interface with HTML and CSS, providing a simple yet engaging user experience.
  • Raised awareness about ocean pollution and provided actionable recycling tips that users can implement in their daily lives.

What we learned

  • Flask: Gained a solid understanding of how to build a web application using Flask, including creating routes, handling forms, and using Jinja2 templating for dynamic content.
  • Frontend Design: Improved skills in HTML and CSS, creating a visually appealing and functional interface for the web app.
  • User Interaction: Understood the importance of guiding users through a seamless interaction process and providing clear, concise feedback based on their choices.

What's next for Ocean Bot

  • Improved User Interaction: Adding interactive elements like images, buttons, or multimedia to make the experience more engaging.
  • Expand Content: Adding more topics related to environmental protection, such as marine life conservation and sustainable practices.
  • Mobile Compatibility: Making the app fully responsive so that it works across all devices, especially mobile phones.
  • Multi-Language Support: Adding support for multiple languages to make the app accessible to a broader audience around the world.
  • Analytics: Implementing analytics to track user interactions and gather insights on what content users are most interested in.
  • Collaboration: Collaborating with environmental organizations to add more educational resources and reach a larger audience.

Built With

Share this project:

Updates