Vibe coding my Holiday App
I developed a webapp for my holiday in Barcelona, which allowed me to plan each day using a drag and drop schedule. It’s very simple but happy to share the code for anyone that wants it for their own holiday.
It looks like this. The day always starts in the apartment/hotel. You then drag and drop the places you want to go to.
Next, click on daily view and it outlines the day as well as providing links for directions between each point.
In terms of coding, I didn’t write any of the code for this. It was all written using ChatGPT. My only condition was that it would be written in HTML, Javascript and CSS because I am fairly familiar with all of them and I wanted to make sure I’d be able to edit the files.
ChatGPT generated all of the code. The biggest obstacle I faced wasn’t the code — it was the hosting. For whatever reason, I decided to host it on Vercel. I didn’t realise that it isn’t an easy platform for saving/loading data. ChatGPT brought me around the houses trying to use everything from Github to Google Workspace to Amazon’s AWS but to no avail. The only positive from all of this is it did introduce me to JSON, which is where all of the places in Barcelona are stored.
The solution ended up being fairly simple — host it on my own domain, which solved almost everything. ChatGPT had to add a couple of php files for saving and loading my itinerary.
You can try it out at arukas.ie/barcelona. Be aware that if more than one person is using it at the same time, it will probably go wonky, so you’ll need the code for it to work. I’d say it can be adapted for any timetables, perhaps yard duty?
There are still a lot of problems with the app even though it was perfect for my travels. The main problem is that anyone can access the site at any time and mess around with the itnerary so I’d suggest you add some sort of login if you are using it. The other issue is I never got the Clear Plan button working but I never used it!
If you want to make your own, I’ve developed a manual so you can use it wherever you are going to. The instructions should be good enough for most users. To download everything, simply go to arukas.ie/barcelona and click Source Code!
