Tag Archive | React

Defty: The easy to use website builder

After leaving DriveTribe I took on my first role as CTO at a start-up called Defty. As employee number 1 I took on the task of hiring the Engineering and UX/UI team, deciding our technical strategy and setting up quality assurance systems in addition to developing the platform itself. In this blog post I will show what we built before Defty was unfortunately shut down for commercial reasons.

A great site in 20 minutes for £20

Deftys target audience was small and medium sized businesses, particularly those that you can imagine being on your local highstreet, who needed a web presence but perhaps didn’t have the skills in house to get online or simply didn’t feel like they would get enough value from an expensive solution. 

Existing solutions made building a site relatively simple but had a few downsides that put small business owners off; they didn’t help with writing content, only worked from desktop computers and supported a myriad of options which sometimes resulted in confusing UIs — particularly for those small business owners who didn’t consider themselves technically savvy.

We wanted to make it possible to build a great single page website in 20 minutes or less — regardless of any existing technical knowledge — from any platform, including mobile phones. This was important as in most developing economies access to mobile phones is much higher than access to desktop machines and even in developed nations it would allow small business owners to work on their site between dealing with customers.

Finally, we wanted our solution to be economical, most fish and chip shops aren’t going to see a return on investment from a £100 website as only locals are likely to use them but they have a much better chance of returns from a £20 site.

IQ

Defty IQ

The first step of building a website on defty was internally referred to as “initial questions” or more often simply “IQ”. In order to generate the user a site tailored to their specific needs we ask a number of questions and stored their results. The cool thing about IQ was that the questions a user was asked depended on the answers they had already provided, so in a way it acted as a decision tree with side effects along the way.

Based on the answers provided we generated a site that we hoped would satisfy most of the users needs and only require a few copy changes to be made manually. Had we launched we would have tracked which changes a user made to their generated site to try and improve IQ for future users.

Builder

Once we had enough information to generate a site we placed the user in to our website builder. The builder itself allowed users to change any aspect of the site we had generated for them including colours, fonts, images and content.

Like everything we built this worked on any screen size from mobile all all the way up to ultrawide monitors. Users could hit preview to see what their site would look like from a mobile phone, tablet or desktop regardless of what device they themselves were on.

All the sites we generated for users were entirely static and hosted in S3 and made available to the world via the Amazon CloudFront. This meant there were no expensive services or databases to keep live and maintain for each individual website and would have allowed us to host sites for mere pennies per year.

Domains

Theres no use in having a good site if potential visitors cannot find it. To this end we also made it easy to purchase domains.

Suffice to say the intricacies of dealing with The Internet Corporation for Assigned Names and Numbers (ICANN) and the Extensible Provisioning Protocol (EPP) and all the various registries is outside the scope of this blog post, but it was an interesting challenge and it was interesting to peek behind the curtain of how this pillar of the internet works.

Everything else

As well as the two major product features of site building and domain purchase and management we of course built all the surrounding infrastructure too. Authentication, organisations, checkout and billing, an activity feed, password reset flows, continuous integration, an entire admin dashboard and all the rest.

I would like to thank the wonderful team I had at defty for all their hard work and I wish them the best of luck in the future.

Danny

DRIVETRIBE MyGarage

James Mays Garage

During my time at DRIVETRIBE I primarily worked on a feature called MyGarage which allows people to upload a complete history of their vehicle ownership as well as their dream vehicle and any vehicles they have for sale.

Each vehicle upload consists of an image, make and model. Optionally a user can add the model year, year of purchase and a text description. Uploaded vehicles can be liked and shared by other users, and they can comment to ask questions or provide opinions. The makes and models can be from a list of known brands or a user can input a custom value if they have something particularly rare.

Vehicle Upload Screen - Desktop
Vehicle Upload Screen – Desktop

The feature has two main benefits, one being that users enjoy the feature and spend a lot more time on the website if they can interact with their own garage and comment and share other peoples. Secondly, DT gets access to a wealth of data about its users; such as how often they get a new vehicle and what they would really like to buy in the future.

I worked on the front-end portion of the feature on DTs responsive website such that it worked both on mobile and desktop browsers. The front-end was written in React and utilised the very cool Styled-Components library, which I enjoyed using.

Garage Page View - Mobile
Garage Page View – Mobile

One of the most exciting parts of working on this project was that it was announced to the world by James May of Top Gear and The Grand Tour fame. A competition was also ran where a user could win (a model of) their dream ride and the winner was announced by Richard Hammond.

I hope a lot of people get a lot of enjoyment from this neat feature.

Danny