Technigo Final Project: BADA - Real-time beach water quality web app with maps & favorites#136
Open
govargas wants to merge 199 commits into
Open
Technigo Final Project: BADA - Real-time beach water quality web app with maps & favorites#136govargas wants to merge 199 commits into
govargas wants to merge 199 commits into
Conversation
…updated to node 22
…d switch to z.treeifyError
- Implement i18next for multi-language support (Swedish/English) - Localize all user-facing strings across pages and components - Add translation files for common UI elements (auth, navigation, beaches, favorites) - Add dynamic HTML lang attribute based on selected language - Implement language switcher in header - Add accessibility improvements: - Skip to main content navigation link - ARIA labels for interactive elements - Reduced motion support for animations - Improve UX with toast notifications for user feedback - Update favorites layout to full-width cards - Enhance SEO with comprehensive meta tags (Open Graph, Twitter) - Add error boundary for graceful error handling
- Add Swedish translations for About, Terms, Contact, and EU Beach pages - Implement responsive grid for beach cards (1/2/4 columns) - Update favorites to full-width layout
- Bypass map radius/viewport filters when user is searching - Disable map auto-fit when search is active to keep map static - Improve empty state messaging for search vs map filters
- Reset to default mode when clicking "Use current location" to ensure map fits - Clear bounds when switching to nearby mode to prevent stale state - Add onFitBounds callback to switch to viewport after programmatic f
- Copy _redirects file to dist directory for proper SPA routing - Cache HaV v2 latest sample date requests (5min TTL) Resolves beach detail page 404 errors on page reload by ensuring the redirect rules are deployed. Also reduces external API load by caching v2 results endpoint responses.
- Add navigation logic to search input handler - Automatically route users to home page when typing search query - Ensures beach list results are visible when filtering Fixes issue where search bar was functional but results were not displayed when searching from beach detail or other pages.
- Show dropdown with up to 10 filtered beaches while typing - Click any result to navigate directly to beach detail page - Add "View all results on map" link for full search view - Implement outside-click detection to close dropdown - Add translations for "viewAllResults" (EN/SV) Allows users to search and navigate to beaches from any page without leaving their current context, improving UX.
- Add translation keys for all classification states (inProgress, notClassified) - Create getClassificationKey() utility to map API classification data to i18n keys - Update BeachDetailPage and FavoritesPage to translate classification badges - Remove NUTS code field from beach detail page for cleaner UI Fixes issue where classification badges like "Klassificering pågår" displayed in Swedish even when using English language setting. All classification badges now properly translate based on user's selected language.
…luster click handler, update focus zoom limits
HIPPIEKICK
requested changes
Nov 13, 2025
HIPPIEKICK
left a comment
HIPPIEKICK
left a comment
Contributor
There was a problem hiding this comment.
Great job finalising your final project, Talo!
Love that you implemented i18n and the outside-click-detection! Found a tiny styling bug though, I suppose you'd want the dropdown to be on top of the search field here:
It would also be lovely if the hamburger menu closed when the user selects a page.
The only thing you need to "fix" however to be approved is the a11y:
Contributor
|
Another thing I forgot to mention is that your dist folder doesn't need to be pushed to GitHub. |
Author
|
Hi Matilda and thanks for your comments! I think I now have adressed the issues you pointed out, let me know if there is something else I'm missing! |
HIPPIEKICK
approved these changes
Nov 27, 2025
HIPPIEKICK
left a comment
HIPPIEKICK
left a comment
Contributor
There was a problem hiding this comment.
Looks super! Approving ⭐
govargas
force-pushed
the
main
branch
3 times, most recently
from
1f3706b to
c630346
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🎓 Web dev spring 2025 Final Project Submission
This is my final project for the Technigo Fullstack JavaScript Bootcamp. BADA is a web application that helps people in Sweden find safe beaches with real-time water quality data.
🎯 What I Built
A full-stack application featuring:
🚀 Key Achievements
💡 Technical Highlights
🎨 Design Decisions
📚 What I Learned
Building BADA taught me how to architect a real-world full-stack application, integrate external APIs, implement authentication, and focus on user experience and accessibility. I'm proud of the result and I'm looking forward to read your feedback!
Live Demo: https://badaweb.netlify.app/
Test Account: smoke@test.com / Test1234
See README.md for full documentation and setup instructions.