🚀 Crash Course into the Jamstack with Next.js & Storyblok | 🐿️ Hack This Fall 2.0

[Music] [Music] [Music] [Music] awesome hey everyone once again we are live on youtube of hack this world 2.0 and today's youtube live is going to be super super super interesting and amazing at the same time do you know why because we have our very own title sponsor story blog coming up with an amazing workshop on into where we dive into jam stack and nuxes and more of those things all together and of course knowing more about storyblock i can already see the chat it is super exciting to see all of yours enthusiasm you are putting in your excitement let's let's have a quick round of you know your favorite emojis in the chat let us have a look once again to that excitement and let's feel excited you know and i've been seeing you all communicating in our discord as well quite amazed and you know looking forward to this workshop as well at the same time and again once again seeing you in the live stream helping or in contributing to all those live chat comments it's like super awesome thanks everyone for joining in yes we are live so how many of you are already aware about storyblock let us know in the chat yes no or maybe what what is that one thing you are looking forward to from this workshop so that we can understand where you are coming from until then while you do that let me quickly introduce what hack this fall is all about hack this fall is a 48 hours virtual hackathon that we are gonna host on 22nd to 24th of october which is next month but even before that we have started so many activities you know we have done instagram lives you have done twitter spaces now in september month we have done various youtube live streams already planned more of that coming in future you can check every one of them on our schedule page which are live right now other than that we are doing htf connects every wednesday at 9 pm ist on our discord server as well which is a very informal and very welcoming space for everyone to join interact with the community members share their ideas and just learn something new at the same time so make sure you join us every wednesday over there cool enough of me let me quickly invite our speakers for this session for this workshop the people from storyblock themselves we have samuel and fakunda joining us hi there how is it going hello everyone hello everyone excited to be here and so let's let's first you know start with the round of introduction samuel would you like to go first oh of course thank you very much uh so hi everybody uh my name is emma snopko you hopefully already heard about it if i'm doing good my job so uh some of you at least i'm currently working for storyblock as the head of the developer relations and i'm taking care of the like presenting storyblock doing demos uh helping developers uh to develop stuff with storyblock writing better documentation and uh i'm happy uh to also like uh ask and and ask to introduce fakundus he's one of my colleagues in the dx team so facundo go ahead thank you thank you very much so my name is fakundo working at servlog2 as a developer relations engineer i'm from buenos aires argentina so i don't know where are you watching us from but a lot of places around the world super cool to have this opportunity to to share uh some knowledge and to spend some good time playing with storyblock and nick js definitely you know thanks a lot for joining us and it's definitely our pleasure to have you as our title sponsor having this workshop set it up at the same time as well meanwhile you know as fuckunder ass feel free to let us know from which part of the world you're joining in from maybe your city your country else as well so that we can also get your you know inputs from the same end and feel free to interact in the chat if you have any questions around story blog around anything related feel free to ask that as well cool so let's let's start this uh session with maybe you know introduction to story blog or anything which you'd like to go ahead with okay so i should probably then start uh give him a second i will just put on the side so we prepare something uh special uh for you so this will be not a regular uh demo i'm going to share my screen first and yes share the screen and choose the correct screen right uh sometimes i will be looking at the left side there's like the second screen i am watching like what is the faces of sidhart and uh if everything is running okay and i'm not saying something very strange so so yeah this is the story block the website uh and you will learn more about it so this is a little sneak peek so this is the stuff we are going to kind of build and work with and we will do a lot of a little bit of workshop stuff so we prepared for you a notion document that we are happy to also like uh share it with you and i'm probably going to do it right now or i'd better i will ask faculty could you please share the this document on the discord that people also like can it uh check it out and then i'm going to like do a little intro into this uh stuff and uh into the the whole workshop so what we are going to do today so yeah there's like a little bit about the front end curse so it will be me and facundo as the instructors and it will take approximately one and a half hour maybe a little bit more uh according to the q a so feel free to write and ask questions during the workshop uh if you want to also like contact us later you can use our emails uh even better you can use our uh twitter because we are very happy to like answer any twitter stuff so my uh twitter is twitter dot com samuel snopko and i have open so you can just like go here like follow me and write me any messages uh anything he would like to and fakundo should be if i am correctly it should be a fakundo do and he will also send the links into this card and you will also find the links in that notion document so that was the first part i needed to uh like very quickly done so what's next up so what we are going to do today it will be a very quick uh intro into the gem stack and how to use the advantage of neck js and how to connect the neck jazz uh with the headless cms and how to build and use it for different stuff it's not only about building uh the website it's about how do you will do it with also with application single page application and even maybe in the future we would like to use it uh with something else like swift or mobile applications but in this case we are going to focus on the nexus so here you can see a little bit like a table of contents so it will be a really really like quick intro which will take us some time for gemstick and headless board then we will try to understand that uh the power of the atomic design so if you never heard about the atomic design it's one of the methodologies how to build and uh design your website and i really honestly do like it it came even before uh the whole headless idea and basically gemstick but i think it's like something that really helped to fulfill the whole idea of the jam stick here then uh of course i will show you how to do some environment setup so we will do some uh let's say uh the brainstorming how to put uh the website i already show you how to translate it to the headless board and how you should approach it how you should cut it into the pieces how do you should change and did that vi which is the next.js components here and then we of course will set up it in the storyblock uh and we will create uh our first page we will create something also as uh as an article page and faculty according to the time we have he will also like show you how to create some more difficult difficult components at the end there will be always time for the q a but if you have a again uh time for uh or any questions just ask during the presentation because i'm here if akundo is here and we see and watch uh your comments so we can always answer them great uh there will be also some links of video shared you can see the links here so if you are missing something all you need to is is the one link of this notion document you will find all the necessary links here uh from the tools i will be using from uh the tutorials that you really need to read if you want to do the stuff that we are going to today and that brings me to the car schedule and i will start doing finally the course so if i i see there are no real questions so far uh there are already links uh for our twitter account so it's everything works pretty cool so what we are going to do uh is that we already introduced ourselves myself and also facundo uh introduce you know what we are doing so we can jump that over and we are going to play a design a simple port for your blog page so i guess every a few of you uh or hopefully everybody of you already built some projects and you probably use some uh already like some websites you build website maybe maybe applications and but uh of course we prepared something for you with our design team and this is the home page of the project which is uh the next jazz we have the same page uh for three different pages and this is also which is a very very very handy with the headlines but we are now focusing on the negatives so what the heck just does the point here is that we prepare some websites which have uh regular as always uh you can edit further some navigation there is some headline there is some uh there are some art there are some image then featured articles some other uh ways of promo to have like hey content is on twitter phone number email answer this is like a regular website and the same is here coming on on the arctic page so this is a very simple block so we are going to build this with the nexus and the story block uh as our cms and the front and neck jazz and on the article as you can see this is like more or less the same headline oh sorry navigation and then we have here also a title with the image which is very similar that previous one we have some text where you can write a text we have a quote of course we will have here uh the head of the author usually with a little bit of description and again some related articles plus footer on the bottom so this is the preview of what we are trying to build today so let's say the question is how we should start so our design team just handle us this and they say like okay please build this and the question how to do it effectively is like answers partially into the introduction into the design atomic design and why is it good and what does it mean so if you never heard about the atomic design the atomic design is uh the way how you think about whole not only about your css of some people like build it from small parts but it's about like how you build your projects because the projects on the web especially they are composed from a very very very uh similar part so we can identify a lot of websites like urls we can identify the navigations we can identify the forms we can identify the labels we can identify a lot of different fields and i need to watch also my time that i don't speak too much so takundo if you have feeling that i speak too much about something just jump in so and when this happens so this happens by brett frost and i hope uh and really think that you should be familiar with this because i i was like really happy about us as i found out and it was like already like 2013 or something like that and he wrote basically this essay which is still online and there is like few very nice quotes and the whole article i'm not going to read the article i'm just having here that's showing you this that you should read this he already also wrote a book about the whole stuff but what i think is really nice point is like even like the first initial like quote we are not designing pages we are designing system of the components and this is something which starts already in the design process so if you and everybody build the pages it's a system of different components that we are putting together so that means that you are not going to into big monolithic system and build one page per page type and every time you will build everything from a scratch but we're trying to identify the components that can be reused during on multiple types of pages so let's good sample is the navigation so you can you take the navigation and you probably don't build the navigation on the website we try to like put it outside like abstract it from that page uh to the higher level or like to have in separate settings and that's already like the first step to atomic design because we are doing a kind of atomization but this is on the very high level so if you go through atomic design they take the inspiration from the periodic table uh of the elements where you can from the basic elements build a more complex molecules and that was why it's called atomic design and you can find a different systems under a different uh different names so uh sorry reader of their names one more time different design systems like atomic design component based design or like a brick system or different stuff but in the end it's always about the same it's like identifying the smallest possible parts and building from them a bigger part so in this case molecules then use those molecules to build their organisms then those from those organisms use them on the templates to build the templates without the content and then basically we take those templates fill them with the content the real content and build the pages and that's the atomic design so this is basically uh the image that should kind of explain everything if you already heard about it and use it at least once so i totally recommend you to read the article oh sorry read this essay even if it's really old but it's very very helpful and there's like of course that uh really nice book that i already mentioned so where's my notion now so here is a link for a book somewhere here you have also link a link for the book which you really i could recommend and one thing i wanted to understand before i move to the next process and show you like how we will do basically our automatic weather design for our website is to show you the video which is i think even better than the image to understand how does it work i think uh faculty also can send you the link for the video but uh what is happening here is basically that atomic designs we are starting from small pieces and did i pause it no let's wait for the first screen yeah and it's coming now so what do you do first is yeah like you are defining and uh finding out the small atoms and those small atoms can be for example input fields or buttons so basically you are building uh you are taking the smallest parts and you are trying to reuse them so you don't have a twenty thousand of buttons you try to find like okay i have i need a five stars of buttons i need a five stars an input field and then using this already existing small parts you're building a bigger sparse so here for example i have a orange button with some rounded corners and then i have some search uh like input fiend and together if i put them together i created a molecule and in this case this could be like a molecule of the search form so if i would like to use uh somewhere search from on my website i already know how the search form should look like and this is how it should look like and this is like the molecule so you can create like bigger parts from a small atoms and then of course you have like multiple of different molecules or atoms and if you put them together into the even bigger parts let's say like sections of the website you can create uh organisms the organism is in this case for example a navigation it could be a hero it could be a spotlight box or it could be a promo box where you're promoting uh some products it could be a carousel on their website so anything you really think it's like huge enough to be defined as organism and then from these all components or as we call them right click organization you will create the templates so the templates in the normal way would be like okay you shed this there is a home page and the homepage should have some component or some hero on the top there should be some uh article teasers and on top you already we already have our uh navigation so this is a template and you can use and fill this template with different content and by filling it with different content you will create the different pages so if you have those templates which are usually also called content types which defines which components can you use there then you create with the content the finally the pages are the product we want to create and if you see and look on this page so this is the page discuss uh like explaining some patient bike in this case uh specifying the road performance etc etc but if i would fill the same page uh with the same navigation let's say that there will be like where is the template so if i would basically take this same template i fill it with a different type of content let's say about the computers or about the keyboards then i would basically create uh a new type of page and i can use basically the same template with different styling on uh and create a different content and this is exactly what we are going to do but we are going to do it a little bit differently so this was the process that we uh designed sorry the developers are doing is like from small bias parts going to the bigger parts so what i mean here of going from a small parts to the bigger parts that if you think about it the whole process and if you think about what i see here so usually we should ask our designers to say like hey please can you start the process and can you build the small atoms and then we do all the process about the discovery of our few uh of the how it's look like what kind of colors we are going to use but this is not exactly how the designs works this is how we the developers work so we are able to build everything from small atoms and uh like building everything together and then raising them in the case of the design process it's better to let the descenders to do their freedom and keep their freedom also because we also like our freedom and build this pages sometimes from the whole pages or get and find uh the persona of the website so in this case we have a black person because the neck jazz is the black it's more or less everything is a little bit grayish and then we already know that if we are building the next website we already can review some of the parts and that's all the designer knows so for example here on the article they already really reuse the related articles so they are kind of doing this intuitively to do using the atomic design and what is the next step is that we should cut this and define for ourself together with our content team so the team that will be creating the content how they going to use and be on this website and there are multiple ways how to do this so how how you can do this and i will get to the storybook soon don't worry uh how to do this is that you can create a very static template so you you just create the same thing that we already saw in the video i would just like create uh input fields for a title from description for image for uh the three articles and uh for three teasers or like points and i would just make it uh like a template in my content management system let's say in storyblock and say like hey you can feel this but this is not exactly what uh the content creator also wants because they want to create and build the stuff with experimentation they want to try different stuff and then if we if they have to go to us developers all the time that we need to or they want to create something new it's quite complicated and that's what in we in storyblock came also to idea that to help us to build the stories with the blogs so basically it's atomic design we call it also that we building the stories with the blocks because in storyblock you are building stories not pages and the stories can represent the page but it also can represent application or like something non representing by page and the blocks are the parts of that stories so here i would start by doing a screenshot so let's do a very very quickly a screenshot of this and i will do by hand what i would do normally with the designers so this is my screenshot this is the screenshot and i should have here the brave i should have heard brave yes and let's quickly jump to the notion and i need to open the octopus to do because the octopus are very is a little handy uh tool which you can use to create the sitemap of your website and i really like it so i put it onto here on the left side and you already see that there is something uh created and this is just a default stuff so what i am going to do now so i have my homepage then the homepage consists of some parts then i'm going to think that i'm going to build this uh and i'm going to build it in the atomic way so first of all i see that i have here or the main page so let's go to this page homepage because we have here the home page and then let's go that we will have some article pages so let's say there will be an article page and there will could be like multiple of them it's totally up to you how you will use this you can you don't have to use this tool the octopus there are many other pages uh sorry the tools that you can use for this so here i now see that i have here my header and i have my my header is also here so in this case i'm going to also limit remove the other stuff that is not confusing for you and i have your header and footer so probably every website will have a header footer and the header footer if i will type here and start to putting some parts here will be this so this is my header and if i now also added here some text where is the text here let's put it here uh this is the header so you can see that i have a header here and probably if i go here and uh sorry can i copy raise it no [Music] add block now this is my header and i will change to green so i have my header and then i alway want to add also the footer and let's do these screens so they are on the all the pages just make it easier and we see that we have header and footer and why i added also the article page the footer is very simple because if i go now here give me let me move this here on the side i will take also screenshot of my second page so let's do this and i didn't need footer alloy okay let's take also the footer and let's click here i have also this page so now i have here not screen where enough pick but you will see that so so i have here the header but the same thing i have here so if i go here i have footer header and this is what i'm talking about so this is the same component we don't need to recreate it for every style time so it's header and this is quite very simple what you definitely interesting easy to work on this is something what you can do for example by printing it's together with your design team with your content team sitting in one room for three hours drink some coffee buy some sweets and just cut your website to the part because you identify the header and i did it here i know that this is a header and this is also the same header but then if you continue this is not only about the stuff that looks same what i mean with that is that look here if i if i compare these two websites and i will star cuts the parts here so i can also let's say cut this and say like this is my hiroara let's uh change the color of it to purple just make it a little bit different and let's add a text and uh let's call it hero area and the hero area is a special little bit and let's change the text also to purple because here are a kind of concept of the title do we have a description here and here is an image so okay fair enough we identify this and then i have a second page here which is the article page and i could look here on the page and see see that there's something similar even we use the same image so it's quite uh straightforward that we could also like cut this part and say that this is also hero ara and why i'm saying this is that the hero era it helps us understand that this is the same component so it's hero area and i know that this look differently but it looks differently only because it's used in different contexts it doesn't look differently because it has a different content structure in the content structure we are speaking about the same thing we have also here a title and we probably don't want to have this title like a special style x so if it's an article we would like to have it centered in the middle if it's in home page it will be centered on the left side the same goes for the description here text which is here centered centered and here on the left side and then we have a different sizes of the image but basically it's the same image so we are saying that we are going to use the same component for both of these pages in this case with the set of fields which is a title uh title description and the image so if i would like to go really really really in detail and i could go and take my text now let's say this will be image and let's very quickly change this to red one so there is an image then oh i'm trying to be fast and that always mean that it's low so description right that's this part and basically there's a any question by the way so far i don't see any questions so we have a title description and the image and i could go go on and go on and go on because if you look here then we have here the article page and sorry i did forget one part so yes okay i have here the home page so let's add here that we are going to use the hero page hero area and let's make it purple because we use it they're purple and also there is a page which is a hero area so here we have a hero then we have a featured articles but there where it's starting to be very very interesting because if you see that this featured articles are also something that we already have so what i mean with that is that of course you can see that these two components are very simple uh similar and they are like features articles uh the same thing as i did before i have again comic based come on okay so this area consists of a featured articles but this is something special because this is the same area i have here but i have here a title and the title is saying something else so that's only a change of the content and the components here can also link to a different kind of articles and different stuff but this also means that these parts here are also components these are the molecules i mentioned so in this case it's totally up to you and your team how you will define this stuff so in this case you can call it uh of course at article teasers you could call it uh previews or whatever else you can have a different modes you have a big ones small ones etc and to make it very very simple i will just make it change uh the color of it to green and that you understand that the green ones will be in this case as i will call it article teasers so article these are [Music] some green so those are three article teasers and the purple one in this case let's call it featured articles so and we are slowly getting to the point that we will be trying to start moving that into story block can the components uh inside the featured rts be here or us uh yes theoretically uh that's a very good uh question and yes they could be also here are us i mean i wouldn't uh call it here i in the hiro era probably in that case but yes you can uh have it as hero areas because in that case if you will be manually choosing uh the image title and the description but here is the outer plus so theoretically you could have a left out outer there could be also uh possibilities when uh these green ones would be also the hero era or it can be build like that the point is of course not do not confuse the content creators so if the content creator is quite clear that these are the hero arrays then it's why not and that's exactly what i'm wanted to show you that you it's up to you how you define the rules between those components and how you will uh combine them so here i had i created something called featured aria future articles or maybe i should call it like article listing because the same article listing with this different name is basically we have here so if i go here just add it here this is article listing and by this way i will just cut basically my website to a different part so what's happening there then so if i will show you the next step is basically exactly i will be creating my website so here okay i know that i could just use also here article listing and then there will be also artificial listing uh then let's say we have here uh but let's say here we have also the reached exit to reach text editor or reach text rich text uh then also here uh is also possible to have like outer uh promo and you are just adding uh those different components so what is in this case rich text and outer promo because as you can see i don't see that on the home page but here i have also the reach tags are however in this case i could have like outer promo so that would be too this part and of course this could be one rich text area this could be a second rich text area and this could be a quote or there is als so in this case there will be like a quote uh complement or however you will find better names for you then of course you can all of these uh like change the order in the body you can like fix them if you want but also there is a possibility uh if you if you decide together with your team that's better that you will say like this is the body you have to use only one rich text restricted editor component and you cannot like change the order you will just write the rich text and you will do a little bit styling together and this is how you are basically building your website your content types or like types of the website and then you will get very soon a list of different stuff uh according not to the design but the content structure and then you are starting to do the other stuff so okay let's say i have a landing page and of course on the landing page probably i will have my header then i will have my footer so that's quite easy sometimes you don't have to name it probably maybe you will have hero area maybe you have a different type of hero like here rather landing landing page and then you will have their like uh products uh slider product slider uh three points here i will very quickly change this to green to make it more straightforward also this to green and then let's say that product slider can be used also on the home page product slider and now i'm already getting my overall so okay i know i'm going to build my project which will consist as a main page or mage content type as a home page i will have a landing page i will have an article page and the article page can consist from a hero or article listing rich text quote component author promo and you can also add a new component and then if you add a new component you can say like okay it can be on use on different components but i am already like here defining the rules that which page can cause of what how i can combine them so for example let's say that here the border the purple one means that hero is always only one on the top i can define my uh my rules and then only the blue ones which can change the orders okay okay so now uh very quickly jump back to the notion so i will click down and done because this should be quite easy here's uh one older link to the octopus where i create also something similar so with maybe a little bit names so you can see here that i have here the hero area intersection grid useless section which is good sample newsletter section is all raised also on all the pages then i have here also for example about page i have skills and bio and here on the article page i can use a reached exit or image component immediate with different sliding styling maybe and sponsor brother so we get to this point and now we need to find the way how to uh put our content together because we want to create this stuff and we need to some well somehow provide the next just and build with the next because i could go and basically if you think about this these components already representing my components in the next jazz world so i already defined that i have a product article listing and there was some article teasers and those are the next js components which we'll talk a little bit more about but now we will need to define how we will save and work with the data so that's the next point and that's the introduction to story block and what is the story block so okay i have like 20 more minutes probably and then facundo will do a lot of coding so what is storyblock is a headless cms so if i go and this kind of store block uh storyblock a bro provide you a freedom you have a decoupled front and a back end you don't have to use for the pack for front and neck just you can use a php you can use next you can just view you can do swelter you can use any frame or basically you want you will be or we will be getting data through the api you can choose the graphql api or you can choose the json api uh what we of what we offer as headless cms which is great is that security because first you get a freedom you are not forced by mono s by monoliths that you have to build your website which some way you can use real like what you want and build how you want to the second thing is the security because usually we are doing the jam stack here and we are building like pre-building so doing the static builds you is really hard to hack us because there is uh one cloud service and all our websites which is publicly facing are already pre-rendered and built on the server this depends on the deployment but the security is much better than as uh if you go to say your website slash a login and some and a lot of times you try to add me an admin and you get in or in the worst cases there is a lot of security issues and you have to regularly update your stack on your server because if you don't do that there is a publicly known issues with your monolithic system and everybody knows how basically to get inside the system and do something bad of course storyblock has some special stuff and that's uh the secret sauce is the visual editor the real-time visual editor with live prayer for editors and what i mean with that is maybe it's now time for a little demo so with the story block you can go and create a little demo uh fakudo will show you uh how to do it with the neck jazz and he will show you also the latest v2 of the storyblock and probably also the latest package with the kin context editing but what you can do with the real-time visual editor is that we don't offer only forms this is what the headless cmss as normal are perceived is that you have only the form so the regular rails so if i hide this you will get forms like this and you can just try the content and our content they just can write content they can they can save they can publish they can change the workflow stages of course and they can do all that stuff but in storyblock we find a way using the very simple javascript library uh bridge which you will enhance your website so this is not the abstraction of your website or your product this is your real product and then you can have stuff like if you can see here all the outlines the dashed lines i can click and on the right hand side the correct component is open and not even only that there's also working the two way binding so if i start uh typing here i see a live prayer preview without even like saving the stuff already playing i can do and also like upload and change the images so for example i can go and up at this image here if uh and we will see in real time without the saving the change of the image and how it look like our content editors and marketers love it because they can like very easily like experiment like double copy paste the components and then just very easily create and uh experiment like creating the new stuff they can then try out if it's look like good on the mobile if it looks like on the tablet and uh in general like how how is uh drag and drop they can do also the stuff like changing uh the colors uh so let's say adding a shadows maybe change this button to the right and all of that is not binded to us as a storyblock it's defined by you as a developer together with your design team with your content editor team with your uh management team that because it's up to you how much responsibility and freedom do you want to give the people who are creating the stuff so it's some people confusing story block with uh the web builders but we are not definitely web builder we are really more really powerful headless solution with the custom application uh with management api with the content delivery api with the graphql and you can use it during the uh the hackathon uh to win also one of these uh keyboards i think like there will be three four of them so that was a quick uh uh intro a little bit promo of the story block and now back to the notion so how it works and what was also the other important stuff so the other important stuff is like we are thinking and we are developers so the developer experience and user are in focus we really think about how to make possible developers are so happy with the solution and in the same time the user so the new v2 is even better for user experience but still keep all the freedom for developers and you can work with a framework you like you can scale up that means basically that you can start on our free plan and as adding more people and uh as you are scaling up getting more pages you can scale up you can change just plans you can go to enterprise you can go for e-commerce it's up to you and in the best it also is really possible to do all this stuff with atomic design so we had it in mind and you will see in now how to do that so uh how does it work and you will see how to do the atomic design in a second very quickly just the high level uh so the eye okay sorry uh i think i can jump over the images because they are anyway like so high level that you will get it just go to this very nice website and you can read it more in detail and developer guides and understand what i meant and how does it exactly work at the moment because we don't have so much time and fakudo please could you send this website i'm going to now show you how uh to create the components for this so i promised the storybook to prepare him some space so i'm going to create a new space from a scratch i'm going to call it hack this for 2021 and i'm creating as a new one i'm going to skip the step-by-step tutorial at the moment and this is what you will see normally when you enter as we are here on the workshop for the developers we are going to directly to developers first of all i'm going to invite facundo so let's try the email and he is here so and he will be the admin also so he can now get the api tokens and show you then how to connect with neck jazz and i am going to create the home page at the moment the homepage here is empty we don't have any visual preview that will be something that the facundo will be also doing and we have here only like some hello world data we could directly already change it but it's definitely not the stuff that we sorry i'm just confusing you it's not the stuff that we created here because we have here the hero so let's create the first the hero area and let's continue from there so i'm going to now just open this as a full screen and do this and hopefully you will see what i mean yes that works so now we are going to components where the developers define all the components for the story block we define already to page but i would like to help a home page so i am going to create also a homepage type pitch sorry that will be a content type and the home page in this case is then doing probably a slight changes will help let's say a body and into the body we will we would like to add any fields uh sorry any fields any other components but we didn't have to create any components so let's keep this like this we created a homepage type we are now able to create our home page but we would like to have their hero so let's add a hero component now i'm creating a hero area and i'm now creating it's a structure or schema so that will be a nice table because i want to add it into the home page or article page and here if you remember correctly and if i also go to the right side where i have my abstract is here then i said that we would like to have there a title we would like to have a description and we would like to have an image so let's do that so i do i need a title i need a description and i need a image or hero image or however we will we will call it i added three fields types uh those all three field types are at the moment uh just the text because if you click it i see the type of text but for the i mean for the title decks is quite good i would just required it so let's make sure that always the title is there then the description i would like to use a longer text so i would go for text area i mean uh if i would go for free rich text here i could also use the rich text or the markdown of course i have some other options and even if you would like to go like for integration with something like really really crazy you can go for plugins and this is something which also are quite handy and we have very nice documentation maybe you can use it in hackathon so little clip for maybe some bonus points if you want to use the storyblock so let's add this as a text area the description and the last thing is the image and the image should be probably a asset and i guess it will be typed image so that's quite easy i can now save it and now on the home page uh let's say i will say here create like my pages and let's uh say this will be a molecule uh i can now add uh to molecule a hierar and into the pages i could add here home page so and the home page now i said like let's say there is a body i mean like there's like a lot of ways how you can do this but i would like to have a body containing other components so here the body i can add a special type a block and this is how the storybook basically works that you are allowed to define a blocks in field so in here you can use any other nest table component and now i remember that i forget to mention this so i will cover that in a second and i won't do here but white lists only a component that you can use so for example here i see that i'm allowed to use the hero error article listing and product slider so for this just to make sure i'm going to choose a hero area for now and i'm going to save it uh but as i said i would like to use also article listing but for using the article list i should probably have an article so let's create a page type article that will be a content type again and the article let's have a hero area so let's say that we have here uh some hero area field and let's say that this is also block where i allowed to be added only a hero error that i will allow to add maximum and record at least one so basically i said that there has to be a one hero area on the article and then of course you have here the other stuff so let's say like i could also like add a uh rich text editor i could or i could create a body of this and i will leave this to uh uh how he would like to maybe you can also do it like this so we can also like add a title description image if you want so the same approach i beat for uh the hero area but now i make into a comp computer that's not my point so i created the article what i would like to do now is also have on the homepage those featured articles so that products sorry article listings so what does mean is that i would like to have a new component called featured articles let's say and the featured articles will be consist of articles so list of articles so here is the articles and those articles should be picked by hand it could be also filled manually but i would like to pick them by hand and i would like to create and like link them to just other stories and probably i would like to link them from the articles folder that doesn't exist at the moment and i will do that in the second and if you remember correctly there was also this title featured articles so i need here also the title which will be again a simple text save it and now i just added also a featured articles component so on the pages and the home page i'm going to allow also the featured articles and save it and now i'm going to content here i just create articles folder for my content creators i will say that they are allowed to add only articles inside and that's it so basically they can create here articles let's say i will create here my first article so article number one and i will be able to as you can see already at the hero area block and here in the euralia block i am able to write uh my title uh there would go the description and i will be able to upload uh let's say image of course of course uh maybe set up a focus point uh with advanced options uh to fill in some alt text and then just upload it of course i don't see the preview right now in this moment but that will be something that facundo will be doing in a few seconds and i should really give him a time because he will be taking one more hour hotel you know you have to tell me that i'm speaking so long because i'm i'm like uh doing the last few things and then the the starts with neggjes so i just created a article i could like publish it and do all the stuff and now i'm going to create my home page so here let's say i will remote this original home page and i will create a new homepage again so let's call it home and i would like to use the home page as a type so again i don't have a real time period because that will come in a second but i can see that i have here the body and let's keep this that you are not too confused by uh not presenting that and here i now can choose from a different component or different molecules like you can see already i mean you can name differently and here you can see that i already have the option to add hero area and also operation to that article listing so i add a hero area again i would think filled here like heck these fall 2021 my description the script and maybe choose an image from asset library that is a little bit faster then again go back i can add and then featured listing uh featured articles and here i can already choose my article because there i created one and i could like write here the featured article i can save it of course and publish it by saving and publishing you're creating the draft version and then of course the published version and what will be the then uh covering is that you will at the end then consume this drug json which consists the information about my website and these data are will be used to render the website how uh approximately like this so here you can see that i have here the body that is also here so basically this is my home page there is a body and also here you can see this body which consists of two components so it's arrow of two components the first one is basically a type hero area and here is uh the file name of the image here is uh the description which say description and the type title hacked this fall so exactly what you can see here inside the stuff and the same thing goes also then of course for the featured articles where you have a title and link to the article or like reference so here you can see this is a component called featured articles which helped me to render the correct component and then here i have a title saying like okay this is the featured article and the article id which there is a little heck how you can instead of getting the id you will get the real content of it and like this you would then create all the options that you will set up together with your team together and your content xero's content creators will have all the options to build the stuff so if i want to now add again i want to add a new feature article like that a new hero area or as we have in our projects you can have directly like hundreds of the hundreds of uh the content here and options because we don't limit you and basically you have unlimited content types you have unlimited content components and you can also like uh you can also nest as much as you know as you want so as you can see here uh in this uh give me a second on the screen there are a content types and the next table components and the next stable components can be nested in any nestable component or in any content types so it's fully up to you how deep and how small will be your component and i think that was already all uh the theory from my site i created hopefully everything fakundo needed and he can now start uh with creating the next setup connecting the storyblock with the neckjs and also uh building uh basically the prayer for you and how you see how you can consume and use storyblock together with uh the neck jazz storybo so facundo i am stop sharing the screen and you can share your screen and i will look on the questions and ask for them go ahead yeah i don't know if we have questions there was one question uh i just answered um if right if we can use better images uh inside the components and yes we can so that that was the answer to the question give me a second and i will share my screen um [Music] oh sorry sure cool let me know if you see my screen so the idea would be to create the front end for the application that we are creating now uh the website that we are creating and that some design using the atomic design and the components that we now have in our storyblock space so to do that uh what we are going to use is neck js neck js if you don't know is a framework a react framework let's say like a meta framework because it's it's built on top of react that we can use um to create react applications but uh in nxjs offers the possibility of using um features like server side rendering or static site generation to create the pages from the server and deliver to the user a different experience not only a client-side rendering application or a single page application uh the benefit that we can get advantage of uh from nexus in for example the the page that we are creating now the website that we are creating now is that we will be able to create static pages at build time and host them in for example a platform like burcell or netlify and host our website there so the users will visit our website uh which will be confirmed by static pages static assets um these static pages will be faster and more secure to to visit i mean because we don't have to generate any kind of dynamic content uh on the flight when the users visit our website so um that's a good feature that we can get advantage of nexjs for this particular project as it is a blog post sorry as it is a blog platform um as the text of of the articles that we have on the home page won't change like super frequently we can generate these static assets and host them in the server so we will have static assets generated there and whenever we make a change in storyblock uh and we click on the publish button or the save button that some just show we will we can trigger a build process of our web project and generate a new version of these static pages to display the new content to the users so what i'm going to do now um i'm in my computer in localhost i will execute mpx uh create next app which is an application that we have available to create um nexjs applications using a boiler plate that is maintained by the nexus um team so um we can be sure that we are using like the latest greatest changes that it's fixed and it's up to date and this application will generate all the files that we can need uh to begin uh creating our nexus application i will name it hackbeastfall and well everything will start executing now it will uh install uh react because as i said next js is based on react um it will start uh all the um packages that we need to work until and to initiate our application in the meantime what i can do is to double check that i was uh invited to the to the space that some just created because we will uh use it to create an application i will look here in the hack this fall yes space and i will double check that we have the home page that some created and that we are not displaying any page here what we are going to do i will go to the settings um page here and we have a location or default environment which is the website that we are going to use to preview how the page will look like when we edit and we add some content as i'm going to work with this local application the url that i will use for the preview will be http localhost uh localhost on the port 3000 because that is the one that we are going to use um in in our application i mean in the application that is living in my computer and on the other hand here we have the api key that we will use to preview the content and to link the application uh from my computer to the visual editor so we can see it there let's see if this finished okay this finished so let's go to uh the new folder that i just created and i will open visual studio code to edit it you can use um the the editor that you want i'm familiar with visual studio code give me one second that i will zoom the font so you can see what's happening and i will open a terminal so this is the boilerplate for any nxjs application we have well the readme all the packages that we are using um some configuration uh some styles that are available uh and the pages folder which is the one nexjs works in a page based mode let's say um so whenever we can create roots in our application and nature yes we'll evaluate those routes um depending on the route that we are using uh it will link um the the path that we are visiting in our site with the path that is living in our solution folder and so for instance if we have a page in google.com help slash about we we will have this help slash about which is the path or the url and we can have here a folder we that is called uh help and another file inside of it called um about.js and netjs will automatically link the the url that we are visiting with this path that we are generating in our folder and will execute the code that is in the javascript file that we have in the past that we are defining another cool feature that netjs offers is that we can use dynamic routes so for instance we can have um like a generic path with a parameter that we can use to generate a page based on what we have in the path and we can use that in the server side rendering and in the static site generation so for instance in the case of the articles or blog posts that we are seeing now we don't have to create one page per blog post because the the code itself of the front end will be always the same and the only thing that will change is the content uh that is brought from storyblock and we will have only one file with all the code that with all the code that we need to generate the markup for our article page so this is the boilerplate and this is the space as i say we will use this preview to connect to the application first of all let me install some packages that we will need because these are all react but uh reconnect but we need some dependencies from storyblock to work with it so one of the packages that we are going to use is the client storyblock client that we can use to connect to um the storyblock uh space and bring the content using the rest api that storyblock exposed so what i'm going to do now is to um install npm storyblock.js client on your application and the other component that i will uh install now that i'm here give me one second is um another package that storyblock offers to edit to open the components that we are using in the space in our application and link them in the visual editor and allow the user to click on them and edit them on the flight and see the changes you will see the magic later but uh it will be more clear what i'm going to do now is to install that other um component let me see if everything is okay whoa sorry i just saw that this one didn't i don't put install it won't install ever so um we are installing storyblock.js client we also will need um axios to connect to server uh rest api and i will also uh install this storyboard editable which is what we are going to use in the component that we are going to create to connect to storyblock application and the visual editor and be able to edit the content on the fly let's run npm install so we also get all the all the packages that we need from the next project and now that we are here if we execute npm run dev what we are doing is starting the development server of net.js executing locally at localhost 3000 that i said and if we go here and i go to localhost 3000 you will see that this is the the homepage of nexjs boilerplate i mean there's no information from us and this is what we are we see whenever we create a new nexjs application but what is cool is that if we go to storyblock and i go to the content and i go to the home as i define this preview as localhost 3000 we see a different page now which is a 404 i mean it's not cool but what is cool to say that in some way is that we see here that we are going to localhost 3000 home and we didn't create any page for this path home this is i mean this is what we are sending because we are in the story home that has the the slug the the url called home but we can change that if we go to the config on of this story you will see that the slug is home because that's the same name of the story but we can create a real path which is the one that we will send to the application and use it as if it were the the slug so if i define for instance that the real path is just a slash we can say okay this is the one that we are sending and we are going now to localhost 3000 and we can see that we are seeing the same page that we have locally running which is better than a 404 but we are not displaying anything related to the content that we created right so we can say now that we connected um the visual editor of storyblock to our localhost application i will see if there is any question because i was not looking at uh the chat no no so far no questions uh there's a little bit chat uh you can continue easily okay cool please let me know if you have any question if you want to see anything that i'm not going deep enough and etc and and i can stop there but um yes so now what what we are going to do is to connect storyblock to our application so we can uh use the content from storyblock right so what we are going to do here is to create a new uh folder called uh util and now we can call it live because what i'm going to do now is to create a storyblock client code that we can instantiate in all the stories from next js to use to um connect to storyblock uh space so we are going to create this storyblock.js file inside of liv and as the code is kind of boilerplate and we use always the same in all the projects what i'm going to do is to grab this and paste it here and i will um show you the code and explain and explain to you what's happening but we are importing here uh two hooks from react just take and use effect and we are importing the storyblock line from the package that i installed before storyblock.js client that and you can see that we are here instantiating this storyblock element which would be a storyblock client that we have to define an access token and here is where the token that we have in our storyblock space enters i will go to the settings i will grab this here i will go to api key grab this one and paste it here this is probably not the best solution i'm doing this because it's an example but you can use environment variables here to hide the token and and have it in your server so now that we have this client this is the one that we are going to use to retrieve information related to the stories uh of our space from the pages that we are creating but besides the client another thing that we are going to create is this story um is this um storyblock hook what this is going to do is to use the storyblock bridge to link the visual editor with our application and be able to see the changes that we are applying and doing in um in our pages in our components in real time the the storyblock breach is a javascript file that we have to include in all the pages and uh that we that we create but just when we are working in the draft version of our application or the testing environment or or the development environment um because we don't want i mean we don't need to to get this ability of changing the content on the flight on our production and an unpublished version of our web application so if you go here well if you see here we are adding the bridge uh we get the document and we add this uh servlog bridge which will be always the same for uh for all the pages it is leaving here i mean in this url if you go there you will have the javascript file for the storyblock breach and we append that um javascript um file we we we include the javascript file to all the pages that we have and now that we have the bridge and we can um i mean here you can see that we are only adding the bridge if we are in preview mode and with that bridge what we have to do is to define some events that are going to happen um when we are working on a story uh that and that we want to catch and to execute some code to reflect the changes that are happening in the content so here what we are going to do is to create an um instance of the storyblock client which is the one that is going to connect to the rest api of storyblock and bring the information i i want to enter on this detail now we can say see that later but what what we have here of the sorry of the bridge i said the client uh what we have here is the surblock bridge we instantiate that now and we have some events that we can catch we have the even change and they even publish as you saw before uh when samuel um show you if you go to story here you can click save to generate a new draft version of the story or you can create or you can hit publish to publish the changes to the production environment so these are the two events that we are catching here the change even and the publish event when we get one of these two events what we are going to do is to reload the complete page and show the the story with all the changes that we applied and another event that we are going to catch is the input the input event happens whenever we edit any type of content inside the story i mean if we go here to the hero area and we put had this fall instead of 2021 we put 2022 changes changing the content here what he's doing is to execute this even input so whenever we do that what we are going to do is to uh refresh the story that we are setting in the state of uh our page to display the com the changes and the last event that we are going to catch is enter edit mode this is happening when we load the story and we load the page and what we want to do is to use the storyblock client to call the rest api and bring all the information related to the story id or the story that we are seeing now in the version draft and use that information to set that as the story of the page that we are seeing now so now that we have all these events that we are catching and we are adding the storyblock client here and we are um executing actions whenever one of these um events happens and we are connecting to the right space we can say that everything is ready now to start creating out pages and see the changes in storyblock application please let me know if you have any question um i don't see anything no no yes thank you apollo if anyone feels that i'm talking too much or saying a lot of things please stop me ask anything uh we can talk about that we can stop in in any detail yes will this boilerplate code be the same for projects yes um i mean you can change things depending on your project this is like the basic boilerplate that we need to get the visual editor working with our next ges application uh well in fact this is code that can be used in a react application for instance to if you are creating a react instead of an xjs application but the boilerplate will be slightly the same uh for all the projects that you work on probably something that you can change is uh the relations that uh well in the example that uh some uh displayed before we can have pages where we have list of posts that we created and the result relations options that we send to the server client means that we are going to resolve the relations to the other stories and bring all the data related to those stories too so in the case of the home page for instance if we are showing a list of three blog posts what we are going to do with the resolve relations options is bring the information of all the three posts and we can use the information from them like the the image of the blog post the the title the description to show that in the home page for instance but the boilerplate itself would be pretty pretty similar to this one and um yeah i i mean we don't you can use this code what i'm going to do after this or probably later i don't know if we will have time to to see the the completed sample but what i'm going to do is uh to share if you go to this url storyblock.com technologies this is the technology hub that we have in in storyblock site let me share that in the chat but um what you can see here we have a lot of tutorials boilerplates starter projects videos chats sorry not chats but recording of past talks that we presented um articles tutorials um for different um technologies frameworks and programming languages because one of the benefits of a headless cms and and like a service like this that you are that you connect using a rest api is that it's um technology agnostic i mean we are now displaying um an xjs application and an xjs project because we are grabbing njs as an example but you can use storyblock with any programming language with any technology because it's a rest api that you can connect using the technology that you prefer but what what is cool is that for a lot of frameworks and programming languages we also have npm packages or libraries that you can use to make your work easier for instance for react applications or next js applications we can use the client that i'm using now we can use the store block editable component that i will display later and we have the same for vue.js for instance well react angular php even python asp.net we have components tutorials guides for all the programming languages and you can use them and if you go for instance to the hub that we have for netges you can see that we have um a video of some explaining how to create a website using nexjs and storyblock we have a getting started tutorial how to create a multi-language blog tutorial which is pretty cool and you have the the boilerplates of these projects so you can get them to start your project from the from the ground without having to do everything manually um unlike studying from a fresh net js application i mean you can use these projects to start and edit it and have your for instance your blog live up and running like changing some stuff some styling some details to connect to your space so we have here the code that we are going to use i hope everything is cool i will see there define these let me double check so i don't have any error when i execute this but we have all the code that we need to connect servlog to our application so what we are going to do now is go to the page and we have only this index.js which is the page that we were seeing before i mean here you see the title it says create next up if we put here uh i don't know uh hello this fall and we save one of the benefits that netjes has is that we have a um hot refresh so if i go here and i i see that i edited the title of the head so if i go to this tile now okay and i put hello like this fall you will see that i just saved and i go to the page and the title changes and i didn't have to refresh the page i didn't have to do a deploy a bill or anything and what we are going to do is to edit this page to bring information from server and display the the components that we are creating in the storyblock right so what i'm going to do is having this index page we will bring the information related to uh i i mean we could bring the information related to this home page so uh what i'm going to do now is do some cheating here because i i really have so i don't have to write it everything again i will put it here and replace all the code of the page with this so what is what are we doing here we will have two um components that we will use the layout component and the page component that i will create later and we have here the uh well this is different but we will have the storyblock client and the user storyblock um hook that we created before and we will bring them from the leave um the leave file yes sorry um having these two what we are going to do is when we execute the the main function for the home we are going to bring the story from storyblock we will have the properties that we are executing and we will return the main layout with a page using the content the the content that we bring from the story you will see now that we have this get static props with this which is a function that is executed at build time to generate all the static assets and all the study pages that follow a certain criteria the criteria that we are using um we can we can set that based on i don't know a function called get static path like we say okay generate all the pages that uh follow um i don't know that are inside this uh collection of urls but in this case what we are going to do is to hard code the home because we want to bring the the the story home this with the slack home we will bring the draft version we can bring the published version to uh well this won't be executed this is not needed because we are bringing always the draft version and we will execute the storyblock client using the slack home and sending the parameter that we want the draft version and when we have the data we are returning that the story of the data that we are bringing from the react well don't don't see this because this is happening but if i go to storyblock and i see the the draft json here you will see that we are bringing a story inside of the of the content that is returning from the rest api and we are bringing that story and sending that to the function that we are going to use to generate the markup of our page so here we said that we have the story we use the the hook that we defined before with the story that we are sending and it's coming from the rest api and that story is the one that we're going to use to create our page so now what i'm going to do is to create a new folder called components and we will create two files inside of it one is called layout layout but js and the other one is called page.js because that's how we call our two components here for the layout what we are going to do is to define um some generic layout that we are going to use in all our pages so i will copy the code from here we have a layout with some styling and we are using the children the children is the um the page component that we are sending you are seeing here that i'm using some styling some css classes i will define that and i will talk about that um in a couple of minutes i wanted to create a component first the other component which is um the dynamic component oh sorry this changes we are going to use this other storyblock editable component here um this is the page the page will have a main um a main section and inside the page what we are going to do is to grab the content that we send here which is the story we will bring the body of the story and for each block inside the body we are going to render that block which we are defining here as a dynamic component inside of it i will talk about the dynamic component uh well we can talk now but the dynamic component it's another component that we are going to create inside the same the same folder and the idea behind the dynamic component is that we don't know how each one of our stories is going to be confirmed or how each one of our stories is going to to look like so we define this um dynamic component i where what we do is to define a list of components that we support in our story block space and depending on that we whenever the dynamic component receive a block we evaluate which type of component is that block if that block is one of the uh blocks that we support and that are in this in this list we will grab the markup of that component and display that and if not we will display a placeholder so what i'm going to do now here is create the teaser component the oh sorry teaser feature grid and placeholder feature read and place holder so we have these two components uh sorry four components and for each one of them we will define the um the markup that we are going to display for them so what we are going to do here is to create components that will support the ones that we are using in in this case right i mean the the ones that we support in our application um so we can go back here oh sorry we can go to the components and see that we support the the article type the feature type the grid the teaser the ones that we talked about here so we already have the page component we have the dynamic component defined i'm going to close a couple of these because we won't see anything uh any question from from the chat how we are with on time uh do we are at uh 5 p.m directly our time or my time sorry your time is different so definitely one half hour but still i think thinking of uh probably what what i can do um probably what would be because here is true yeah sorry yeah i probably we want to say the same thing so just go ahead oh no no what i was going to say is that um what i was planning to do is to grab a project that is already working and probably see how it should okay so what i'm going to do now is to open um one of the examples that we have because i i think that the idea was um i mean you you followed the idea yeah i i did change you few things so that's why you got that error no no no no it's okay it's okay but what i wanted to display here is we have the multi-language website which is one of the examples that i show you that you can get from storyblock site i'm going to um here the client and what i'm going to do is to grab from um the space here multi-language website i will grab the api key so i can connect to this space and i can show you how this is working and um well this is exactly the same as we saw before one change i mean we have all the components here the fine what i didn't say before uh was that all this styling is used um with taiwan css taiwan css is a framework let's say that we can use to um follow the atomic design approach in our applications but also having um a more how to say using classes to define the style for our pages in a more order way let's say so if you see here i i won't explain how to install uh telling css in your application probably you can uh follow that i can share with you a link here probably well i see that some of you already know tywin but if you follow the url that i just share in the chat you can see how to configure uh taiwan css in your next.js application and we have all the components that we need here to get our page up and running you can see that here in the dynamic component well here the list of components is bigger because it's a different project but in if you see for instance the teaser let's say i'm importing here the sb editable from storyblock editable package which is the one that i installed before and what it does is we add this to any element inside of our component and we are saying hey this component can be edited from the visual editor and you should sync the changes or be aware of that and the other thing that we are doing and that i want to display here is that we are getting the block from the rest api of storyblock and we are using the information of the block to populate the markup of our components so here this teaser component in storyblock in the store block space let me show you but if i go here to the sorry to the components we see that the teaser has a headline and has a and has an image so if i go to the teaser in my solution you can see that from the block that i'm bringing whenever i have a teaser i can grab the headline property and use it for instance as a text here or use the image and property as an it is an image we can grab the file name and the alt text and display it there let me run this [Music] solution so you can see what i'm talking about let me see if this connects to so this is the the project that i'm uh using and displaying you now it's pretty similar to the one that some created we have images we have posts and etc and this is in my computer but if i go here to this space i go to the content and i go to the home story as the preview url is localhost 3000 i'm connecting to my computer to the application that i'm running in my computer so for instance we have a teaser here with a headline and an image the same component that we were seeing here if we go to the um draft json here we can see that we have the the content of the story the story has a body and the body has different components inside of inside of it so if i go to the tester type here you see that we have a headline of the teaser the type of compo is component and we have an image with all the properties like file name or alt text which are the ones that we are using here and this is being rendered because we are using the dynamic component approach we are receiving all the components related to that story from the rest api and based on the type of component we render the markup that we have defined in our nexjs application here the page is not index.js because as i mentioned before nexjs offer us the possibility of creating dynamic routes so if you see here the code is very similar to the one that we saw for the in the js file that i created before we have the client we have the hook we have the dynamic component and the layout and etc but the difference is that well here is the get static props uh code and you see that this is pretty similar we are using the draft version we are bringing all the data related to the story of that slug and returning that to the function that is generating the markup but the difference is that get static prop is getting some parameters and one of the params is the slug of the page that we are visiting this slack is generated but this function that i mentioned before which is called get static paths and what we are doing here is using the storyblock client to get all the paths all the links that we have in our space and for each one of those of those paths what we are going to do is to add that to a list of slugs or urls and sending those parts to the get study prop so now we are seeing the changes uh applied dynamically even if we are uh working here locally and you can see that i connected the storyblock bridge so if i go here and it says my travel block i can post test and you will see the changes appearing or i can put instead of my childhood blog i can put a hug this fall test project and it's changed live on what what is cool is that this is changing and we are not saving the changes we are not generating a draft version of the story we are not generating any deploy we don't need any uh publishing of the content you can see the changes just appearing here while i'm typing and this is like super cool for the content editors because you don't need to save anything you don't need to ask the developers to do a deploy we don't need to um i don't know generate a new version of the page in the git repository or whatever and what is cool is that as we define the page um with uh oh sorry as we define the the page with um with a body that you can include any kind on an any number of blocks you can add here new blocks like you can add these texts you see that here that disappear i put the test text for instance i can um click in the components here and apply the changes like clicking here you see that here the teaser is selected and i can work on the teaser changes here i can go to the page again we have the components and i can rearrange the components like look like i can move the text here i can add another block like another teaser and put i don't know here is a teaser at the bottom of the page and i can put the second teaser i can go to the feature post copy it with this button and paste it here and we are duplicating the content that we have and everything is changing here without applying the space without having to save the changes without having to publish and the content editor can see how the page will look like storyblock offers other features like workflows where you can define roles inside your uh organization and say okay this person can edit the content this person can publish the content this person can review a draft version and publish it to production so this is why you have the different ways of editing the content and seeing the changes like you you can edit it here without affecting anything i mean if i go here to uh to my application the one that is running locally you see that the changes are not there i mean the the page is is displaying the same information that uh it displayed before because all these changes weren't saved and a new version was not generated if i click on save i will see the changes here i don't want to do this because i'm using this space for other example application but if i click on save you will see that the draft the draft json that we are returning will have all the changes that i'm applying here i and if i click on publish we will see the publish json will display all the changes so you can see here that i can add components you we can define the schema here and say okay the body the page has a body i can go to the body and i can say okay the body allows com uh components sorry it's a of type blocks a list of blocks but we can say okay allow a maximum of three blocks or two blocks or just doesn't have any maximum you can add all the blocks that you need or you can allow only some components to be added like create a white list of components that say okay my page for my page i only want to um accept teasers we we can um add any other type of component than teaser or damn feature for instance in my page and we won't be able to add any teaser we won't be able to add the list or the grid of posts and etc i mean in this example in particular probably doesn't make much sense because uh sam and i are the the admins of the space and we can edit anything we can create components we can edit the page and the content we can well edit this configuration but if you are working in a bigger team or you have different roles in the team you can have i don't know the admins or the developers that are the only ones available to that have the possibility to create components or to define these details and you can have other roles like the content editors that are only allowed to add the blocks that we define in this white list or just edit the content or just create a new story or a new blog post and create the com the content for that blog post but without editing the schema of the stories the structure of our page uh without having the possibility of creating new um new components and etc so um this this is like the real the the real-time editor would like you can edit anything i can save the changes here i can go back to the net js application and show you that when you execute in production this project this get stacked static path function will be executed at build time and will generate the all the static pages for all the blog posts and all the pages that we are defining here as we are using the servlog client to get all the urls from our space we are going to generate all the pages that will confirm our website at build time and we will have static assets living in our web server and we will have a super fast and secure block platform living there and available to be visit so yeah i mean this is the dynamic route uh all the components we already saw i think that we pretty much cover all that i wanted to cover so is there any question anything as i can see in the chat looks like the real-time editor was called uh that that you think that was a cool experience uh we think that uh this is like a differentiator uh i mean there are a lot of headless cmss in the market uh the real-time visual editor of storyblog is a really cool experience not only for the developers but also for the content editors which are the ones that are going to be working a lot of hours every day creating the content and and we are trying to to offer the best experience to them so having the possibility of editing the content in the page that you are creating or the page that you are editing and being able to see that in real time uh it's really a cool experience and and all the the flexibility that it offers right i mean it we also have the possibility to create all the content here in a form view which is cool but it's better if you can see how it looks like right so i don't know some do you think that i forgot anything no no i think like you i you told us more than me maybe yeah probably if it's overwhelming yes yeah it's overwhelming uh and there are two more questions so i just you can answer them if a newbie or beginner want to try uh this out what will be the basic steps or walkthrough uh just to summarize the final thoughts so what will be our like tips yes well what i would do is depending on the technology that you use uh i would go to the technology hub that we saw before and based on that technology we have different tutorials and we have different components and libraries that you can see for these uh three frameworks net js not js and gatsby we have videos we have guides like getting started here if you go to getting starter um [Music] yes yes you can see the project that is living there with a space very similar to the one that some design and we had a code sandbox here that you can use to execute the project and see how it looks like but it's a a basic guide to start with the first steps to create a space to see how to connect it to to your application and etc if you want if you want to go a little deeper we have an xjs in five minutes guide that you can use to create probably a more complex solution and if you want to have a blog site where you can create articles and publish them and not only that but something that we don't have time to see that but you can read this guide and you can have a multi-language website where you can translate your your articles because storyblock offers you the possibility of having uh multicultural multi-language and and rationalization for the content that you create and and you can create articles and blog posts in different languages and be supported by storyblock yeah so i will recommend this is uh probably i will share that in the i don't know probably i already shared that in in the chat but storyblock.com slash technologies is the case and that is the technology hub where you can read about the technology that you want there we go and there was another question i need to build a project using means tag system maybe can you suggest some idea yes so um well the depending on what you want to use i i mean min is express angular we have also angular guides here um yeah it really depends on how you want to um the approach that you want to take to create your web application um the the benefit of store block is that as it offers a rest api not only a rest api but also a graphql api in case that you are familiar with graphql or you prefer to use graphql and the way you connect to storyblock is as you do with any other api i mean if you're using an api to connect to a database or to bring information from another service or another platform it will be the same way that you connect to storyblock um using the the api client that you want or in case that uh in case of angular for instance we also have here a guide i will show that to you correct me if if i'm wrong but if the stack that you're using is that i i assume that you're using angular we have a five minute guide here where um we have the the all the instructions that you have to follow to use the js client and start with there the packages that you need to install and etc i will share that in the chat too and yeah feel free to to ask uh to ask me to ask some uh on twitter we have a an official um twitter account of storblock uh a discord channel you can enter to this court and ask any question that you have in discord and not only storyblock team can answer but also other people that is working and probably face the same issues that you are facing um with their application so feel free to ask i mean that we are here to to answer your questions yeah in general like i would just added that basically uh this is what we choose is the next gs but you can do the next gatsby we have a lot of people using the get uh using the php or the laravel they're very happy with it and getting also this uh real-time updates so you can you can use it meet many many other stuff uh maybe two interesting points i definitely wanted to mention for hackathon is like the possibility that only we show you you can do also with management api maybe if i can do you can show where is the management api in the navigation yes uh so so basically uh you may uh automatize everything of this so you can create the components using the code you can keep them in the video repository and just like upload them so that's very very very handy if you want to build something really cool uh management not manager oh sorry sorry you can go to apis navigation or you're looking for something okay and the second thing i wanted to say is uh definitely like those apis which can be very very handy for hackathon and the second thing is uh i want to mention uh the extensibility of the story block so because like there is like uh rumors that uh headless cmss in general are like uh services and that means that they're not open source of course this means there is a reason because it's uh we couldn't deliver a lot of stuff as open source uh we are delivering at the moment but this doesn't mean that you cannot like extend it with your own functionality or with your own apps your own custom field types plugins or whatever you want to build and there is like whole uh part of the storybook documentation where you can like build something like that it can be integration with the google analytics uh with uh the e-commerce platforms with other apis so anything you would like to build maybe takundo can also open a show little the app store and uh where in documentation is the extensibility part of the plugins yeah if you go to training space this is a space that well i mean you don't see it here you're not admin here no no no no no no oh sorry yeah i was using the the wrong space but if you go to any space and you are the admin you have the apps option here and you can install some applications that uh storyblock team created but also you can create your own applications and use them i don't know in case that you use claudinary if you know clarinery you can use the assets that you are saving in coordinary inside your serve block space you can uh i don't know either release this application to program the releases and scale them you can create your own apps um you can extend all the functionality that that you that you that you have in your uh in your space creating other apps or using the ones that we offer from storyblock yeah i mean uh could you go just very quickly to storyblock.com developer guides and show the plugins where they can everybody can find the extensibility or the plugins tutorials developer guides and custom fill types slash plugin plugins yeah it's a little bit hidden yeah you're there custom field types in the middle here yeah it should work also yeah i don't know there we go was there any other questions uh i think snot i i want to share one more thing that because go ahead no i i saw that people i i don't know if you follow us on on twitter or or you are following the social networks related to storyblock but um we are releasing the b2 of our of our platform which is offering now a new user experience and user interface that you can use to to create your products and and to work with your your projects it's in a beta version but you can register to that beta and be able to test it and to play with it um if you subscribe to the beta when you have any space and you are working on there you will have this button that says try beat your beta and if you click there you will be redirected to the new ui of the visual editor which is i mean my personal opinion it looks very very cool we we have changed a lot of things on how to interact with the stories and the components you can see here that i mean we have a new user interface uh we have the possibility now of start discussion which is pretty clear like i don't know i don't like this image and i come here and i started discussion like this is it's not the image that uh this is not the image i don't know the correct image let's say and you can have different users uh adding some comments to that discussion we have here now like um a content browser that you can use to browse all the stories that we have um i don't know in a different way um if you are here you can switch from the form mode to the visual editor mode uh you can also change the the resolution of the story to to test your responsiveness in in your site like you can see if you have a table a tablet if you have a mobile phone if you are working on desktop and etc i don't know i i encourage you to to register to the storyblock beta which is storyblock.com b2 i will share this and you can register to the beta version of the b2 and play with it and we are waiting for your comments and feedback and your thoughts about it right definitely you know uh so right now while i was going through all the chats one of the best things which i also saw was uh coming from garwi it's like i think i'm gonna use this in the hackathon and that was fantastic to hear from you good good choice definitely also also like if you have any further queries around story block or anything else as well feel free feel free to drop those questions in the chat and would be more than happy to bring that up on the screen and you know bring you an answer to the scene awesome and meanwhile you know everyone was so energetic and pumped up with the things which read with the updates on story blog that the way it works and everything else all together you know so thanks a lot everyone for being super energetic and super supportive and interactive at the same time as well in the chat in the chat right now awesomeness never decreased for sure thank you very much thank you very much yeah it was very nice to be here and one more really awesome comment two hours done and still i don't feel that i started the session two hours back yeah like time went away like anything yeah any any question any comment that you have please uh feel free to to reach us uh we we are here for you looking forward to the hackathon how it uh looked like and what ideas will come come with storyblog also like that i'm really like looking forward to it yeah definitely you know when when we announced that uh storyblock is one of our title sponsors many of our you know closed haka community members went to the website and they were like super happy to check that out as well at the same time and personally i'm also looking forward to all these creative ideas which you all will come up with you know using storyblock and just in case if you have any questions or you know you get stuck somewhere after this workshop we do have a story blog booth channel in our discord as well so feel free to reach out to samuel or fakundo over there as well and ask you a question or you have any query feel free to share it over there as well and they'll be more than happy to help you out so cool i don't see any further questions as of now so maybe we could end this or if you have anything else to share that's from us thank you very much it was uh and thank you you really hold it like for two hours so that's great oh that's absolutely fine with me but thanks a lot samuel and it was you know indeed a wonderful time and uh spending this evening for us in india basically it can be different for different people out there in the chat but it was super energetic and as well as very insightful to know more about what story block is how does different things work and you know so much in store of course at the end of the day so make sure you check that out and try implementing it somewhere we do have some amazing cool you know prizes for all those winners will be participating in the story block challenge stay tuned for all of those things we are gonna announce it super soon so keep sure you may keep it keep your eye on our announcement channels and social medias at the same time but other than that thanks a lot for joining us and sharing all of those insights you can you know just have a look on the booth channel which we have created just in case if our hackers have any further queries and you can you know just take them up from there awesome cool so i do have one question from mine which i ask like every speaker but you know for example uh hacker's fault is definitely a hackathon and people will be trying to solve some problem out there build solutions around the same as well so from your experiences do you have any general suggestions or tips to our hackers which they can keep in mind while they are hacking in the duration of the hackdown i was not prepared for this question we weren't prepared so yeah the go ahead no any suggestion um no probably my my suggestion in general is to first have a clear um like a clear landscape of what you are trying to do or the problem that you are trying to solve and before going to the to the technology itself or the code itself or or the or the solution the project first have the idea in mind and undefined i mean for instance like first having a general idea in mind then going to the ground with that idea on how to implement it and when implementing that like designing it before start writing the code start working on it one of the cool for instance one one of the cool concepts that sam talked about is the atomic design please think about that because um instead of uh having code repeated in all your solution with the atomic design and defining the components that you're going to use in in your solution uh you will get i don't know uh an easier code base that would to maintain an easier work to an easier way to work um you won't have duplicated code that when you come in the future you don't know where to touch or where to to change but again i mean not not all the programming i mean when you're working on a code solution or a programming solution it's not always the 100 of the time about the code that you are writing but also the ideas that you are thinking and what you are planning ahead of that yeah i mean i would uh sum up basically don't get loose in the detail uh have a in mind like the biggie picture and uh what i mean with that is like uh we as a especially like if we are doing web for example we very often get loose in the details of uh how can i switch uh how can i move this uh one pixel to the right to the left to the right to the left to the right to the left but at the end it's uh don't change like the 99 percent of the stuff which is like if the code is working if the solution is done so like keeping in mind the big picture is very very hard uh skill and uh that's very important i think also for hackathons so keep that in mind yeah definitely wonderful you know suggestions for all of our hackers thanks a lot it will definitely add value to to their working and mindset as well at the same time and yeah thank you once again for joining us and sharing all of those things i'm super glad to have you all joining us and of course storyblock is our title sponsor so i'll see you in the discord connecting with our hackers and uh let's let's conclude this session cool see you there thank you bye awesome everyone thanks a lot for joining in i hope you had a great time of course it has been you know to us but we never realized it that it has been too long but at the end what ends well everything's well you know there's there's one saying around the same as well so thanks a lot for keeping up the energy interacting a lot in the chat and you know just answering or asking questions that was super energetic again if you haven't watched from the starting you know might have joined in the in the middle make sure you check out the recordings it will be recorded on our youtube channel will be staying forever over there don't forget to take a screenshot of samuel and under speaking and explaining things make sure you share it on social stack hack this fall tag story blog you can tag mlh as well and while sharing don't forget to share your learnings as well at the same time what were your takeaways from the stream what was what was that that thing which i have learned from this particular stream so that it can add value and you know help others out there as well at the same time i'll quickly share the feedback form link in the chat make sure you fill out that feedback form so that you can earn your certificates for this session other than that i also have a winner of swag giveaway from this particular stream let me quickly bring up the name for the winner of this stream who have won this swag giveaway and it goes to girvitz saying a huge round of applause for him thanks a lot garwith for being super interactive in the chat asking questions and answering answering them many times as well super happy to have you the part of hack this fall community until next time stay tuned for more speaker sessions we do have amazing lineup of sessions coming up make sure you check them out from our schedule page if you haven't joined our discord yet join us over there we do have amazing hdf connects every wednesday at 9pm isd which we host to connect with our community if you are a swag lover just like me grab your digital swags and earn your swags for from the hackness fall official swag page which is hackbestfall.tag swag other than that make sure to fill the feedback form that was pretty much from mind all these links are there in the description as well so feel free to check that out and i'll take a leave from here everyone stay safe and see you in our discord you

Channel: Hack This Fall

Views: 1,202

Keywords:

Id: FCxFk9WUEL4

Length: 130min 36sec (7836 seconds)

Published: Thu Sep 16 2021