April 1, 2025 • 60 mins
MongoDB staff developer advocate Jesse Hall teams up with Storecraft creator Tomer Shalev to dissect how this open-source commerce platform leverages MongoDB for scalable, AI-driven workflows. Watch them live-code integrations (vector search, dynamic pricing, email automation) and explore real-world use cases—from custom discount logic to OpenAI-powered product recommendations.
Perfect for developers building modular, future-proof commerce solutions.
Mark as Played
Transcript
Episode Transcript
Available transcripts are automatically generated. Complete accuracy is not guaranteed.
(00:00):
Welcome to the Mongo DBTV Podcast live.
We are back here again. I'm your host today, Jesse Hall.
I'm the staff developer advocatehere at Mongo DB.
Today we have a special guest. We're going to explore a really
a creative next generation commerce as code and this
platform is called Store Craft. So without further ado, I'd like
(00:23):
to welcome on our guest Tomera. How are you?
Welcome. Thank you for coming on to the
show. Hi, Jesse, thank you for having
me. I'm excited to be here.
I'm so happy and I would love toshare about Storecraft.
My background is I'm a software engineer.
I've been creating codes and writing codes since I was a
little kid. I have a lot of experience with
(00:44):
C++ and the computer graphics, but also Android, the
development, you know, apps engineering.
And in the last few years I've been doing mainly deep learning
engineering, web development is,is one of my, it's, it's my
passion. I'm eager to show you
(01:04):
Storecraft. Yeah, what you created, that's
amazing audience, let us know what are you excited about
today? And then what we're going to
talk about here is this really neat thing here called
Storecraft. I really love the aesthetics of
this of this landing page here. It's it's amazing.
And so talk to us about store craft.
What high level? What is it?
Store Craft is OK. It's it's a it's a JavaScript
(01:28):
framework to create commerce backends.
Commerce backends. It's like ACMSA content
management system where you can upload products, connect them
into collections, define discounts and create a check out
experience. In addition to that it ships
with dashboard and you can program everything about it.
(01:50):
Most commerce systems as we knowtoday like Shopify and Woo
Commerce which is a PHP based system which they are amazing
but they are more configuration based.
Storecraft takes a different approach on that everything is
called where you commit to GitHub and hopefully CI or CD
(02:14):
process pushes your code, deploys your code into the
cloud. So if you need a new change in
your store, you can just open the ID, write some code, some
scripts, you know, hopefully it won't be a lot and it will be
live. So store Craft can run
(02:37):
everywhere. It can run on any JavaScript
runtime. You can essentially put Store
Craft inside the browser. You can run it, you can run it
inside the browser even it is agnostic to the platform it has.
Every platform that can use Storecraft you have to implement
some sort of an adapter the way that others other frameworks are
(03:00):
doing such as Svelte and the Remix for example.
You can connect your own I wouldsay platform.
In addition to that Storecraft can connect to most storage
devices to store images and medias from your online store
and also databases and the main one is Mongo DB but you can
(03:22):
connect any SQL type of databaseeven cloud ones.
Nice. So I see, you know, get started
NPX Storecraft create. It's that easy, right?
Yeah. That's awesome.
It's that easy. So I I would like to to say a
few words on why I created Storecoughed.
(03:43):
Yeah, yeah. I would love to know how, how,
how did this come about? Like how did you even come up
with the idea? So about two years ago, my son,
which he loves retro games, you know, he trades video games,
like really old video games, like 20 years ago type of games.
And he built a community around this hobby and the community
(04:08):
like exploded with many participants and he was selling
video games, trading video gamesand buying video games.
And then when they approached him and said that you're a
software engineer, let's create an online store.
So of course I told him go to use Shopify and other pre made
solutions but he decided that hewanted something that was more
(04:33):
cost effective for his needs. So so me, I love React, I love
JavaScript and I decided I decided to take the challenge.
But this is how Stoke of the came about.
And so, so your son, he's selling these games and his
(04:54):
website is built on this technology that you created.
So what? That's amazing.
That's amazing story of how it came about.
But then how did you go from, OK, just creating this this code
for your son, for his website and but, and then turning that
into what it is today into something that anyone can use?
Yeah, good question. OK.
(05:16):
For me, I think it has. I think it's because who I am as
a software engineer. When I write software, I'm I
love to build a lot of librariesaround it.
I'm more into it to build a technology and a technology that
is reusable and can bring value to other users.
It's my passion. I do open source for more than
(05:39):
10 years. So when I started writing this
online store of his I, I, I thought to myself, what if I can
connect to anything I want? If I can optimise the platform
or optimise the database type that fits to my use case.
You know, no two stores are alike.
(05:59):
You know, if you have a very simple store, then you can use
simple solutions. If you have a more demanding
store that requires a performance, a performance
database, then I want to be ableto hook into this database.
In all other solutions that I'veseen, they only offer just one
database, 1 storage or one platform to run on.
(06:22):
So I decided to, to hack it awayto start building upon it.
And fortunately it was, it made sense to me and and it worked.
I mean, it worked because I actually have friends and other
people around the world that areusing it to create crazy things
(06:42):
with it. Even, you know, and ecommerce
stores. It doesn't have to be a website
based, you know, it can be a boton on on Telegram or WhatsApp
and it can be a mobile experience.
You know, it doesn't have to be like a complete web store.
So the use cases are diverse. That's interesting.
(07:05):
That's very interesting. So let me ask you quickly then,
how much does it cost to use Storecraft?
OK. So it, it depends, it depends on
on how you optimise it. So for example, if you can get a
good deal, for example on Atlas,you know, and you can connect
storage device like an S3 compatible with Cloudflare, then
(07:28):
you reach like really low cost, you know, low cost, lower than
what you would get with Shopify.And my friend's store, it cost
him like nothing. You know, a lot of the online
databases, they offer a free tier.
And if your store is like occasionally used, you can
actually practically run it likefor like $5.00 a month.
(07:53):
Wow, nice. Super cool.
But that's, that's that is amazing.
But to be clear, you're not charging for the use of
Storecraft yourself. This project is actually open
source, right? Yeah, it's an open source.
You can self host it however youwant.
You can put all of this inside aCloudflare worker or on a server
(08:15):
less on at Versal. By the way, connectors will
appear in the following weeks, Imean integrations with Versales.
Or you can, you know, spin an EC2 server and let it run 24/7,
connect it to Mongo DB for example.
These cases are diverse and. Yes, nice, nice.
(08:39):
That's that's really amazing. At Mongo DB.
We love to support open source projects and this is amazing
one. We talked about the, you know,
run it anywhere that you have different storage options and
different database options. Let's talk about why.
Why did you choose to use Mongo DB in in this as an option?
(09:01):
OK, so my Sunstorm, it runs on MongoDB.
I'm a huge fan of MongoDB. And not just me, most of my
friends are. And it's the easiest to get
started with, especially for JavaScript developers, You know,
it actually complements the development experience.
(09:22):
And what I found out is that I can go into Atlas, you know,
start my database and just get this URL from the database and
just plug it in into the MongoDBdriver.
You know, it was super fast. There's a lot of ecosystem and
developer tools around it, everything.
If you need an ORM, you can use something like Mongoose.
You know, for me I'm just using the regular driver, which for me
(09:47):
it's the best solution. So I think that I trust Mongo
DB. That's why I started with Mongo
DB and most of the development of Storecraft was with Mongo DB.
Nice, nice. That's amazing.
Let's go ahead and let's let's, let's see some action.
(10:08):
Let's let's look at a quick demoand see how to actually get this
up and running. And I think you've got some some
cool stuff lined up for us in this demo as well.
Yeah, when you're ready to shareyour screen and let's let's get
into some code. Yeah, definitely.
So I will tell the viewers that we have set up some cool stuff
(10:31):
for them. Nice.
Yeah. So I will show Store Croft just
how to use it, you know, the theback end, the dashboard and
everything. And then in the end, hopefully
we'll have time, I will show youan extension of written that
uses vector search AI capabilities with Store Croft.
See, we haven't talked about that yet that this is a brand
new thing to store craft, right?Yeah, yeah.
(10:53):
Yeah, that's another amazing thing about open source is it's,
it's constantly being, you know,worked on.
If, if, if anyone wants to, to help Tamara out, I'm sure he
would welcome some PRS or some suggestions as well, right?
That's how the open source community works.
But it's amazing seeing these projects continue to evolve.
Definitely I'm looking for contributors.
(11:14):
There is a big road map and a lot of things related to AI and
many cool things are coming. So I'm at the terminal and I all
I have to do is use the NPX stalk of create command.
So I run it. As soon as I do that, you know,
there is some sort of some sort of a wizard that asked me a few
(11:37):
questions to help me scaffold stalk of application.
So let's see. OK, so admin emails super
important. I'll put my own e-mail, a port
e-mail, which is very important if you want to send
transactional emails or the platform to run the storm.
(12:00):
You have Node, Bantino, Clufflerworkers, AWS Lambda even and
Google Functions. I will go for Node because I'm
running locally and now you can select the database.
What we're going to do is use the MongoDB database.
Now for the connection URL, whatyou normally do, you just go
(12:22):
into MongoDB Atlas just the second.
I have it here OK and. So you're watching another
video? Yes.
And what? Should I recognize that one?
You just go to the connect button.
I will not show my own URL because of privacy issues.
(12:43):
But from there you'll get URL and you can use it.
For now I will not put my own myown key, but I will show you in
a minute. The database name that I'm going
to use is called test. Now I will select A storage
device for Storecraft. I will go with the Node GS local
(13:03):
storage. OK, Now for the e-mail provider,
I will go with recent. Again, I will not share my API
key. And now you can select a payment
provider. It can be Stripe or PayPal.
Honestly, we will not go into, we will not go into payment
providers right now. So I'll just go ahead.
(13:25):
And once we did that, it will actually install all of the
packages. It will scaffold skeleton for
your project. And now let's see.
OK, so now we will go into the the the folder and what we need
(13:48):
to do right now is. That There you go.
Yeah. OK, no.
You're good. Is to run NPM run migrate.
For me the database was already migrated OK, but I will run it.
But before I run it, I will do something.
I will show you the what was created.
(14:10):
OK, So what stalk of did is to create a single file, I mean a
bunch of files and one of them is the app JS file.
You can see the directory structure.
This is this on the left. OK, now if I see what's
happening here, we have the stalk of app.
(14:31):
There are some secret access tokens.
They're not relevant. You can put them inside an
environment file just for the demoing.
They will be. For the sake of the demo, they
will be here. But once they are created, you
know, just save them somewhere safe.
OK, so. So this is specific to to the
(14:51):
the back end environment of Storecraft.
Yeah, the secret, the secret access token and refresh token
secrets are used to for authentication and
authorizations. Gotcha.
You don't have to use them, you can plug your own if you want.
So if you try, if the audience tries to use them, they can't
because they're not. They're on your local computer.
(15:12):
Exactly. OK.
So from here, so once we have the instance of the app and a
batch of configuration, by the way, there's there are many more
configurations that you can configure.
You also can configure the course options if you want and
many other things. For example if you have CDN that
(15:33):
is connected to your S3 bucket, you can demand to rewrite the
URLs when the return from the back end in the product media.
OK, so once we go a little bit down, we see the platform, we
see the database. Now the database, we have the
URL here, but the store crafts connector for Mongo DB, it can
(15:58):
actually infer the mongo DBURL from the environment file.
Yeah, yeah. And besides that if you need to
customize things, you have the options, the Mongo client
options. So if you need things that more
things for authentication and whatnot, you can use that as
(16:19):
well. The thing about stalker that it
is highly non opinionated, you know?
So another thing here we have the resend.
Resend is an e-mail provider. I will use the recent key that
I've already have in my environment file, OK with
(16:42):
payment gateways. So here you have a handle and
the payment gateway itself. Maybe you know what there is
also we have a concept of dummy payment gateway.
I I I will import it, you know, OK, let's.
Oh. For testing that, that's
amazing. Yeah, definitely.
It's for testing. So we have payments and then we
(17:04):
have dummy. OK, let's see.
Yeah, there it is, dummy payments.
So here with the payment gateways, it's actually it's
essentially an object that I cando something like this.
You know what, I will give it a key.
(17:25):
Now the keys are important because with the keys you can
the API, the REST API is using the key.
So for example, if you want to create a check out using one of
the payment gateways, you have to remember these handles which
are the keys. OK, OK, OK, so we also have a
(17:50):
bunch of extensions. The Postman extension is a cool
extension. And by the way, Next up we're
going to build an extension. So I will show what extension
means, I mean what build one. But the Postman extension is
just a simple extension that listens to events of store Koft.
So it listens for example when checkout is complete and once it
(18:12):
is complete it, it fetches an e-mail template from the back
end and put the information of the customer and then send him a
transactional e-mail using the using the Mailer that we've seen
here for example recent. So yeah, so when you said
Postman, I was thinking of Postman the the the testing
(18:36):
client. Yeah, yeah, definitely.
Maybe it's not a good name. OK, it's OK.
It's good to clarify that though.
Yeah. So by the way, if if we if we'll
go back here. So if you need to to customize
anything that is related to events in stock of all you have
(19:00):
to do is to keep this and and then you have and you have a
listing again. So for example, if you want to
send an e-mail when a change password request, you know you
can do that. So by the way, the Postman
extension does that as well. But let's look at it, let's do
(19:25):
something like this. This would be an event.
OK, now every event object you can, you can stop the
propagation which means you can steal the event handling from
for example other extensions, which is super nice And then you
have the event payload. And in this example, the event
(19:46):
payload is something that is called an oath user type, which
is essential for creating to responding to this event.
Anyway, let's. Lots of lots of customizability,
yes, if that's a word. So before we start everything, I
(20:08):
want to show you how the index files look like.
OK, so Storecraft, once we injected it with the node
platform, it has something that is called a handler.
Now the handler translate incoming messages from from
nodes incoming message. I mean it's the HTTP driver of a
node. It translates into a web
(20:31):
standard request, OK. And then it sends it to a
virtual REST API controller which only knows about web
request and web response. And then the web response
returns and then it streams it back into the server response of
node. So let's say OK, so let's let's
(20:54):
do it. So I run the migrate script.
OK, essentially it's a success because I've already migrated
migrating a MongoDB. Migrating MongoDB essentially
means succeeding some templates and also creating indexes for
MongoDB. Oh wow, so so can so can.
(21:16):
Are you able to show in Atlas like what that did?
Yeah, definitely, definitely. Because I'm curious, I want to,
I want to like really understand.
So it's it's added some data to your database.
Yes. So.
If we look at the test, what it did was essentially if I go for
example to the templates, it stated the database with
(21:41):
templates, Yeah. And also it created indexes for
almost everything. For example, I'll show you here.
If I go to products and then insert into, enter into indexes
(22:02):
then yeah it seems to be loadingmaybe?
It's the, it's just the joys of of live coding.
I mean, when you're trying to doa demo, nothing ever works
exactly how it should. That's OK, but that that's
really interesting. So that migrate added some data
to your database, some templatesand some some other things and
(22:23):
then it's created those indexes automatically for you.
So that's that's that's a quick,quick and easy way to get that
set up and and going. And if you need more indexes
issues, you can just go into your Atlas and do whatever.
You need something specific, yeah.
So let's see. OK, cool.
(22:46):
So. Here we go.
If you're if you're going into indexes, hopefully it will load.
It might still actually because you just ran that.
So it actually might be creatingthose indexes still because
those tend to take a should justbe a few seconds, but they I
don't know how many indexes it'screating, so it could take a
little bit of time there. Yeah, definitely.
(23:08):
Definitely. But that's that's cool.
We can continue with the demo. I'm sure those are going to pop
up here in a minute. But it's very great to
understand that might what that what exactly that migrate
command did. Yeah.
Because it is important and in in store Craft I implement a
very robust query language like a boolean query language where
(23:32):
you can search for something that has this property or this
property but not this property. It also has a cursor which
requires indexes. Anyway, let's start it, let's
go. So once we hit NPM start, OK, we
see this screen. Now this screen will give you
(23:53):
all the information about the requests, date requests.
And I'll show you in a second. One thing to note is that we
have an API reference which is being maintained by me and I use
the greatest colour.com project is a super cool.
It's like it's like Postman essentially.
(24:17):
So you can use it to actually test requests and see what's
going on. And we will probably get back to
this once we do the extensions, but let's see, let's go to
products. Let's see if we have listing
(24:38):
filter product items. OK, so you can do something like
this. OK, now you can see the products
that have returned. Nice.
Yeah. I've never used.
I've never seen this this this before.
(24:58):
This is a pretty cool product. Or what is this?
Is this a package? A JavaScript package I'm
assuming. Well, it's actually quite
amazing. What you do is that you write an
open API file which lists all ofyour backends functionality with
examples and everything and endpoint.
And then I use a tool actually they, they read this open API
(25:21):
file and and they inject it intotheir application.
It's it's an application, it's aweb application.
And then see everything. It's super cool.
I can serve it from the back enditself and it's, it helps me a
lot. Now if you see it's Talker by
the way, you can see what's going on under the hood.
(25:44):
You'll see the the HTTP method, the path and the amount of time
it took. And if you have queries, you'll
see them too. So now I'm going to the
dashboard. OK, OK, so let me just, OK, so
(26:04):
the first time that you're connecting to Storecraft with
the authentic, the admin emails that you specified, the first
password is admin. So you can change it later
through the through the through the dashboard, through the
second page. OK, OK.
And then on here, if you could maybe just do command plus one,
(26:26):
one time, maybe, maybe now 2, Yeah, that's a little bit
better. Yeah, maybe one more.
Actually actually stock of dashboard is mobile friendly.
Oh, good. Nice, nice.
You see, everything falls falls into place.
Nice, nice. OK.
(26:47):
OK, so. Really good.
But I can do you see this sidebar, I can close and open
it. So if you're going to products,
for example, you know what, let's create a product.
Let's create like a simple, simple product.
So we'll give it a title. Let's say we want to have like 2
(27:11):
products related to Nintendo. I love Nintendo.
The first one will be a NintendoSwitch which is console a home
console for playing games. Now the handle handle is like an
ID handles should be unique. I can also suggest it from the
(27:32):
title. Now I'll give it a description.
Actually have a made-up description for this.
I have content marked on file that I've created just you're.
Prepared. Yeah, actually it's important
for me because it's for the the semantic search.
(27:54):
I want it to be rich. Gotcha.
So you put it here, you have rich editor now media.
Media is super cool. What we do is that I have an
image here which I can drag and drop OK.
(28:15):
Nice. And you actually have a very
nice editor. You can crop, you can scale up,
scale down and translate. And you can also decide on the
format and the quality. I will go like this.
I will put this OK. And the next thing I'll give you
(28:38):
the price of 100, although I wish it was the price.
That's pretty cheap. Let's say we have two of them.
I'll show you something cool. So, so once we create the
product, we see the eligible discounts that this product is
(28:58):
eligible for. But The thing is that is more
important for me. Storecraft is a developer first
framework. So you also always have the
Jason, you know upfront in the cards, you can see the discounts
and everything and what you should expect from it.
(29:19):
You can also things like relatedproducts and tags which are
super important for querying andfiltering.
And you can also connect it intoa collection.
But right now we won't do it. What we are going to do, we'll
create another product, so we'lladd another one and the second
(29:40):
one will be and call it Super Mario T-shirt.
OK. OK.
Who doesn't love a Mario T-shirt?
There you go. Nice.
OK. And I also have a description.
Actually, I came up with this description and probably you can
(30:03):
guess I'm not a marketing guy. Very, very short and
descriptive. Yeah, exactly.
So we'll take the image and here.
Nice. It also looks fine and just and
then we give it 100 as well. That's an expensive T-shirt.
(30:26):
Yeah, that's an expensive 1. You pay premium for Mario.
OK, cool. So now we have the Super Mario
T-shirt and the Nintendo Switch.What can we do with it?
We can let's create a discount for for this type of product.
(30:48):
So we're going to do discounts and we'll, we make something
cool. We'll make some something like
if you buy a Nintendo Switch, then you get a Super Mario
T-shirt for 50%. Sounds cool.
That sounds that sounds better. 50% yeah, $50 is better than
$100 a hundred T-shirt. Which with Mario shirt how we
(31:11):
call it the discount code use the handle and the way we do it
is we use the discount details and buy X get white up type of
discount. Now the buy X1, what you have to
do you just have to define the filters of what is the X in our
case just the switch. So we make a product belongs to
(31:35):
filter and then we will search the oh there it is.
So if I switch let's save it. And then if we go a little bit
down, you have if customer buys X of the things that were
filtered up above, then the customer gets YA quantity of
something with the following filter.
(31:58):
Now what we'll do is here we will take the Super Mario shirt.
OK, that makes sense. Cool.
And now you decide how many percents off.
So we made the 50 percents off. You can see the pricing
explanation right here. So because, you know, pricing,
(32:19):
it's like, it's like a little bit of mathematics and, you
know, people get confused and everything.
So yeah. What math are you using behind
the scenes? Show them exactly what it is.
It's very simple math, but for me it was more important to to
(32:40):
test it thoroughly. You know that there is a big
suite of tests for store cough. Now, all of this count is very
important because if you discounted, if you discounted
something, then it cannot be discounted again by another
discount. So the way the discount engine
works is that there is a stack of discounts that goes one after
(33:04):
the other and you can specify the priority of this discount.
So this discount will always be will have the highest priority.
OK, I think that's that will cutit.
OK, yes, OK, so it's created, everything looks good.
(33:26):
We also have the Jason super important for developers who
develop their own back end. They want to see what is going
on. We also see that this discount
is eligible for one product, which is the Nintendo Switch,
and it was applied zero times. OK, so you can keep track of how
many times it's been used? Yes.
(33:46):
Nice. So think about it like if you
had some sort of a bot. OK you have you have a script
that every time that the user signs up, you create a coupon
which is a which is a manual discount for him.
You can do it in store cost witha few hours of code.
Custom discount per per person. Yeah.
(34:09):
So this is the older page for this.
I will. I hope it's OK.
Yeah, it's good. That's good.
Yeah, and just yeah. That's good.
OK, cool. So first of all, let's let's say
we're buying the Nintendo Switchand the Super Mario T-shirt.
(34:32):
OK, so right off the bat we see that the total, the subtotal is
200. We'll pick up a delivery method,
just something random that I've chosen and then we'll calculate
price. Now we we see that we have a
discount the switch with Mario shirt.
The Mario shirt cost 100 and it was discount by health to OK.
(34:59):
You can also. You can also in stock after you
can create a tax engine but it'snot on the scope of this.
So the discount was applied automatically based on the
quantity and the type of products, so the customer didn't
actually have to put in the discount code.
Exactly. So discounts.
(35:21):
So you have two types of discounts.
You have automatic discounts andmany on discounts.
Many on discounts are actually your coupon codes.
You know the ones someone hands to you and say use this coupon
code. In Storecraft you can restrict
coupon codes to be specific to auser, for example.
That's very nice. OK, so that's it like that.
(35:44):
This is enough now. OK, so first of all, we will
create the order. By the way, most of orders are
not created manually like this. That's right.
Yeah, they only created using using a website or using an API
call using. The exactly and what you've,
what you've shown us here, this is all of the back end dashboard
(36:07):
of, of the of Storecraft. So you would normally connect to
this from some sort of front end.
Exactly exactly. OK, so yes, and the the
documentation on on my website specify exactly how to do
checkouts. When I started with commerce,
checkouts seem to me like the toughest part.
(36:28):
So you can choose a payment gateway.
So you have the PayPal and the dummy payments.
We will go with dummy payments right now and I'll create a
checkout. So what happened behind the
scene is that you see this post request The API checkout create
(36:48):
was created with the gateway with handle dummy the same dummy
that we defined earlier in the code.
OK, and and get back to it. OK, so something cool because
this is a dummy payment gateway you can void.
You can capture capture the the amount of money.
(37:11):
For example, if it was PayPal orStripe, you can actually capture
the the order from here or void it or refund it, which is so
let's do something really, really quick before actually
something else before we no, actually, you know what, I'll
show it here. So a checkout key can be in
(37:32):
several states. One of them, the most important
ones are the created state and the complete state.
So if it was a website, then it would complete the checkout.
Let's save it. And once it does that, I should
receive an e-mail, a transactional e-mail from
(37:53):
Storecraft. So there it is.
Nice. Hi, Tom, Thank you for your
purchase. There is a nice table that tells
me what I've bought in the shipping, the subtotal discounts
and the total. Yeah.
And that's, that's being used again, that's being used through
(38:14):
resend. And you, you had your, your API
key in your environment variables and so that went
through resend. It was already automatically set
up for you. Exactly.
Nice. It is important for me to show
that people, when I show it to people, they're like, yeah, but
how they customize the templatesand everything.
So it's easy. You just go a little bit down to
(38:38):
templates and here you search for the.
Let's put. These are your e-mail templates.
Exactly, so you have checkout complete. close this.
OK, so here we have the checkoutcomplete.
Now the Postman extension uses the Checkout complete template
(39:01):
to send the e-mail and right here inside Storecraft you have
an editor complete code that youcan code the entire template
with the Handlebars language. It's a common template.
Language that's that's pretty cool.
Yeah, it's like very useful, youknow?
(39:23):
Yeah, If we go downstairs, you also have a template for text.
You know. Some people cannot receive
something like HTML and you alsohave an example input for
templates. So you can, you know, debug your
template, you know, and and makeit.
And also in addition to that, Storecraft is going to ship in
(39:46):
the next few weeks with, I wouldsay, a marketing, a marketing
functionality where you can connect one template and send a
massive amount of e-mail, personalized emails at once.
And it would be through the dashboard and you it will be
also accessible through the RESTAPI.
(40:08):
So you could set up like marketing campaigns where it
sends a a series of emails maybeover some period of time.
Yeah. Nice.
And right here you can see also the extensions.
You, you see you have two extensions.
One of them is the notification extension, which is, by the way,
if we look at the right corner, we have notifications, even the
(40:30):
even these notifications, it is essentially if you go to, if you
go right here into Atlas, open the notification collection.
The it's actually an extension that listens to key events in
Storecroft and sends them. Nice.
(40:53):
And then they pop up there in the top right.
Exactly. Nice.
Amazing. So are we at the point where do
you, do you have part of your demo where we would access the
back end from a front end? How?
How would you go about? How would you go about
(41:14):
connecting everything to a frontend?
OK. So essentially, essentially
stock of these are headless commerce system, headless
systems. They don't ship with with the
front end. This is this is the thing about
(41:34):
it. I mean, they became super
popular in the last I think fiveyears after people got tired of
seeing the same old templates, you know, for things like
whoppers. So so stokers.
I'm sorry, I was going to say this is where Postman would come
in, where you can see all those different routes, test them
(41:57):
there, and then implement those routes into your front end.
Yeah. So essentially, so this is the
back end. You can use the store craft to
query the products. We have a very robust query
engine. You can create the checkouts and
the complete experience. I am looking for contributors to
actually build a set of maybe reactive tools to help website
(42:22):
developers to start developing and connect to Storecft.
And also Storecft comes with chips with a JavaScript API, a
universal one. It's actually here in the SDK
tools and and I guess that viewsthat we want to to dive deeper,
(42:44):
we'll look at it, but it's a complete SDK.
You can run it from back end, You can run it even from the
browser to create your own commerce experiences.
Wow, amazing. Is there anything else before we
get on to the extension part? Is there anything else that you
wanted to show off here or should we move on to the
(43:06):
extension? I don't know if we have.
Do you think we have time? We have more time.
We have about 15 minutes or so. So let's start with the
extension. OK, let's do it.
Yeah, this is the exciting part for me.
I want to see this. OK, cool, cool, cool.
(43:27):
So, OK, let's see how I OK, the way to kick off this extension
is actually to go into to to Atlas.
OK, so in Atlas I have the database, the the test database,
OK. And under there we have a tab
that is called Atlas Search, right?
(43:47):
OK, so in Atlas search, what youwant to do is to create a search
index and in Atlas vector search.
Yeah, I hope everyone sees that the next button.
OK, So under the vector index, I've taken by the way most of
this information from your videos.
(44:12):
So the first thing you like is is to is to is to pick up the
database. For me it's a test and what I
want to do maybe first I'll say what the the extension is going
to do. The extension is going to help
us semantically search for products by their description
and titles. So we're going to use AI to find
(44:33):
products and and also just to take a step back here, this this
Storecraft is so customizable. What we're doing here is we're
creating a custom extension for the specific use case.
So any developer can create any extension that they want in
store Craft to do a number of things right?
(44:53):
Yeah, definitely. I think I hit it OK.
OK So what you have to do is just go take the products
collection and just create the index with the following the
following configuration. The dimensions that you're using
is is 1956. Actually, I.
(45:16):
Let's see, I. Actually, that might be.
I'll tell you exactly because I have it here.
OK, perfect. I have it OK, vector index, edit
index definition, sorry yes good.
Just making sure 1536. Yeah, exactly.
So it's actually from your developer relationships and and
(45:40):
articles from the MongoDB site. I think I even saw one of your
videos for that. Yeah.
So it depends on which which embedding model you use.
The Open AI embedding model thatwe use mostly has 1536
dimensions. So you just want to specify that
so that so that vector search issearching the right area
(46:03):
properly basically. Yeah, yeah.
Well, once I've done that, just tell the viewers that while it
will do, it will create an indexthat will help MongoDB to search
faster for this for these embeddings.
OK, So once we have that, we cango on and write our extension.
(46:26):
So let's see. OK, So beforehand I made I made
an open iuts which is called embedded text.
It's super simple. If you don't know anything about
embeddings just go inside. Let's see OK inside the open AI
(46:51):
reference and create embeddings.I just copy pasted OK the curl
and created this Http://request.I'll get back to the editor.
Just a POST request. What it does it it gets a text
and uses the model text embedding embedding 3 small and
(47:12):
it has the exact dimensions of our index.
Once it does that it passes it as Jason and then we pick the
the embedding from the Jason. So that's it.
You don't have to install anything to make the following
extension work. So we will create an extension,
we'll call it MongoDB, let's sayvector search.
(47:40):
OK, OK, so the Intellisense, we use a TypeScript for
Intellisense. It it says that we're actually
missing something. So let's see what we want.
So we have to have a few things.One of them is info, which is
the name call it Mongo vector search.
(48:03):
OK, and it's also missing something that is called on a on
a knit. Now every extension has an A
knit site phase that we need to implement.
And on a knit is simply simply the following thing.
It's something that gets injected with app, OK, the stock
(48:28):
after app that you're currently using.
Now what we're going to do, we're going to put an event
handler. And So what I want to do
essentially is every time a product is absorted, it goes
into the the back end. I want to compute its embedding
(48:48):
nice and to inject it. OK.
So let's see, you have. Yeah, every time you add a new
product, it's going to take thatproduct's description, I would
imagine, and create an embeddingfor that and save it back to the
database. Exactly.
Nice. So every time, so the payloads,
(49:10):
the payload, I mean Top Stock ofthis fully typed for events, so
you know exactly what you're getting.
You get the previous one, the current one that is born.
So we're actually hijacking the payload of the product before
it's being accepted to the database, which is a good
(49:31):
opportunity for us. So what I'm going to do, I will
call it product, OK? And then what we want to do is
we want to do something like embed text and then we create a
text. OK, So OK, so this product is
(49:57):
called and use the product titlehas a price of let's say price
and description. And the following I will break
(50:18):
line and the following description and then I will
check the description. So what we want to do right now
we want to do the following thing.
What we want to do is this, we want to take the product and we
(50:42):
specified on Atlas, if you remember we specified that the
path is called embedding which is which is the field that it
will be the. Field that we want to, yeah, we
want to index on that field. Perfect.
Exactly types tricks. I can ignore this message.
(51:04):
OK, so this is it. This is all we have to do in the
on a need stage. OK, well every new product will
be embedded and indexed by MongoDB.
And now the other thing we want to be able to communicate with
this extension to send it queries, right?
(51:24):
So the other thing that we need to implement is something that
is called invoke action. So every extension in in
Storecraft essentially let's show this, we call it action
handle. Every extensions in storecraft
gets mounted as an HTTP REST API.
(51:51):
So for example the name of this extension is mongo DB vector
search. So I will show how you can
actually using the path like APIslash extension slash mongo, DB
vector search slash and operation or action that you
want to invoke. So we'll do something like this
(52:12):
if action handle equals search. So actually let's bail out
quickly and we'll do something like this.
OK, so one interesting part. OK, so if we have a search, what
(52:33):
we need to return is the following thing.
We need to to return a function that returns a promise.
Now the arguments are arguments that we're going to receive from
the POST request. So it's going to be it's
definition is going to be like this OK, because I design this
(52:58):
way. So this this can be async
actually. OK, So what we want to do now
and actually is something, something very simple.
We want to actually query the the database.
Now, if you like, we look at theat the MongoDB documentation,
(53:21):
this we have to use something that's called aggregations.
And in aggregations we have a vector search pipeline.
Yes, nice. So what we can do is something
like this. We have the app because of
JavaScript hoisting. We have DB which is the MongoDB.
OK, just a second, OK, And now we can do something like this.
(53:47):
We can go into collection, the products collection, OK, and
aggregate OK, And then let's see.
So this was. Let's copy all of this.
There you go, Make it easy on yourself.
Make it easy on yourself to copypaste.
(54:07):
It's a lot of typing. Yeah, yeah, yeah, yeah.
I actually have something a little bit ready.
So Oh, nice. Yeah, yeah, yeah, I.
Might put this but totally my inmy in my head.
I mean I. Now you're doing amazing.
That's a lot to to to code by bymemory.
OK, thank you. Good, good.
(54:29):
OK, so OK, so we have the aggregation also do a project to
remove the embedding field and vent array, OK.
And what I do is is I just return it OK?
That's this is the extension. OK, And now I'll show how it
(54:50):
works if the viewers want to seehow quick it was.
Yeah, we definitely want to see see it working.
Yeah, so now I'll show you how it's working by the way.
But if I would do it, I'd probably make a class out of it
like most of the extension. But I just wanted to to show the
views the inline extension pattern.
(55:11):
How quick and easy it can be, yeah.
Yeah. So OK, so let's see.
OK, so here we have we have a nice application that I've made
with React and Git. Let's try something like I'm
(55:32):
looking for Nintendo related console.
Let's see extension. Ah, OK, OK, OK, just a small I
think no problem. I need to to change the name
from this to this AH. No problem.
(55:52):
OK, now here. We go.
Let's see what goes. No, nothing.
It's OK, Let's see what let's let's do a little bit of
troubleshooting. It's probably let's.
Do we need to restart anything or let's see let's let's look at
(56:16):
this code and see. I know, I know, I think I know
what the problem is. OK, I just copy what I've done
earlier. It's probably just could be.
It could be a typo, yeah. Let's see.
(56:38):
OK, let's. All right, try again.
Nothing. Let's see, let's see, let's see,
let's see fetch, let's see the back end, OK.
Looks like we're hitting the endthe endpoint.
(57:03):
Yes, it looks good. Yeah, this is the of course of.
Course, of course, of course. Sorry, Sorry, sorry, sorry,
sorry, sorry, sorry. OK, so I forgot one thing.
One thing that is very important.
So. So.
Were the embeddings created? To actually be indexed, get
(57:25):
indexed. Oh, OK.
So let's save them. So now that we save them, the
event handler for the products upsert was invoked, was
triggered and now we can actually use our.
We can use this let's nice. Yay.
(57:49):
It works. Related pencil.
Now let's change it to related clothing.
Yeah, that's pretty quick too. It's nice.
We've got it, we've got it, we've got it.
Nice. And it's a React application I
will share the code on. I will make a repository for
(58:09):
this on GitHub. Nice benefit of of more
developers. That's amazing.
You know, demos don't always go the way that you plan, but it's
always, you know, usually it's, it's something very simple.
So glad we figured it out and itreally is an amazing product.
(58:31):
I've tried it out and how easy it is to extend it and add extra
functionality is amazing as well.
We are right at time. So I wanted to remind everyone
to to go check out Store Craft. So store Craft dot app, there is
a link in the description. If you're on LinkedIn, there's a
link there. If you're on YouTube, there's a
link in the description. So go visit store craft dot app.
(58:54):
And if you want to contribute tothe open source community, go
check it out on GitHub and see where you might be able to
contribute. And we really appreciate it.
So before we go somewhere again,I want to thank you.
Amazing product, amazing demo, went very well.
Anything. Any last words to the audience?
Yes, there's a big road map for Storecraft.
(59:15):
We're not going anywhere. We really, I'm doubling down on
Storecraft because it's really apassion for me and my son.
And we're going to add AI and a chat endpoint where you can chat
with your store and we're looking for contributors.
Please spread the word. Nice.
That's that's that's something Ihaven't thought of chatting with
(59:38):
or or interacting with an e-commerce site through chat.
That's that's pretty cool. Yeah, that's basically what you
just told. We believe it's the future
because my son always says that he wished he had some agent that
will speak with customers, with some of them, most of them.
(01:00:01):
That that's, that's really cool.Looking forward to that and
looking forward to the road map and the, you know, more cool
things to come from store craft.So again, Tamara, thank you for
for joining me and audience, thank you for watching and we'll
see you again next time. Thank you, Jesse.
All right, one second.
Welcome to the Mongo DBTV Podcast live.
We are back here again. I'm your host today, Jesse Hall.
I'm the staff developer advocatehere at Mongo DB.
Today we have a special guest. We're going to explore a really
a creative next generation commerce as code and this
platform is called Store Craft. So without further ado, I'd like
(00:23):
to welcome on our guest Tomera. How are you?
Welcome. Thank you for coming on to the
show. Hi, Jesse, thank you for having
me. I'm excited to be here.
I'm so happy and I would love toshare about Storecraft.
My background is I'm a software engineer.
I've been creating codes and writing codes since I was a
little kid. I have a lot of experience with
(00:44):
C++ and the computer graphics, but also Android, the
development, you know, apps engineering.
And in the last few years I've been doing mainly deep learning
engineering, web development is,is one of my, it's, it's my
passion. I'm eager to show you
(01:04):
Storecraft. Yeah, what you created, that's
amazing audience, let us know what are you excited about
today? And then what we're going to
talk about here is this really neat thing here called
Storecraft. I really love the aesthetics of
this of this landing page here. It's it's amazing.
And so talk to us about store craft.
What high level? What is it?
Store Craft is OK. It's it's a it's a JavaScript
(01:28):
framework to create commerce backends.
Commerce backends. It's like ACMSA content
management system where you can upload products, connect them
into collections, define discounts and create a check out
experience. In addition to that it ships
with dashboard and you can program everything about it.
(01:50):
Most commerce systems as we knowtoday like Shopify and Woo
Commerce which is a PHP based system which they are amazing
but they are more configuration based.
Storecraft takes a different approach on that everything is
called where you commit to GitHub and hopefully CI or CD
(02:14):
process pushes your code, deploys your code into the
cloud. So if you need a new change in
your store, you can just open the ID, write some code, some
scripts, you know, hopefully it won't be a lot and it will be
live. So store Craft can run
(02:37):
everywhere. It can run on any JavaScript
runtime. You can essentially put Store
Craft inside the browser. You can run it, you can run it
inside the browser even it is agnostic to the platform it has.
Every platform that can use Storecraft you have to implement
some sort of an adapter the way that others other frameworks are
(03:00):
doing such as Svelte and the Remix for example.
You can connect your own I wouldsay platform.
In addition to that Storecraft can connect to most storage
devices to store images and medias from your online store
and also databases and the main one is Mongo DB but you can
(03:22):
connect any SQL type of databaseeven cloud ones.
Nice. So I see, you know, get started
NPX Storecraft create. It's that easy, right?
Yeah. That's awesome.
It's that easy. So I I would like to to say a
few words on why I created Storecoughed.
(03:43):
Yeah, yeah. I would love to know how, how,
how did this come about? Like how did you even come up
with the idea? So about two years ago, my son,
which he loves retro games, you know, he trades video games,
like really old video games, like 20 years ago type of games.
And he built a community around this hobby and the community
(04:08):
like exploded with many participants and he was selling
video games, trading video gamesand buying video games.
And then when they approached him and said that you're a
software engineer, let's create an online store.
So of course I told him go to use Shopify and other pre made
solutions but he decided that hewanted something that was more
(04:33):
cost effective for his needs. So so me, I love React, I love
JavaScript and I decided I decided to take the challenge.
But this is how Stoke of the came about.
And so, so your son, he's selling these games and his
(04:54):
website is built on this technology that you created.
So what? That's amazing.
That's amazing story of how it came about.
But then how did you go from, OK, just creating this this code
for your son, for his website and but, and then turning that
into what it is today into something that anyone can use?
Yeah, good question. OK.
(05:16):
For me, I think it has. I think it's because who I am as
a software engineer. When I write software, I'm I
love to build a lot of librariesaround it.
I'm more into it to build a technology and a technology that
is reusable and can bring value to other users.
It's my passion. I do open source for more than
(05:39):
10 years. So when I started writing this
online store of his I, I, I thought to myself, what if I can
connect to anything I want? If I can optimise the platform
or optimise the database type that fits to my use case.
You know, no two stores are alike.
(05:59):
You know, if you have a very simple store, then you can use
simple solutions. If you have a more demanding
store that requires a performance, a performance
database, then I want to be ableto hook into this database.
In all other solutions that I'veseen, they only offer just one
database, 1 storage or one platform to run on.
(06:22):
So I decided to, to hack it awayto start building upon it.
And fortunately it was, it made sense to me and and it worked.
I mean, it worked because I actually have friends and other
people around the world that areusing it to create crazy things
(06:42):
with it. Even, you know, and ecommerce
stores. It doesn't have to be a website
based, you know, it can be a boton on on Telegram or WhatsApp
and it can be a mobile experience.
You know, it doesn't have to be like a complete web store.
So the use cases are diverse. That's interesting.
(07:05):
That's very interesting. So let me ask you quickly then,
how much does it cost to use Storecraft?
OK. So it, it depends, it depends on
on how you optimise it. So for example, if you can get a
good deal, for example on Atlas,you know, and you can connect
storage device like an S3 compatible with Cloudflare, then
(07:28):
you reach like really low cost, you know, low cost, lower than
what you would get with Shopify.And my friend's store, it cost
him like nothing. You know, a lot of the online
databases, they offer a free tier.
And if your store is like occasionally used, you can
actually practically run it likefor like $5.00 a month.
(07:53):
Wow, nice. Super cool.
But that's, that's that is amazing.
But to be clear, you're not charging for the use of
Storecraft yourself. This project is actually open
source, right? Yeah, it's an open source.
You can self host it however youwant.
You can put all of this inside aCloudflare worker or on a server
(08:15):
less on at Versal. By the way, connectors will
appear in the following weeks, Imean integrations with Versales.
Or you can, you know, spin an EC2 server and let it run 24/7,
connect it to Mongo DB for example.
These cases are diverse and. Yes, nice, nice.
(08:39):
That's that's really amazing. At Mongo DB.
We love to support open source projects and this is amazing
one. We talked about the, you know,
run it anywhere that you have different storage options and
different database options. Let's talk about why.
Why did you choose to use Mongo DB in in this as an option?
(09:01):
OK, so my Sunstorm, it runs on MongoDB.
I'm a huge fan of MongoDB. And not just me, most of my
friends are. And it's the easiest to get
started with, especially for JavaScript developers, You know,
it actually complements the development experience.
(09:22):
And what I found out is that I can go into Atlas, you know,
start my database and just get this URL from the database and
just plug it in into the MongoDBdriver.
You know, it was super fast. There's a lot of ecosystem and
developer tools around it, everything.
If you need an ORM, you can use something like Mongoose.
You know, for me I'm just using the regular driver, which for me
(09:47):
it's the best solution. So I think that I trust Mongo
DB. That's why I started with Mongo
DB and most of the development of Storecraft was with Mongo DB.
Nice, nice. That's amazing.
Let's go ahead and let's let's, let's see some action.
(10:08):
Let's let's look at a quick demoand see how to actually get this
up and running. And I think you've got some some
cool stuff lined up for us in this demo as well.
Yeah, when you're ready to shareyour screen and let's let's get
into some code. Yeah, definitely.
So I will tell the viewers that we have set up some cool stuff
(10:31):
for them. Nice.
Yeah. So I will show Store Croft just
how to use it, you know, the theback end, the dashboard and
everything. And then in the end, hopefully
we'll have time, I will show youan extension of written that
uses vector search AI capabilities with Store Croft.
See, we haven't talked about that yet that this is a brand
new thing to store craft, right?Yeah, yeah.
(10:53):
Yeah, that's another amazing thing about open source is it's,
it's constantly being, you know,worked on.
If, if, if anyone wants to, to help Tamara out, I'm sure he
would welcome some PRS or some suggestions as well, right?
That's how the open source community works.
But it's amazing seeing these projects continue to evolve.
Definitely I'm looking for contributors.
(11:14):
There is a big road map and a lot of things related to AI and
many cool things are coming. So I'm at the terminal and I all
I have to do is use the NPX stalk of create command.
So I run it. As soon as I do that, you know,
there is some sort of some sort of a wizard that asked me a few
(11:37):
questions to help me scaffold stalk of application.
So let's see. OK, so admin emails super
important. I'll put my own e-mail, a port
e-mail, which is very important if you want to send
transactional emails or the platform to run the storm.
(12:00):
You have Node, Bantino, Clufflerworkers, AWS Lambda even and
Google Functions. I will go for Node because I'm
running locally and now you can select the database.
What we're going to do is use the MongoDB database.
Now for the connection URL, whatyou normally do, you just go
(12:22):
into MongoDB Atlas just the second.
I have it here OK and. So you're watching another
video? Yes.
And what? Should I recognize that one?
You just go to the connect button.
I will not show my own URL because of privacy issues.
(12:43):
But from there you'll get URL and you can use it.
For now I will not put my own myown key, but I will show you in
a minute. The database name that I'm going
to use is called test. Now I will select A storage
device for Storecraft. I will go with the Node GS local
(13:03):
storage. OK, Now for the e-mail provider,
I will go with recent. Again, I will not share my API
key. And now you can select a payment
provider. It can be Stripe or PayPal.
Honestly, we will not go into, we will not go into payment
providers right now. So I'll just go ahead.
(13:25):
And once we did that, it will actually install all of the
packages. It will scaffold skeleton for
your project. And now let's see.
OK, so now we will go into the the the folder and what we need
(13:48):
to do right now is. That There you go.
Yeah. OK, no.
You're good. Is to run NPM run migrate.
For me the database was already migrated OK, but I will run it.
But before I run it, I will do something.
I will show you the what was created.
(14:10):
OK, So what stalk of did is to create a single file, I mean a
bunch of files and one of them is the app JS file.
You can see the directory structure.
This is this on the left. OK, now if I see what's
happening here, we have the stalk of app.
(14:31):
There are some secret access tokens.
They're not relevant. You can put them inside an
environment file just for the demoing.
They will be. For the sake of the demo, they
will be here. But once they are created, you
know, just save them somewhere safe.
OK, so. So this is specific to to the
(14:51):
the back end environment of Storecraft.
Yeah, the secret, the secret access token and refresh token
secrets are used to for authentication and
authorizations. Gotcha.
You don't have to use them, you can plug your own if you want.
So if you try, if the audience tries to use them, they can't
because they're not. They're on your local computer.
(15:12):
Exactly. OK.
So from here, so once we have the instance of the app and a
batch of configuration, by the way, there's there are many more
configurations that you can configure.
You also can configure the course options if you want and
many other things. For example if you have CDN that
(15:33):
is connected to your S3 bucket, you can demand to rewrite the
URLs when the return from the back end in the product media.
OK, so once we go a little bit down, we see the platform, we
see the database. Now the database, we have the
URL here, but the store crafts connector for Mongo DB, it can
(15:58):
actually infer the mongo DBURL from the environment file.
Yeah, yeah. And besides that if you need to
customize things, you have the options, the Mongo client
options. So if you need things that more
things for authentication and whatnot, you can use that as
(16:19):
well. The thing about stalker that it
is highly non opinionated, you know?
So another thing here we have the resend.
Resend is an e-mail provider. I will use the recent key that
I've already have in my environment file, OK with
(16:42):
payment gateways. So here you have a handle and
the payment gateway itself. Maybe you know what there is
also we have a concept of dummy payment gateway.
I I I will import it, you know, OK, let's.
Oh. For testing that, that's
amazing. Yeah, definitely.
It's for testing. So we have payments and then we
(17:04):
have dummy. OK, let's see.
Yeah, there it is, dummy payments.
So here with the payment gateways, it's actually it's
essentially an object that I cando something like this.
You know what, I will give it a key.
(17:25):
Now the keys are important because with the keys you can
the API, the REST API is using the key.
So for example, if you want to create a check out using one of
the payment gateways, you have to remember these handles which
are the keys. OK, OK, OK, so we also have a
(17:50):
bunch of extensions. The Postman extension is a cool
extension. And by the way, Next up we're
going to build an extension. So I will show what extension
means, I mean what build one. But the Postman extension is
just a simple extension that listens to events of store Koft.
So it listens for example when checkout is complete and once it
(18:12):
is complete it, it fetches an e-mail template from the back
end and put the information of the customer and then send him a
transactional e-mail using the using the Mailer that we've seen
here for example recent. So yeah, so when you said
Postman, I was thinking of Postman the the the testing
(18:36):
client. Yeah, yeah, definitely.
Maybe it's not a good name. OK, it's OK.
It's good to clarify that though.
Yeah. So by the way, if if we if we'll
go back here. So if you need to to customize
anything that is related to events in stock of all you have
(19:00):
to do is to keep this and and then you have and you have a
listing again. So for example, if you want to
send an e-mail when a change password request, you know you
can do that. So by the way, the Postman
extension does that as well. But let's look at it, let's do
(19:25):
something like this. This would be an event.
OK, now every event object you can, you can stop the
propagation which means you can steal the event handling from
for example other extensions, which is super nice And then you
have the event payload. And in this example, the event
(19:46):
payload is something that is called an oath user type, which
is essential for creating to responding to this event.
Anyway, let's. Lots of lots of customizability,
yes, if that's a word. So before we start everything, I
(20:08):
want to show you how the index files look like.
OK, so Storecraft, once we injected it with the node
platform, it has something that is called a handler.
Now the handler translate incoming messages from from
nodes incoming message. I mean it's the HTTP driver of a
node. It translates into a web
(20:31):
standard request, OK. And then it sends it to a
virtual REST API controller which only knows about web
request and web response. And then the web response
returns and then it streams it back into the server response of
node. So let's say OK, so let's let's
(20:54):
do it. So I run the migrate script.
OK, essentially it's a success because I've already migrated
migrating a MongoDB. Migrating MongoDB essentially
means succeeding some templates and also creating indexes for
MongoDB. Oh wow, so so can so can.
(21:16):
Are you able to show in Atlas like what that did?
Yeah, definitely, definitely. Because I'm curious, I want to,
I want to like really understand.
So it's it's added some data to your database.
Yes. So.
If we look at the test, what it did was essentially if I go for
example to the templates, it stated the database with
(21:41):
templates, Yeah. And also it created indexes for
almost everything. For example, I'll show you here.
If I go to products and then insert into, enter into indexes
(22:02):
then yeah it seems to be loadingmaybe?
It's the, it's just the joys of of live coding.
I mean, when you're trying to doa demo, nothing ever works
exactly how it should. That's OK, but that that's
really interesting. So that migrate added some data
to your database, some templatesand some some other things and
(22:23):
then it's created those indexes automatically for you.
So that's that's that's a quick,quick and easy way to get that
set up and and going. And if you need more indexes
issues, you can just go into your Atlas and do whatever.
You need something specific, yeah.
So let's see. OK, cool.
(22:46):
So. Here we go.
If you're if you're going into indexes, hopefully it will load.
It might still actually because you just ran that.
So it actually might be creatingthose indexes still because
those tend to take a should justbe a few seconds, but they I
don't know how many indexes it'screating, so it could take a
little bit of time there. Yeah, definitely.
(23:08):
Definitely. But that's that's cool.
We can continue with the demo. I'm sure those are going to pop
up here in a minute. But it's very great to
understand that might what that what exactly that migrate
command did. Yeah.
Because it is important and in in store Craft I implement a
very robust query language like a boolean query language where
(23:32):
you can search for something that has this property or this
property but not this property. It also has a cursor which
requires indexes. Anyway, let's start it, let's
go. So once we hit NPM start, OK, we
see this screen. Now this screen will give you
(23:53):
all the information about the requests, date requests.
And I'll show you in a second. One thing to note is that we
have an API reference which is being maintained by me and I use
the greatest colour.com project is a super cool.
It's like it's like Postman essentially.
(24:17):
So you can use it to actually test requests and see what's
going on. And we will probably get back to
this once we do the extensions, but let's see, let's go to
products. Let's see if we have listing
(24:38):
filter product items. OK, so you can do something like
this. OK, now you can see the products
that have returned. Nice.
Yeah. I've never used.
I've never seen this this this before.
(24:58):
This is a pretty cool product. Or what is this?
Is this a package? A JavaScript package I'm
assuming. Well, it's actually quite
amazing. What you do is that you write an
open API file which lists all ofyour backends functionality with
examples and everything and endpoint.
And then I use a tool actually they, they read this open API
(25:21):
file and and they inject it intotheir application.
It's it's an application, it's aweb application.
And then see everything. It's super cool.
I can serve it from the back enditself and it's, it helps me a
lot. Now if you see it's Talker by
the way, you can see what's going on under the hood.
(25:44):
You'll see the the HTTP method, the path and the amount of time
it took. And if you have queries, you'll
see them too. So now I'm going to the
dashboard. OK, OK, so let me just, OK, so
(26:04):
the first time that you're connecting to Storecraft with
the authentic, the admin emails that you specified, the first
password is admin. So you can change it later
through the through the through the dashboard, through the
second page. OK, OK.
And then on here, if you could maybe just do command plus one,
(26:26):
one time, maybe, maybe now 2, Yeah, that's a little bit
better. Yeah, maybe one more.
Actually actually stock of dashboard is mobile friendly.
Oh, good. Nice, nice.
You see, everything falls falls into place.
Nice, nice. OK.
(26:47):
OK, so. Really good.
But I can do you see this sidebar, I can close and open
it. So if you're going to products,
for example, you know what, let's create a product.
Let's create like a simple, simple product.
So we'll give it a title. Let's say we want to have like 2
(27:11):
products related to Nintendo. I love Nintendo.
The first one will be a NintendoSwitch which is console a home
console for playing games. Now the handle handle is like an
ID handles should be unique. I can also suggest it from the
(27:32):
title. Now I'll give it a description.
Actually have a made-up description for this.
I have content marked on file that I've created just you're.
Prepared. Yeah, actually it's important
for me because it's for the the semantic search.
(27:54):
I want it to be rich. Gotcha.
So you put it here, you have rich editor now media.
Media is super cool. What we do is that I have an
image here which I can drag and drop OK.
(28:15):
Nice. And you actually have a very
nice editor. You can crop, you can scale up,
scale down and translate. And you can also decide on the
format and the quality. I will go like this.
I will put this OK. And the next thing I'll give you
(28:38):
the price of 100, although I wish it was the price.
That's pretty cheap. Let's say we have two of them.
I'll show you something cool. So, so once we create the
product, we see the eligible discounts that this product is
(28:58):
eligible for. But The thing is that is more
important for me. Storecraft is a developer first
framework. So you also always have the
Jason, you know upfront in the cards, you can see the discounts
and everything and what you should expect from it.
(29:19):
You can also things like relatedproducts and tags which are
super important for querying andfiltering.
And you can also connect it intoa collection.
But right now we won't do it. What we are going to do, we'll
create another product, so we'lladd another one and the second
(29:40):
one will be and call it Super Mario T-shirt.
OK. OK.
Who doesn't love a Mario T-shirt?
There you go. Nice.
OK. And I also have a description.
Actually, I came up with this description and probably you can
(30:03):
guess I'm not a marketing guy. Very, very short and
descriptive. Yeah, exactly.
So we'll take the image and here.
Nice. It also looks fine and just and
then we give it 100 as well. That's an expensive T-shirt.
(30:26):
Yeah, that's an expensive 1. You pay premium for Mario.
OK, cool. So now we have the Super Mario
T-shirt and the Nintendo Switch.What can we do with it?
We can let's create a discount for for this type of product.
(30:48):
So we're going to do discounts and we'll, we make something
cool. We'll make some something like
if you buy a Nintendo Switch, then you get a Super Mario
T-shirt for 50%. Sounds cool.
That sounds that sounds better. 50% yeah, $50 is better than
$100 a hundred T-shirt. Which with Mario shirt how we
(31:11):
call it the discount code use the handle and the way we do it
is we use the discount details and buy X get white up type of
discount. Now the buy X1, what you have to
do you just have to define the filters of what is the X in our
case just the switch. So we make a product belongs to
(31:35):
filter and then we will search the oh there it is.
So if I switch let's save it. And then if we go a little bit
down, you have if customer buys X of the things that were
filtered up above, then the customer gets YA quantity of
something with the following filter.
(31:58):
Now what we'll do is here we will take the Super Mario shirt.
OK, that makes sense. Cool.
And now you decide how many percents off.
So we made the 50 percents off. You can see the pricing
explanation right here. So because, you know, pricing,
(32:19):
it's like, it's like a little bit of mathematics and, you
know, people get confused and everything.
So yeah. What math are you using behind
the scenes? Show them exactly what it is.
It's very simple math, but for me it was more important to to
(32:40):
test it thoroughly. You know that there is a big
suite of tests for store cough. Now, all of this count is very
important because if you discounted, if you discounted
something, then it cannot be discounted again by another
discount. So the way the discount engine
works is that there is a stack of discounts that goes one after
(33:04):
the other and you can specify the priority of this discount.
So this discount will always be will have the highest priority.
OK, I think that's that will cutit.
OK, yes, OK, so it's created, everything looks good.
(33:26):
We also have the Jason super important for developers who
develop their own back end. They want to see what is going
on. We also see that this discount
is eligible for one product, which is the Nintendo Switch,
and it was applied zero times. OK, so you can keep track of how
many times it's been used? Yes.
(33:46):
Nice. So think about it like if you
had some sort of a bot. OK you have you have a script
that every time that the user signs up, you create a coupon
which is a which is a manual discount for him.
You can do it in store cost witha few hours of code.
Custom discount per per person. Yeah.
(34:09):
So this is the older page for this.
I will. I hope it's OK.
Yeah, it's good. That's good.
Yeah, and just yeah. That's good.
OK, cool. So first of all, let's let's say
we're buying the Nintendo Switchand the Super Mario T-shirt.
(34:32):
OK, so right off the bat we see that the total, the subtotal is
200. We'll pick up a delivery method,
just something random that I've chosen and then we'll calculate
price. Now we we see that we have a
discount the switch with Mario shirt.
The Mario shirt cost 100 and it was discount by health to OK.
(34:59):
You can also. You can also in stock after you
can create a tax engine but it'snot on the scope of this.
So the discount was applied automatically based on the
quantity and the type of products, so the customer didn't
actually have to put in the discount code.
Exactly. So discounts.
(35:21):
So you have two types of discounts.
You have automatic discounts andmany on discounts.
Many on discounts are actually your coupon codes.
You know the ones someone hands to you and say use this coupon
code. In Storecraft you can restrict
coupon codes to be specific to auser, for example.
That's very nice. OK, so that's it like that.
(35:44):
This is enough now. OK, so first of all, we will
create the order. By the way, most of orders are
not created manually like this. That's right.
Yeah, they only created using using a website or using an API
call using. The exactly and what you've,
what you've shown us here, this is all of the back end dashboard
(36:07):
of, of the of Storecraft. So you would normally connect to
this from some sort of front end.
Exactly exactly. OK, so yes, and the the
documentation on on my website specify exactly how to do
checkouts. When I started with commerce,
checkouts seem to me like the toughest part.
(36:28):
So you can choose a payment gateway.
So you have the PayPal and the dummy payments.
We will go with dummy payments right now and I'll create a
checkout. So what happened behind the
scene is that you see this post request The API checkout create
(36:48):
was created with the gateway with handle dummy the same dummy
that we defined earlier in the code.
OK, and and get back to it. OK, so something cool because
this is a dummy payment gateway you can void.
You can capture capture the the amount of money.
(37:11):
For example, if it was PayPal orStripe, you can actually capture
the the order from here or void it or refund it, which is so
let's do something really, really quick before actually
something else before we no, actually, you know what, I'll
show it here. So a checkout key can be in
(37:32):
several states. One of them, the most important
ones are the created state and the complete state.
So if it was a website, then it would complete the checkout.
Let's save it. And once it does that, I should
receive an e-mail, a transactional e-mail from
(37:53):
Storecraft. So there it is.
Nice. Hi, Tom, Thank you for your
purchase. There is a nice table that tells
me what I've bought in the shipping, the subtotal discounts
and the total. Yeah.
And that's, that's being used again, that's being used through
(38:14):
resend. And you, you had your, your API
key in your environment variables and so that went
through resend. It was already automatically set
up for you. Exactly.
Nice. It is important for me to show
that people, when I show it to people, they're like, yeah, but
how they customize the templatesand everything.
So it's easy. You just go a little bit down to
(38:38):
templates and here you search for the.
Let's put. These are your e-mail templates.
Exactly, so you have checkout complete. close this.
OK, so here we have the checkoutcomplete.
Now the Postman extension uses the Checkout complete template
(39:01):
to send the e-mail and right here inside Storecraft you have
an editor complete code that youcan code the entire template
with the Handlebars language. It's a common template.
Language that's that's pretty cool.
Yeah, it's like very useful, youknow?
(39:23):
Yeah, If we go downstairs, you also have a template for text.
You know. Some people cannot receive
something like HTML and you alsohave an example input for
templates. So you can, you know, debug your
template, you know, and and makeit.
And also in addition to that, Storecraft is going to ship in
(39:46):
the next few weeks with, I wouldsay, a marketing, a marketing
functionality where you can connect one template and send a
massive amount of e-mail, personalized emails at once.
And it would be through the dashboard and you it will be
also accessible through the RESTAPI.
(40:08):
So you could set up like marketing campaigns where it
sends a a series of emails maybeover some period of time.
Yeah. Nice.
And right here you can see also the extensions.
You, you see you have two extensions.
One of them is the notification extension, which is, by the way,
if we look at the right corner, we have notifications, even the
(40:30):
even these notifications, it is essentially if you go to, if you
go right here into Atlas, open the notification collection.
The it's actually an extension that listens to key events in
Storecroft and sends them. Nice.
(40:53):
And then they pop up there in the top right.
Exactly. Nice.
Amazing. So are we at the point where do
you, do you have part of your demo where we would access the
back end from a front end? How?
How would you go about? How would you go about
(41:14):
connecting everything to a frontend?
OK. So essentially, essentially
stock of these are headless commerce system, headless
systems. They don't ship with with the
front end. This is this is the thing about
(41:34):
it. I mean, they became super
popular in the last I think fiveyears after people got tired of
seeing the same old templates, you know, for things like
whoppers. So so stokers.
I'm sorry, I was going to say this is where Postman would come
in, where you can see all those different routes, test them
(41:57):
there, and then implement those routes into your front end.
Yeah. So essentially, so this is the
back end. You can use the store craft to
query the products. We have a very robust query
engine. You can create the checkouts and
the complete experience. I am looking for contributors to
actually build a set of maybe reactive tools to help website
(42:22):
developers to start developing and connect to Storecft.
And also Storecft comes with chips with a JavaScript API, a
universal one. It's actually here in the SDK
tools and and I guess that viewsthat we want to to dive deeper,
(42:44):
we'll look at it, but it's a complete SDK.
You can run it from back end, You can run it even from the
browser to create your own commerce experiences.
Wow, amazing. Is there anything else before we
get on to the extension part? Is there anything else that you
wanted to show off here or should we move on to the
(43:06):
extension? I don't know if we have.
Do you think we have time? We have more time.
We have about 15 minutes or so. So let's start with the
extension. OK, let's do it.
Yeah, this is the exciting part for me.
I want to see this. OK, cool, cool, cool.
(43:27):
So, OK, let's see how I OK, the way to kick off this extension
is actually to go into to to Atlas.
OK, so in Atlas I have the database, the the test database,
OK. And under there we have a tab
that is called Atlas Search, right?
(43:47):
OK, so in Atlas search, what youwant to do is to create a search
index and in Atlas vector search.
Yeah, I hope everyone sees that the next button.
OK, So under the vector index, I've taken by the way most of
this information from your videos.
(44:12):
So the first thing you like is is to is to is to pick up the
database. For me it's a test and what I
want to do maybe first I'll say what the the extension is going
to do. The extension is going to help
us semantically search for products by their description
and titles. So we're going to use AI to find
(44:33):
products and and also just to take a step back here, this this
Storecraft is so customizable. What we're doing here is we're
creating a custom extension for the specific use case.
So any developer can create any extension that they want in
store Craft to do a number of things right?
(44:53):
Yeah, definitely. I think I hit it OK.
OK So what you have to do is just go take the products
collection and just create the index with the following the
following configuration. The dimensions that you're using
is is 1956. Actually, I.
(45:16):
Let's see, I. Actually, that might be.
I'll tell you exactly because I have it here.
OK, perfect. I have it OK, vector index, edit
index definition, sorry yes good.
Just making sure 1536. Yeah, exactly.
So it's actually from your developer relationships and and
(45:40):
articles from the MongoDB site. I think I even saw one of your
videos for that. Yeah.
So it depends on which which embedding model you use.
The Open AI embedding model thatwe use mostly has 1536
dimensions. So you just want to specify that
so that so that vector search issearching the right area
(46:03):
properly basically. Yeah, yeah.
Well, once I've done that, just tell the viewers that while it
will do, it will create an indexthat will help MongoDB to search
faster for this for these embeddings.
OK, So once we have that, we cango on and write our extension.
(46:26):
So let's see. OK, So beforehand I made I made
an open iuts which is called embedded text.
It's super simple. If you don't know anything about
embeddings just go inside. Let's see OK inside the open AI
(46:51):
reference and create embeddings.I just copy pasted OK the curl
and created this Http://request.I'll get back to the editor.
Just a POST request. What it does it it gets a text
and uses the model text embedding embedding 3 small and
(47:12):
it has the exact dimensions of our index.
Once it does that it passes it as Jason and then we pick the
the embedding from the Jason. So that's it.
You don't have to install anything to make the following
extension work. So we will create an extension,
we'll call it MongoDB, let's sayvector search.
(47:40):
OK, OK, so the Intellisense, we use a TypeScript for
Intellisense. It it says that we're actually
missing something. So let's see what we want.
So we have to have a few things.One of them is info, which is
the name call it Mongo vector search.
(48:03):
OK, and it's also missing something that is called on a on
a knit. Now every extension has an A
knit site phase that we need to implement.
And on a knit is simply simply the following thing.
It's something that gets injected with app, OK, the stock
(48:28):
after app that you're currently using.
Now what we're going to do, we're going to put an event
handler. And So what I want to do
essentially is every time a product is absorted, it goes
into the the back end. I want to compute its embedding
(48:48):
nice and to inject it. OK.
So let's see, you have. Yeah, every time you add a new
product, it's going to take thatproduct's description, I would
imagine, and create an embeddingfor that and save it back to the
database. Exactly.
Nice. So every time, so the payloads,
(49:10):
the payload, I mean Top Stock ofthis fully typed for events, so
you know exactly what you're getting.
You get the previous one, the current one that is born.
So we're actually hijacking the payload of the product before
it's being accepted to the database, which is a good
(49:31):
opportunity for us. So what I'm going to do, I will
call it product, OK? And then what we want to do is
we want to do something like embed text and then we create a
text. OK, So OK, so this product is
(49:57):
called and use the product titlehas a price of let's say price
and description. And the following I will break
(50:18):
line and the following description and then I will
check the description. So what we want to do right now
we want to do the following thing.
What we want to do is this, we want to take the product and we
(50:42):
specified on Atlas, if you remember we specified that the
path is called embedding which is which is the field that it
will be the. Field that we want to, yeah, we
want to index on that field. Perfect.
Exactly types tricks. I can ignore this message.
(51:04):
OK, so this is it. This is all we have to do in the
on a need stage. OK, well every new product will
be embedded and indexed by MongoDB.
And now the other thing we want to be able to communicate with
this extension to send it queries, right?
(51:24):
So the other thing that we need to implement is something that
is called invoke action. So every extension in in
Storecraft essentially let's show this, we call it action
handle. Every extensions in storecraft
gets mounted as an HTTP REST API.
(51:51):
So for example the name of this extension is mongo DB vector
search. So I will show how you can
actually using the path like APIslash extension slash mongo, DB
vector search slash and operation or action that you
want to invoke. So we'll do something like this
(52:12):
if action handle equals search. So actually let's bail out
quickly and we'll do something like this.
OK, so one interesting part. OK, so if we have a search, what
(52:33):
we need to return is the following thing.
We need to to return a function that returns a promise.
Now the arguments are arguments that we're going to receive from
the POST request. So it's going to be it's
definition is going to be like this OK, because I design this
(52:58):
way. So this this can be async
actually. OK, So what we want to do now
and actually is something, something very simple.
We want to actually query the the database.
Now, if you like, we look at theat the MongoDB documentation,
(53:21):
this we have to use something that's called aggregations.
And in aggregations we have a vector search pipeline.
Yes, nice. So what we can do is something
like this. We have the app because of
JavaScript hoisting. We have DB which is the MongoDB.
OK, just a second, OK, And now we can do something like this.
(53:47):
We can go into collection, the products collection, OK, and
aggregate OK, And then let's see.
So this was. Let's copy all of this.
There you go, Make it easy on yourself.
Make it easy on yourself to copypaste.
(54:07):
It's a lot of typing. Yeah, yeah, yeah, yeah.
I actually have something a little bit ready.
So Oh, nice. Yeah, yeah, yeah, I.
Might put this but totally my inmy in my head.
I mean I. Now you're doing amazing.
That's a lot to to to code by bymemory.
OK, thank you. Good, good.
(54:29):
OK, so OK, so we have the aggregation also do a project to
remove the embedding field and vent array, OK.
And what I do is is I just return it OK?
That's this is the extension. OK, And now I'll show how it
(54:50):
works if the viewers want to seehow quick it was.
Yeah, we definitely want to see see it working.
Yeah, so now I'll show you how it's working by the way.
But if I would do it, I'd probably make a class out of it
like most of the extension. But I just wanted to to show the
views the inline extension pattern.
(55:11):
How quick and easy it can be, yeah.
Yeah. So OK, so let's see.
OK, so here we have we have a nice application that I've made
with React and Git. Let's try something like I'm
(55:32):
looking for Nintendo related console.
Let's see extension. Ah, OK, OK, OK, just a small I
think no problem. I need to to change the name
from this to this AH. No problem.
(55:52):
OK, now here. We go.
Let's see what goes. No, nothing.
It's OK, Let's see what let's let's do a little bit of
troubleshooting. It's probably let's.
Do we need to restart anything or let's see let's let's look at
(56:16):
this code and see. I know, I know, I think I know
what the problem is. OK, I just copy what I've done
earlier. It's probably just could be.
It could be a typo, yeah. Let's see.
(56:38):
OK, let's. All right, try again.
Nothing. Let's see, let's see, let's see,
let's see fetch, let's see the back end, OK.
Looks like we're hitting the endthe endpoint.
(57:03):
Yes, it looks good. Yeah, this is the of course of.
Course, of course, of course. Sorry, Sorry, sorry, sorry,
sorry, sorry, sorry. OK, so I forgot one thing.
One thing that is very important.
So. So.
Were the embeddings created? To actually be indexed, get
(57:25):
indexed. Oh, OK.
So let's save them. So now that we save them, the
event handler for the products upsert was invoked, was
triggered and now we can actually use our.
We can use this let's nice. Yay.
(57:49):
It works. Related pencil.
Now let's change it to related clothing.
Yeah, that's pretty quick too. It's nice.
We've got it, we've got it, we've got it.
Nice. And it's a React application I
will share the code on. I will make a repository for
(58:09):
this on GitHub. Nice benefit of of more
developers. That's amazing.
You know, demos don't always go the way that you plan, but it's
always, you know, usually it's, it's something very simple.
So glad we figured it out and itreally is an amazing product.
(58:31):
I've tried it out and how easy it is to extend it and add extra
functionality is amazing as well.
We are right at time. So I wanted to remind everyone
to to go check out Store Craft. So store Craft dot app, there is
a link in the description. If you're on LinkedIn, there's a
link there. If you're on YouTube, there's a
link in the description. So go visit store craft dot app.
(58:54):
And if you want to contribute tothe open source community, go
check it out on GitHub and see where you might be able to
contribute. And we really appreciate it.
So before we go somewhere again,I want to thank you.
Amazing product, amazing demo, went very well.
Anything. Any last words to the audience?
Yes, there's a big road map for Storecraft.
(59:15):
We're not going anywhere. We really, I'm doubling down on
Storecraft because it's really apassion for me and my son.
And we're going to add AI and a chat endpoint where you can chat
with your store and we're looking for contributors.
Please spread the word. Nice.
That's that's that's something Ihaven't thought of chatting with
(59:38):
or or interacting with an e-commerce site through chat.
That's that's pretty cool. Yeah, that's basically what you
just told. We believe it's the future
because my son always says that he wished he had some agent that
will speak with customers, with some of them, most of them.
(01:00:01):
That that's, that's really cool.Looking forward to that and
looking forward to the road map and the, you know, more cool
things to come from store craft.So again, Tamara, thank you for
for joining me and audience, thank you for watching and we'll
see you again next time. Thank you, Jesse.
All right, one second.
Popular Podcasts
Stuff You Should Know
If you've ever wanted to know about champagne, satanism, the Stonewall Uprising, chaos theory, LSD, El Nino, true crime and Rosa Parks, then look no further. Josh and Chuck have you covered.
Dateline NBC
Current and classic episodes, featuring compelling true-crime mysteries, powerful documentaries and in-depth investigations. Follow now to get the latest episodes of Dateline NBC completely free, or subscribe to Dateline Premium for ad-free listening and exclusive bonus content: DatelinePremium.com
The Bobby Bones Show
Listen to 'The Bobby Bones Show' by downloading the daily full replay.