Technigo Final Project: BADA - Real-time beach water quality web app with maps & favorites #136
Conversation
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
…updated to node 22
…d switch to z.treeifyError
…server.ts as bootstrap only
- 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
Contributor
HIPPIEKICK
left a comment
HIPPIEKICK
left a comment
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. |
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: [email protected] / Test1234
See README.md for full documentation and setup instructions.