E-Commerce with Next.js 15 and Stripe as the backend

are we live hello I think we are maybe hey can we see some movement in the chat hello maybe okay I think it's working I had some haded like a in another browser hello everyone welcome to to this uh uh to this live after a long time it's a different setting this time less professional I would say why would you say that I mean we are not sitting in the same room and uh yeah that's even better yeah 28 wow 30 people thank you very much for joining us so we have like uh something special I mean special something we would like to show you and then maybe we'll discuss the story uh it's somehow related the course we've been doing I think many people who join us today are coming from our next day's course uh hello so let's maybe roll the video we would like to show you and then yeah we would like to show a video first then see your reaction or something yeah let's go [Music] [Applause] [Music] okay so that's the video um and let's maybe talk about about about a little about a little bit about the story how we uh came up with this idea what it is maybe first so is the video created by AI um is it the the song is created by AI yeah the music was created by AI by soon and the video was created it's handcrafted by human yeah I spend a lot of time valuable yeah it was it was a pain because we use this new tool called D resolve I'm new to this like a supposedly it's like a very professional application right for some Hollywood it's it's an Overkill yeah it's an Overkill and Mac is not good at like doing the recording and had to use my PC for gaming and it worked and this is the result uh yeah but anyway what is that so this is a nextjs boiler boiler plate for stripe and we are building this uh like a boiler plates to use I cannot pronounce Bo boiler plate now boiler plate yeah that's because that's why we don't use this word anywhere in the description I think oh no we do maybe template yeah it's it's more like a template so the idea was that we could use stripe for everything when creating e-commerce right we we we we we noticed that stripe has everything that you almost everything that you could uh that you need to create an e-commerce site and we decided to build on top of that and this is somehow related to the course we've been doing because during the course nextjs course there was like a four five editions the the task the project that we were building building together with our uh students was to build an e-commerce project like that uh so we decided to maybe like do push this idea further and uh to like uh combine the experience we had like preparing the course and then talking with people during the course because many of our students this is kind of like interesting we super Advanced super experienced and they've been creating e-commerce websites some of them in different Technologies so through this like a combined experience and idea exchange uh we decided that maybe we could uh yeah build a bowet plate which is like fully um how to say that something which is complete something which is comprehensive something that gives you uh ready to use e-commerce template uh yeah yeah and it doesn't require I mean the the most basic version doesn't require any external tools apart from stripe so uh Mo most of you would probably use stripe anyway for payments so why not use strip for everything yeah including ex product management and everything else so so that's that's the idea yeah I think not many people know that for example it's kind of surprising that not many people know that for example you can Define products in stripe like you can you can treat stripe as your database and I think the only thing missing from stripe is maybe warehousing or like keeping stock yeah something like yeah to have it but I think that's I I think the biggest piece missing from stripe is actually the storefront that we've built yeah this is the big missing piece um so yeah that's the story of this project uh and while we were building it a lot of interesting things happened uh and we decided to not only to build something for stripe to use stripe as the back end for e-commerce which is good for especially smaller stores like a small or medium medium siiz stores but we also decided with we have to push the technology right we wanted to use the most recent things uh both in nextjs and react uh yeah Cutting Edge basically Cutting Edge stuff yeah and today we would like to talk with you about yeah talk about that what we used x 15 react 19 it's I think the timing is perfect because we've been using the uh like the alpab beta Canary versions for for months but now after the vers ship conference they there is the re candidate versions so the timing for this life is perfect to actually talk about what what we've learned and the the path that led us where we are right now so the first idea was to I think create a store or storefront which is super simple uh and simple not necessarily means easy but uh simple that for example it's easy to maintain or you know how to maintain it uh and it's also there's like not a lot of moving Parts something that uh is less complex uh and that that was the first idea and the second idea was that we wanted to uh build something that uh is fast right super fast yeah not just fast yeah yeah just not fast so the fastest in the world yeah the fastest and it's it's interesting because nextjs gives you pretty good defaults right if you create now now days next days application you can have like a very good scores uh and it's not sure I'm not sure if you not this but uh actually like next CH I haven't maybe some audience some people from the audience noticed do you like next or yeah pretty pretty much yeah I wear this every day it stinks yeah so so let's let's go maybe go back to technical stuff uh so so next gives you those uh good characteristics like a pretty great characteristics about uh performance and they are the company and then the community is working on improving that um but we wanted to like even improve on that um so as you said we started to using some Alpha stuff and we'll be talking about it today so I think the biggest like a change for me was when we started using and something we've been teaching during the course uh reactel components right like this change of like a paradigm change when you try to move the work like from the client to the to the server and you try to do as much as you can on the server and and this radically improves uh performance uh yeah especially for storefronts for e-commerce that's that's the first turn out the PHP had to tried yeah and and this this the second thing or another thing is that uh as we work on that uh we there was this thing called partial pre-rendering right and we wanted to like use something like that to because I think it's partial pre-rendering could be specifically made for e-commerce or it's it's it's like a great use case for e-commerce right like a check out so maybe we could explain a little bit about that um so I think good starting point would be this like a uh how to say study by Amazon that every um like a 100 milliseconds like reduces your sales on your e-commerce website by like a significant amount of uh it's like I don't know few few percents right uh and uh yeah I also just recently I don't have the link right now but I also had saw a more recent study actually on this and it confirms it's it's even uh that the value the difference was even higher now and it was done by a huge e-commerce company uh so I think it it's yeah so speed matters forom yeah speed matters for e-commerce uh your website needs to be fast for you to sell uh much more and uh yeah I'm just sorry for like I'm just reading the comments a lot of like a faces I know a lot of people I know is here so hello again uh yeah match Daniel Martin Damian Max p so yeah speed matters so we wanted to to like have this build something like that uh like a ballet plate another inspiration for us I think was uh this this tool which is pretty popular on Twitter right now and some people love it some people hate it and I think mati here also was mentioning that uh on our Discord uh ship fast it's like a template for nextjs with some predefined uh tooling uh but it's it's pretty General right uh what we are trying to build here is more like a e-commerce uh solution something which is more because we've been also thinking about Shopify a lot uh and we Shopify for a long time was uh first of all Shopify also experiments with a lot of things right there's this framework hydrogen uh they also wanted to use react Ser I mean they they're using react server components uh but for a long time they're the the backbone of Shopify was Liquid templated language uh and I think liquid could be kind of limiting in a way right uh so for me nextjs kind of like opens a new era for e-commerce I'm not sure if I don't want to sound like too what do you think Mi yes because question I I mean it's just gives you more flexibility uh you have access to code uh and now with like Ai and uh with all those assist assistance from Ai and uh it's much easier to work directly on code uh so we have good defaults great defaults from next and at the same time you can have like this like a framework a mental framework yeah um so let's maybe so we decided to the plan is to maybe go first of all uh to talk about what next js15 uh introduced uh and rather maybe removed or maybe what yeah maybe what was removed so let's start with that uh but before we do uh I think because we also launched this project on on product hunt so we cannot invite you to up vote us but you can just check it if it's live there I'm not sure we scheduled it it should be already live uh so yeah yeah we we encourage you to leave some feedback on the on product H if you like it uh and let's let's talk about them Tech maybe right now yeah so uh let's go maybe through uh nextjs uh blog post uh so I think could share it on screen yeah yeah as we did before during those lives let's go over together and I will quickly maybe uh go over the comments again I'm super happy that so many people I know in person join us so okay thanks miow yeah so so the biggest so I think that the most yeah yeah I think there's some delay uh react 19 right that's the that's the big Point here uh next is the first framework that integrated with react 19 if I'm not mistaken yeah uh I think well I believe I might be wrong but as far as I remember the uh nextjs was powered by react 19 uh in Canary version since MH next R 13 or maybe even before that in in the canary versions so the the big thing that's actually happening here is that they switch the that they they decided that the version is stable enough to call it release candidate so now it's RC and there is also an xjs 15 RC uh and other changes related to that but what I would like to underline in in part particular here is that uh when I'm not sure you remember when nextjs 13 was released there were a lot of comments about how it seemed that the release was rushed there were there were a lot of bugs uh they were fixed pretty quickly but still nevertheless there were lot of bugs on the day of the release and the community perceived this that that nextjs is not wasn't very stable on the day of the release and I think right now the policy has changed so now instead of releasing the next 15 and probably again finding some bugs uh the the versal team decided to release Nexus 15 re candidate yeah and if I mean it's just semantics but it's it's important so it's not technically marked as stable yet so yeah that's a great they are waiting for they waiting for react 19 to become stable as well yeah we talked a lot about that's a great remark uh we talked a lot a lot about this during the consultations with our ents uh before and regarding your point I because there was like there are two camps right people who like that because I really like this approach uh I think it's okay to release things that because it wasn't like nextjs was like super broken people will complaining more like about little stuff and usually another thing and some some missing documentation and some very small Edge pieces bugs yeah it's stuff like that but it it blows up in out of person Twitter exactly that was my second thought that you know in Twitter people who are the most vocal usually get the most attention and uh it's like polarizing and people talk about that but the other thing is that I prefer that something is released sooner than later right I prefer this approach um because it's just allows you to play with that uh sooner and this idea of having done something 80% I think for me uh I I I prefer working this way right because it you you would spend so much effort on like the remaining 20% and maybe it's just a matter of people who should like be more empathic I don't know towards releases like not to criticize that harshly but I kind of get it because if you're running an huge Enterprise where uh you would expect that a tool mark as stable is actually stable so well thankfully uh we have we can meet halfway so you get the RC version and then everyone who wants to experiment a bit uh can can go with it and uh all the other people can just stay on the on the previous one that was Mark stable I love your comment about like the semantic because really this just adding Arc changes a lot right it's like a small thing but at the same time it's uh it's not very um yeah it just it's just matter of semantics before we also it's just to be clear it's impossible to release uh software without any bugs of course yeah of course so the the feedback they get there will always be bugs and it's I think what the fren is uh like good Community from Bad Community is how fast they react uh to the to the and how do they react to the feedback they get mhm so before we we continue uh because I promised that some people could join us during the live and I have invitation link uh so if someone would like to join and talk with us live here exchange ideas and I'd be happy we' be happy to talk to you so let me know and in chat and I will send the link uh if the microphone is working camera is working as we did during the consultations uh during our course okay so that uh having said that the next interesting thing is catching right and the or the lack of D yeah something that we've been like talking a lot and something which was pretty confusing and it was confusing I think like this it was magic in a way right you had to know how it works uh and uh and now it's I think a more serer approach it's just disabled when when it worked it worked and it was great but when it didn't work it was really hard to debug and uh yeah it's I think it's a good change so so what they did basically is that uh NEX 15 comes with the Fetch cach and router cach disabled by the now so now you have to enable it explicitly in order to to get the uh per performance benefits and you definitely should you definitely should do that but maybe the the new defaults are better for newcommerce I guess there's also this discussion between like how it works in production how it works in development right and as we've been next improved vastly on that I mean now you can test cash in development which wasn't the case initially but still still there are some differences between the production build and and development build obviously yeah yeah many people who are here with us found some like very interesting edge cases for for caching specifically uh so yeah now would be maybe a good time to revisit that and then to see how it how it changed uh okay and another point is uh partial pre-rendering so we we touched on this a little bit at the beginning uh the idea is pretty simple we we are trying to make as much of the website static as possible and then just wrap let's say certain things which are which are Dynamic uh to provide like this information to the user uh about maybe the structure of the website what do you think do do I describe it well yeah it's like I was I was looking for word I think skeleton would be maybe a good but but then again skeleton is another pattern UI they use this word shell like website shell I yeah it's I think I think it's a good good word uh yeah you have a shell of of your application of your website and then as the time so basically it's been there for for some time in Canary versions you had to you had to be on Canary you couldn't be on stable and you had to enable it in next config and what it does is like you said uh if if you have a page that is mostly static but includes only some Dynamic elements then it's it's able to pre-render the whole starting thing and the dynamic elements will be streamed by HTP stream uh well dynamically on on R so what you had to do is just wrap the dynamic elements inside the suspense boundary and yeah that's it MH MH um so yeah we've been using it as as I said it's it's a change that fits pretty nicely uh in the e-commerce context uh and we haven't tested it much yet U because in in e-commerce there is like a focus on those like uh metrics right how how fast you can like display the maybe the image on the single product it's very important because that's what sells when you see the image of of a product you want to buy uh or how fast generally the website loads and uh Etc um so we have we we have it in our uh in your next store partial pring is enabled along with we haven't mentioned that because in react we we also now have react compiler and we've been working recently and it's also enabled maybe we could go back get back a little bit to react compiler because I think we skipped that part yeah um or or maybe we can finish the change of next and as well so next after uh that's the another thing new API and you said it's like resembling this like a wait until from cloud flare right oh from web apis from exactly from the web API so we can execute something uh and it's I was surprised because when I read this I I was thinking it's mostly about uh routes like API routes routes or maybe server actions server actions yeah but it can be also used in directly component server components so yeah so so so the idea is that you finish the I don't know rendering or returning the response and then the code passed to the next after is executed because uh if if you don't use the next after function or or it works the same way in every serverless environment the Lambda just be killed and there is no guarantee that your code will be executed after the response is returned so you have to use this function uh to to guarantee that the code is executed after response I have some flashback miow from from the past now when I was like starting my first one of my yeah like a first job I was a Java programmer was a long time ago it was 2000t no Java just Java it was I think 2006 or seven and there was this thing pretty popular at that time aspect oriented programming and I wonder if anyone in the chat remembers aspect oriented programming because next after is like very simplified aspect right uh H so do you remember aspect ored programming let let us know in chat okay let's continue uh so that's just a random thought uh create next app it's like a small small or or big depending like uh the boiler plate the discu is improved the design is now improved and uh yeah you've been it also has the turbo pack enabled and this is actually what we what we've also done for your next store recently we've enabled turbo pack in development mode to to enable much faster like hotter loads and much faster initial load C cold load of of your store and it actually works it works pretty well uh there are no errors uh I think it's now it passes all the tests right in I said about this so hopefully this will also become uh available for for production builds as well uh yeah so that's the list and maybe we could now go back to react compiler uh because you touch a little bit about like a band link uh and you you said something interesting to me recently about that nextjs is using like a particular way of boundling which is maybe not uh like a compatible with uh there there needs to be something I don't remember okay so yeah so maybe let's talk a little bit about react compiler what it is uh so first of all important thing to to know it's still in development and they don't encourage to use that in production right but we are using it in in our uh boiler plate and yeah it's it works well pretty much everything that we are uh talking about today is technically not ready for production because it's re candidate right so technically they are labeled as unstable so but I I wouldn't really like I wouldn't care too much because if it works then it works if it doesn't work for some reason you can just disable it with one one setting in in configuration you're reading my my mind right now but I also wanted to say that this is another discussion we had many times that you know the difference between when react 18 was released and 19 and that's certain things were marked or like ongoing but they were like pretty much done and they were working maybe on their last 20 or maybe last 10% to like refine it for some edge cases but in most situations everything was fine and I wonder because there's a lot of people again from from the course if if you guys uh and girls have the similar experience do you prefer to wait or do you uh like are you using the the most recent additions as as we do let us know yeah uh so for people living uh I don't know who are on vacation maybe for the past month or so what is re compiler so R compiler is a compiler or actually there is a huge discussion about this on Twitter right whether it's it is a compiler or what is a compiler and I mean like that I mean who cares uh so maybe what what it does it optimizes your app for you so we don't need to use use m or use callback or react memo anymore uh because it it is smart enough to know uh which functions values and components should be memorized uh like out of the box automatically almost magically I would say and the generally code output from the react compiler is not it's not very readable it's not supposed to be read there is also discussion about this that people argue that why is it so ugly because it's output from from a compiler Soh uh yeah why would you expect it to be readable but anyway uh I'm very I'm very happy that the I'm not sure if this is the best way to like fix it in general but the problems that react has but given how react works I think it this is this is amazing what what they've done is standing MH yeah I think they have like a large large code base and at Facebook at meta and they can test ideas I also agree that it's a pretty great idea and pretty well executed and I think there is a lot of work has been put into that um but maybe we could also say because what's the what's the goal why why they introduced react compiler uh the idea was to just make applications more performant right given what you said the how react works right like minimize number of renders and to do it in a way that it's you don't have to have a PhD and like a memorization or like underlying react internals or something like that because there was like a lot of interesting talks like a year ago or two year two years ago at Rea C that people were explaining how it works you know behind the scenes and you know the the mental overhead that you have to you have to apply that to your like a production code I think uh it's just ways of waste of time especially that as you say it's smart so it could be automated this is something which could be could be done by computers not people to to think every time they want to optimize something so yeah yeah pretty nice change yeah they're doing some yeah amazing stuff like the uh I said use memo use callback and react memo but they're also doing a bit more for example there is this code example that they are able to uh not this one yeah there is a code example somewhere that they are able to actually detect uh functions that are coming from outside of the component that are called inside of the component and then they can uh like hoist them outside of the component uh so yeah pretty interesting stuff there are so it could also break your code because some of the changes that they do are unsafe however there are some uh like rules that you have to follow if your code is valid semantic if you're using typescript with strict n checks and follow rules of react then you're mostly fine probably should just work out of the box uh but still uh how do you verify that there is this eslint plugin called eslint plugin react compiler that you can unable to verify your code like test your code base without having to to actually compile it or actually having run to run the the compiler and also the the other bonus of the plugin is that it shows the if you have any problems with recod with it shows them in uh in your ID in your editor so they are instantly available you don't have to wait for the build to to happen so we've enabled both of them in re in your store and everything works just fine we have pretty interesting comments uh in the chat maybe you could stop for a moment and and read them or maybe as as I said before maybe someone would like to join us live uh to talk about uh their experience with nextjs and uh so maybe as we wait for someone hopefully to join us uh maybe I will read let's maybe read this comment first it's by P and P is surprised how much uh was changed in caching uh yeah I kind of agree it's like um I said before it was kind of magic you had to know how how it works and now it's more plain or simple you just it's off right by default it's a good default and then you just see what's the maybe area of improvement and then you apply caching to that uh it's it's disabled by default but uh actually I I had this feeling I I'm always for being explicit not relying on implicit values so I always try to pass the like be extra careful and extra yeah expat and in your next store we've implemented it in a way from the very beginning in a way that we always passed the cach value explicitly so it was always defined we never relied on on the defaults and we were able to update from 14 to 15 in 30 seconds and everything just works the same way as it used to uh so yeah I highly even if it's a bit more code I highly recommend not to rely on defaults and it's not it's not about nextjs it's a ruling in general I would say uh maybe another comment by Daniel this time uh and I really like this comment because I think it's the default for me I I prefer to use or play because for me it's a joy of programming right so using bleeding edge or state-ofthe-art technology is pretty nice and especially for Green Field projects uh and if it's possible of course for a client or I don't know in a given context and I agree for legacy it's it's kind of harder and which is also nice in the context of Rea compiler right because react compiler can be applied to existing code bases and and improve them which is like kind of like applying something new to to a legacy codebase to to make it better true but then also uh yeah it's just just this I had this for that also in Legacy project you usually have this it's not really a matter of uh if it's difficult technically but in Legacy projects there are uh people are just used to doing things certain way and often it's it's more about the people than the code base mhm yeah so it's all about the attitudes really programming is social uh another comment by uh Damian uh he's talking about spelt and I agree spel was like one of the first if not the first that like introduced this idea that you can you don't need a runtime in your bundle like react or a VJs you can like compile I I don't want to dive into the semantic of the word comp compiling here but uh yeah and I wonder Swell this ahead of course but I wonder because we we've talking we've been talking a lot about like 80% like this parto principle and I think re compiler can get you much of the things like performance uh and then you maybe not because when when I was like um observing the what kind of projects are buil built with swel it's mostly something which is animation heavy something where you need really need performance and optimization uh and given how react is how popular it is right how many people use react how many people know react how many libraries are there I think it would be better to just use react and then uh for some special projects maybe you felt um but just uh yeah yeah I think it's happening a bit already because uh whenever we have a like animation heavy projects or maybe a 3D heavy project you tend to do UI in react and then take the computation heavy things out of react and do it in in plain typ script for example so this is this is how it's usually done and then I had this thought that maybe the re compiler the biggest benefit isn't actually the performance maybe it's the fact that you don't have to even think about use callback or use memo anymore so we don't have to worry about it at all you just just write any code and hope that the compiler is smart enough to optimize it there is this there's this uh theortical debate about uh I'll find it in a sec about sufficiently smart compiler I'm not sure if you heard about this something smart compiler it's it's been ongoing for years so uh yeah I understand why people might not agree about about this topic uh so yeah what we wait I I I kind of agree with Damian here uh but I think it the speed maybe I will show this comment uh I think it's just a matter of how much performance you need right because if something is like if you're building like a regular app let's say I don't want to say like a crude but let's say like a regular application maybe you don't need that performance right or or maybe but this is not to say that react is is slow but if it's if it gets faster with re compiler well it's it's more practical right yeah it's it's great if it gets faster but uh if you were for example to optimize your application manually then you would first measure and focus on the areas that are that are actually slow so in case of front applications it usually will be HTTP requests and not not the front end code why I mean yeah yeah there is like a principle of programming like a kind of like u meme uh but I I'm not sure if I remember it correctly like first make make it work then make it fast and then make it uh beautiful or something like that don't site me on that but yeah and I agree with that I think it's the rules of code cut that first you need to make it just work and then make it fast yeah uh in that order uh okay I I just pasted what you uh meow yeah it's a it's very article like philosophical article so I I recommend it to everyone to to read it in your spare time not right now but yeah the future looks interesting for react I think uh and for spel and forther uh there's also this thing it's another topic but they're working on adding signals to the browser maybe in the future which which would which will also uh yeah I I was about to talk a bit about this because the the approach taken by spel and now by re compiler it's it's different from the uh angular view approach with signals so it's it's interesting we have this uh I had I I was s the impression that all Frameworks kind of went in the same direction for some time and now they are diverging again yeah interesting to see but I would say at the same time there are clusters because before you had like each framework was different and now you have like those groups of Frameworks which are similar one described right like signal oriented or like react is kind of its own category uh and yeah we'll see how it goes in the future so maybe um is anyone would like to join us for a discussion live there are also a few other minor changes in nextjs but maybe we can if no one wants to join we can just go through them really quickly yeah yeah let's let's do that small improvements that that help with developer experience like at T like uh hydration error improvements so previously when you had a hydration error you had to pretty much manually find what the problem is and right now you get this uh you get this beautiful diff where you can see exactly what was R on the server what under on the client and on those rare occasions when you when you have a a hydration problem you can actually pinpoint it pretty pretty easily now I have a feeling it's it's just uh intuition based I have a feeling that the development experience for nextjs in react will soon get much better uh do you remember that we found we've been using this Canary version of next and you asked me to log something and I accidentally looked into the console lock but it was on the server and was displayed in the in the browser yeah we were surprised by that yeah this kind of I'm not sure if I'm not sure if it if this was matched to this stable version or not I mean the RC version I haven't checked but uh I saw tweet from GMO later when he suggested that they are streaming the server logs uh to the to the client on during development which is pretty cool yeah this is pretty cool and it just gives you this like a more insight of like visibility into what happens you don't have to but at the same time it's very important to have this distinction what happens on the client what happens the server uh yep next after yeah we we talked about that um there's another interesting question here I will put it on the screen uh p is asking like performance about web assembly uh I think yeah definitely uh I I think there is this I think there's a lot of potential in web assembly uh there is this thing called wasmer uh and they recently introduced this like a edge platform wasmer Edge uh right it was like two years ago wasn't it was it no no no was wasm yeah but recently they introduced uh yeah but I I I think that that could be the future especially that many people are not everyone is using JavaScript and the ability to like have this like a common layer could be interesting um so I haven't been tracking this recently uh but uh yeah I think yeah I'm very optimistic about about web assembly yeah I'm I'm not not at all you you okay I think it's a it's a dead end okay we'll see we'll see uh I also wanted to mention just maybe one last thing during about nextjs that I'm one of the contributors to this release I see you're laughing yeah I'm here congrats I had one very small PR for a small bu mat so pretty cool so was it was it difficult to have it merged or like for others to it was difficult it was easy to fix and hard to have it merged Yeah we actually had to I had to Pink the JJ on our slack Channel because we have like select all to merge it okay yeah but I think it's it's relatively like there's a lot of people contributing so like anyone who's like thinking about cont it should be Rel I'm not sure if they have this like approach where they Mark I think they have like issues that are like easy to get start with if you are new to the code base right like beginner I think so yeah so that's a good a way to okay so let's maybe now as we talked about all those changes let's let's see how we applied them uh how we use them when building uh this this project we we've built your next door um maybe we could like share some screen and and show how it's um how it behaves what do you think uh of course just one last comment before we do that uh someone was asking if they gave me the the cup and shirt because of the pier uh there's actually a funny story behind the the shirt and the cup and the the box that's actually behind me right there uh but it was illegal to obtain it so I won't talk about it but we also had an interesting story because we had the chance to visit versal headquarters right um California yeah and it was super like energetic uh it was like a very inspiring in a way uh spending whole day with with kmo and other other guys J Palmer uh Malta uh CN and you know be able to to work on on your product is just yeah hard to express so yeah let's let's maybe show uh should I show it or would you would you do it I can you can do it okay what should they show it the demo yeah so this could be interesting for all the people that were building uh storefront with us for over for the last two years I think uh so yeah as I said before we had this like exercise project final project during our course next year's course that we asked people to build an e-commerce website um and many people like pushed this really really far like adding a lot of things and the Stag was nextjs graphql uh it was most mostly about how you can okay maybe let's talk about this project yeah yeah yeah I'm just I'm just giving giving some some context so yeah the other project was more about learning about technology and here we want to solve a particular need so creat create something which is simple to use uh so yeah maybe we could click around uh and see how it behaves is it fast or is it slow I don't know is it I can click on it's it's pretty fast yeah okay it's fast we also had this like uh transitions uh yeah transitions are hard to get right we actually we actually had to disable transitions at some point because the it was actually recommended To Us by versel to to disable them for now until they fixed uh until the library is fixed uh the problem was and it's it's not just next it's actually the problem with I think every uh front and framework they link to thec Commendation from other Frameworks as well uh the problem is with the view transitions when you use the view transitions there's a problem with scroll restoration so when you transition between two pages it's very hard to get the scroll restoration right so that's why we've we've disabled it could you could you search for something for what like a bug like a bug yeah it's super fast uh so and yeah the idea was to like have this real time experience when when searching for Stuff uh here we are using orama uh but we are also considering because I'm a big fan of type sense we are also considering adding other things uh specifically typ sense in the future and typ Sama are are the simplest and best to to integrate with if you want to use it like an external provider it's also uh yeah very very fast uh it's way better than anything else and definitely way better than youting search by your on your own before we maybe continue uhas is asking about view transition is API and yeah that's the that's the I was describing before exactly yeah transition API problem with scroll restoration could you could you go back because there is this thing that we've been also like spending a lot of time uh I mean all of time like this uh intercepting routes and Par parallel routes the uh with that transition as well right it was kind of tricky because some next J's version had it it was one of the canaries had a problem with it yeah and uh then what we are working right now is we've also integrated with for example uh strip link so it's actually really easy to uh to share your data between different shops that's that's interesting I never uh it Link Link Link links between different Shops and and shares the data uh there is the question from Max are you using yeah local storage to persist users card selection no users card selection is persisted on in well well the idea of the card is persistent in the cookie but the whole card is actually persistent in stripe so uh it's definitely good for consistency but we are considering changing it a a little bit to optimize to maybe cash like you said like you said just in Lo of St or something we'll see about that for now it's like more practical but there's another topic around that like the abandoned card right if you have it yeah exactly right now we are able to track abandon cards so we could track it and maybe could be useful for some people to because usually I do it admit I'm adding something to cart just to bookmark it in a way right no I just thinking about what I want to buy and add think and then I forgot forget um interesting thing is that we spend some time about like working on the shipping right because it's interesting shipping could be related to the location yeah so so right now we are just shipping cres we just released actually this was just released like an hour ago right nowat right it's it's like a flat or predefined maybe that could be good word but ideally we want have it like um you know if it's I don't know far from like a dispatching Center something basically should depend on the location exactly it should depend on location now it's it's it's not uh but the nice thing as you said is about stripe link it's it's super easy you can just enter your email I'm not sure about the phone because why it's not remembering the phone number kind of yeah that's also I wonder I don't know but anyway if if it's if ideally it should be just two clicks to make a purchase right to just click on the card add something to a card and then uh you enter your email and then uh you can yeah you can buy you compare uh we also have we've implemented categories which is sounds pretty uh what we've also done uh was Implement variants of products yeah so sorry for yeah just wanted to say that uh it's all based of the meta data and stripe right it's like the we are abusing a little bit the the metadata in stripe to make it work especially for for variants so there's a question yeah is it possible to link shipping with a location and the size of the product uh at at the moment stripe doesn't have this kind of functionality uh so where we've implemented what stripe allows so it's flat shipping rates but we are trying to do some discovery on how to implement what we are asking because it's it's basic stuff uh but without the need to rely on another provider or without the need to have a separate database for example we want to stick to just using strip for everything so we don't have to have like 10 10 different accounts or yeah stuff like that so so we want to keep it simple but also comprehensive so if if you you have any suggestions by the way then please I don't know call me or something uh yeah so that that's that and maybe uh we could do you want to show the admin panel as well you know there's this one thing small thing that we are working on but it's not actually released so I would have to run it on locally so no okay so we we we are also working on like a admin panel because right now as we've been describing like the variants and the categories everything is like kind of done in a way that it Mass fits into this like a key value um uh approach right everything that's POS in stri you can only Define key and value and we are trying to use that to to build all those abstractions like how to define variant uh how to uh categories are easy right but variance could be a little bit more yeah so Marin is asking if we can use stripe metadata to contain information about variation and size stuff like that so actually uh we wanted to so our approach I think is this we want to keep it as simple as possible and then give it two people for people to test and then uh based on that feedback we'll uh will'll be implementing uh yeah more but it's yeah it's definitely possible and then we could link it with using some rules we'll see about that with the shipping rates so there is another interesting question uh from Ray uh so yeah we are doing it already uh so you can Define more images and this is not possible in stripe uh the dashboard but it's possible for yeah it's possible for the stripe API and uh so we will maybe ra send you like instructions how to do it it's already implemented and in our admin panel we can like upload several images and they will be added to a single to a specific product and everything works pretty nice so it's funny yeah that stripe allows you to do that through the API but not through the through the dashboard kind of kind of interesting I think I might be able to show okay so maybe we will show you yeah we've been spending a lot of time on this admin panel uh and yeah the the interesting yeah what you showed is is also like kind of because there is like this o flow with the stripe connect and we need to figure it out how to do it properly uh but once you are logged in and have the so here's like kind of dummy data we are still working on that part uh some of it is actually live some of it is still dummy yeah but uh obviously this is all demo demo data it's not uh we didn't have the half a million Revenue this month we had more uh maybe we could show first exactly I wanted to show so so we're building this as well it's a thin layer above stripe we uh we we wanted to keep it as simple as possible but because of some stripe shortcomings like the images that you said we've decided to build this like a short compatibility layer above it so in our compatibility layer it's possible to edit the the fields that are important for the starfront so the other fields are hidden and you can actually upload more than one image uh because stripe like like KU said stripe API allows for that I can upload multiple images and I have multiple images right here uh not just one could we apply yeah could we try to upload something I don't know do you have some good images yeah this one's good it's it's like six six megabytes but yeah oh maybe something smaller yeah anyone I don't know any image let's let's upload my face okay yeah so we can upload many images and then we still need to work on the presentation right I I think it's pretty good because we are using already because we're using shot CN but definitely some of the ux needs to be this is why we are not releasing this just yet so we working on that yeah we need to we need to improve a few things but yeah I think the future is bright I mean it will be there is also the the variance support very basic for now but uh definitely easier than editing metadata manually stripe so we can just switch between tabs and the different variants and we'll be adding well more features to it but uh we want to keep it as simple as possible the only the only back end that you will need is is stripe for now so that's the that's yeah stripe or uh in the future some warehousing right or like stock management uh because stripe maybe in the in the meantime stripe will integrate with something like that but yeah because managing it through the metadata could be also like a difficult painful painful yeah yeah so that's pretty much it uh do we have something on our plan don't forget to don't forget to leave some comments or up with us on the pro pro hunt just search for your next store on product hunt and please it's one click away from making us very happy and getting some traction but the general idea is that we are working like few people already like trusted us uh for example Ray and bought this uh template from us and this allows us to like focus on this so thank you for the trust uh and it's also like uh work in progress uh we just want to but also it's great because your feedback actually influence what we are are working next so we had someone mentioned in the chat today about the shipping location size and I'm I'm thinking about this right now how can we do that how how to keep it simple so so we are actually influencing our decisions and how the product will uh shape yeah it's pretty hot uh today in in Poland in uh I I feel like I'm shining uh I just wanted to add that we also had uh we also have like the first agency client uh an agency bought that and they started selling tickets for example using this template which is kind of interesting uh and they they are planning to like and we got ton of feedback from them which is for which we are very thankful and one of the person that works at this agency uh would like to contribute po request so if someone is yeah if we are open to that yeah maybe maybe she's listening to us actually today watching us let's say let's say hello okay so I think that's that's all we had for you today um there's one more question from CH uh what about some reach text description so actually I think it's not documented but we've implemented markdown for for for now you can use markdown in product descriptions and it will render uh like in reach text M but we'll and we I think we'll leave it at that for a long time I mean implementing some wizy week editor is not fun and I would hate to do it yeah we we think about it I think the the notion style would be nice uh regarding the markdown Al interesting to just reduce the number of things you can do right for example Maybe not every heading be possible I don't know it's It's Tricky right because you're just editing the text uh for for description um Daman is asking what package editor you use for markdown so we are using uh markdown remote right yeah next MDX so it's like uh and they just they have the react server components uh next ndx remote SL react server components uh like import so that that works on the server side right saying that we should keep up the great work and he loves seeing updates thank you very much cool thank you uh J is asking uh yeah so intercepted droughts were a tiny challenge because uh the behavior of nextjs changed between Canary versions and we had we had some like uh uh problems because we when we develop it we usually are using Canary right we want to stay as close to the development of nextjs to like benefit from all those interesting changes especially for performance and and other stuff and we have the uh well we are in in touch with first cell and we want to work closely with them to make this us as good of a product as possible so uh this is why we can yeah we can we can be on the canary version only release when we are ready uh from time to time and things are good so the second question from it's about the like which new feature obstacles obstacles features and yeah features of next Rea yeah so obstacles I think we we slightly like I mean we covered that uh another obstacle was like this what you described at the beginning The View transition API which is uh so next J needs some time to figure it out I think and we will like when when they have we will apply that and regarding the features what's your like uh the most helpful one I would say partial pre-rendering MH for for me it's it's maybe not not the most recent one but react components and the fact that and it's kind of connected to what you were saying in a way that I love that we can push so much things on the server and keep the client as as simple and as as yeah as Tiny as possible so those two uh I'm looking forward to react compiler we just play with it a little bit um I'm not sure if it will be that useful for us right because we anyway we most of the things just just for the check out maybe yeah just for the check out or other stuff um yeah and we because when when we wrote the description we are kind of influenced by Shopify and I was like uh talking about the liquid templating and here we want to create something which is as easy maybe as liquid but at the same time if you have time and and and knowledge uh given the re reactjs flexibility you can do whatever you want with this create any store you want without much uh constraints yep I see that Marin is describing Q use case for the uh shipping meals which is which is great uhh I'll definitely take that down and yeah it will have influence on how we design this yeah this one right yeah yeah it's interesting pretty interesting about the size of the package and all that um yeah so I think some interesting changes will be relas soon especially admin panel and uh yeah that would be all I think yeah another point is as you mentioned that deployment uh we haven't really focused on that yet uh in the docs it's pretty easy to deploy on Versa right now uh but it's like the same for cloudware I think using the nexton pages so as long as uh so I mean it's pretty easy to deploy this s um it's one click deployment with personel and we are we'll be adding guides for other hosting providers as well yeah so thank you very much uh everyone thank you for coming maybe next time someone will join us live and and talk with us uh we'll see once again thank you uh if you have a sper please vote us on on prod account and uh yeah thanks for the day thanks miow yeah thank you bye bye bye

We'd like to invite you to the big launch of Your Next Store next Tuesday, May 28th, at 17:00 CEST / 8:00 AM PDT. It will be a one-hour live session where we'll show you what we've built and how we did it. We'll also answer your questions. ​If you want to support us or chat about building the fastest and the most compelling storefront with Next.js using the latest methods (Next.js 15 🔥), we'd love you to join! ​Anyone who wants to ask questions or discuss can join us live. See you there!