Stenbrottsvägen

Isometiric App screens of the Stenbrottsvägen app

About

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.

Additional info

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
Close up of an white iPad showing the main view of the Stenbrottsvägen website

Above – the first version of the portal running on Javascript and PHP.

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.

Isometiric App screens of the Stenbrottsvägen app
Isometiric App screens of the Stenbrottsvägen app

Above – the current version of the app.

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
  • Styled Compontents (for the form)
  • Lottie (for animations)