When searching for holiday destinations I found it frustrating trying to find good deals for the days that I had in mind.

It involved a lot of manual searching to find flights departing on Thursdays or Fridays, returning on Sundays or Mondays, that were direct.

Manually finding flights meeting this criteria in say July could be 16 or more manual searches. So I set out to make a site that handled all the heavy lifting.

The shape of the response from the skyscanner api would involve a lot of processing on the client side, especially when accounting for multiple dates.

Getting images for the destinations via the google places api would quickly accumulate a very high cost. Each search could show potentially hundreds of images which at $7 per 1000 calls (with 2 calls required per image) would quickly grow to be higher than any potential affiliate income.

The material UI datepickers were missing a lot of the functionality I required.

I implemented some firebase cloud functions to handle the fetching and normalising of the data from the skyscanner api. This allowed me to shape the data into a format that is easy to consume on the React front-end.

To resolve the images issue I decided to manually select free to use images (with Creative Commons Licences) from Flickr. I built some python scripts to source a list of the possible arrival airports from skyscanner and then ranked them by frequency. I then created a data entry website so I could quickly select images for the various locations.

I used the custom render props of the pickers to implement bespoke pickers that suited my use case. I also had to heavily normalise the Date objects so that I could persist them in the redux store and local storage.

Having worked across the manufacturing industry for 5 years it was clear that there was a need for a single place where manufacturers could go to source machine suppliers and integrators for their projects.

We wanted to make this site operate in a similar way to trusted trader and upwork etc, where someone can post a project and then have machine builders contact them for quotes.

This was my first big react project so having to take my basic skills and apply it to something at a much larger scale was a fun challenge.

We needed to make sure that the projects posted were of a high quality, and that the users entering them could be contacted for quotes.

This was also my first time using firebase. I had to learn how to implement authentication, cloud functions, firestore db, and cloud storage.

I also opted to use Semantic UI which had some challenges at times.

I continued to improve my react skills whilst making the project and I came across most of the common React situations. It helped me really get to grips with the framework and it's quirks.

Using Formik helped a lot and I managed to extend formik and semantic ui to create a nice multi-step form wizard. I used validation across the whole app to ensure that we had accurate and complete information at each stage.

Firebase and NoSQL was a bit of a learning curve but the documentation is fantastic and now I'm proficient with it, it's incredibly efficient when implementing MVP products that scale.

Looking back I would build this again with Sass or Tailwind as Semantic hasn't really been updated for a while now and it's not straightforward to apply custom theming. I think the end result is pretty good but it's definitely not perfect.

I kept missing my Window Cleaner and felt bad about not being in when he came to collect his fee. After speaking to him and a few other window cleaners I decided to build an easy to use platform where they could pass cards through their customers letter boxes and have them set up recurring payments online.

The goal was to start with this MVP functionality and then grow the site to include a booking platform, route management platform, and various other features.

Initially I tried building this using WordPress but the functionality just wasn't there. This is when I got serious and decided to really learn web development so I could build it myself.

This was my first real coding project so I had to really get to grips with HTML and CSS, learn the basics of Javascript, learn SQL/PostgreSQL syntax and design patterns, use my new Ruby on Rails knowledge, and get to grips with the MVC pattern.

I also needed to figure out which payment platform to use, I tried multiple subscription based providers but none of the off the shelf products had the functionality I was looking for.

After giving up on WordPress I set to work really getting to grips with Ruby on Rails and how to architect a web app. I mostly used resources available online, udemy, and had a few codementor.io sessions when I got stuck.

For the payment platform I opted to use Stripe as by using their stripe connect platform I could allow windowcleaners to create an account with stripe, have it linked to my platform through OAuth2, create all the subscription products on their stripe accounts, and then when customers paid on the website I could add a small fee for processing and pass the cleaner their intended amount of payment.

To implement this I needed to sync the database with stripe, and utilise web workers to carry out the heavy lifting of creating the stripe entries.

I wanted to create a clean and minimalist portfolio site which showed off some of my larger projects and mentioned the various work and development experiences.

Trying to balance having the essential info as well as further details which I found interesting was tricky. How can you summarise a whole life on a single page?

Traditionally I would have used react-router and had several pages for the different sections of information, but I had to try and make it all work smoothly on a single page.

This was my also my first time using tailwind.

I think I've managed to find a balance between the essential info and the extra details. Expanding this card to find out more about this project is one example of this.

I implemented a scroll based navigation bar using useRef and dynamically changed the background of the bar depending on whether it had cleared the hero image or not.

If you know CSS then tailwind is fairly easy to pick up. At first I was not a fan of having huge classNames but now I'm used to it it's quite easy to work with.