Featured Case Study // MERN Stack // Forecast & Marine Data

Fullstack Product App

Spotfinder

An independently developed MERN product app for wingfoiling, windsurfing and kitesurfing that turns forecast, marine and spot data into a clear best-spot decision with ranked alternatives.

Fullstack DeveloperIndependent Product DemoIndependently developed as a demo app with commercial product intent
Spotfinder recommendation view with best spot result
Spotfinder ranked list of compatible spots
Spotfinder interactive map with available spots
Spotfinder spot detail page with forecast data
Spotfinder weather and marine forecast interface
Spotfinder forecast model selection and comparison view

Overview

Spotfinder is a fullstack web app for watersports such as wingfoiling, windsurfing and kitesurfing. The core idea is simple: instead of asking users to interpret several forecast sources, spot rules and marine conditions themselves, the app recommends the best spot for a selected day and surfaces further compatible options in a ranked list.

The product combines user input, spot-specific wind windows, forecast data and marine data into one recommendation flow. That turns a complex, expert-heavy decision into a faster and more practical user experience, especially for leisure athletes, travellers and users who do not know a region well.

This project was not created as part of my training. I developed it independently, first as a demo app and at the same time as a product with commercial sales potential. From a portfolio perspective, it is strong because it brings together frontend UX, backend structure, external data handling, mapping and product logic around one clear use case.

Key Features

SpotFinder flow with personalised recommendationsBest-spot selection for a chosen date and conditionsRanked compatible alternative spotsSpot detail pages with weather and marine forecastsInteractive map with all spots and location detailsForecast model selection for comparison

Core Stack

React 19ViteNode.jsExpressMongoDBReact-Leaflet

Build Focus

Fullstack product architectureForecast data integrationSpot matching and ranking logicMap-based recommendation UX

Problem

  • Finding a good spot normally requires local knowledge, forecast literacy and sport-specific judgement.
  • Users need to understand wind directions, conditions and how they interact with each spot.
  • That creates a high entry barrier for casual riders, especially in unfamiliar regions or while travelling.

Solution Design

  • The app reduces the complexity to one practical product question: which spot fits today best?
  • User requirements, spot-specific wind windows, forecast data and marine data are evaluated together.
  • The result is a best match plus additional ranked alternatives instead of a raw data dump.

Target Users & Core Flow

  • Built for leisure athletes without deep forecast knowledge.
  • Useful for travellers and holiday users who do not know local spots yet.
  • Typical flow: choose a date and conditions, receive the best spot, then compare compatible alternatives in the ranking.

Frontend Implementation

  • Built with React 19 and Vite as a responsive frontend for the recommendation flow and spot details.
  • Used React Router for navigation and Axios for API communication.
  • Integrated React-Leaflet, Leaflet and OpenStreetMap tiles for map-based exploration.
  • Used Zod for validation, React.lazy with Suspense for lazy loading and AbortController for clean request handling.

Backend & Data Model

  • Built a Node.js and Express REST API on top of MongoDB and Mongoose.
  • Provided endpoints for the spot list and spot detail views.
  • Structured spot data with geo coordinates and wind windows as the basis for matching and ranking.
  • Prepared data so the frontend can consume recommendations and location details efficiently.

Forecast & Marine Inputs

  • Connected the app to the Open-Meteo Forecast API and Open-Meteo Marine API.
  • Processed wind speed, wind direction, gusts, temperature, weather code and precipitation.
  • Included wave height, wave period, water temperature and sunrise or sunset context for daily evaluation.
  • Used this mixed data foundation to support the best-match and alternative ranking logic.

Map Integration

  • Displayed all spots on an interactive map for better orientation.
  • Used FitBounds so all available spots stay visible automatically.
  • Enabled navigation from map markers directly to the related spot detail page.
  • Added dedicated detail maps for individual locations to strengthen spatial context.

Independent Product Context

  • Spotfinder was developed independently and not as part of my studies or further training.
  • The first public version was conceived as a demo app, but from the outset also as a product intended for sale.
  • That makes the case study relevant both as a functional demo and as a commercially oriented product foundation.

What I Learned

  • The project sharpened my fullstack architecture thinking across frontend, backend and data modelling.
  • It improved how I work with heterogeneous external data sources and translate them into one coherent product flow.
  • Most importantly, it reinforced how technical complexity can be turned into a simple user decision with practical value.

Tools & Libraries

React RouterAxiosReact-LeafletLeafletOpenStreetMap TilesLucide IconsZodReact.lazySuspenseAbortControllerMongoDBMongooseOpen-Meteo Forecast APIOpen-Meteo Marine API