An overview of current surfing conditions in Switzerland. Check it out.
I started this project because I am a passionate surfer in a landlocked country (without any neat forecasting app yet) and because I occasionally like to work with code.
The idea is simple enough: Surfing in Switzerland means surfing in rivers, but this only works if there's enough water in them. Luckily, the Swiss government runs frequent measurements of the water flow and a really cool dude created an API to fetch them. So, all I have to do is get a few values of interest from this API. Simple, right?
Well, not if you've never worked with APIs and have very limited knowledge of websites. Nevertheless, this makes for a perfect learning project: a modest target and a long-held desire to finally work with JavaScript. Now, let's hope the tool will be of value to Swiss surfers too.
This project is based on Create React App, so you'll need Node.js. First, download the node version manager nvm:
`curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash`Restart your terminal or start a new session to load the changes. Then, install the latest node version:
nvm install node # "node" is an alias for the latest versionIn the project directory, you can run:
npm installto download all required packages. Then,
npm startRuns the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
For Visual Studio Code, install JavaScript Debugger and use the Chrome: launch template to debug with breakpoints.
npm testLaunches the test runner in the interactive watch mode.
Test scripts have to be tailored to your project.
See the section about running tests for more information.
npm run buildBuilds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
npm run deployBuilds the project, pushes the build folder to an existing branch called gh-pages, and publishes the website.
See the section about deployment for more information.
For issues with React: https://react.dev/community.
- Simple text-only display of current flow values in selected Swiss surfing spots
- Color-coded numbers to indicate water temperatures
- Map view of spots in Switzerland
- Conditions visible when hovering over marked locations
This project is licensed under the GNU GPLv3 License - see the LICENSE.md file for details
- inspired by flusssurfen.ch and aare.guru
- informed by BAFU Hydrology API
- based on Create React App