https://www.charles-axel.com/assets/tappable.md.b223b7b7.lean.js

1import{_ as A,a as P}from"./chunks/Stack.0db4f6e5.js";import{_ as c,o as l,c as d,r as h,a as t,w as a,d as e,t as j,b as s,e as p}from"./app.a1ee5859.js";import{_ as I}from"./chunks/Video.0f7d5a2f.js";import{_ as D}from"./chunks/Aside.10ecf3bd.js";import{_ as V}from"./chunks/Stories.74c0ff5d.js";const W={},B={class:"w-full hidden dark:block"};function E(i,o){return l(),d("div",B,[h(i.$slots,"default")])}const z=c(W,[["render",E]]),F={},N={class:"block dark:hidden"};function R(i,o){return l(),d("div",N,[h(i.$slots,"default")])}const H=c(F,[["render",R]]),g="/images/grid-light.svg?w=960",M="/images/grid-light.svg?w=640",O="/images/grid-light.svg?w=1280",L="/images/grid-light.svg?w=1600",m="/images/grid-dark.svg?w=960",$="/images/grid-dark.svg?w=640",q="/images/grid-dark.svg?w=1280",G="/images/grid-dark.svg?w=1600",J="/images/alignment.png",u="/images/edges-light.svg?w=960",U="/images/edges-light.svg?w=640",K="/images/edges-light.svg?w=1280",Q="/images/edges-light.svg?w=1600",_="/images/edges-dark.svg?w=960",Z="/images/edges-dark.svg?w=640",Y="/images/edges-dark.svg?w=1280",X="/images/edges-dark.svg?w=1600",f="/images/encryption-light.svg?w=960",ee="/images/encryption-light.svg?w=640",te="/images/encryption-light.svg?w=1280",ae="/images/encryption-light.svg?w=1600",w="/images/encryption-dark.svg?w=960",se="/images/encryption-dark.svg?w=640",ie="/images/encryption-dark.svg?w=1280",oe="/images/encryption-dark.svg?w=1600",b="/images/plug-and-play-light.svg?w=960",re="/images/plug-and-play-light.svg?w=640",ne="/images/plug-and-play-light.svg?w=1280",le="/images/plug-and-play-light.svg?w=1600",y="/images/plug-and-play-dark.svg?w=960",de="/images/plug-and-play-dark.svg?w=640",pe="/images/plug-and-play-dark.svg?w=1280",ce="/images/plug-and-play-dark.svg?w=1600",he=M+" 640w, "+g+" 960w, "+O+" 1280w, "+L+" 1600w",ge=$+" 640w, "+m+" 960w, "+q+" 1280w, "+G+" 1600w",me=U+" 640w, "+u+" 960w, "+K+" 1280w, "+Q+" 1600w",ue=Z+" 640w, "+_+" 960w, "+Y+" 1280w, "+X+" 1600w",_e=ee+" 640w, "+f+" 960w, "+te+" 1280w, "+ae+" 1600w",fe=se+" 640w, "+w+" 960w, "+ie+" 1280w, "+oe+" 1600w",we=re+" 640w, "+b+" 960w, "+ne+" 1280w, "+le+" 1600w",be=de+" 640w, "+y+" 960w, "+pe+" 1280w, "+ce+" 1600w",ye=s("",3),ve=e("p",null,[e("a",{href:"https://capauwels.tappable.link/stratos",target:"_blank",rel:"noreferrer"},"Red Bull Stratos")],-1),ke=e("p",null,[e("a",{href:"https://capauwels.tappable.link/landing-stories",target:"_blank",rel:"noreferrer"},"Stories of Online Sales")],-1),Te=s("",9),Se=e("h2",{id:"product-highlights",tabindex:"-1"},[p("Product highlights "),e("a",{class:"header-anchor",href:"#product-highlights","aria-hidden":"true"},"#")],-1),xe=e("p",null,"As Tappable is a complex piece of software, there are a lot of considerations that were made when developing the product over the course of 3 years. In this section I want to elaborate on four different topics.",-1),Ce=e("h3",{id:"_1-choosing-a-grid",tabindex:"-1"},[p("1. Choosing a grid "),e("a",{class:"header-anchor",href:"#_1-choosing-a-grid","aria-hidden":"true"},"#")],-1),Ae=e("figure",null,[e("img",{alt:"The Tappable grid",width:"1160",height:"516",class:"flat",loading:"lazy",decoding:"async",srcset:he,sizes:"(max-width: 768px) 100vw, 700px",src:g})],-1),Pe=e("figure",null,[e("img",{alt:"The Tappable grid",width:"1160",height:"516",class:"flat",loading:"lazy",decoding:"async",srcset:ge,sizes:"(max-width: 768px) 100vw, 700px",src:m})],-1),je=s("",10),Ie=e("figure",null,[e("img",{alt:"Cloudflare Edge Nodes",width:"1895",height:"800",class:"flat",loading:"lazy",decoding:"async",srcset:me,sizes:"(max-width: 768px) 100vw, 700px",src:u})],-1),De=e("figure",null,[e("img",{alt:"Cloudflare Edge Nodes",width:"1895",height:"800",class:"flat",loading:"lazy",decoding:"async",srcset:ue,sizes:"(max-width: 768px) 100vw, 700px",src:_})],-1),Ve=s("",10),We=e("figure",null,[e("img",{alt:"Form encryption",width:"1160",height:"440",class:"flat",loading:"lazy",decoding:"async",srcset:_e,sizes:"(max-width: 768px) 100vw, 700px",src:f})],-1),Be=e("figure",null,[e("img",{alt:"Form encryption",width:"1160",height:"440",class:"flat",loading:"lazy",decoding:"async",srcset:fe,sizes:"(max-width: 768px) 100vw, 700px",src:w})],-1),Ee=s("",11),ze=e("figure",null,[e("img",{alt:"Plug and play",width:"1160",height:"412",class:"flat",loading:"lazy",decoding:"async",srcset:we,sizes:"(max-width: 768px) 100vw, 700px",src:b})],-1),Fe=e("figure",null,[e("img",{alt:"Plug and play",width:"1160",height:"412",class:"flat",loading:"lazy",decoding:"async",srcset:be,sizes:"(max-width: 768px) 100vw, 700px",src:y})],-1),Ne=s("",10),Re=e("h2",{id:"credits",tabindex:"-1"},[p("Credits "),e("a",{class:"header-anchor",href:"#credits","aria-hidden":"true"},"#")],-1),He=s("",2),Ke=JSON.parse('{"title":"Tappable","description":"Tappable is a no-code Software as a Service product that enables the creation and publishing of Web Stories. I am the founder and CTO, and this article is an in-depth exploration about the way Tappable was built.","frontmatter":{"description":"Tappable is a no-code Software as a Service product that enables the creation and publishing of Web Stories. I am the founder and CTO, and this article is an in-depth exploration about the way Tappable was built.","head":[["meta",{"property":"og:image","content":"https://www.charles-axel.com/images/tappable-og.jpg"}]],"cover":"/images/tappable-hero.jpg","foreground":"/images/tappable-foreground.png"},"headers":[{"level":2,"title":"What is a Web Story?","slug":"what-is-a-web-story","link":"#what-is-a-web-story","children":[]},{"level":2,"title":"How does Tappable work?","slug":"how-does-tappable-work","link":"#how-does-tappable-work","children":[]},{"level":2,"title":"Product highlights","slug":"product-highlights","link":"#product-highlights","children":[{"level":3,"title":"1. Choosing a grid","slug":"_1-choosing-a-grid","link":"#_1-choosing-a-grid","children":[]},{"level":3,"title":"2. Hosting on the edge","slug":"_2-hosting-on-the-edge","link":"#_2-hosting-on-the-edge","children":[]},{"level":3,"title":"3. Encrypting leads","slug":"_3-encrypting-leads","link":"#_3-encrypting-leads","children":[]},{"level":3,"title":"4. Making Tappable Plug-and-Play","slug":"_4-making-tappable-plug-and-play","link":"#_4-making-tappable-plug-and-play","children":[]}]},{"level":2,"title":"Tech stack","slug":"tech-stack","link":"#tech-stack","children":[]},{"level":2,"title":"Credits","slug":"credits","link":"#credits","children":[]}],"relativePath":"tappable.md"}'),Me={name:"tappable.md"},Qe=Object.assign(Me,{setup(i){const o=[{profile:"/images/hans.jpg",name:"Hans Pauwels",title:"Founder & CEO"},{profile:"/images/profile.jpg",name:"Charles-Axel Pauwels",title:"Founder & CTO"},{profile:"/images/henri.jpg",name:"Henri-J\xE9r\xF4me Pauwels",title:"Founder & CMO"},{profile:"/images/louise.jpg",name:"Louise Brunner",title:"Frontend Developer"},{profile:"/images/caterina.jpg",name:"Caterina Rodomonti",title:"Head of Sales"},{profile:"/images/mathilde.jpg",name:"Mathilde Vasseur",title:"Designer"},{profile:"/images/firdaws.jpg",name:"Firdaws Oulad Ben Taib",title:"Content Editor"},{profile:"/images/reinhilde.jpg",name:"Reinhilde Gielen",title:"Sales"},{profile:"/images/segun.jpg",name:"Oluwasegun Oluwadamilola",title:"Sales"},{profile:"/images/sasha.jpg",name:"Alexandra Medzihradska",title:"Sales"},{profile:"/images/anna.jpg",name:"Anna Nogueira",title:"Sales"},{profile:"/images/rafael.jpg",name:"Rafael Pamplona",title:"Sales"},{profile:"/images/eka.jpg",name:"Ekaterine Antelava",title:"Sales"},{profile:"/images/sabine.jpg",name:"Sabine Boghossian",title:"Content Editor"},{profile:"/images/ridge.jpg",name:"Ridge Kimani",title:"Back-end Developer"},{profile:"/images/pieter.jpg",name:"Pieter Poppelsdorf",title:"Sales"},{profile:"/images/daan.jpg",name:"Daan Vandevoorde",title:"Video Editor"},{profile:"/images/maurice.jpg",name:"Maurice Wirtz",title:"Sales"},{profile:"/images/mathias.jpg",name:"Mathias Redl",title:"Designer"}

1,{profile:"/images/enrica.jpg",name:"Enrica Laneri",title:"Video Editor"},{profile:"/images/sonia.jpg",name:"Sonia Ghariani",title:"Sales"}],v=[{profile:"https://img.stackshare.io/service/6006/amp.jpg",name:"Web Stories"},{profile:"https://img.stackshare.io/service/10264/workers.jpg",name:"Cloudflare Workers"},{profile:"https://img.stackshare.io/service/15/twitter-profile-400x400.png",name:"Cloudflare CDN"},{profile:"https://img.stackshare.io/service/25444/default_d01b81e23b3a147163b1031ebadc5beb52ed979c.png",name:"Cloudflare Pages"},{profile:"https://img.stackshare.io/service/3837/paeckCWC.png",name:"Vue 3"},{profile:"https://img.stackshare.io/service/21547/default_1aeac791cde11ff66cc0b20dcc6144eeb185c905.png",name:"Vite"},{profile:"https://img.stackshare.io/service/8158/default_660b7c41c3ba489cb581eec89c04655404258c19.png",name:"Tailwind CSS"},{profile:"https://img.stackshare.io/service/1209/javascript.jpeg",name:"Javascript"},{profile:"https://img.stackshare.io/service/1011/n1JRsFeB_400x400.png",name:"Node.js"},{profile:"https://img.stackshare.io/service/116/cZLxNFZS.jpg",name:"Firebase"},{profile:"https://img.stackshare.io/service/7696/Untitled-5.png",name:"Firestore"},{profile:"https://img.stackshare.io/service/10762/google-cloud-run-logo.png",name:"Cloud Run"},{profile:"https://img.stackshare.io/service/694/Cloud_Storage.png",name:"Cloud Storage"},{profile:"https://img.stackshare.io/service/6253/pubsub.png",name:"Pub/Sub"},{profile:"https://img.stackshare.io/service/9309/PoHJY3K8_400x400.jpg",name:"Cloud Build"},{profile:"https://img.stackshare.io/service/695/BigQuery.png",name:"Big Query"},{profile:"https://img.stackshare.io/service/4784/ugIX8eBN_normal.png",name:"FFMPEG"},{profile:"https://img.stackshare.io/service/1276/og-image-8b3e4f7d.png",name:"Terraform"}];return(Oe,Le)=>{const k=V,T=D,S=I,r=H,n=z,x=A,C=P;return l(),d("div",null,[ye,t(T,{left:""},{default:a(()=>[t(k,{stories:["https://capauwels.tappable.link/stratos","https://capauwels.tappable.link/landing-stories"]},{default:a(()=>[ve,ke]),_:1},8,["stories"])]),_:1}),Te,t(S,{id:"7c57b8c0a53b898a988799b8ca567fde",time:"3m27s"}),Se,xe,Ce,t(r,null,{default:a(()=>[Ae]),_:1}),t(n,null,{default:a(()=>[Pe]),_:1}),je,t(r,null,{default:a(()=>[Ie]),_:1}),t(n,null,{default:a(()=>[De]),_:1}),Ve,t(r,null,{default:a(()=>[We]),_:1}),t(n,null,{default:a(()=>[Be]),_:1}),Ee,t(r,null,{default:a(()=>[ze]),_:1}),t(n,null,{default:a(()=>[Fe]),_:1}),Ne,t(x,{tools:v}),Re,e("p",null,"These are the "+j(o.length)+" team members and talented people who contributed to Tappable over the course of 3 years. A big thanks to all!",1),t(C,{members:o}),He])}}});export{Ke as __pageData,Qe as default};