Daniel Tängerfors

Stenbrottsvägen. A booking portal to challenge my self. 

App screen

This is an ongoing project I’m working with in my spare time. To make it easier for our relatives knowing when our shared summer house is being used, I made this booking site as an attempt to learn more about front end development. As my knowledge for coding grew, I made the choice to further develop this site to make it better and easier to use.

As this have been an ongoing project since 2019 the goals always have changed, but the main goals with this project is:

  • Learn more advanced code
  • Improve the user experience by feedback and new standards
App screens from the web application
App screens from the web application

When starting this project my knowledge was limited to HTML and CSS – I had just nearly finished an advanced CSS course – but very eager to learn more. I knew this would require more than that, so I started searching online for premade booking plugins either for WordPress or plain HTML. I found a few, but realized they were to advanced or was too expensive for the size of this project. Instead, I choose to learn how to make a booking form myself. I found a tutorial on how to print and read data from a form to a txt-file and display it on the website using PHP. Not the prettiest solution, but as it was my first attempt it was good enough in the beginning and I knew I would be able to improve it later on.

Working on this project, it has made me confident that anything is possible if you just are willing to commit to it. As I’ve progressed in coding, I have been able to improve this site – from plain HTML, PHP (and that txt-file) it is now running on React and Firebase. Working full time with design, and reading plenty of stuff, I’ve also been able to improve the design and user experience over the time.

The first version of the website
The first version of the website

During the early summer of 2021 I reworked this project to include a login feature and enabling the feature to edit bookings. While reworking the website I made the decision to develop it as a Progressive Web App, hence making it in a mobile-first approach. I also made the choice to work with Tailwind CSS to be able to focus more on coding rather than designing.

Tech Stack

  • React
  • Firebase
  • Tailwind CSS
  • Lottie (for animations)