This course is just a collection of tips and tricks for Directus 9 platform.

Directus 9

In this course we will be using Directus 9 as our API and CMS, and of course Nextjs for the frontend of our site. Kind of like we did with <a title="" href="https://watch-learn.com/courses/making-websites-nextjs-and-strapi" target="_self">Making Websites With Next.js And Strapi</a> series.
This time however we will add Tailwind into the mix and also include React Query right from the start for better performing API requests, caching, state management and so on. Oh, and also instead of using REST API we are going to use GraphQL for this series.

Directus 9 + Next

In this series we are going to learn how to create a websites using Next.js. The main focus of the series will definitely be Next.js, but we will do some work with Strapi too, which we will use as our API and CMS

Making Websites With Next.js And Strapi

In this series we are going to learn basics of React library and all of it's advanced features that are applicable in the year 2020.

React 2020

Let us now create another Directus flow. This time just a bit more complex. 

If you don't know what Directus Flows are please check out the previous video for a quick intro.

### Create a newsletter list

First, let's create a new collection and call it `newsletter_list`

Now let's add three simple input fields to it and call them: `first_name`, `last_name`, and  `email`

In this collection we are going to save users that sign up to our app AND opt-in to receive the newsletter, users that don't opt-in will not be added to the collection.

Save the collection, and we are done with our Newsletter list collection

### Add opt-in field to users

In Settings -> Data models click on "System Collections" and then click on `directus_users` 

Create a new toggle field here and give it a name of `newsletter`.

Set the default value to be enabled and Save it.

Now that we have our opt-in field setup, we can start creating our flow.

### The Flow - Trigger

Go to Flows and Create a new flow, we will call it "Newsletter Flow".

The description can be something like "Add user to newsletter list".

Click the arrow so we can set up our trigger.

The trigger will be an Event hook with non-blocking Action.

The scope is of course `items.create` since we wanna trigger this flow once the user has been created.

Click on "Show 15 more" and then select "Directus Users".

Now click the checkmark to save our trigger. 

### The Flow - Operation One

This Flow is going to have two operations, the first operation will check if the user chooses to opt into our newsletter, and then if they did we are going to create another operation that will add that user to the "Newsletter list" collection. Easy peasy. 

Click the plus symbol to create the first operation, and name it "Check Newsletter Opt-in".

For the operation type, we are going to choose "Condition". 

And then in the "Condition Rules" box, we are going to check if the user has opted in using the following code. 


```json
{
    "$trigger": {
        "payload": {
            "newsletter": {
                "_eq": true
            }
        }
    }
}
```

Here we are checking if the `newsletter` field that is coming from our trigger is equal to `true`.

Now click the checkmark to confirm this operation. 

### The Flow - Operation Two

You will notice that this operation has a checkmark symbol and an X symbol on the bottom right side. When you click on the checkmark you can chain another operation that will run if the condition that we created is true, and by clicking on the X symbol you can chain the operation that will run if the condition is false. 

For this Flow, we will only chain the operation if the condition is true, because if it's false, then we don't wanna do anything. 

So now click on the checkmark symbol on the bottom right of the operation box, and we will create an operation that will add the user to our "Newsletter list" collection. 

We will call this operation "Add user to Newsletter list".

For the operation type choose "Create data".

For the collection, we are of course going to select "Newsletter List". 

In the Permissions field select the "From Trigger" option.

Now, all we have to do is set our payload, meaning we have to send values for the three fields that we created for our "Newsletter list" collection: `first_name`, `last_name`  and `email`.

We are going to get our data from the trigger again, so just add this simple bit of code in the "Payload" input box. 

```json
{
    "email": "{{$trigger.payload.email}}",
    "first_name": "{{$trigger.payload.first_name}}",
    "last_name": "{{$trigger.payload.last_name}}"
}
```

Click on the Checkmark to save the operation, and then once again to save the Flow. 

All that is left to do now is to test this Flow out. 

### Testing it out

Go to users, and create a new user. I will name the user John Doe.

Note that at the bottom of the page you will have the `newsletter` field, which should be enabled by default.

If it's not, enable it.

Save the user. 

Now go to Collections and select "Newsletter List" collection to see if this worked. 

And as you can see user John Doe has been added to our list. 

Great!

Now create another user.

We will call this one Jane Doe. But for this one disable the `newsletter` field. 

Save it, and go to collections one more time.

And as you can see we still only have John Doe in our Newsletter list. This means our Flow works since Jane didn't wanna sign up for our newsletter.

### Activity Log

Before we conclude this video I just wanna show you one more thing that can help you when debugging Flows.

You can always go to Settings -> Flows, and then select the Flow you wanna debug. 

Here on the right side of the screen, you will notice the "Logs" tab, if you click on it you will get some useful information about the Flow. 

Like Options and what is especially useful Payload of your trigger. So if something is not working you can always check the Logs to see what might have gone wrong.

Just note that this will only show up if you choose to track Activity & Logs when creating a flow. 

Also note that Logs are going to be stored in the database so it would be good, to clean them from time to time. 

Maybe you can even create a Flow that will do that automatically for you, wink, wink, nudge, nudge. 

In this video, we are going to create a Flow that will add a user to a newsletter list if they opt in for it.

Create a Newsletter List With Directus Flows

Flows are a huge concept and allow us to do large number of automation tasks. Because I can't cover everything in one video, we are going to focus on sending emails when something happens in our application.

Be sure to let me know down in the comments what other Flows you would like to see on this channel. 

### What are flows

Flows are a low code way of setting up automation tasks in Directus. They consist of triggers and operations.

Triggers are actions or events that are happening inside your Directus app like when something is created, when there is an incoming webhook, when the cron job has started and so on.

An operation is an action or process performed within the flow. These enable you to manage data: send off emails, push in-app notifications, send webhooks and more. 

In this video we are going to send an email to the admin, when new user is created

### Mailgun

First we need to setup our email provider - something to send our emails with. In Directus you can use your own SMTP server, sendmail or Mailgun.

For this video we are going to use Mailgun because it is the easiest to setup, and has a free tier. Of course for production websites you would either have to pay for Mailgun or use some other method, like sendmail which should be available on most Linux systems. 

First signup to Mailgun and login into their dashboard. Here you will see your sending domain. Click on it. And then select API. Here you can see your API key and your domain name, which we will need to setup in Directus. 

But first note that sandbox domains are restricted to authorised recipients only. So add your email address here. I will use the one from temp-mail.org.

You will now get an email to verify that address. Verify it. 

Now in the `.env` file of your Directus app add the API key, and Mailgun domain. That is the last part of the "API base URL" in your Mailgun dashboard.

Also be sure to comment out any other mail delivery options if they are enabled in the `.env` file.

Now we can run our Directus app, using `npx directus start` 

### Setup simple flow

Let's now create a flow that will send an email to us once the user has signed up. Or when we create a user. We will create our users through the dashboard, but this will also work when someone registers from the frontend of your app or website. 

Go to settings and click on Flows.

Click on Create Flow.

We are going to give it a name of "Send email".

Description can be "Send email when new user is created".

Ok, now click on the arrow, so we can set up our trigger.

Remember, every flow needs to have a trigger.

As you can see you have a lot of options here, like Event Hooks, Webhooks, CRON jobs and so on. We will choose Event Hook.

And then select "Action (non-blocking)".

For the Scope select `items.create` because we want our flow to trigger once the user is created. 

As you can see there are no users in this short list, so we have to click on "Show 14 more". And then click on Directus users.

Click the checkmark to confirm.

Ok, so now we have or trigger set up, be sure that it is set to be active. Inactive flows will not work.

Click on the plus symbol to create an operation for our flow. We will name our operation, "Mail send".

Directus has a number of available operations like: conditions, create data, delete data, trigger another flow and so on.

We will of course be using Send Email operation.

Fill the "To" field with the email that you verified in the Mailgun. And be sure to press Enter.

Subject is going to be "New user has been created". 

Set the type to be WYSIWYG.

And for the body we can add something like "User has been created" for now. A bit later we will make this a bit more dynamic. For now let's just test if this works. 

Click on the checkmark to confirm it. And then once more to save our flow.

Now let's go to the users and create a new user. 

Check your email. If you didn't get the email, try checking your spam folder. I will check my mail on temp-mail.org. 

Here we have our Email. Great, it works.

### Make it a bit more dynamic

Ok, now I want to make the email that we receive to have a bit more data about the user that was just created. 

Let's go to flows again. 

Click on our flow, click the pen icon so we can start editing, and then again on the Send Email operation. 

When creating flows we have access to the `triggers payload`. To access it we would write something like this in the Body of an email. 

"User `{{$trigger.payload}}` has been created."

Let's save this. And then also save our flow.

Now we will create another user to see what our email looks like now.

Go to users and create a new user.

Great now let's check our email. 

As you can see, here we get full payload object, that we can use inside of our emails. Of course we don't wanna send full object to the admin, but maybe just first and last name.

Let's go to the flows again and edit the Body of an email one more time.

Now instead of `{{$trigger.payload}}` we will write `{{$trigger.payload.first_name}}`  and we will add `{{$trigger.payload.last_name}}` 

Save everything and let's add another user to see if everything is working as it should. 

Let's check our email. 

Nice. Now it says "User Matt Smith has been created". 

### Conclusion

As you can see Flows are very powerful, and can enable you to do lots of cool stuff. We just created a very simple Flow, but flows can have multiple operations and even multiple flows that depend on one another.

Maybe we will cover that in another video, so be sure to let me know what kind of flows you would like to see on this channel in the comments below. 



Flows in Directus enable custom, event-driven data processing and task automation. In this video we are going to send an email to the admin, when new user is created.

Send Emails With Directus Flows

Although Astro just recently got its first stable release, there has been a lot of talk about it in the last year. It has gone from an empty repo to over 18,000 Github stars and 30,000 early users in the last 16 months, it has been deployed by companies like Google, Trivago, The Guardian and IKEA.

Obviously there is something good, if not great about Astro, so let’s check it out and see what all the fuss is about.

### What is Astro?

Astro is an all-in-one web framework for building fast, content-focused websites. 

This does not tells us much, so we will heave to dig deeper.

On the first glance Astro looks like a static site generator. And it technically is that, but it also has some features that makes it more than just a static site generator.

So let’s talk a bit about Astros key features to get a better understanding of what Astro does thats gotten it so much attention in the last few months.

### Astro Islands Architecture

Key feature of Astro is that it uses Islands Architecture aka Component Islands. 

Astro ships with ZERO JavaScript by default, making sites created in Astro super fast, because it means that it serves only static pages to the user, without any JS, which is well… the fastest way possible to serve a web page. 

Now, this is great if you are building fully static site… but chances are you are not. And your site is going to need some of that JavaScript goodness for user interactions.

That is where Islands architecture comes in, with Astro you can easily create Islands of interactivity inside of your mainly static web page. And Astro is going to ship just those small parts of JavaScript to the client, either on page load, or if it’s further down the page, you can set it to load that JavaScript when the interactive island or component is visible.

### Multiple frameworks

Another feature of Astro is that you can use pretty much any UI framework or library you like with it, for creating your components. 

You can even mix and match web frameworks if you are some kind of monster and have no regards for consistency… but you know, if that is your thing you can do it.

Astro officially supports React, Preact, Svelte, Vue, SolidJS, AlpineJS and Lit but you also have third party integrations for custom elements, Angular and even PHP.

### Multi-Page Application

Astro is a multipage application framework, which means that is similar to something like Ruby on Rails, Laravel or WordPress in the way it serves pages to the user. Those pages are usually rendered on the server. 

However, traditional MPA frameworks would have you write a different language on the server (Ruby, PHP, etc.) and JavaScript on the browser. In Astro, you’re always just writing JavaScript, HTML and CSS. That way, you can render your UI components (like React and Svelte) on both the server and the client.

The result is a developer experience that feels a lot like Next.js and other modern web frameworks, but with performance characteristics of a more traditional MPA site architecture.

You need to keep this in mind when choosing Astro as your framework of choice. 

Because if you are building something like an application dashboard with a lot of shared state between pages and user interactions and don’t care about the SEO then Astro will not be a good fit for this use case.

But it’s a great solution for traditional websites, that are content focused and depend on speed and great SEO, with some user interactions sprinkled in.

### SSR

Since Astro can communicate with the server, that means that you don’t have to just deploy static sites but you can use Astro as a server side rendering framework. You can do this using adapters, Astro supports Cloudflare, Deno, Netlify, Node.js and Vercel at the time of making this video, with more adapters to come later.

### Community and integrations

And let’s not forget that even though Astro is a relatively new project it already has a great community with over 5000 developers and over a one hundred integrations.

Ok, so now that we have a general idea of what Astro is, let’s install it and try to build something with it.

### Editors

To work with Astro it is best to use VS Code, by using official VS Code extension. But you also have community support for Nova Editor, Vim and Neovim.

Unfortunately at the time of making this video there is no real plugin for JetBrains IDEs like WebStorm or PHPStorm, which I’m using. However there is a workaround, that will at least give you code highlighting in JetBrains IDEs.

You can follow the instructions in this comment on JetBrains Issues page, the link will be in the description below.

[https://youtrack.jetbrains.com/issue/WEB-52015/Astro-Language-Support#focus=Comments-27-5745973.0-0](https://youtrack.jetbrains.com/issue/WEB-52015/Astro-Language-Support#focus=Comments-27-5745973.0-0)

### Project structure

Astros project structure is pretty basic, and if you used React, Vue, Next.js etc. this will all look very familiar to you.

There is a `public` folder for your images and other assets. `src` with `components` `layouts` and `pages`. These are all pretty self explanatory, especially if you used Next.js since Astro also has file based routing just like Next. So all of your routes are defined as files inside `pages` folder.

### Components

Main building blocks of Astro app are Astro components. And I don’t just mean components in the `components` folder, but every file that has an `.astro` extension is an Astro component. 

Component structure is a mix of JSX, HTML, Vue components, Markdown files with frontmatter, but it also somehow manages to be its own thing.

There is a lot of things that you need to be aware about these components. And it would take a whole video just to cover all the ins and outs of Astro components, because they seem really powerful.

I will cover only the basics here, and you can learn the rest from the docs, which shouldn’t be a problem since Astro docs are one of the best that I’ve seen in a while, and you really should read them if you plan to use this framework.

**Astro component is composed of three main parts:**

**JavaScript** part where you write your JS code, here you can import other components, components written in other frameworks, helper functions, you can write your own logic, define local variables, define props for your component and so on. So all your JavaScript goes here. This code is written inside code fences --- similar to frontmatter in Markdown files.

You need to keep in mind that Astro components render to HTML during build. Even if you run JavaScript code inside of your components, it will all run ahead of time, stripped from the final page that you send to your users. 

There are ways to run code AS IS, if you need it, but you can read abut that in the docs. 

**Component template** comes below the script part of component, you can write plain old HTML here. However Astro’s component template syntax also supports JavaScript expressions, imported components and special Astro directives.

You can use JSX like expressions here, like mapping over an array and displaying its values just like in React, but you need to keep in mind that although you can include dynamic values that are calculated in the script block, once included these values are not reactive and are not going to change. 

And finally you have <style> block in which you can write your styles. These styles are scoped to the component by default. However, keep in mind that the styles are going to apply only to the content of the components template, children and any imported components will not be styled by default. 
 
### Conclusion

Astro seems very interesting, but at least for now I would just use it for mostly static sites that need some interactivity. I would need to try Server Side Rendering, and see how that works in Astro to make a final conclusion. 

I also know that some people think that it’s problematic that Astro will fully load new pages when the links are clicked, like a traditional website, and it’s hard to share state between those full reloads. To me this is not a problem, because Astro is a content focused framework and it is not intended to be used like a Single Page Application. There are other tools for that if you need that sort of functionality. Although I’m sure that somebody will try to “fix” that problem sooner or later. 

Of course there are many more Astro concepts that I could cover, if you are interested in that let me know down in the comments.

Frontend Tips

In this video we are going to checkout Astro - all-in-one web framework for building fast, content-focused websites.

Let's Checkout... Astro

Viewer named Robert commented on one of the videos asking how to create a multilevel navigation in Directus 9 so that you can consume it through the API and that way create a navigation on the frontend. 

Unfortunately I wasn’t able to find a perfect no code way of doing this, so I don’t think that Robert will be very pleased with the result, since he already knows about this method. Sorry Robert.

However I think this is a good enough way to create multilevel navigation, it’s not perfect by any means, but it is good enough if your site or app does not heavily depend on multilevel navigations with a lot of levels. 

But if you need a way to allow users of your backend to create navigations, like Main navigation, Footer navigation, maybe navigation on a sidebar, with 2 or 3 levels - this way of doing things is going to be more than adequate. 

Let me show you how.

### Setup

For this demo I’m using Directus version 9.14.5, but I guess this method should work on any version that supports Repeater fields.

First of all I will create a collection called Menus.

This collection is going to have only two fields - one is going to be called title, so that we can name our menus and so that we can filter them by name on the frontend.

The other field is going to be a repeater field and that is where we are going to define our menu items. 

Let’s create repeater field, give it a name of `menu_items` 

Next let’s create two fields for the repeater - they are going to be called `label` and `url` and both are going to be just strings with input interface.

And by just doing this we created a system for single level navigation. 

However we want a multilevel navigation. So let’s create one more field, and this one is going to be of type JSON and with the repeater interface. We are going to call it  `submenu` and it is also going to consist of two fields called `label` and `url` .

And I think you can now see where I’m going with this. If you need three levels you would add one more repeater here and so on.

Of course if you need unlimited levels and you depend on that functionality, then maybe it’s best to try to find a code based solution for this problem. 

But from my experience two or three levels are going to be enough for at least 90% of cases. 

Ok, let’s save this and test it out.

### Create Menu

We go to Menus, create new add a title of “Main navigation”. 

And then on “Menu Items” you click “Create new” and start creating your menu items.

The first one is “Home” and it’s going to be only single level.

The second one is “About” and here we are going to add a few subitems. 

And let’s create one more, called “Contact” which is going to be single level item.

And that is it.

### API response

Let’s see how this is going to look when we try to get the menus from the API. 

First we go to “Roles and Permissions” . Click on “Public” and allow everyone to be able to see our navigations. 

Now go to `/items/menus`. And here we can see how this looks in JSON format that we can consume on our frontend.

One nice thing is that we can rearrange the menus in the backed, and that will reflect on our data. 

So now we have “Home”, “Contact” and “About”. 

You can do the same thing with submenu items.

Nice.

In this video I'm going to show you how to create multilevel navigation in Directus 9, without any code.

How To Create Multilevel Navigation In Directus 9 (NO CODE)

### What is AppWrite

[AppWrite](https://appwrite.io/) is an Open Source backend as a service platform, similar to Firebase and Supabase. What makes it different from those services is that it only has self-hosted version at the time of making this video, and the cloud version that you can pay for is coming soon.

Supabase also has a self-hosted version, but from what I understand it’s kind of a pain to setup. I didn’t try it so maybe take this with a grain of salt, and be sure to correct me in the comments. 

AppWrite on the other hand is super easy to setup locally using Docker, and that is not all, it also has one click install on Digital Ocean, which I’m going to show you in this video.

One more big difference when comparing it to Supabase is that AppWrite wraps around NoSQL database while Subabase is connected to Postgres database. So if you are choosing between these two, keep that in mind, because if you need a relational database, AppWrite is not going to be for you. 

At the time of making this video AppWrite is in version 0.14.2 but it has a great feature set comparable to Supabase. 

- It has a database
- It can handle your storage using Buckets
- It has users section which is actually authentication with more than twenty providers
- It has cloud functions out of the box with more than 15 runtimes
- It has a great set of SDKs for the most popular languages and platforms including Flutter, Android, iOS, Kotlin, Python, PHP and of course JavaScript which I’m going to show you in this video.
- SDK is super simple to use
- And you can also install one instance of AppWrite but have it run multiple projects

You would usually use AppWrite to create your own backend. Because, even if AppWrite looks like a CMS on the first glance, and you can add data to your Database from its admin area, it’s still miles away from something like Directus or WordPress which have a lot of components that can make editing actual content and data of your app enjoyable experience. 

AppWrite is just going to serve as a backend to your backend and it will allow you to easily read and write data, authenticate users and provide you with Cloud functions and storage system. But not much else. So keep that in mind… and you know… read the docs. 

In this video I’m going to show you how to setup AppWrite locally first, but for the demo we are actually going to be using Digital Oceans one click setup for AppWrite. 

I’m going to show you how to quickly get the data from the database, how to register and login users, and also how to create protected pages on your site which only authenticated users can access. 

This is going to be super simple using AppWrites JavaScript SDK. 

For the frontend I will of course be using Next.js. But you can use any framework you like.

### Local Install

To get started locally first install Docker Desktop on your machine if you don’t already have it. 

Once you have it installed, just copy the command from the modal you get when you click on “Get started” button on AppWrites site. 

Paste that command in your terminal, wait a bit, answer a few questions, and you are good to go. 

Visit `http://localhost` in your browser and you should be greeted with AppWrites account creation screen. 

### Digital Ocean install

However for this demo I’m going to be using Digital Oceans one-click install. If you wanna follow along with me, you can [sign up using my affiliate link and get $100 of credit for 60 days](https://m.do.co/c/808fb4bb0039), so you can play with AppWrite there or with any other technology you like, the link will be in the description bellow. 

And I think this is the easiest way to get started with AppWrite, but local setup is just fine if you wanna just test it out locally.

Once you sign up to Digital Ocean Account you can click on create button to create a droplet. 

Then go to Marketplace and search for Appwrite, click on it. Choose any droplet you like, but I suggest you don’t go for the cheapest one. I will choose the one for $12 per month with premium Intel chip.

After that you can choose region for your datacenter. Choose something closest to you. 

Since I’m in Croatia I will choose the one in Frankfurt.

I will choose SSH key as my authentication method, but you can choose root password if you don’t know how to use SSH or you don’t wanna bother with it. 

Change hostname to something like AppWrite and then click Create Droplet. 

Now we wait for a minute or two for our droplet to be created.

Once this is done you will see AppWrite logo and “Get started” text, click on that. And then on “Quick access to AppWrite”. 

If you get “Site can’t be reached” error, don’t worry. Wait for a few more minutes and try to refresh the page. This is because AppWrite needs a few minutes to get set up on your Droplet.

When you refresh the page after a few minutes you should be greeted with the Sign Up page, on which you can create your admin user.

Add your data and click Sign Up. And that is it, we are ready to start creating our app. 

### Create simple project

First of all let’s change the theme. 

Ok, better.

Now let’s create our first project. Name your project however you want, I will call mine “Movie Database”. 

On this page you can see all the features that AppWrite comes with. Database, Storage, Users and Functions.

Users also contain authentication methods you can use with AppWrite. We are going to authenticate with user name and password in this video.

Let’s go to the database and create our first Collection. I will name mine “Movies”. 

On this page you can set read and write permissions either on “Collection level” or if you wan’t more granular control on “Document level”. 

I’m going to set Read Access to be `role:all` so that every one can read our documents. 

Documents are items in your database and they are made up of Attributes. If you now go to documents, you will actually see “Create Attribute” instead of “Create Document” button. Because you need at least one attribute for your Documents.

So let’s create some. There are a few attribute types, String, Integer, Boolean and so on. All the usual suspects.

Let’s add a String attribute, and give it and ID of title, the size is going to be 100. Now click “Create” button.

Now I will add one more, this time of type integer. And I’m going to call this one “year”. So our movies are going to have a title and a year. 

We have two Attributes now, so that means that we can create a few Documents. 

So the title of my Document will be “Big Lebowski” and the year is going to be 1998. Note that under permissions you can add read and write access, for that specific document. So that is cool. 

Let’s add a few more Movies, or you know… Documents.

Ok, so now we got our first project set up, now we just need to click on “Home” link and then click “Add Platform” so that we can use AppWrite SDK in our Next.js app. Click “Add Platform” and choose “New web app”. 

For the name we can just write “Movie Database” again. For host name you actually need to add URL to your site that is going to be using AppWrites API. 

We are just going to add a wildcard for now, so that we can access it from anywhere, including our localhost. 

In production of course you wanna restrict access so that only your web app can use it. 

And with that we are done with our demo setup, of AppWrite. Let’s now quickly create a simple web app that that will get our Movies (or Documents) and allow us to authenticate our users.

### Next.js setup

I’m using Next.js for this demo with only Tailwind installed. To create the same setup you can just install Next with `yarn create next-app name-of-your-project` and then follow simple instructions on Tailwind page. 

If you want to automatically install Next and Tailwind together with just one line you can run `yarn create next-app --example with-tailwindcss name-of-your-project` but be aware that this is going to install Next.js with TypeScript support. So if you don’t want to use TypeScript go with the first example.

### Install AppWrite SDK

To install AppWrite SDK for web just run `yarn add appwrite` in the root of your app. 

But we are also going to add `uuid` package, because we are going to need it later on.

Nice. 

Now let’s just add `.env.local` to the root of our project and add ENDPOINT, PROJECT_ID and COLLECTION_ID. 

ENDPOINT is the url of your site plus `/v1` .

You can find PROJECT_ID by going Home and then clicking Settings. Here you can copy your Project ID.

For the COLLECTION_ID go to the Database click on Movies and then Settings. 

You can copy the Collection ID from here. 

Now just copy and paste all those variables and prefix them with `NEXT_PUBLIC_` so that we have access to them in the browser. 

And that is it. We can start developing. 

### Getting the Documents (Movies)

In `index.jsx` import `Appwrite` so that we can use the SDK.

And after that we are going to get our Movies in `getServerSideProps` , so on the server-side. But you can also do it the same way on client side. There is no need for `fetch` , `axios` and so on. SDK is going to handle all of that for us.

First we new up `Appwrite` and just call it `sdk` .

Then we define our end point and project from the data that we saved in `.env.local` . We are going to use these two lines before everything we do with AppWrite SDK. 

For the purposes of this demo I’m going to always add them, but for the project in production it would make more sense to create a React hook for that or some function that you can reuse. 

Then we wanna list documents from our Collection. And as you can see, AppWrite SDK is very simple and intuitive, you just say `listDocuments` and pass in the collection you want to list the documents from, and then wait for the response.

If we get the response we return it, otherwise we return an error. 

We await for the response to resolve, and pass it to the props of our component. 

Now we just pass `movies` prop to our component, and then we can map over it and display the title and the year of the movie. I also added a `Link` component that is going to link our movie to the URL of `/movies/id-of-the-movie` which is going to show detailed view for all of our movies.

And that is it. If we take a look at our homepage, we should see a list of movies. 

Nice.

### Getting a single document (Movie)

To link our movie to the movie details page, we first create `movies` folder under pages and in it I will create `[id].jsx` file since we are going to get our movie by ID. 

In `getServerSideProps` we are going to pass in `ctx` or context. And then we are going to use that context to get the `id` of the movie that we wanna show.

After that we just initialise AppWrite SDK like we did on the index page.

To get the document, it’s very simple, you can just use `getDocument` method, pass in Collection ID from `.env.local` and the `id` of the movie that we got from context. 

Now we just wait for the response, and then send it to our `props` property.

We receive that property in our component through props, and then just add the `movie.title` to the `<title>` tag in `Head` component, and also display the title of the movie on the page. 

And below it, we can display the year in a `` tag.

Now on our Homepage when we click the movie, we should go to the URL `/movies/id-of-the-movie` and we should see the title and the year of that movie. 

Details page of the movie… Done!

### Register users

To register users first we need to create `register.jsx` page. Import `Appwrite` of course, and also import `uuid` because we are going to need that to generate and ID for the user. 

On this page we also have a simple form with an e-mail and password fields, and of course a button for submitting the form. At the bottom we are going to display the errors if we get any.

Nice thing about AppWrite is that it has server-side validation that you can use on your frontend. I will show you how in a few moments. 

And don’t worry, all of this code is going to be available for you on Github, the link will be in the description below. 

And of course our form has a submit method that is going to call `handleSubmit` method when the user clicks the button. 

Now let’s create a state for handling our errors.

After that we are of course going to initialise AppWrite SDK. 

Now just create `handleSubmit` method. In it we first `preventDefault` of course, so that our page doesn’t reload.

And then we just use SDK method `account.create` and in it pass in the ID generated by UUID, email and password from our form. 

Then we just console log the `response` but if we get an error we wanna `setError` with the method from `useState` hook. 

That error is going to be displayed below the form. 

And that is it, let’s test it out. 

Go to the `/register` route and try to write some random string in the e-mail field.

You will get “Invalid email: Value must be a valid email address” error. 

Ok now add an email address like “john@doe.com” but add just three characters for the password. Now you will get “Invalid password: Password must be at least 8 characters” . 

So as you can see validation works.

Let’s now add a password that is at least 8 characters long and click “Sign Up”.

Nothing will happen, since we didn’t code anything to happen. But if we go to our admin area under users, we should see our new user. 

Click on the user and add a name for it, since we didn’t send the Name in our request, and then click Update. 

We registered our first user, now we can create a Login page.

### Login users

To login users we pretty much do the same thing like we did when registering users.

Create `login.jsx` page, in it we have almost the same setup with the form, handeling submit and we are using `useState` to display errors. And I’m also going to initialise Next router so that we can send the user to the User Area if the login is successful. 

In `handleSubmit` we need to use `account.createSession` method to which we will send an e-mail and password from the form. 

And this is going to create a session for our user.

Now if we get the response with the `userId` we wanna push the user to the user area page. Otherwise, we wanna set the error and display it, just like we did on the register page. 

Let’s test this out.

Try to login with invalid credentials, and you will get “Invalid credentials” error.

But if you use the right credentials of the user we just created, we should be redirected to the user area page. Of course this is going to produce an error, because there is no `/user-area` page yet.

Let’s create one now. 

### User area

First of course let’s create `user-area.jsx` inside our `pages` folder.

In it I will just add the text that is going to say Hello, and the name of the user.

Then I’ll just add a simple "This is an authenticated page.” paragraph. 

And bellow that I will add a logout button, that is going to trigger `logout` method once somebody clicks on it.

Ok, now we need to add some logic to make all of this work.

I’m going to set two states - first is going to be `user` , in it we will set the users data, so that we can display it and after that I will set `isAuthenticated` state, so that we can check if the user is authenticated.

Also we wanna initialise Next router so that we can redirect users that are not authenticated. 

After that we initialise `Appwrite` of course, like in all the previous examples.

Now I want to get the session for the current user, and wait for the response. If we get `current` property in the response, then we wanna set authenticated to true. 

But if we get `error.code` with the code of `401` which is the code for unauthorised request, we are going to push the user to the login page. 

After that we are going to use `useEffect` which is going to depend on the `isAuthenticated` state, and when that state changes we are going to to try to get the account details for the current user, with `account.get()` method. 

We don’t need to send anything to that method because AppWrite SDK is going to try to get the data for the user from the session we created when logging in. 

Now we wait for the response, and if we get it we set `user` state to be that response. 

And we can just console log out any errors we get. 

In the `logout` method we use `account.deleteSessions()` method to delete all users sessions. 

And then we just push the user to the homepage if the request was successful, otherwise we console log any errors we may get.

Lastly we are checking if the user is not authenticated, and returning blank page if that is the case. 

We do this because otherwise we would get flash of the page that the user is not supposed to see if they are not authenticated until all the other logic is run, which is just a fraction of the second, but it is visible. 

This should be it. Let’s test this out.

Now when you login with correct credentials, you should be redirected to the `/user-area` page which we now have. 

You can see the name of the user after Hello text. And if you click “Logout” button you should be redirected to the Homepage. 

And now if you try to manually go to the User Area page, you will be automatically redirected to the Login page. 

And there you have it. In a few minutes we displayed our documents and built a simple authentication system. 

### Conclusion

Of course AppWrite offers much more functionality than what I showed in the last few minutes. 

žWe haven’t even touched Cloud Functions, Storage and Webhooks. For that you will need to check out AppWrites documentation, which is always a nice thing to do. 

But, as you could see AppWrites SDK is very simple and straight to the point, so implementing more complex functionality to your app or website should not be much of a challenge.

AppWrite is a secure open source backend server for Web, Mobile and Flutter developers. And we are gonna check it out in this video.

Let's Checkout... AppWrite

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.

Video Tutorials For Curious Frontend Developers

Latest tutorials

Directus 9Create a Newsletter List With Directus Flows

Directus 9Send Emails With Directus Flows

Frontend TipsLet's Checkout... Astro

Directus 9How To Create Multilevel Navigation In Directus 9 (NO CODE)

Frontend TipsLet's Checkout... AppWrite

Directus 9 + NextProtect Signup Form From Hackers

Latest Courses

Directus 9

Directus 9 + Next

Making Websites With Next.js And Strapi

React 2020

Get in touch