Living near the sea with a 4 year old daughter is great; we spend a lot of hours on our nearby beach. The only annoyance I have at times is not having a quick way of knowing how the tide is. Is the tide high so we can go for a swim or catch some shore crabs. When the tide is low we could play some beachball (which I hate) and take our fishing net with us to scoop up some shrimp.
Off course there are many apps which can provide me with the tide but the most are overly complex and thus not very user friendly in my use case. In the end this is great news; finally a good excuse to create something with a few technologies I wanted to spend some time with. And since having seen Evan You with his vue-cli talk on Laracon I’ve been looking for an excuse to use it. So, let’s dig in to it.
An overview of the tools and technologies used:
Gitlab enjoyed a boost of publicity after the news that Github was acquired by MicroSoft. For me a reason to revisit them again after using bitbucket for my day to day work. I was really impressed with the CI/CD pipelines which I use to automatically deploy the master branch after a git-push. Also they provide a very generous free plan. (even compared to Github or bitbucket) So for this project I decided to use them again.
Netlify is a static hosting platform which you can use to ‘build, deploy and manage modern web projects’. I heard Wes Bos from syntaxFM raving about Netlify and after an honorable mention from my colleague Joost I had to try them. After logging in and connecting to my Gitlab ik took literally less than a minute to deploy my site, including an SSL-certificate (provided by let’s encrypt). Netlify can detect a push to your master (or other) branch and deploy it automatically. Great stuff, and again, with a generous free plan.
VueJS and vue-cli
As mentioned I saw Evan You’s talk on vue-cli. A powerful tool which does a lot of the heavy lifting for you. It even comes with a UI. And although this sounds a bit contradictory, it proved to be an incredible powerfull addition. I’ve been using VueJS for a while now and I really like the development experience it provides.
Vuetify material design components
Vuetify is a great set of google’s material design components as reusable vue-components. A joy to use and well documented. In the end I’ve overridden some of the styles and ended up only using their autocomplete and datatable component. Highly recommended Vue components if you’re into material design and VueJS.
For the API-backend of this app i’ve used laravel. A bit of overkill but knowing it pretty wel it was the go-to choice for me to quickly develop and API for this proof of concept. It has a few scheduled jobs which pull the tide-data in my own database after scrubbing it a bit and offer it as a simple REST-api to the app.
Well, there we have it. A simple progressive web app which uses the geolocation capabilities of your device to detect the nearest place which has known tide-data. It’s also possible to enter another place of which you want to know the upcoming tide. Start to type and the autocomplete take over when possible ! The app is a complete PWA so you can add it to your homescreen with ease.
take a look at https://getij.app and let me know what you think ! I will be fleshing out this post a bit more when I have the time. So when you have questions or remarks I will try to incorporate them. Next thing on the todo-list is wrapping this one up in a cordova-app and deploy them to the app stores.