--- title: "Uniform MACHathon 2022 - Rage against MACHine's project demo" description: "Uniform won the Maturity award and the Audience Choice award at this year's MACHathon! The winning project from Rage against the MACHine was a composable accelerator for commerce sites. This video is a demo of how it works (and a bit about how we made it work)." date: "2023-07-20T07:59:03.000Z" url: "https://timbenniks.dev/videos/uniform/021-h-l_nj5aojs" youtube_url: "https://www.youtube.com/watch?v=h-l_nJ5Aojs" playlist: "uniform" image: "https://i.ytimg.com/vi/h-l_nJ5Aojs/maxresdefault.jpg" tags: ["composable-architecture", "cms", "api-design", "performance", "cloud-infra"] --- # Uniform MACHathon 2022 - Rage against MACHine's project demo Uniform won the Maturity award and the Audience Choice award at this year's MACHathon! The winning project from Rage against the MACHine was a composable accelerator for commerce sites. This video is a demo of how it works (and a bit about how we made it work). Watch on YouTube: https://www.youtube.com/watch?v=h-l_nJ5Aojs ## Transcript this is tim from uniform and in this video we will talk about the mac alliance hackathon entry by uniform and so in this year's hackathon it was all about acceleration and when we started thinking about now what needs acceleration in the mac world well that is actually getting started connecting everything together and then going live quickly to test what the market needs and this is especially important in e-commerce because e-commerce is hot and people constantly test things that they see in the market like does this work do i need to iterate change something and try again and generally bringing together all these mac components is actually quite hard to do it's totally i.t related and if you are a product owner or a marketing manager or you're doing a new campaign and you want to test out what you can do with a new set of content but potentially the same products you actually have to ask an i.t team can you please rake this up for me and then quickly go live then that's not that quick we're talking weeks here maybe some teams that are extremely mature can do it quite quick but not as quick as what we feel like you have to be able to do so at uniform in these two weeks we thought about how can we get this done and well we made something we love to call a magical button you log in and in about two minutes you have your ecommerce ready to rock and of course there's a bit of governance that goes around with this so we can connect to certain elements and we we kind of scope down how much you can do because in real life when you have a big brand with sub brands you kind of also want to sculpt that down a little don't go wild but go into a certain direction and that's what we did as well so how about we go to the browser and we just go through it all right we are in the browser now and the only thing a user actually has to do is create an account or log in with uniform and after that the magic unfolds and so let us just do that now and while it's all happening i'll explain what we're doing so let's log in it goes through our oauth login i'll choose google and if you didn't have an account you go through the same flow to create a uniform account okay now that we're logged in there's a few options here i am an avid uniform user so i have multiple teams so i'll be selecting team i want to use for today and then you have a color scheme and a font and we decided to put this kind of choice and option in here because when you have a real e-commerce or a real big brand and you want to make a new sales channel or maybe a new subsidiary or maybe a campaign in real life there will be a creative agency or a storytelling team or something dictating to you this is kind of the direction you should go in you have freedom but stay within these bounds that's what this is as well and so we can just select let's just keep the stable one like the first one it looks good so let's click spin up my site and see what happens so now uniform is actually reaching out to a few partners that we chose to work with for this hackathon which are big commerce content stack of course uniform and for cell and there's also cloudinary in there but there's no need for the setup here because it just works out of the box and so we've just made a new sales channel in a big commerce account and now we are importing base content that we have created for that example web shop into content stack and we're also setting up the content stack automation and some other workflows and now we're doing the same thing with uniform and connecting these two systems bigcommerce and content stack into uniform for use later and once uniforms has been done or has been set up we are actually already deploying a two for cell so the thing just works and we are now about a minute in so this is really quite fast and so the longest thing is generally the deployment because it has to build the website make a jam stack site and then put it on for cell as the cdn and so this kind of looks like okay we're just quickly scaffolding a little bit of data together and you have a starter website but it's actually quite a bit more because we're also setting up a lot of quality of life things like web hooks are all over the place there's content stack automation that looks at different changes based on your product models or whatever and it can do things and there's also if you change one thing let's say one page for sell will automatically update that page directly for you so there's lots of cool stuff all right i was still talking and it's already done so basically this view gives this gives you an overview of your whole site lots of things going on and so how about first of all let's just have a look at our new site what we just made and so this is what we just created and actually this website here this is also part of that two-week hackathon that we've done so we've built the tool to scaffold everything and to set up all the systems but also what comes out so these images for example they're all royalty free and we removed the logo so they're nice and plain and this is something that was built in uniform or with uniform compositions but all the data that you see here point to the different systems so it's a truly composable system for example this hero here points to content stack but this product highlight points to bigcommerce and cloudanary and there's a whole bunch of different like content items from content stack product items from big commerce all combined in a uniform composition and we didn't just build a homepage we also built product pages and you can see how fast these loads it's basically instant and that's because this is actually a jam stack site but if one thing changes in one of the systems around these pages will directly be updated so this is the new magic by furcell and their edge which is really really cool so let's have a look how this actually works in uniform and then we can talk about how things can connect because there is actually a special page the skincare bundle that was built slightly differently all right here we go so let's go to our uniform dashboard and so it directly knows your product because we just built it right and so when we go to uniforms canvas tool we have a few compositions and let's start with the home page and so these things have been already set up by our setup tool so we've connected to uniform we've implemented base content because if you were to do this in your real job at let's say some cosmetics company actually having that content from a repository somewhere is actually really handy so developers still get to add stuff here for you also that website that you just saw that actually comes from a git repository so potentially you could make three or four of those and in the tool choose which of these websites you want so you can quickly iterate this means this is an accelerator where developers can still maintain the quality and content editors and marketers can actually go really fast and just deploy the thing and so if you look here at this home page this is actually connected to content stack and as you can see here i haven't logged in yet because this was all just built and you can see that the image here came from cloudani but if you look at let's say a product this product actually came from big commerce and there's also a product image from cloudanary and so this composition is pointing to different sources while the composition in itself does not actually contain that data it only points to it and so we actually also set up a preview so let's do that like this so we can go 50 50. and you can see how that works so let's say we are going to change this face serum here we can actually say let's unlink and let's add face cream because why not and then we hit save and then there this is now face cream alright now that we've seen how everything is connected the beauty is that you can also add something like personalization across these different sources and that's what we've done as well and we've actually built something that says if you are if you just finished that stack like we just did you can actually change that hero so when you actually look here and you click on your personalized link rather than the default one when you click here you will now see congrats on your shiny new stack and you can see there's actually a campaign called hello and so now when i just go back to that url without that campaign it still tells you this so this is now personalized for you and here we didn't click on that campaign and so that actually works really well and out of the box as well and you can now start composing with different sources and then personalize it okay so there's one last thing i want to show you which is the skin care bundle because sometimes you might have 10 000 of these products not just three because in uniform now when you have a look at this we've actually just let's say we go to face cream we've actually clicked and dragged and put everything together as pages looking really nice but that's a lot of work potentially so if you have a lot of these products we've come up with another solution as well which is the bundle and you can see here that this bundle is actually quite different it is dynamic product rather than a normal product and so we have a dynamic product detail we have a dynamic tutorial but you see on the right here they are actually empty and this is on purpose because you do give it a slug so a url identifier and when you then actually go to this page based on that slug you we will query uniform and get the structure of the page but what we also do is based on that information we query directly content stack and bigcommerce that have actually integrated together and so this is using content stack automation so when you make a new product in bigcommerce it will automatically flow into content stack and update a data model there and so if you have a lot of these you only have to set up this slug that binds them together and in the front end we've queried the systems then applied it to a uniform composition and that's what you're seeing here which actually means i could still change this around if i didn't want to show the routine here i just remove it and it won't show up because it's not here and that is something that is just really handy it's quality of life stuff and it basically makes this a really quick setup to start testing with products and what does the market want and yeah we actually won the maturity award and the audience award so we're really proud of this and we really hope we can make this a thing for the future cheers