32

Show DN: An entire webapp built with Webflow

almost 4 years ago from , Designer

At Timekit we have been working the last couple of months on new product. The idea was that we wanted to allow designers and developers to get started building on our platform in 5 min or less.

The result was a embeddable Stripe-Checkout-style booking form that connects to a Google calendar, fetches availability, applies rules (for when not to look), and produces a beautiful widget that can be added to any product or site.

Our in-house Webflow-freak started to research if we could pull off the entire setup of the widget purely in Webflow.

The result: - The landing page: http://booking.timekit.io - The webapp for the setup: http://booking.timekit.io/setup

We would really really love some feedback on what you guys think before we start rolling things out to the all the people on the waiting list.

16 comments

  • pjotr .pjotr ., over 3 years ago

    Please do a tutorial on how you did this!

    6 points
  • Braden HammBraden Hamm, over 3 years ago

    Every office has one (a "Webflow freak")

    5 points
  • Jonathan ShariatJonathan Shariat, over 3 years ago

    Awesome work! Fellow Webflow freak here. Its exciting to see it growing into something more with the new CMS feature. In reality you can make stuff like this! I cant wait until they open this up to 3rd party add ons!

    4 points
    • Lasse AndersenLasse Andersen, over 3 years ago

      Yeah, add-ons is the next natural step! Regarding the CMS feature, I didn't actually use it at all for this project - it's all static with some JS logic and API integration added to the mix :)

      1 point
  • Lasse AndersenLasse Andersen, over 3 years ago

    Lead designer/developer here. I'd be happy to share my experiences with building custom solutions in Webflow if you should have any questions (or questions on Booking.js for that matter!)

    2 points
    • Marcus SwanMarcus Swan, over 3 years ago

      Hey there, I’ve playing around with it recently and as a designer who codes too it’s great, but only because I understand what all the different attributes do (e.g. padding vs margin). Was your situation similar?

      Also what was your workflow like before using Webflow? Cheers!

      1 point
      • Lasse AndersenLasse Andersen, over 3 years ago

        I've been a frontend developer and web designer for many years now, so for me, Webflow adoption was unsurprisingly easy and intuitive. I could imagine that designer-only people would have trouble moving from Photoshop/Sketch directly to WF, at least without some fundamental HTML+CSS understanding. On the other side, developer-only types will probably be uncomfortable in a GUI-only environment, at least to begin with.

        In my opinion, the biggest benefit of Webflow is for iterative development - the feedback cycle from tweak/improvement idea to actual, visible result is extremely short. Normally, the code-to-result cycle is the biggest reason for the classic waterfall approach to web development (mockup first => code implementation). But if you're a capable designer that also knows your basic markup, you can test a new idea in minutes. This is especially true when it comes to transitions, animations and interactions (Webflow really shines here).

        My defacto web app stack is still Angular/React + Bourbon/Sass + Gulp/Webpack + Vagrant/DigitalOcean/AWS for long term, feature heavy projects. But as I'm experimenting more and more with Webflow, I find that combining JS frameworks with element styling done through WF is quite intriguing.

        Matter of fact, the onboarding/setup site was built with custom code in Sublime Text and using Webpack as task runner, then simply referenced the built JS files in the Webflow , like so:

        3 points
        • Marcus SwanMarcus Swan, over 3 years ago

          That’s great thanks for the insight!

          That cycle of mock-up/visual → build → iterate is such a drag and where traditional workflows and tools just don't let me do what I need to. Saying that I’ve had great experience working side-by-side with a dedicated dev, iterating on the fly with both visuals and code.

          I’m on the fence with how much of my time I want to give over to constantly learning and running a stack like you describe above, so maybe Webflow can leverage the code and design knowledge that I’ve already got.

          Thanks again, and good job on the site!

          0 points
        • Clayton Farr, over 3 years ago

          Lasse, did you mean to add more details about your JS framework integration (after 'like so')?

          I'd love to use Webflow more for prototyping web apps (or hell, even building them as you've done here) and would love to hear more about how you brought the two together.

          Thanks

          0 points
    • Bruce Vang, over 3 years ago

      Why would you use Webflow over using a Yeoman generator and then hacking away at the CSS? Is it really that much faster it's worth it?

      1 point
      • Lasse AndersenLasse Andersen, over 3 years ago

        That's a great question really. I used webflow in this project almost exclusively for the design part (creating CSS styles, tweaking layouts, making animations/transitions etc).

        The real benefit here is two-fold 1) Instant tweaking feedback, where e.g. adding a box-shadow is point-and-click with the result clearly visible as-you-click - there's no finding the DOM node in HTML, looking up the CSS class, saving, reloading, alt-tabbing and you don't have to lookup CSS property names in case you forgot them. When changes --feels like they-- are just 2 seconds away, you'll start experimenting more. 2) Almost none organization of class names and CSS files. This can, arguably, both be a pro and a con, but if you stick to transparent naming convention (e.g. BEM), you never have to think about where to put that darn class. The WF UI is, at least for me, a great help.

        Come to think of it, using WF feels like using a prettier version of the Chrome Devtools with constant pointing and tweaking - it's an answer to the eternal frontenders utopia dilemma: why can't the devtool editor not be my actual editor?

        1 point
    • Emmanuel Kaska, 1 year ago

      Hey @lasse, what're your thoughts on the feasibility of creating an Airbnb clone (in it's current form) using Webflow? I know a bit of javascript and I'm well versed in HTML but that's about it.

      0 points
  • Maciej Sawicki, 2 years ago

    I'm also using Webflow combined with code. A good example is my project Moodlight.pro - front-end only disco light app.

    I was thinking that I could bundle code conventions that I use in a mini framework that's designed to work with Webflow. Anyone interested joining such project?

    0 points