As part of the RAPTORS Hackathon, we chose to redesign WhaleMatch.org, an outdated marine wildlife tracking platform. Our goal was to give it a modern look and improved usability while preserving its original purpose and functionality.
WatchWhale is a modern, accessible, and user-focused rebuild of WhaleMatch.org, designed to support marine researchers and enthusiasts. It allows users to upload sightings of whales and dolphins, and helps track marine wildlife collaboratively.
-
🌐 Redesigned Entire Website UI
- Applied an aquatic theme for visual consistency
- Made it responsive and mobile-friendly
-
🧭 New Navigation System
- Added clear Header and Footer
- Easy access to major sections
-
🤝 New "Support Us" Page
- Created a dedicated section for the organization’s mission, donations, and involvement
-
🔐 Authentication
- Integrated Login and Logout functionality
- User session persistence
-
👤 User Dashboard
- Profile Management
- Dashboard Overview
- Settings page for personalization
-
🖼️ Custom Branding
- Designed and added a new logo fitting the marine theme
-
🧭 Improved Usability
- Website is now intuitive, easy to navigate, and much more user-friendly
-
💡 Preserved Core Functionality
- All original actions and usage patterns retained
- Users familiar with WhaleMatch will feel right at home
- React + Vite
- Tailwind CSS
git clone https://github.com/your-repo/watchwhale.gitcd watchwhalenpm install
npm run devVisit http://localhost:5173 in your browser.
| Before (WhaleMatch.org) | After (WatchWhale) |
|---|---|
| Outdated, minimal styling | Full modern aquatic UI |
| Confusing layout | Clean, intuitive navigation |
| No mobile support | Fully responsive design |
| No branding/logo | Custom logo + consistent theme |
| Lacked user account system | Login, dashboard, profile pages |
| No support/donation info | Dedicated "Support Us" page |
- ✅ Complete codebase in this repo
- ✅ Live demo (link to be added)
- ✅ Screenshots of original vs rebuilt
- ✅ This README explaining the project and changes
- ✅ Picked a poorly designed website (WhaleMatch.org)
- ✅ Rebuilt with modern technology
- ✅ Focused on usability and accessibility
- ✅ Maintained original functionality
- ✅ Delivered all submission requirements
Built by the Hzrullnut Team during the RAPTORS Hackathon (May 30 – June 2, 2025).