Eco Travel Planner

• 

  First page

🌱 Inspiration

Traveling is meant to refresh the body and mind — but with climate change, pollution, and dangerous UV exposure, it's becoming harder to travel safely. I wanted to create a simple, beautiful tool that empowers people to explore the world responsibly and safely, with real-time guidance for their health and the planet.

🌍 What it does

Eco Travel Planner helps users plan eco-friendly and health-conscious trips using live data and smart suggestions. With no backend, it runs entirely in the browser using APIs and dynamic logic.

✨ Key Features:

🔍 Choose any region or country to explore

🌤️ Real-time weather, air quality, and UV index data

☀️ Sun protection tips based on UV risk (e.g., wear SPF 50, avoid peak hours, cover up)

🧘 Mood- or personality-based travel suggestions (e.g. “peaceful nature spots” for calm moods)

🌿 Eco-friendly accommodations and transport ideas

🌗 Light/Dark mode for eye comfort

📱 100% Frontend: Built with Next.js, no backend or login required

🛠️ How I built it

Framework: Next.js — static and dynamic pages, client-side logic

Design: Tailwind CSS — responsive, clean UI

Data: OpenWeatherMap API — weather, air quality, UV index

Maps & Charts: Leaflet (maps), Chart.js (visual stats)

Sun Safety: Custom logic turns UV data into real advice (e.g., alerts when UV > 6)

Client-side only: All API calls, data management, and routing handled in-browser

💪 Challenges I faced

Handling multiple API responses together without a backend

Making UV index understandable and actionable for users

Keeping the app lightweight and responsive

Managing dynamic routes and state in Next.js without server-side data

🏆 What I'm proud of

Built 100% alone with no backend — fast, modern, and fully functional

Transformed raw data into real-world health tips (sun protection)

Beautiful and useful on both desktop and mobile

Successfully integrated weather, air, and UV into one clear interface

📚 What I learned

Using Next.js for fully frontend logic and dynamic routes

Turning environmental data into user-friendly travel safety features

How to visualize health risks like UV levels effectively

Improved my skills in design, API usage, and accessibility

🚀 What’s next for Eco Travel Planner

Add offline mode for saved destinations

Let users set reminders for sun safety alerts (client-side only)

Add more filters (eco rating, pollution levels, carbon footprint)

Expand to include eco events, volunteering trips, and climate-safe zones

Built With

• chartjs
• javascript
• nextjs
• reactui