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
- 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. |
- Add z-index to dropdown menus to prevent overlap with search field - Close hamburger menu automatically when navigation links are clicked - Fix color contrast for unknown quality badge to meet WCAG AA standards (#374151) - Standardize menu dropdown styling (width and icon size) for consistency
- Add dist to .gitignore to prevent build artifacts from being tracked - Remove previously tracked dist files from both frontend and backend - Build artifacts will be generated during deployment
…U motive translations - Update header component to improve layout and styling for language display - Refactor language switcher buttons for better accessibility and visual consistency - Introduce new translation keys for algal status and EU motive in both English and Swedish - Update BeachDetailPage to utilize new translations for algal status and EU motive display
- Add tooltips for water quality classifications in BeachDetailPage to provide users with more context. - Introduce new translation keys for classification tooltips in both English and Swedish. - Update CSS for dark mode quality colors to improve contrast. - Minor formatting adjustments for better code readability.
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
Contributor
HIPPIEKICK
left a comment
HIPPIEKICK
left a comment
There was a problem hiding this comment.
Looks super! Approving ⭐
- Introduce ambient backgrounds for light and dark modes in the App component to improve visual appeal. - Update CSS for glassmorphism effects in the header and card components, enhancing the overall aesthetic. - Modify button styles in BeachesList and Header components for better user interaction and consistency. - Adjust color variables for dark mode to improve contrast and readability. - Add new CSS animations for sand and ocean wave effects to create a dynamic user experience.
… effects - Change sand color to a lighter shade for a more natural appearance. - Adjust water simulation parameters for slower movement and subtler ripples. - Reduce intensity of caustics and sparkle effects for a more refined look. - Minor formatting adjustments for better readability in shader code.
- Simplify water simulation by removing the "droppy" ripple effect and adjusting caustic intensity for a softer appearance. - Update sand generation to include shadows and refraction effects, enhancing realism. - Improve overall shader composition for better integration of sand and water visuals.
- Replace "Inter" and "Spectral" fonts with "Special Gothic Expanded One" for the header. - Add new font variable for "Special Gothic Expanded One" in CSS. - Introduce a new class for the title font in the CSS to enhance text styling.
…onent - Added "Zalando Sans" font to the stylesheet for better typography. - Adjusted spacing in BeachesList component for improved readability. - Cleaned up formatting for consistency in JSX elements.
- Updated README to reflect new versions of React and Express, added Three.js and enhanced Tailwind CSS details. - Improved accessibility across components with ARIA attributes and live announcements for loading states and filtered results. - Implemented dynamic loading for 3D backgrounds to optimize performance and user experience. - Added API documentation with Swagger UI in the backend for better developer usability.
…ponent - Changed accent color in CSS from #0a5a82 to #002fa7 for better visual appeal. - Improved code formatting in MapView component for enhanced readability, including consistent line breaks and indentation.
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.