Namely if somebody gets a hold of the Admin Role ID he or she can easily then signup as an administrator to our app, and the do as they please in the admin area.

In this quick episode we are going to fix that.

Viewer called Locness noticed a potential security flaw on our sign up form. In this episode we are going to fix that.

Protect Signup Form From Hackers

But we are going to have to change some things that we created in the previous episode to make this work because I miscalculated a bit how this is supposed to work. But those are going to be just small changes.

And you know... these things happen in software development, sometimes you have to change your approach mid way if your assumptions were incorrect or you haven’t thought things through, which I obviously did not.

We are also going to introduce a bit of state management to our app, which I’m not very happy about because I thought we would be able to rely solely on React Query for that, but turns out that we can’t, or maybe I’m missing something and that is why it’s not working properly.

I will show you what I mean during this episode.

But this is not all bad, because I got to play with Zustand -  a very light weight state management library, which as you will see is a joy to use.

In this episode we are going to create a mini cart for our e-commerce site using Zustand state management library.

Mini Cart And Zustand

In this first part we are going to create add to cart button, and instead of using something like Redux we are actually going to try to use Directus and React Query for our state management. 

Directus is going to be used to persist the data in the user session collection that we are going to create. There we will temporarily save the users order and persist the data that way.

So we are going to start adding our products to temporary order object in this episode. 

And in the next episode we are going to finish this functionality by implementing user cart. And display current order that way. 



In this episode we are going to start implementing add to cart functionality. I say start because this is a pretty big functionality so I’m going to split it into two parts.

Add To Cart

We are going to style those options using Tailwind so that they look nice, and not just be vanilla radio buttons. 

Also we are going to update Directus and Tailwind to the the latest versions.

In this episode we are going to display product options that we created in the previous episode.

Display Product Options

Unfortunately in the process of doing this I’m going to show you why I’m starting to dislike Directus a little bit :( . 

In this episode we are going to create options for products. In our case those are going to be colours and sizes.

Product Options And Directus Has Some Problems

The goal for this episode would be to create a single product page for our products, so that when the user clicks on a product in our Next.js app it would take him to the product display page. To get the correct page, I'm going to show you how to filter products by slug from our Directus API. 

Also we are going to refactor our query methods a bit, so that we end up with only one method for all of our queries, which will make our code look much nicer and more performant.

In this episode we are going to create a product display page for our shop.

Product Display Page

Of course we are going to filter those products by category since that is the only parameter that we have for the products at the moment.

So you are going to learn how to use Directus to filter your items, how to pass parameters to your GraphQL query and how to handle filtering with react-query.

In this episode I’m going to show you how to create a filter for our products using Directus and Next.js.

Filter Products By Category

After three episodes of basically setup and updating it is finally time for us to start building our application.

And what are we going to be building,  you might ask?

Well, for this series I decided not to make movie database type of thing like I always do in these tutorials, but instead we are going to be building a web shop, or an e-commerce site.

Now, I know that some of you are going to be pretty excited about this, since I’ve gotten a lot of messages over the years to make an e-commerce site. However, before we begin keep these two things in mind:

1. PLEASE, PLEASE, PLEASE don’t use what we are doing here to create production grade e-commerce site, there is a lot of details that go into making web shops and we are not going to cover them all in this series. E-commerce site is just an example that is going to give us a nice playground on which we can play with interactions between Next.js and Directus 9. 

2. I’m not going to be covering payments in this series, because payments can be a very sensitive issue and I don’t wanna show something that could potentially lose someones money. So payments are of the table.

That being said, WE ARE going to try to implement a lot of functionality that web shops have, like adding items to cart, price calculations, checkout, user area and so on. And I hope that this series is going to be educational for you and that you have fun with it.

In this episode we are going to start building an e-commerce site using Directus and Next.

Tutorials tagged with: e-commerce

Get in touch