CleanCompass

CleanCompass: Navigate the World, Sustainably.

Comment

Inspiration

The idea for CleanCompass was inspired by the global push towards sustainability and the need for eco-conscious travel options. Travel planning often prioritizes convenience and cost without considering environmental impact. We wanted to create a tool that not only simplifies trip planning but also empowers users to make decisions that align with their environmental values.

What it does

CleanCompass is a travel planning platform that combines sustainability, cost, and efficiency. Key features include:

  • Dynamic Trip Planning: Users can input starting and ending locations, as well as multiple stops along the way.
  • Custom Preferences: A triangle selector lets users balance carbon emissions, travel time, and cost.
  • AI-Generated Suggestions: Provides eco-friendly tourist destinations and activities based on user preferences.
  • Route Visualization: Displays multi-leg routes with Google Maps, highlighting travel modes like driving, transit, or flights.
  • Carbon Impact: Shows estimated carbon reductions compared to traditional routes.

How we built it

CleanCompass was built with a combination of frontend and backend technologies:

  1. Frontend:

    • React: Built a dynamic and responsive user interface.
    • Bootstrap: CSS and JavaScript implementation Used for styling and implementing responsive design through prebuilt components.
    • Google Maps API: Integrated to visualize routes and provide multi-leg travel options.
    • Viet: Leveraged for fast development and optimized builds to enhance application performance.

  2. Backend:

    • Flask: Developed RESTful APIs to handle travel data, calculate routes, and fetch suggestions.
    • Axios: Facilitated seamless communication between frontend and backend.
    • OpenAI ChatGPT API
    • Tools: Used version control (Git) for collaboration and deployment.

Challenges we ran into

Google Maps API Integration: Handling multi-leg routes with different travel modes required extensive trial and error to ensure accuracy. State Management: Managing dynamic middle location inputs and syncing them with the backend posed challenges in React. Time Management: Coordinating frontend and backend development within deadlines while implementing robust functionality was a tough balance. User Experience: Designing an interface that conveys complex features like carbon emissions reduction while remaining intuitive for users.

Accomplishments that we're proud of

Successfully integrating multi-leg travel planning with Google Maps API. Creating a user-friendly interface that balances sustainability, cost, and time. Building a platform that promotes eco-conscious travel while maintaining functionality and design aesthetics. Overcoming technical challenges as a team and delivering a working prototype.

What we learned

  • API Integration: Advanced use of the Google Maps API JavaScript for dynamic route visualization and travel mode transitions.
  • Frontend-Backend Communication: Streamlining data flow between React and Flask.
  • Teamwork: Coordinating tasks and integrating code in a collaborative environment.
  • Sustainability Awareness: Gained deeper insights into the environmental impact of travel choices.

What's next for CleanCompass

We would like to expand into databases that can help users save their information and give them the option to create an account. After further similar improvents we also hope to publish it.

Share this project:

Updates