🌊 Ocean Explorer

Ocean Explorer is an educational web application that helps people discover fascinating facts about the ocean closest to their location. Using geolocation services and ocean proximity calculations, it provides an engaging way to learn about our planet's marine environments.

🚀 Features

• 🎯 Location Detection: Automatically detects your location or allows manual input
• 🌍 Ocean Proximity Calculation: Determines which of the 5 major oceans is closest to you
• 📚 Rich Facts Database: Curated collection of fascinating ocean facts categorized by:
  • 🐋 Wildlife
  • 🌋 Geology
  • ⚓ History
  • 🌊 Climate
  • 🔍 Exploration
  • 🌱 Conservation
• ⭐ Fun Level Rating: Facts rated 1-5 stars for engagement level
• 📱 Responsive Design: Beautiful UI that works on all devices
• 🎨 Ocean-Themed Styling: Each ocean has its own color theme and visual identity

🛠️ Technology Stack

• Framework: Next.js 14 with App Router
• Language: TypeScript
• Styling: Tailwind CSS + Shadcn UI
• Icons: Lucide React
• Deployment: Ready for Vercel

🌊 Supported Oceans

1. Pacific Ocean - The largest and deepest ocean
2. Atlantic Ocean - Separating Americas from Europe/Africa
3. Indian Ocean - Bounded by Asia, Africa, and Australia
4. Arctic Ocean - The smallest ocean around the North Pole
5. Antarctic Ocean - Surrounding Antarctica

🚀 Getting Started

1. Clone the repository

   git clone <repository-url>
   cd ocean-explorer

2. Install dependencies

   npm install

3. Run the development server

   npm run dev

4. Open your browser Navigate to http://localhost:3000

🏗️ Project Structure

src/
├── app/                    # Next.js App Router
│   ├── globals.css        # Global styles and animations
│   ├── layout.tsx         # Root layout
│   └── page.tsx          # Homepage
├── components/            # React components
│   ├── ui/               # Shadcn UI components
│   ├── FactCard.tsx      # Individual fact display
│   ├── OceanHeader.tsx   # Ocean information header
│   └── OceanExplorer.tsx # Main application component
└── lib/                  # Utilities and services
    ├── oceanData.ts      # Ocean definitions and facts database
    ├── geolocation.ts    # Location services and calculations
    ├── oceanService.ts   # Core ocean discovery logic
    └── utils.ts          # Utility functions

🎨 Key Features Explained

Ocean Proximity Algorithm

The app uses the Haversine formula to calculate great-circle distances between your location and multiple representative points for each ocean, then uses weighted averages to determine the closest ocean.

Facts Database

Over 20 carefully curated facts across all oceans, each with:

• Engaging titles and descriptions
• Category classification
• Fun level ratings (1-5 stars)
• Educational value

Responsive Design

• Mobile-first approach
• Smooth animations and transitions
• Ocean-themed color schemes
• Accessible design patterns

🔧 Environment Variables

If you want to extend the app with additional services, create a .env.local file:

# Example for future geocoding API
NEXT_PUBLIC_GEOCODING_API_KEY=your_api_key_here

# Example for analytics
NEXT_PUBLIC_ANALYTICS_ID=your_analytics_id_here

🎯 Future Enhancements

• Interactive ocean maps
• User fact favorites and sharing
• More detailed marine life information
• Ocean conservation action items
• Multi-language support
• Offline functionality

📱 Browser Support

• Modern browsers with geolocation API support
• Graceful fallback to default location (NYC) if geolocation fails
• Progressive enhancement for better user experience

🚀 Deployment

This app is optimized for deployment on Vercel:

npm run build

Or deploy directly to Vercel using their CLI or GitHub integration.

🤝 Contributing

Feel free to contribute by:

• Adding more ocean facts
• Improving the proximity algorithm
• Enhancing the UI/UX
• Adding new features

📄 License

This project is open source and available under the MIT License.