From Concept to Reality: Journey of building the most complex Wized web app

hey my name is Bailey founder of blackbeak and today we're joined by some super awesome individuals we got James Jonas and Craig we got a super cool video today we're diving deep into the most complex whiz project that exists to this date of this recording um it's we dive really deep we go into how we built it and whiz how we built it in Zanna how we conceptualized it so grab a stack stick around um it's gonna be good fun so let's start just introductions I'll introduce myself and then pass up to Jonas and we'll go around the table um my name is Bailey founder of black Peak um aspiring to be the number one whiz webflow agency and um yeah excited to be here excited to show you guys what we've built um it's it's really really really really neat you don't us I'll pass it up to you I'm Jonas cradle of West so I built the uh initially with the product and uh now at finspeed I'm responsible basically for building all your wishes and making it really the best tool for you to build web applications with webflow so um yeah that's uh that's all I need to know about me in this call um great maybe I will pass it on to Craig hi guys I'm Craig I'm the head of product at August uh we'll get a little bit more into what August does in a little bit but uh ultimately I've had the pleasure of working with these uh gentlemen for the last couple months building what turned out to be quite a complex but uh yeah super cool project uh well finally uh I'm James I've been working as a developer for blackpink for almost over a year now so I've been working with well what flow then Sano and wall and whis obviously awesome good stuff that's an understatement James you've been doing crazy stuff in Santa it's it's yeah it's insane um cool so let's let's Dive Right In Craig what does August do um just give us a quick overview what does August do yeah absolutely so I mean in a nutshell we're a holiday home co-ownership platform um but really uh we seek to solve kind of three of the main problems that you might uh see or think about when owning a holiday home in the traditional sort of sense so that's just you owning a holiday home all by yourself and really that's the fact that you don't actually use it all the time because by definition you just use it on holiday um you don't always want to go on holiday to the same place so if you buy a home you're kind of stuck in that one place and then it can also be difficult to actually go through the whole purchasing process and maintain it when you're not there or in person and particularly for those sort of in Europe if that's in a different country that may speak a different language so really what we do is we have a very Innovative model that solves all three of those and we do that by rather than having one house for one family we share five homes between 21 families and so that means you get five homes in five different countries um some for summer some for winter you share them with 21 other families which means everybody gets enough time in the year but only as much as they would need to actually go on holiday so that the home is not sitting empty for the rest of the time and then August really facilitates that entire Journey so we support with all the legal and due diligence side of things and then we fully maintain that property so that all you guys have to do what all our customers have to do is turn up and and enjoy their holiday and it's really neat because at the end the user is actually buying a portion of this this collection of properties right they're buying a share into the company which is distributed by 21 shares and those 21 shares own um 121st of each property essentially um yeah so exactly I think time shares were a big thing over here that particularly in the UK got a very bad name because you don't actually own anything as such so we've kind of flipped that on its head all five properties go into a company like you say that company is owned not by us at all but by the by the 21 families yeah and so what you had before um that's a good story in the next section of what August was using before um was a tool to facilitate that booking process because while you don't own the properties you still have to manage and facilitate um the process of people individuals booking those properties yeah exactly so because there's 21 different families we have a pretty um Innovative way in which we distribute sort of time to them and so it's a points-based system essentially they get a certain number of points per year and they redeem them a peak period is going to be more points than an off-peak period um but really there's a whole bunch of rules and logic and conditionals uh around that that we have to account for so whilst you know you are just booking a property much like you would with Airbnb or any other site Expedia there's a whole lot more logic under the hood that we really needed to build in and previously we'd done this using sort of JavaScript and you know a very sort of custom bespoke development working with an offshore developer um but ultimately he was the only one that knew anything about that system um and so there was a big kind of key person risk there where actually we had nobody in-house with the technical capabilities to um you know do anything with that system and so we were very dependent on on him yeah which is why I led you to this no code kind of Route with whiz and Zanna but I want to dive in a bit more about the tech stock you're using in the back in there can you explain about bar about what was the the base system built on what was like managing it the previous system correct yeah so I mean again I we didn't have a whole lot of visibility into it which was part of the the problem so it was uh it was run off an on-prem server that he you know had himself in in uh he was based in Romania so we didn't have any access to that because it wasn't cloud-based um again everything was written in uh various sort of JavaScript languages so you know I couldn't go in and change even basic things I didn't have access to the SQL database which is what we ran everything off of as well um so really just yeah not a lot of uh you know visibility into the system and therefore not much flexibility for us um so let's let's dive in a bit um I was talking a bit about what was built from a high level so this whole project took us probably about we started first started talking I guess early August I think it took us about a month a month and a half to fully scope everything out and go around due diligence um there's a lot of calls and this is uh one of the bigger things with Enterprise projects and Wiz scoping is super super important I guess it's important for smaller projects but even more so for projects of this magnitude there are definitely points that um like I think we could have scoped even further now that looking back on it um but we used fake Jam to scope everything out going over different points in the users journey of where they're starting from from users just logging on the platform and being onboarded to use this booking properties and then what happens after our user books a property once we have those different kind of tranches then we go in and figure out what are some different functions in Zanna that we would have to run to make those functions and make those uh to create those functions and enable them um from there let's see here referencing my notes from there just going over to rock Davis structures testing a lot in xan I'm doing some initial testing and after that coming up with a Google spreadsheet which I think probably had at least like 70 60 line items great correct me if I'm wrong and then once we looked at that we just finagled that even more updated that a bit you know refined the scope and uh and went from there straight into figma develop Sigma design then webflow development then was development then xano development so there is a lot taken here well I would say would be with this kind of projects you know Enterprise project for webflow development it's it's not like a regular website definitely it's you know you need to scope everything from creating as you said you know all the structure of the user flow that they are going to have in the platform and thinking how much time is going to take you to create these functions in in this platform that we're using uh so yeah there is there is a ton of stuff that needs to be scoped you know I can just underline uh what what you just said daily I think scoping is very important for Waste projects when you're dealing with client work in general um when you're on a personal project it might not be so important to really map out everything from the beginning but when you're on a client project you yeah you will want to probably give a give an estimation of what it will cost in the beginning and this estimation can be um yeah it's just different to get to this estimation with web applications than with traditional websites which probably maybe already have a mock-up and which you already maybe have built 20 off and know exactly how long it takes you to build each section um yeah and in web applications it can be different different like in general you can deal with more complex bugs or just technical issues you find along the way or or difficulties and it might sometimes like every developer probably you will can tell you like as long as possible about it there are some questions which are actually super easy to solve but will still take you hours um so yeah just calculate that and and don't under calculate when you're building for clients is I think the biggest advice I can I can give out to um yeah new new voice developers and in general also even code developers who are taking on client projects yeah just to iterate that contingency uh I think all that you know you said wraps in the contingency which is crucial for projects like this um there are multiple times where we're building out xano functions um we didn't realize that the start how complex this function was actually going to be and then James messaged me on stock he's like this was a hundred step function and we look at it I'm like oh my God it was it's it's crazy complex so definitely do you do diligence at the beginning and plan for a lot of contingency and plan if you think it's going to be you know a month double it right um set your expectations far and wide and um yeah don't uh don't over promise that's for sure so what we built with was the whole booking tool users uh can sign up but only if they have an account they can't actually my apologies they can't sign up but users can log in from an account created by them by August they can see their progress um along the way of their collection and their property so if they join a new collection and that property is still getting renovated they'll see the status of that there's form functionality where users can talk to different individuals and share their experiences at these properties say one of them found a really cool restaurant down there from a property they can share that in the form and share images there there's life and functionality common functionality full-fledged form with filtering there is the booking tool obviously um but it's not just a booking tool it's not just you know you book a property and that's it you select there's actually two ways to do it we did a quick bucking method and a slow booking method per se um and there's different ways so say you have more flexibility you notice if you go to Airline websites you can kind of there's a there might be a toggle that says I'm flexible and you can you know you could be flexible with your dates there so we have that sort of method where user enters in their month and their year and it shows them all dates available for all properties in their collection or there's another method the slow method where they can go into a specific property and then view dates available to that specific or sorry go into a specific collection view properties available for that specific collection um on a month and year basis so it's a more refined way of viewing available properties rather than the quickbooking method where it shows you all collections and all properties um with that being said you can book a property one thing you can do on this booking page is you can see if a property is already booked and if it is already booked you can join the wait list this was a really interesting function to build out um it was a lot more difficult than we thought it was effort at first but essentially there's a little simple and we'll share screen and we'll show everything there's a little symbol that shows how many users are on the waitlist and if you would join the waitlist you can do that that's fine but it doesn't remove any of your tokens and this is a good segue into the tokenization of this whole platform is because even though a user has purchased a share into this collection they can't just book the properties for free there has to be a way to regulate the amount of times a user can stay at these properties to make sure all users get a fair share at these properties and so August has a token system and they distribute tokens on a quarterly basis is that correct August all right correct yeah roughly okay and so they distribute tokens on a uh on a you know frequent Cadence I'll say and um those tokens you know we saw the site it's kind of like boxing day almost people scrambling to get to the site booking as fast they can um I think we had almost 30 000 API calls or 20 000 API calls in that one day or the span of two days or so um Black Friday and rolled in with a sort of concert ticket launch or something like that right yeah yeah yeah exactly so that was fun but Zano handled it fine you know whiz handle it fine um in terms of performance and like server load issues there were there were none with that it was completely good which was um very exciting to see Zano can handle quite a lot of load um that we're only on the smaller launch plan here and so um Zano has multiple plans above that which can even handle that we did build an integration as well right with xero um so I guess it shows that you know Integrations are very possible and essentially that allows us to um once somebody's finished their stay uh we build up for the cleaning of the property uh and so that allows invoices to flow into the platform automatically from xero um and then they can open the invoice and pay it with within the platform as well so uh sort of a third-party integration there as well yeah exactly and then some other Integrations as well um we had a situation where we needed to filter uh CMS items from webflow based off of what user was locked and what collection they had access to and so for this we built an external API call to webflow got all the posts uh with a specific ID made sure they matched the user's ID and displayed that on Wiz um that was a lot more complex than I thought it was gonna be as well so yeah um and then lastly verged and control and Zeno this was a really really useful one for us because of the size of the project and because of the amount of frequent updates we're making we utilized versioning control in Zano which allows us to have a production database as well as this test database um and API branching and so if me and James are working on new functions they are not public yet we can build them on V12 and have v11 be public and then push everything to B12 once ready to go there it's pretty important uh from you know a project of this magnitude to have um you know these kind of branches for the API calls because you cannot break down like a live site so it's it's you need to be really careful with that because you know there you have users logging in trying to book properties so you cannot mess that up all right so when you join the uh the dashboard here this is what you're looking at we have a xano call that is I'm just going to open up this chat as well sorry one second there we go so when you join the website this is your dashboard that you see this image here gets a random image from any property in a collection that you own we can see points that we have here and this is quite a complex situation the points because the points have validity terms as well um they're not just willy-nilly 100 points here and there it's you know you have deadlines of when you can spend these points as well as date ranges of when these points are valid from scrolling down you can see you know good morning Bailey I have the quick booking method here where I can select a month select a year and then search properties available to me within collections that I own and then I can see my upcoming stays you can see you know I gotta stay coming up January 28th I wish I was going to Mallorca but you know this is the test site so we're not um we can see any sort of details I can view or edit this booking we've implemented supply.js here so we can see you know I can go back and forth on the slider and then down here we can see the collections I've accessed to um got some really gorgeous products this imagery is fantastic I love it um we can fill up and say I want to view City collection 01. we can load that and there it is City collection L1 Signature Collection no two I could do that and there we go so we can see all the different collections I have access to and then down here is the webflow CMS filtering by specific collection ID um and this is a really fun one that's uh that's the one I think people will really want to hear about um reminders uh now that we're looking at the dashboard if you have any questions about this project specifically you'd love to see them in the questions and answers here um questions actually yes yes um are those like all those upcoming States for example that you see in all the all the properties in the collection are they own all loaded by Wiz or is it the aesthetic site these are all Dynamic everything here is dynamic so you basically were able to to build this functionality um and the slider and load the data for the for the load the correct data for the user in basically and just get to him yeah exactly so this is all coming through the authentication call and what happens here is this just one static item in webflow and then you have your basic Supply JS integration and then we duplicate that item for the amount of items there are and then we have a blue lean so we use an add-on and Zeno and we have a Boolean that says is this stay waitlisted and if it is then in whiz we set custom CSS classes to show the waitlisted state that you can see here um so that's kind of that's kind of how we had differentiating items inside of one array which was really uh a neutral yeah it's quite useful actually when you get to utilize it where do you think well um the Wii's API call to just wait you know for ways to load the elements and then load the library let's play this Library yeah yeah yeah using Wiz JavaScript to wait or Wiz to load correct yes let's dive in so let's say I want a book for February 2023 I'll click search it's going to load everything and uh we do have some caching going on here but it takes about three or four seconds just because I myself have four collections 99 of users have about one collection I'll say maybe nine ninety percent of users have one collection Craig's nodding to that um and so we can go down here and we can see there's a bit of a legend here you can see waitlist is the screen Circle uh selected this is orange so if I select one it's going to go Orange um green is my current booking and then this gray is booked and so we can see these are all booked already um but they don't have a waitlist so I mean there's only one person that's booked them so I go down to Tuscany uh February 4th to 11th select that and then I can book that and then notice there's zero points so the reason these are all zero points is because we're within 30 days of the date happening so it's um I'm not sure what you would call that Craig but um well the last minute stay so we try and uh yeah if people want to have a spontaneous holiday then they they don't have to pay any points for it um and yeah I guess there's a conditional there right because you guys have to reset the points to zero uh based on that 30-day period exactly exactly so again 30 within 30 days um there's a um last minute stay there correct um and people are missing chat it's splyde.js splide.js is what we used yeah so yeah now that I booked that property I view the details here it's going to take me to the booking review page and we can see I'm going to Tuscany my checking date February 4th checkout time and we have some customizable properties here and so what we can see is we can see if uh you know say you have a flight coming in but it's not going to make it till the fifth on like you know 6 a.m or so instead of the fourth you can say uh September 5th is gonna be my check-in day or February 5th will be my check-in date um at no at 6 00 am um and then you know there's going to be four guests or so and you can enter in your flight number of whatever and then I can update this booking and as you saw it saved all that data there and that's that so that is then stored in the xamar database and Craig and his team can go and view that say they want you know a customer reaches out by the live chat they have some changes they want to make or they just want to make sure they confirmed it Craig can uh Craig has visibility over all of that in the database unlike before where you didn't even have access to mySQL database correct wow so um okay so that's all good to go now so what I can do James let's do a bit of a test can you book a property let me know what property you're in a book I'm going to join the wait list of that property okay a live test here uh do you have access to the city collection um I do okay I will go to Mallorca I'm gonna book uh March 4th to 11. it's a full week uh but yeah wait I just booked that can you refresh the page now yeah yeah yeah you can see it right there that I just booked it from March 4 to 11 yeah Yeah March 4th to 11 yeah then you can book yeah so we can see um this is the slow booking method that we're looking at here so we see the one specific property there would be other images but this is in staging we don't have those other images and if I scroll down we have two different options we have half weeks and full weeks um we can book either in sets of half weeks or sets of full weeks there are no custom dates we can do and before I book this property with that James is booked already I want to discuss a bit about how this calendar idea came to fruition because this isn't typically how you would book I mean if you go to Airbnb any any booking site typically you have a JavaScript calendar that opens up and you select your start date you select an end date and it's a very custom specific set of dates right and they typically bill you by the date but in this situation for a bit or um we're booking by half week or a full week and that was quite quite something to to think of during the conceptualizing of this Craig why why are we doing half weeks in four weeks uh I mean the reason is so that we we can kind of standardize the check-in and check out so that we you know can have a change every day where we clean the properties that's the logistical reason and then yeah half weeks is so that people can have kind of long weekends um or or send to their stay around the weekend as opposed to sort of going Saturday to Saturday yeah and when I click one of these properties there's a lot of conditionals that happen as well can we touch on that Craig yeah so there's multiple things I guess because if you think about um you know if a full week is booked you need to block out both of the respective half weeks because you can't have somebody booking a half week when the you know the full week's been booked so we had a lot of uh I guess there's a lot of conditionals there and then there's also conditionals I don't know you tell me where are the other conditionals you've built in lately so I mean you have a ski season conditional uh of course all the rules yeah multiple booking rules as well which I guess happen when you actually click the book Now button uh but there's several four or five different uh checks or criteria that the booking must meet uh before it will actually accept that booking and again that's just so there's fair use across different uh customers and that somebody's not getting Christmas every year in in the same property on my screen here these this is the function that we're using in Zano to show everything uh all the rules that we check through so we see we have about um one two three four rules in this functional loan that we checked through so you can see rule cannot book in the past um so this is checking to see if it will be start date is in the past uh we have a rule only one holiday open per year so we have a Boolean in the database that checks to see if the booking is a holiday booking and then we check to see if a user has created more than one of these uh or check to see if used has created one and if they have then we don't allow a second one to be created same thing with ski season and obviously they cannot book the same property or same week in two properties because there would overlap there so we have a lot a couple more functions I'm not quite sure where they are um but these are just a couple of them here and so going back to August here um so James booked a full week March 4th to 11th so I'm gonna book this and it's gonna say great you've been added to the waitlist in number one position so now James send your email first so you can see you have received that we are for sure for sure I'll open up my email we're not only as well doing this you know we're as well using some send grid to send notifications you know for booking cancellations uh when you go to the waitlist when you have a uh pen being way less looking to confirm because when I'm when I'm going to cancel my booking bill is going to receive a notification to confirm his Wireless booking you can see here's the email you're on America wait list I'm in position one and there's some information about how the weight loss works and so we'll wait for the email to say I'm going to myarka yeah I will cancel now okay okay quick question here I think also from the audience um how is email connected to Wist or Zano yeah so we're using send Grizz integration uh it's in Grid Dynamic send to send over that information and that's an integration that design was offering right correct that's an integration in Zano and so they have a Marketplace component for that so it's actually quite easy to integrate um and yeah send grid Dynamic send is what we're using for this and send good um for your information as a transactional email sending provider so you can basically connect your own domain your own email accounts and then the send grid will take care of sending those out with some um customizable information you of course like can completely customize the template and you can also pass down parameters for the templates so pass down like the name of the user or the email address of course um to customize those exactly and as you can see on my screen here here it is your waitlist has become available um you're going to Mallorca on this date and I can accept our client and look at this image like this is wow yeah I know that's crazy and it's dynamic that is true as Jonah said definitely I will say sangrene is a way to go for I will say email notification as well we not for this platform but we're using as well sangrate for the reset password setup as well uh inside you know in for other for their products as well so yeah yeah so now let's go and accept our client lists the users when they get a notification the user has 24 hours to confirm that booking if those if if the user doesn't accept that you know the the doesn't confirm the booking in 24 hours the next one receive a notification so that's a function that is running in the background in center that is you know it's kind of complex too you know it deletes after 24 hours it deletes the the Willis booking that the user has and as well it notifies the next one so it's it's yeah it's it's pretty it's pretty good we'll dive into that James I'll share my screen after this you can explain us how that works so here we are I can confirm or decline my booking I click confirm my booking and there it is I can go back to my dashboard and now it's the fourth to 11th of Mallorca you can go down here fourth to 11th and there it is it's white I'm booked I'm going to mayorka and James you're paying for my flight um there we go uh I think for mine just amazing work I mean it all comes together hand in hand I know the back end work on this project was really complex um of course with as well but backhand especially all the booking rules you have all the special um yeah just the edge cases you need to to take in mind and consider when building this project and I think it's quite a lot um it's so it's really impressive to see and uh yeah congratulations again on you guys building this project out and building all the functionality together even with email notifications and just everything really a fully fledged web application needs and uh yeah it's a really complex one so congratulations I know it was not an easy task and uh but yeah just really happy to see it worked out yeah thank you so yeah I mean taking a look here we got a couple databases just just a few um correct or uh James you want to speak to this at all we have you know uh I will say this starts from the beginning you know you need to definitely in the scope of the project you need to know how many tables you're going to be all the connection between tables this is uh yeah the base of everything to build as well the front end so I will say yeah we have well we have users bookings availabilities you know as well we have a community page where you have comments for uh posts so yeah I will say uh just talking about in general of this this needs to be part of the scope you know before you start the product you need to know how many tables you're going to be all the connections and how much time is going to take you to fill all these functions that connects and you know it's yeah so let's take a look at the availabilities here so we mentioned before that we are using half weeks and full weeks here so this database here has 1900 records these are all availabilities from I believe 2022 all the way to almost the end of 2023. if that's correct Craig there's a few early ones but mostly that yeah yeah and one of the things that we had to do as well we had to import all of the past bookings from the old system to the new system um which is a fee in itself to try and do that but it works worked out at the end and if you can see we are table referencing the properties here and then we have the booking ID when it becomes booked the point cost is individual for every single booking every single booking has its own costs that's that was something that's quite um it's quite interesting is book Boolean the start and date is full week is holiday and is season season and we're using those to check conditionals when they book bookings here stores all of the user's bookings and some of the data is disconnected just because of testing so I'm going to go around all over to the bottom and we can see here the books so or hear the bookings we made today so James booked myarka and then he canceled it so it has a deleted date so I want to stress this guy I can't stress this enough with this sort of system and what this sort of database archiving is critical right you don't want to delete you want to just hide it right and then maybe after a year or two years if you want to delete it to clean up your database sure delete it but archiving is critical and just data and auditing is super super important and so instead of instead of deleting it we're setting a deleted date then using that to determine whether we show it or not we can see this is connected to certain availability we can see its total cost and here is the custom data here the route dating time that we are showing here and so if I go back to page 31 we can see if you recall I entered in that custom date here of the arrival date and the flight number it is all there um other than that database wise let's see what we got here we have the collections of course the different property Collections and the properties within those collections which I can see here and there's no booking information here right all we're doing is the booking and availabilities have their own databases and there were table referencing this database here so it's pretty interesting um other than that the waitlist so users that are on the waitlist or users that were on the waitlist here um let's take a look different um tokens where they hear different users users is in trying to find it what are you looking for points points yeah so this is where we're showing the points as well we have the the valid date range of Point here and then the collection ID why we build the functions inside Sano because we know we're it's such a complex logic that is behind that that it could be it would be hard to build all that logic inside ways directly uh yeah and it would also not be safe actually um so you probably want to have those booking rules you want to be really sure that they are being enforced and um in order to to be sure of that you need to hand it in the back end um behind the authentication wall and uh basically so that you cannot just send manipulated parameters to the back end and then get your booking done because this is like a typical attack recorders hackers would do with your web applications they would just try to modify the actual request parameters that are going out from the request in the browser to the server and uh yeah those those request parameters are actually very easily very very easy to tamper with um so you will want to validate everything that's critical for your application in the back end what we're looking at my screen here this is the cancel booking API call and we as you can see we're accepting the booking ID um and then we're ensuring that the user is authenticated and then after we do that we have a lot of functions and a lot of conditionals going through the cancel booking API call it doesn't stop it's still it's still still going there it is um there's a lot of information here and this is a lot larger than we thought it was going to be James you want to explain yeah you know completely deep and on a high level how this works so I will say uh you we just need to check stuff right we need to check if it's a wireless booking that is being deleted we need to know if it's a a real a real booking you know uh that is being deleted we need to know um how many points it costs the user because if it's a wait list it costs them zero so they should get uh zero points back if it's about if it's an availability that is booked they need to get the amount of points that it costs them um yeah well we need to notify the next user that is in the whale is we yeah there is we just need to yeah check stuff it's just um you know um I will say Sana is is extremely powerful for this kind of stuff it's it's not what you can do with Channel um yeah and the learning curve with Sano is you know it's not that it's not that easy but I will say is I will say it's it's you know it's is the best tool right now for no code back end at this point um how long have you been working with Sano [Music] um uh well from from from the start on August definitely uh yeah it's been just four months and I'm able already to build these kind of functions so it's like the learning curve is not it's not that bad but yeah you know I think there is no there is no better way to learn something that to have the pressure you know of of doing something right all right we're using Zanna I was using xanna all the way back when Wiz V1 was still around and Jonas was the first one introduced yeah I remember that and so I remember I was still using airtable Jonas is like you got to use Zeno is the way to go and so I probably Zeno back from 20 early 2021 if not early 2020 probably early 2020 actually I think baby you were the first one to create some tutorials on Zeno right for Wist and xano like more than a year ago I think um so I don't know other other are they still alive actually they are still alive they're on our site on good old V1 of whiz um they are so thanks for watching check out finsuite plus for other live videos like this one and also take a look at the black Peak office hours twice weekly free whiz support on live calls we'll see you in the next one [Music]

Channel: Wized

Views: 3,912

Keywords:

Id: NypGwlQvRZY

Length: 38min 12sec (2292 seconds)

Published: Thu Feb 02 2023