You probably know Redis as an ultrafast in-memory database, but can it also be used as your primary app database? This tutorial will teach you how to build a fullstack app from scratch with Redis and Next.js capable of performing fulltext instant search. 

🤯 Get $200 and a chance to win a Tesla https://redis.info/fireship200

#database #tutorial #programming

🔗 Resources

Redis OM (NodeJS) - https://redis.info/3F9yqI5
Redis Insight - https://redis.info/3teM5LD
Redis Launchpad - https://redis.info/3HS9g2B
Redis Developer Hub  - https://redis.info/3qg14mY
Full Tutorial - https://fireship.io/lessons/redis-nextjs/

📚 Chapters

00:00 What is Redis?
00:49 App tour
01:33 How to Install Redis Cloud
02:49 Redis Crash Course
04:10 Next.js Setup
05:32 Schema & Entity
06:41 CRUD Operations
09:14 Fulltext Search

🔥 Get More Content - Upgrade to PRO

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

🎨 My Editor Settings

- Atom One Dark 
- vscode-icons
- Fira Code Font

🔖 Topics Covered

- Redis as a Primary Database
- Use Redis with React or Next.js
- How Redis Modules work
- RedisSearch with RedisJSON
- Next.js API routes
- Handling Forms with React
2024-02-04T13:49:10.287Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
315df702-7cf5-4269-8d93-44b3ac2178ad
6344c798b37e9a24d9531d14ec25aa6527b2f7ada6fbf53704e2aaa9f48ec693
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Most developers already know that Redis is a mega fast in memory database often used as a cache to make traditional database as faster.
But what most developers don't know is that Redis can also be used as a primary app database, thanks to a suite of modules that add additional data structures and commands to core Redis.
They can handle JSON data, full text search, graph relationships, and many other features.
In today's video will put this claim to the test by building a full text autocomplete search inspired by something like Algolia or Elasticsearch search where the user can add items to the database and instantly view the filtered results.
We'll build this project from scratch using Next.
Js, allowing us to use React on the front end and Node.
Js to interact with Redis on the back end.
As an added bonus, Redis just released a brand new SDK called Redis Ohm that supports object mapping in Node.
Js.
If you're new here, like and subscribe and you can follow along with the full article on Fireship IO.
Let's first take a look at what we're building today.
We have a form that when submitted will add a new item to the database.
In Redis, this data would normally be saved as a hash data structure, but a hash doesn't support nested objects.
So instead, we'll be storing this data as native JSON thanks to the redisJSON module.
Now, after adding a few items to the database, we may want to retrieve them later.
When I type into the search form field, you can see that it automatically updates the results in the UI after every keystroke.
That's made possible able by Redisearch, which is an incredibly powerful module that can index all of the fields on your JSON dataset.
At which point, you can perform complex queries like you would with the where clause in SQL and aggregations like sum and count.
Now we're ready to start building.
There are a few different ways you can get started with Redis.
The easiest option is to sign up for Redis cloud.
I collaborated with Redis Enterprise Cloud to make this video, and they're providing a $200 credit and also a chance to win a Tesla Model 3 if you use this code before January 31st.
So that's pretty awesome, but more importantly, Redis is consistently the most loved database out there.
I've used it myself for many years and that's why I cited to work with them on this video.
After you sign in, you'll be prompted to create a new subscription.
Go ahead and do that, and you can choose a free fix plan to play around.
Once that's done, create a database and when creating it, make sure to add the add on modules of redis search and redisJSON.
And you now have your own a database that can scale infinitely in the cloud.
To connect to it, you'll notice this public endpoint URL, as well as a password for the default user.
Now the question becomes, on how do we connect to our database?
This is optional, but the first thing I would recommend doing is downloading the Redis Insight tool, which gives you a GUI to analyze and manage data in the database.
Once installed, click the option to add a new database and then paste in the public URL that that is cloud provided you with.
Then also enter the username of default and the password it generated, and then it should automatically connect to your database.
The cool thing about Redis is that it's really easy to learn because everything is organized into a set of key value pairs.
Here's a little crash course of the Redis basics.
To add a new item to the database, base, you create a new key.
Every key is unique and is used to identify a value in the database.
A key can also have a data type.
In this case, we'll use a string, But there are more complex data types like a hash for objects of multiple key value pairs, lists, and as we'll see later, JSON data.
For now, let's go ahead and save a string with a key of hello and a value of world.
It also gives you the option to specify a TTL or time to live, after which point that data will be automatically deleted if you want.
Leave it blank to keep the data forever.
Now the unique thing about Redis is that when you save data, that data is kept in memory as opposed to the disk like it would be on most other traditional database systems.
What that means is that Redis is extremely fast.
There's no need for a round trip to the disk when retrieving data.
But on Redis Cloud, this data is also persisted, which means there's never any actual data loss.
Now to make a read to the database, Let's go over to the workbench panel, and you'll notice a terminal here where we can write commands.
Redis has a bunch of built in commands that allow allow us to do different things in the database.
For example, what we just did previously was a set.
With a command, it would look like set followed by hello world.
Now to read the string, we can use the get command followed by the key name of hello.
Now there are tons of other commands we could execute here to interact with our data, but that's enough to give you general idea.
Now we're ready to build something cool.
And in order to do that, we'll want to first initialize Next.
Js.
From the command line, run npx create next app, then open it up in Versus Code.
The project has only one dependency, redisom, which you can install with npm.
This library brand new, so keep in mind that there may be changes or enhancements in the near future.
What it does is map your data into a JavaScript class or entity, making it really easy to build a consistent schema around your data.
And it simplifies many of the create, read, update, and delete operations that you'll want to do on the database.
1st, we'll need to connect to our cloud database.
And for that, I'm creating a file called dotenv.local that contains environment variables that will automatically be picked up by Next.
Js.
Inside of it, we have a value of redisurl, which is formatted with the username and password along with the URL and port of the actual database.
Replace these values with the ones provided by Redis Cloud.
Now from there, let's create a lib directory and a file named redis.js.
Inside the file, we have a few imports from redis ohm.
The first one we want to think about is the client.
That's the main entry point for interacting with the database.
To connect to our database in the cloud, we call client open followed by process dotenv e dot redisurl.
That will access the environment variable that we set up earlier.
Now because of the way Next.
Js works, I'm also going to create an async function called connect that will only open the connection if it's not already open.
Then the next thing we'll do is define an entity for our data.
An entity is basically like a database table.
We first define a class, like car, and extend it with entity.
From there, we can give it a schema that contains a variety of different properties, each with its own specific data type.
By default, this represents a hash in the Redis database.
However, when building a more traditional application, you might find it easier to work with JSON.
To use the redisJSON module, simply add the option of data structure JSON and now redis will operate more like a document oriented database.
Now that we have this entity, we're ready to start creating data.
To handle the basic process, I'm going to export an async function here called create car, and then the first thing it does in the body is connect to the database client.
From there, we create a repository by combining the schema and the client together.
If we want to create new data, we can use the create entity method with a JavaScript object, which later we'll get from a form input in the UI.
And lastly, we can call repository save with the car data, to commit it to the database, and Redis will return an automatically generated unique ID.
The key is car colon unique ID, then the value is JSON data with the schema that you defined.
Now the question becomes, how do we run this function?
For that, we'll need 2 things.
We need an API route, which will give a name of cars dotjs to handle the write operation on the back end.
Then we'll need a React component, which I'll give a name of carform.js in the lib directory that that will handle the user input and make a request to that API route.
Let's first implement the API route.
We first import the create car function we just defined, then every API route in Next, exports a default function named handler, which contains a request and response, where the request is the incoming data and the response is the the outgoing data you want to send back to the client.
In this case, we'll want to use the request body, which will be JSON data from the form, to create a new car.
Once Redis is done writing that data, we can then send a response back to the client, letting them know it was successful with the new unique ID.
Now that We have an API endpoint.
We want to call it from the front end when a form is submitted.
In carform.js, I have a React component, and And in the JSX, we have a standard HTML form with a few different text inputs.
It also has a submit button, and we will intercept the submit event by passing a function to the form called handleSubmit.
In the handleSubmit function, we'll first call event preventDefault to prevent the page from refreshing on submit.
And then here's a cool trick when handling form data in a React component.
Normally, to convert the form event to JSON, you would have to access each individual property, which leads to some really ugly and tedious code.
A better approach is to convert the event target, which is the HTML form, to the formData class, which is built into the browser.
That will organize the form fields into a bunch of key value pairs, which we can then turn into a plain JavaScript object by using object from entries.
Now it's important to point out that the name that you provide to the form input determines the name of the key.
So you'll wanna make sure that that name matches the schema that you chose for your Redis data.
Now, the final step is to make a request to the API endpoint, which we can do by using the fetch API in the browser.
And for the body, we pass it the JSON stringified form data.
You'll want to make sure the content type is JSON, and the method is post.
From there, we can send the request, convert it to JSON, and then console log the result.
And now, there's just one thing left to do.
Let's Let's go into the index.
Js file and declare the car form there.
And now, we can fire up the Next.
Js app by running npm run dev.
In the UI, you should have a form that looks like this.
Mine looks a little prettier because I've added Bootstrap for styling, and when you fill it out and submit it, it should console log the ID that was created by Redis.
In addition, you should be able to open up Redis Insight to see the data there as well.
At this point, we have a very basic full stack application with Redis.
Now you might be wondering, how do I query and filter this data to show it on the front end?
That's where Redis search comes in.
It's a very powerful module that allows you to index and search across across your dataset.
To use it though, we first need to create an index.
And to do that, I'm going to go back into the redis.js file and create a new function called create index.
All this function needs to do is reference the repository and call the create index method.
Now before we use this function, another thing I want to point out is that we can go up into our schema and add a text search true option to any fields that want to enable full text search.
What this allows us to do is query this data with fuzzy matching where it can recognize typos and common words, yet still return the intended result.
Let's go ahead and add the full text option to the description.
Action.
Now creating the index is only something you need to do once.
For convenience, I'm going to add another API route here called create index text that imports that function and then sends a response back.
Once defined, we can then go to the browser and access the URL API create index to add the index to the database.
Now that we have an index, let's go back to the redis dotjs file and create a function to search for cars in the database.
This function will take a query as its input, which will be whatever the user types into the form.
And then it calls the repository search method, which has all kinds of different capabilities like pagination, It can retrieve the first and last items, it can get a count of the total items in the database, and also perform logical comparisons like greater than, less than, and so on.
The first method to call is where, which references one of the properties in the JSON data.
In this case, we can search the make of the car for exact equality with the EQ method and pass it the query as an argument.
If we also want to search the model of the car at the same time, we can chain or model and also check app for equality.
Now when it comes to the description, we don't want exact equality, but instead we want to check the matches within a full text search context.
That tells it to return results even if there typos and things like that.
And finally, we tell it to return all the results from that query.
That takes care of the search logic.
Now, once again, we need an API route, which we can easily set up by adding a search dotjs file, inside of which we export a handler.
It'll grab the search query from the URL, call the searchCars method, and then return the response, which will be an array of cars, back to the client.
And now, the last thing we need is a form on the front end to make calls to the search endpoint.
I'm creating a new file called searchform.js, which is a React component, and in the JSX, we have an input that triggers a search function whenever where it is changed.
So that'll fire whenever the user types into the form.
Now, this component will also need to have state to represent the hits or results that we get back from the search engine.
We can define that state with the use state hook and initialize it as an empty array.
In the search function, we will first grab the current value of the form and then format it as a URL parameter.
The API route is expecting it in that format to pass the value along to Redis.
Now you'll also notice that I'm only going to execute this code if the query length is greater than 2.
That's just to prevent excessive API calls to the database or API route.
It would also be a good data to debounce this code because currently it will make an API call for every keystroke, and that's probably more API calls than you actually need for something like this.
From there, we can use the fetch API to make a request to the search endpoint along with the parameters.
The result we get back will be an array of cars that we can set as the state on this component.
Now let's display the card data by setting up an unordered list, then map each individual hit to a list item.
I'm using the entity ID as the key, and then displaying ever data I want to show in the UI, like the make and model and image of the car.
Congratulations.
You just built a full stack, full text search feature with Redis and Next.
Js.
I'm gonna go ahead and wrap things up there.
If you wanna see more Redis or Next.
Js content, let me know in the comments.
Thanks for watching, and and I will see you in the next one.

Speaker 0: Most developers already know that Redis is a mega fast in memory database often used as a cache to make traditional database as faster. But what most developers don't know is that Redis can also be used as a primary app database, thanks to a suite of modules that add additional data structures and commands to core Redis. They can handle JSON data, full text search, graph relationships, and many other features. In today's video will put this claim to the test by building a full text autocomplete search inspired by something like Algolia or Elasticsearch search where the user can add items to the database and instantly view the filtered results. We'll build this project from scratch using Next.

Js, allowing us to use React on the front end and Node. Js to interact with Redis on the back end. As an added bonus, Redis just released a brand new SDK called Redis Ohm that supports object mapping in Node. Js. If you're new here, like and subscribe and you can follow along with the full article on Fireship IO.

Let's first take a look at what we're building today. We have a form that when submitted will add a new item to the database. In Redis, this data would normally be saved as a hash data structure, but a hash doesn't support nested objects. So instead, we'll be storing this data as native JSON thanks to the redisJSON module. Now, after adding a few items to the database, we may want to retrieve them later.

When I type into the search form field, you can see that it automatically updates the results in the UI after every keystroke. That's made possible able by Redisearch, which is an incredibly powerful module that can index all of the fields on your JSON dataset. At which point, you can perform complex queries like you would with the where clause in SQL and aggregations like sum and count. Now we're ready to start building. There are a few different ways you can get started with Redis.

The easiest option is to sign up for Redis cloud. I collaborated with Redis Enterprise Cloud to make this video, and they're providing a $200 credit and also a chance to win a Tesla Model 3 if you use this code before January 31st. So that's pretty awesome, but more importantly, Redis is consistently the most loved database out there. I've used it myself for many years and that's why I cited to work with them on this video. After you sign in, you'll be prompted to create a new subscription.

Go ahead and do that, and you can choose a free fix plan to play around. Once that's done, create a database and when creating it, make sure to add the add on modules of redis search and redisJSON. And you now have your own a database that can scale infinitely in the cloud. To connect to it, you'll notice this public endpoint URL, as well as a password for the default user. Now the question becomes, on how do we connect to our database?

This is optional, but the first thing I would recommend doing is downloading the Redis Insight tool, which gives you a GUI to analyze and manage data in the database. Once installed, click the option to add a new database and then paste in the public URL that that is cloud provided you with. Then also enter the username of default and the password it generated, and then it should automatically connect to your database. The cool thing about Redis is that it's really easy to learn because everything is organized into a set of key value pairs. Here's a little crash course of the Redis basics.

To add a new item to the database, base, you create a new key. Every key is unique and is used to identify a value in the database. A key can also have a data type. In this case, we'll use a string, But there are more complex data types like a hash for objects of multiple key value pairs, lists, and as we'll see later, JSON data. For now, let's go ahead and save a string with a key of hello and a value of world.

It also gives you the option to specify a TTL or time to live, after which point that data will be automatically deleted if you want. Leave it blank to keep the data forever. Now the unique thing about Redis is that when you save data, that data is kept in memory as opposed to the disk like it would be on most other traditional database systems. What that means is that Redis is extremely fast. There's no need for a round trip to the disk when retrieving data.

But on Redis Cloud, this data is also persisted, which means there's never any actual data loss. Now to make a read to the database, Let's go over to the workbench panel, and you'll notice a terminal here where we can write commands. Redis has a bunch of built in commands that allow allow us to do different things in the database. For example, what we just did previously was a set. With a command, it would look like set followed by hello world.

Now to read the string, we can use the get command followed by the key name of hello. Now there are tons of other commands we could execute here to interact with our data, but that's enough to give you general idea. Now we're ready to build something cool. And in order to do that, we'll want to first initialize Next. Js.

From the command line, run npx create next app, then open it up in Versus Code. The project has only one dependency, redisom, which you can install with npm. This library brand new, so keep in mind that there may be changes or enhancements in the near future. What it does is map your data into a JavaScript class or entity, making it really easy to build a consistent schema around your data. And it simplifies many of the create, read, update, and delete operations that you'll want to do on the database.

1st, we'll need to connect to our cloud database. And for that, I'm creating a file called dotenv.local that contains environment variables that will automatically be picked up by Next. Js. Inside of it, we have a value of redisurl, which is formatted with the username and password along with the URL and port of the actual database. Replace these values with the ones provided by Redis Cloud.

Now from there, let's create a lib directory and a file named redis.js. Inside the file, we have a few imports from redis ohm. The first one we want to think about is the client. That's the main entry point for interacting with the database. To connect to our database in the cloud, we call client open followed by process dotenv e dot redisurl.

That will access the environment variable that we set up earlier. Now because of the way Next. Js works, I'm also going to create an async function called connect that will only open the connection if it's not already open. Then the next thing we'll do is define an entity for our data. An entity is basically like a database table.

We first define a class, like car, and extend it with entity. From there, we can give it a schema that contains a variety of different properties, each with its own specific data type. By default, this represents a hash in the Redis database. However, when building a more traditional application, you might find it easier to work with JSON. To use the redisJSON module, simply add the option of data structure JSON and now redis will operate more like a document oriented database.

Now that we have this entity, we're ready to start creating data. To handle the basic process, I'm going to export an async function here called create car, and then the first thing it does in the body is connect to the database client. From there, we create a repository by combining the schema and the client together. If we want to create new data, we can use the create entity method with a JavaScript object, which later we'll get from a form input in the UI. And lastly, we can call repository save with the car data, to commit it to the database, and Redis will return an automatically generated unique ID.

The key is car colon unique ID, then the value is JSON data with the schema that you defined. Now the question becomes, how do we run this function? For that, we'll need 2 things. We need an API route, which will give a name of cars dotjs to handle the write operation on the back end. Then we'll need a React component, which I'll give a name of carform.js in the lib directory that that will handle the user input and make a request to that API route.

Let's first implement the API route. We first import the create car function we just defined, then every API route in Next, exports a default function named handler, which contains a request and response, where the request is the incoming data and the response is the the outgoing data you want to send back to the client. In this case, we'll want to use the request body, which will be JSON data from the form, to create a new car. Once Redis is done writing that data, we can then send a response back to the client, letting them know it was successful with the new unique ID. Now that We have an API endpoint.

We want to call it from the front end when a form is submitted. In carform.js, I have a React component, and And in the JSX, we have a standard HTML form with a few different text inputs. It also has a submit button, and we will intercept the submit event by passing a function to the form called handleSubmit. In the handleSubmit function, we'll first call event preventDefault to prevent the page from refreshing on submit. And then here's a cool trick when handling form data in a React component.

Normally, to convert the form event to JSON, you would have to access each individual property, which leads to some really ugly and tedious code. A better approach is to convert the event target, which is the HTML form, to the formData class, which is built into the browser. That will organize the form fields into a bunch of key value pairs, which we can then turn into a plain JavaScript object by using object from entries. Now it's important to point out that the name that you provide to the form input determines the name of the key. So you'll wanna make sure that that name matches the schema that you chose for your Redis data.

Now, the final step is to make a request to the API endpoint, which we can do by using the fetch API in the browser. And for the body, we pass it the JSON stringified form data. You'll want to make sure the content type is JSON, and the method is post. From there, we can send the request, convert it to JSON, and then console log the result. And now, there's just one thing left to do.

Let's Let's go into the index. Js file and declare the car form there. And now, we can fire up the Next. Js app by running npm run dev. In the UI, you should have a form that looks like this.

Mine looks a little prettier because I've added Bootstrap for styling, and when you fill it out and submit it, it should console log the ID that was created by Redis. In addition, you should be able to open up Redis Insight to see the data there as well. At this point, we have a very basic full stack application with Redis. Now you might be wondering, how do I query and filter this data to show it on the front end? That's where Redis search comes in.

It's a very powerful module that allows you to index and search across across your dataset. To use it though, we first need to create an index. And to do that, I'm going to go back into the redis.js file and create a new function called create index. All this function needs to do is reference the repository and call the create index method. Now before we use this function, another thing I want to point out is that we can go up into our schema and add a text search true option to any fields that want to enable full text search.

What this allows us to do is query this data with fuzzy matching where it can recognize typos and common words, yet still return the intended result. Let's go ahead and add the full text option to the description. Action. Now creating the index is only something you need to do once. For convenience, I'm going to add another API route here called create index text that imports that function and then sends a response back.

Once defined, we can then go to the browser and access the URL API create index to add the index to the database. Now that we have an index, let's go back to the redis dotjs file and create a function to search for cars in the database. This function will take a query as its input, which will be whatever the user types into the form. And then it calls the repository search method, which has all kinds of different capabilities like pagination, It can retrieve the first and last items, it can get a count of the total items in the database, and also perform logical comparisons like greater than, less than, and so on. The first method to call is where, which references one of the properties in the JSON data.

In this case, we can search the make of the car for exact equality with the EQ method and pass it the query as an argument. If we also want to search the model of the car at the same time, we can chain or model and also check app for equality. Now when it comes to the description, we don't want exact equality, but instead we want to check the matches within a full text search context. That tells it to return results even if there typos and things like that. And finally, we tell it to return all the results from that query.

That takes care of the search logic. Now, once again, we need an API route, which we can easily set up by adding a search dotjs file, inside of which we export a handler. It'll grab the search query from the URL, call the searchCars method, and then return the response, which will be an array of cars, back to the client. And now, the last thing we need is a form on the front end to make calls to the search endpoint. I'm creating a new file called searchform.js, which is a React component, and in the JSX, we have an input that triggers a search function whenever where it is changed.

So that'll fire whenever the user types into the form. Now, this component will also need to have state to represent the hits or results that we get back from the search engine. We can define that state with the use state hook and initialize it as an empty array. In the search function, we will first grab the current value of the form and then format it as a URL parameter. The API route is expecting it in that format to pass the value along to Redis.

Now you'll also notice that I'm only going to execute this code if the query length is greater than 2. That's just to prevent excessive API calls to the database or API route. It would also be a good data to debounce this code because currently it will make an API call for every keystroke, and that's probably more API calls than you actually need for something like this. From there, we can use the fetch API to make a request to the search endpoint along with the parameters. The result we get back will be an array of cars that we can set as the state on this component.

Now let's display the card data by setting up an unordered list, then map each individual hit to a list item. I'm using the entity ID as the key, and then displaying ever data I want to show in the UI, like the make and model and image of the car. Congratulations. You just built a full stack, full text search feature with Redis and Next. Js.

I'm gonna go ahead and wrap things up there. If you wanna see more Redis or Next. Js content, let me know in the comments. Thanks for watching, and and I will see you in the next one.
Most developers already know that Redis is a mega fast in memory database often used as a cache to make traditional database as faster. But what most developers don't know is that Redis can also be used as a primary app database, thanks to a suite of modules that add additional data structures and commands to core Redis. They can handle JSON data, full text search, graph relationships, and many other features. In today's video will put this claim to the test by building a full text autocomplete search inspired by something like Algolia or Elasticsearch search where the user can add items to the database and instantly view the filtered results. We'll build this project from scratch using Next. Js, allowing us to use React on the front end and Node. Js to interact with Redis on the back end. As an added bonus, Redis just released a brand new SDK called Redis Ohm that supports object mapping in Node. Js. If you're new here, like and subscribe and you can follow along with the full article on Fireship IO.
Let's first take a look at what we're building today. We have a form that when submitted will add a new item to the database. In Redis, this data would normally be saved as a hash data structure, but a hash doesn't support nested objects. So instead, we'll be storing this data as native JSON thanks to the redisJSON module.
data
databases
Now, after adding a few items to the database, we may want to retrieve them later. When I type into the search form field, you can see that it automatically updates the results in the UI after every keystroke. That's made possible able by Redisearch, which is an incredibly powerful module that can index all of the fields on your JSON dataset. At which point, you can perform complex queries like you would with the where clause in SQL and aggregations like sum and count. Now we're ready to start building.
databases
mining
data
There are a few different ways you can get started with Redis. The easiest option is to sign up for Redis cloud. I collaborated with Redis Enterprise Cloud to make this video, and they're providing a $200 credit and also a chance to win a Tesla Model 3 if you use this code before January 31st. So that's pretty awesome, but more importantly, Redis is consistently the most loved database out there. I've used it myself for many years and that's why I cited to work with them on this video. After you sign in, you'll be prompted to create a new subscription. Go ahead and do that, and you can choose a free fix plan to play around.
Once that's done, create a database and when creating it, make sure to add the add on modules of redis search and redisJSON. And you now have your own a database that can scale infinitely in the cloud. To connect to it, you'll notice this public endpoint URL, as well as a password for the default user. Now the question becomes, on how do we connect to our database? This is optional, but the first thing I would recommend doing is downloading the Redis Insight tool, which gives you a GUI to analyze and manage data in the database. Once installed, click the option to add a new database and then paste in the public URL that that is cloud provided you with.
databases
data management
software
data
Then also enter the username of default and the password it generated, and then it should automatically connect to your database. The cool thing about Redis is that it's really easy to learn because everything is organized into a set of key value pairs. Here's a little crash course of the Redis basics.
To add a new item to the database, base, you create a new key. Every key is unique and is used to identify a value in the database. A key can also have a data type. In this case, we'll use a string, But there are more complex data types like a hash for objects of multiple key value pairs, lists, and as we'll see later, JSON data.
databases
For now, let's go ahead and save a string with a key of hello and a value of world. It also gives you the option to specify a TTL or time to live, after which point that data will be automatically deleted if you want.
Leave it blank to keep the data forever. Now the unique thing about Redis is that when you save data, that data is kept in memory as opposed to the disk like it would be on most other traditional database systems. What that means is that Redis is extremely fast.
data
There's no need for a round trip to the disk when retrieving data. But on Redis Cloud, this data is also persisted, which means there's never any actual data loss.
Now to make a read to the database, Let's go over to the workbench panel, and you'll notice a terminal here where we can write commands. Redis has a bunch of built in commands that allow allow us to do different things in the database. For example, what we just did previously was a set.
databases
With a command, it would look like set followed by hello world. Now to read the string, we can use the get command followed by the key name of hello. Now there are tons of other commands we could execute here to interact with our data, but that's enough to give you general idea.
programming
Now we're ready to build something cool. And in order to do that, we'll want to first initialize Next. Js. From the command line, run npx create next app, then open it up in Versus Code. The project has only one dependency, redisom, which you can install with npm. This library brand new, so keep in mind that there may be changes or enhancements in the near future.
What it does is map your data into a JavaScript class or entity, making it really easy to build a consistent schema around your data. And it simplifies many of the create, read, update, and delete operations that you'll want to do on the database. 1st, we'll need to connect to our cloud database. And for that, I'm creating a file called dotenv.local that contains environment variables that will automatically be picked up by Next.
databases
data management
Js. Inside of it, we have a value of redisurl, which is formatted with the username and password along with the URL and port of the actual database. Replace these values with the ones provided by Redis Cloud. Now from there, let's create a lib directory and a file named redis.js. Inside the file, we have a few imports from redis ohm.
The first one we want to think about is the client. That's the main entry point for interacting with the database. To connect to our database in the cloud, we call client open followed by process dotenv e dot redisurl. That will access the environment variable that we set up earlier.
databases
data management
Now because of the way Next. Js works, I'm also going to create an async function called connect that will only open the connection if it's not already open.
Then the next thing we'll do is define an entity for our data. An entity is basically like a database table. We first define a class, like car, and extend it with entity. From there, we can give it a schema that contains a variety of different properties, each with its own specific data type.
databases
data management
data
By default, this represents a hash in the Redis database. However, when building a more traditional application, you might find it easier to work with JSON. To use the redisJSON module, simply add the option of data structure JSON and now redis will operate more like a document oriented database.
Now that we have this entity, we're ready to start creating data. To handle the basic process, I'm going to export an async function here called create car, and then the first thing it does in the body is connect to the database client. From there, we create a repository by combining the schema and the client together.
databases
If we want to create new data, we can use the create entity method with a JavaScript object, which later we'll get from a form input in the UI. And lastly, we can call repository save with the car data, to commit it to the database, and Redis will return an automatically generated unique ID. The key is car colon unique ID, then the value is JSON data with the schema that you defined. Now the question becomes, how do we run this function? For that, we'll need 2 things. We need an API route, which will give a name of cars dotjs to handle the write operation on the back end. Then we'll need a React component, which I'll give a name of carform.js in the lib directory that that will handle the user input and make a request to that API route. Let's first implement the API route. We first import the create car function we just defined, then every API route in Next, exports a default function named handler, which contains a request and response, where the request is the incoming data and the response is the the outgoing data you want to send back to the client.
In this case, we'll want to use the request body, which will be JSON data from the form, to create a new car. Once Redis is done writing that data, we can then send a response back to the client, letting them know it was successful with the new unique ID.
data
Now that We have an API endpoint. We want to call it from the front end when a form is submitted. In carform.js, I have a React component, and And in the JSX, we have a standard HTML form with a few different text inputs. It also has a submit button, and we will intercept the submit event by passing a function to the form called handleSubmit. In the handleSubmit function, we'll first call event preventDefault to prevent the page from refreshing on submit. And then here's a cool trick when handling form data in a React component. Normally, to convert the form event to JSON, you would have to access each individual property, which leads to some really ugly and tedious code. A better approach is to convert the event target, which is the HTML form, to the formData class, which is built into the browser. That will organize the form fields into a bunch of key value pairs, which we can then turn into a plain JavaScript object by using object from entries. Now it's important to point out that the name that you provide to the form input determines the name of the key. So you'll wanna make sure that that name matches the schema that you chose for your Redis data. Now, the final step is to make a request to the API endpoint, which we can do by using the fetch API in the browser. And for the body, we pass it the JSON stringified form data. You'll want to make sure the content type is JSON, and the method is post. From there, we can send the request, convert it to JSON, and then console log the result. And now, there's just one thing left to do. Let's Let's go into the index. Js file and declare the car form there. And now, we can fire up the Next. Js app by running npm run dev. In the UI, you should have a form that looks like this. Mine looks a little prettier because I've added Bootstrap for styling, and when you fill it out and submit it, it should console log the ID that was created by Redis.
In addition, you should be able to open up Redis Insight to see the data there as well. At this point, we have a very basic full stack application with Redis. Now you might be wondering, how do I query and filter this data to show it on the front end? That's where Redis search comes in. It's a very powerful module that allows you to index and search across across your dataset. To use it though, we first need to create an index. And to do that, I'm going to go back into the redis.js file and create a new function called create index. All this function needs to do is reference the repository and call the create index method.
data
data analysis
programming
Now before we use this function, another thing I want to point out is that we can go up into our schema and add a text search true option to any fields that want to enable full text search. What this allows us to do is query this data with fuzzy matching where it can recognize typos and common words, yet still return the intended result. Let's go ahead and add the full text option to the description. Action. Now creating the index is only something you need to do once. For convenience, I'm going to add another API route here called create index text that imports that function and then sends a response back. Once defined, we can then go to the browser and access the URL API create index to add the index to the database.
Now that we have an index, let's go back to the redis dotjs file and create a function to search for cars in the database. This function will take a query as its input, which will be whatever the user types into the form. And then it calls the repository search method, which has all kinds of different capabilities like pagination, It can retrieve the first and last items, it can get a count of the total items in the database, and also perform logical comparisons like greater than, less than, and so on.
databases
data
The first method to call is where, which references one of the properties in the JSON data. In this case, we can search the make of the car for exact equality with the EQ method and pass it the query as an argument. If we also want to search the model of the car at the same time, we can chain or model and also check app for equality. Now when it comes to the description, we don't want exact equality, but instead we want to check the matches within a full text search context. That tells it to return results even if there typos and things like that. And finally, we tell it to return all the results from that query. That takes care of the search logic. Now, once again, we need an API route, which we can easily set up by adding a search dotjs file, inside of which we export a handler. It'll grab the search query from the URL, call the searchCars method, and then return the response, which will be an array of cars, back to the client. And now, the last thing we need is a form on the front end to make calls to the search endpoint. I'm creating a new file called searchform.js, which is a React component, and in the JSX, we have an input that triggers a search function whenever where it is changed. So that'll fire whenever the user types into the form. Now, this component will also need to have state to represent the hits or results that we get back from the search engine. We can define that state with the use state hook and initialize it as an empty array. In the search function, we will first grab the current value of the form and then format it as a URL parameter. The API route is expecting it in that format to pass the value along to Redis. Now you'll also notice that I'm only going to execute this code if the query length is greater than 2.
That's just to prevent excessive API calls to the database or API route. It would also be a good data to debounce this code because currently it will make an API call for every keystroke, and that's probably more API calls than you actually need for something like this. From there, we can use the fetch API to make a request to the search endpoint along with the parameters.
databases
The result we get back will be an array of cars that we can set as the state on this component.
Now let's display the card data by setting up an unordered list, then map each individual hit to a list item. I'm using the entity ID as the key, and then displaying ever data I want to show in the UI, like the make and model and image of the car.
data
Congratulations. You just built a full stack, full text search feature with Redis and Next. Js. I'm gonna go ahead and wrap things up there. If you wanna see more Redis or Next. Js content, let me know in the comments. Thanks for watching, and and I will see you in the next one.
Most developers already know that Redis is a mega fast in memory database often used as a cache to make traditional database as faster. But what most developers don't know is that Redis can also be used as a primary app database, thanks to a suite of modules that add additional data structures and commands to core Redis. They can handle JSON data, full text search, graph relationships, and many other features. In today's video will put this claim to the test by building a full text autocomplete search inspired by something like Algolia or Elasticsearch search where the user can add items to the database and instantly view the filtered results. We'll build this project from scratch using Next. Js, allowing us to use React on the front end and Node. Js to interact with Redis on the back end. As an added bonus, Redis just released a brand new SDK called Redis Ohm that supports object mapping in Node. Js. If you're new here, like and subscribe and you can follow along with the full article on Fireship IO. Let's first take a look at what we're building today. We have a form that when submitted will add a new item to the database. In Redis, this data would normally be saved as a hash data structure, but a hash doesn't support nested objects. So instead, we'll be storing this data as native JSON thanks to the redisJSON module. Now, after adding a few items to the database, we may want to retrieve them later. When I type into the search form field, you can see that it automatically updates the results in the UI after every keystroke. That's made possible able by Redisearch, which is an incredibly powerful module that can index all of the fields on your JSON dataset. At which point, you can perform complex queries like you would with the where clause in SQL and aggregations like sum and count. Now we're ready to start building. There are a few different ways you can get started with Redis. The easiest option is to sign up for Redis cloud. I collaborated with Redis Enterprise Cloud to make this video, and they're providing a $200 credit and also a chance to win a Tesla Model 3 if you use this code before January 31st. So that's pretty awesome, but more importantly, Redis is consistently the most loved database out there. I've used it myself for many years and that's why I cited to work with them on this video. After you sign in, you'll be prompted to create a new subscription. Go ahead and do that, and you can choose a free fix plan to play around. Once that's done, create a database and when creating it, make sure to add the add on modules of redis search and redisJSON. And you now have your own a database that can scale infinitely in the cloud. To connect to it, you'll notice this public endpoint URL, as well as a password for the default user. Now the question becomes, on how do we connect to our database? This is optional, but the first thing I would recommend doing is downloading the Redis Insight tool, which gives you a GUI to analyze and manage data in the database. Once installed, click the option to add a new database and then paste in the public URL that that is cloud provided you with. Then also enter the username of default and the password it generated, and then it should automatically connect to your database. The cool thing about Redis is that it's really easy to learn because everything is organized into a set of key value pairs. Here's a little crash course of the Redis basics. To add a new item to the database, base, you create a new key. Every key is unique and is used to identify a value in the database. A key can also have a data type. In this case, we'll use a string, But there are more complex data types like a hash for objects of multiple key value pairs, lists, and as we'll see later, JSON data. For now, let's go ahead and save a string with a key of hello and a value of world. It also gives you the option to specify a TTL or time to live, after which point that data will be automatically deleted if you want. Leave it blank to keep the data forever. Now the unique thing about Redis is that when you save data, that data is kept in memory as opposed to the disk like it would be on most other traditional database systems. What that means is that Redis is extremely fast. There's no need for a round trip to the disk when retrieving data. But on Redis Cloud, this data is also persisted, which means there's never any actual data loss. Now to make a read to the database, Let's go over to the workbench panel, and you'll notice a terminal here where we can write commands. Redis has a bunch of built in commands that allow allow us to do different things in the database. For example, what we just did previously was a set. With a command, it would look like set followed by hello world. Now to read the string, we can use the get command followed by the key name of hello. Now there are tons of other commands we could execute here to interact with our data, but that's enough to give you general idea. Now we're ready to build something cool. And in order to do that, we'll want to first initialize Next. Js. From the command line, run npx create next app, then open it up in Versus Code. The project has only one dependency, redisom, which you can install with npm. This library brand new, so keep in mind that there may be changes or enhancements in the near future. What it does is map your data into a JavaScript class or entity, making it really easy to build a consistent schema around your data. And it simplifies many of the create, read, update, and delete operations that you'll want to do on the database. 1st, we'll need to connect to our cloud database. And for that, I'm creating a file called dotenv.local that contains environment variables that will automatically be picked up by Next. Js. Inside of it, we have a value of redisurl, which is formatted with the username and password along with the URL and port of the actual database. Replace these values with the ones provided by Redis Cloud. Now from there, let's create a lib directory and a file named redis.js. Inside the file, we have a few imports from redis ohm. The first one we want to think about is the client. That's the main entry point for interacting with the database. To connect to our database in the cloud, we call client open followed by process dotenv e dot redisurl. That will access the environment variable that we set up earlier. Now because of the way Next. Js works, I'm also going to create an async function called connect that will only open the connection if it's not already open. Then the next thing we'll do is define an entity for our data. An entity is basically like a database table. We first define a class, like car, and extend it with entity. From there, we can give it a schema that contains a variety of different properties, each with its own specific data type. By default, this represents a hash in the Redis database. However, when building a more traditional application, you might find it easier to work with JSON. To use the redisJSON module, simply add the option of data structure JSON and now redis will operate more like a document oriented database. Now that we have this entity, we're ready to start creating data. To handle the basic process, I'm going to export an async function here called create car, and then the first thing it does in the body is connect to the database client. From there, we create a repository by combining the schema and the client together. If we want to create new data, we can use the create entity method with a JavaScript object, which later we'll get from a form input in the UI. And lastly, we can call repository save with the car data, to commit it to the database, and Redis will return an automatically generated unique ID. The key is car colon unique ID, then the value is JSON data with the schema that you defined. Now the question becomes, how do we run this function? For that, we'll need 2 things. We need an API route, which will give a name of cars dotjs to handle the write operation on the back end. Then we'll need a React component, which I'll give a name of carform.js in the lib directory that that will handle the user input and make a request to that API route. Let's first implement the API route. We first import the create car function we just defined, then every API route in Next, exports a default function named handler, which contains a request and response, where the request is the incoming data and the response is the the outgoing data you want to send back to the client. In this case, we'll want to use the request body, which will be JSON data from the form, to create a new car. Once Redis is done writing that data, we can then send a response back to the client, letting them know it was successful with the new unique ID. Now that We have an API endpoint. We want to call it from the front end when a form is submitted. In carform.js, I have a React component, and And in the JSX, we have a standard HTML form with a few different text inputs. It also has a submit button, and we will intercept the submit event by passing a function to the form called handleSubmit. In the handleSubmit function, we'll first call event preventDefault to prevent the page from refreshing on submit. And then here's a cool trick when handling form data in a React component. Normally, to convert the form event to JSON, you would have to access each individual property, which leads to some really ugly and tedious code. A better approach is to convert the event target, which is the HTML form, to the formData class, which is built into the browser. That will organize the form fields into a bunch of key value pairs, which we can then turn into a plain JavaScript object by using object from entries. Now it's important to point out that the name that you provide to the form input determines the name of the key. So you'll wanna make sure that that name matches the schema that you chose for your Redis data. Now, the final step is to make a request to the API endpoint, which we can do by using the fetch API in the browser. And for the body, we pass it the JSON stringified form data. You'll want to make sure the content type is JSON, and the method is post. From there, we can send the request, convert it to JSON, and then console log the result. And now, there's just one thing left to do. Let's Let's go into the index. Js file and declare the car form there. And now, we can fire up the Next. Js app by running npm run dev. In the UI, you should have a form that looks like this. Mine looks a little prettier because I've added Bootstrap for styling, and when you fill it out and submit it, it should console log the ID that was created by Redis. In addition, you should be able to open up Redis Insight to see the data there as well. At this point, we have a very basic full stack application with Redis. Now you might be wondering, how do I query and filter this data to show it on the front end? That's where Redis search comes in. It's a very powerful module that allows you to index and search across across your dataset. To use it though, we first need to create an index. And to do that, I'm going to go back into the redis.js file and create a new function called create index. All this function needs to do is reference the repository and call the create index method. Now before we use this function, another thing I want to point out is that we can go up into our schema and add a text search true option to any fields that want to enable full text search. What this allows us to do is query this data with fuzzy matching where it can recognize typos and common words, yet still return the intended result. Let's go ahead and add the full text option to the description. Action. Now creating the index is only something you need to do once. For convenience, I'm going to add another API route here called create index text that imports that function and then sends a response back. Once defined, we can then go to the browser and access the URL API create index to add the index to the database. Now that we have an index, let's go back to the redis dotjs file and create a function to search for cars in the database. This function will take a query as its input, which will be whatever the user types into the form. And then it calls the repository search method, which has all kinds of different capabilities like pagination, It can retrieve the first and last items, it can get a count of the total items in the database, and also perform logical comparisons like greater than, less than, and so on. The first method to call is where, which references one of the properties in the JSON data. In this case, we can search the make of the car for exact equality with the EQ method and pass it the query as an argument. If we also want to search the model of the car at the same time, we can chain or model and also check app for equality. Now when it comes to the description, we don't want exact equality, but instead we want to check the matches within a full text search context. That tells it to return results even if there typos and things like that. And finally, we tell it to return all the results from that query. That takes care of the search logic. Now, once again, we need an API route, which we can easily set up by adding a search dotjs file, inside of which we export a handler. It'll grab the search query from the URL, call the searchCars method, and then return the response, which will be an array of cars, back to the client. And now, the last thing we need is a form on the front end to make calls to the search endpoint. I'm creating a new file called searchform.js, which is a React component, and in the JSX, we have an input that triggers a search function whenever where it is changed. So that'll fire whenever the user types into the form. Now, this component will also need to have state to represent the hits or results that we get back from the search engine. We can define that state with the use state hook and initialize it as an empty array. In the search function, we will first grab the current value of the form and then format it as a URL parameter. The API route is expecting it in that format to pass the value along to Redis. Now you'll also notice that I'm only going to execute this code if the query length is greater than 2. That's just to prevent excessive API calls to the database or API route. It would also be a good data to debounce this code because currently it will make an API call for every keystroke, and that's probably more API calls than you actually need for something like this. From there, we can use the fetch API to make a request to the search endpoint along with the parameters. The result we get back will be an array of cars that we can set as the state on this component. Now let's display the card data by setting up an unordered list, then map each individual hit to a list item. I'm using the entity ID as the key, and then displaying ever data I want to show in the UI, like the make and model and image of the car. Congratulations. You just built a full stack, full text search feature with Redis and Next. Js. I'm gonna go ahead and wrap things up there. If you wanna see more Redis or Next. Js content, let me know in the comments. Thanks for watching, and and I will see you in the next one.
Most
most
developers
developers
already
already
know
know
that
that
Redis
redis
is
is
a
a
mega
mega
fast
fast
in
in
memory
memory
database
database
often
often
used
used
as
as
a
a
cache
cache
to
to
make
make
traditional
traditional
database
database
as
as
faster.
faster
But
but
what
what
most
most
developers
developers
don't
don't
know
know
is
is
that
that
Redis
redis
can
can
also
also
be
be
used
used
as
as
a
a
primary
primary
app
app
database,
database
thanks
thanks
to
to
a
a
suite
suite
of
of
modules
modules
that
that
add
add
additional
additional
data
data
structures
structures
and
and
commands
commands
to
to
core
core
Redis.
redis
They
they
can
can
handle
handle
JSON
json
data,
data
full
full
text
text
search,
search
graph
graph
relationships,
relationships
and
and
many
many
other
other
features.
features
In
in
today's
today's
video
video
will
will
put
put
this
this
claim
claim
to
to
the
the
test
test
by
by
building
building
a
a
full
full
text
text
autocomplete
autocomplete
search
search
inspired
inspired
by
by
something
something
like
like
Algolia
algolia
or
or
Elasticsearch
elasticsearch
search
search
where
where
the
the
user
user
can
can
add
add
items
items
to
to
the
the
database
database
and
and
instantly
instantly
view
view
the
the
filtered
filtered
results.
results
We'll
we'll
build
build
this
this
project
project
from
from
scratch
scratch
using
using
Next.
next
Js,
js
allowing
allowing
us
us
to
to
use
use
React
react
on
on
the
the
front
front
end
end
and
and
Node.
node
Js
js
to
to
interact
interact
with
with
Redis
redis
on
on
the
the
back
back
end.
end
As
as
an
an
added
added
bonus,
bonus
Redis
redis
just
just
released
released
a
a
brand
brand
new
new
SDK
sdk
called
called
Redis
redis
Ohm
ohm
that
that
supports
supports
object
object
mapping
mapping
in
in
Node.
node
Js.
js
If
if
you're
you're
new
new
here,
here
like
like
and
and
subscribe
subscribe
and
and
you
you
can
can
follow
follow
along
along
with
with
the
the
full
full
article
article
on
on
Fireship
fireship
IO.
io
Let's
let's
first
first
take
take
a
a
look
look
at
at
what
what
we're
we're
building
building
today.
today
We
we
have
have
a
a
form
form
that
that
when
when
submitted
submitted
will
will
add
add
a
a
new
new
item
item
to
to
the
the
database.
database
In
in
Redis,
redis
this
this
data
data
would
would
normally
normally
be
be
saved
saved
as
as
a
a
hash
hash
data
data
structure,
structure
but
but
a
a
hash
hash
doesn't
doesn't
support
support
nested
nested
objects.
objects
So
so
instead,
instead
we'll
we'll
be
be
storing
storing
this
this
data
data
as
as
native
native
JSON
json
thanks
thanks
to
to
the
the
redisJSON
redisjson
module.
module
Now,
now
after
after
adding
adding
a
a
few
few
items
items
to
to
the
the
database,
database
we
we
may
may
want
want
to
to
retrieve
retrieve
them
them
later.
later
When
when
I
i
type
type
into
into
the
the
search
search
form
form
field,
field
you
you
can
can
see
see
that
that
it
it
automatically
automatically
updates
updates
the
the
results
results
in
in
the
the
UI
ui
after
after
every
every
keystroke.
keystroke
That's
that's
made
made
possible
possible
able
able
by
by
Redisearch,
redisearch
which
which
is
is
an
an
incredibly
incredibly
powerful
powerful
module
module
that
that
can
can
index
index
all
all
of
of
the
the
fields
fields
on
on
your
your
JSON
json
dataset.
dataset
At
at
which
which
point,
point
you
you
can
can
perform
perform
complex
complex
queries
queries
like
like
you
you
would
would
with
with
the
the
where
where
clause
clause
in
in
SQL
sql
and
and
aggregations
aggregations
like
like
sum
sum
and
and
count.
count
Now
now
we're
we're
ready
ready
to
to
start
start
building.
building
There
there
are
are
a
a
few
few
different
different
ways
ways
you
you
can
can
get
get
started
started
with
with
Redis.
redis
The
the
easiest
easiest
option
option
is
is
to
to
sign
sign
up
up
for
for
Redis
redis
cloud.
cloud
I
i
collaborated
collaborated
with
with
Redis
redis
Enterprise
enterprise
Cloud
cloud
to
to
make
make
this
this
video,
video
and
and
they're
they're
providing
providing
a
a
$200
$200
credit
credit
and
and
also
also
a
a
chance
chance
to
to
win
win
a
a
Tesla
tesla
Model
model
3
3
if
if
you
you
use
use
this
this
code
code
before
before
January
january
31st.
31st
So
so
that's
that's
pretty
pretty
awesome,
awesome
but
but
more
more
importantly,
importantly
Redis
redis
is
is
consistently
consistently
the
the
most
most
loved
loved
database
database
out
out
there.
there
I've
i've
used
used
it
it
myself
myself
for
for
many
many
years
years
and
and
that's
that's
why
why
I
i
cited
cited
to
to
work
work
with
with
them
them
on
on
this
this
video.
video
After
after
you
you
sign
sign
in,
in
you'll
you'll
be
be
prompted
prompted
to
to
create
create
a
a
new
new
subscription.
subscription
Go
go
ahead
ahead
and
and
do
do
that,
that
and
and
you
you
can
can
choose
choose
a
a
free
free
fix
fix
plan
plan
to
to
play
play
around.
around
Once
once
that's
that's
done,
done
create
create
a
a
database
database
and
and
when
when
creating
creating
it,
it
make
make
sure
sure
to
to
add
add
the
the
add
add
on
on
modules
modules
of
of
redis
redis
search
search
and
and
redisJSON.
redisjson
And
and
you
you
now
now
have
have
your
your
own
own
a
a
database
database
that
that
can
can
scale
scale
infinitely
infinitely
in
in
the
the
cloud.
cloud
To
to
connect
connect
to
to
it,
it
you'll
you'll
notice
notice
this
this
public
public
endpoint
endpoint
URL,
url
as
as
well
well
as
as
a
a
password
password
for
for
the
the
default
default
user.
user
Now
now
the
the
question
question
becomes,
becomes
on
on
how
how
do
do
we
we
connect
connect
to
to
our
our
database?
database
This
this
is
is
optional,
optional
but
but
the
the
first
first
thing
thing
I
i
would
would
recommend
recommend
doing
doing
is
is
downloading
downloading
the
the
Redis
redis
Insight
insight
tool,
tool
which
which
gives
gives
you
you
a
a
GUI
gui
to
to
analyze
analyze
and
and
manage
manage
data
data
in
in
the
the
database.
database
Once
once
installed,
installed
click
click
the
the
option
option
to
to
add
add
a
a
new
new
database
database
and
and
then
then
paste
paste
in
in
the
the
public
public
URL
url
that
that
that
that
is
is
cloud
cloud
provided
provided
you
you
with.
with
Then
then
also
also
enter
enter
the
the
username
username
of
of
default
default
and
and
the
the
password
password
it
it
generated,
generated
and
and
then
then
it
it
should
should
automatically
automatically
connect
connect
to
to
your
your
database.
database
The
the
cool
cool
thing
thing
about
about
Redis
redis
is
is
that
that
it's
it's
really
really
easy
easy
to
to
learn
learn
because
because
everything
everything
is
is
organized
organized
into
into
a
a
set
set
of
of
key
key
value
value
pairs.
pairs
Here's
here's
a
a
little
little
crash
crash
course
course
of
of
the
the
Redis
redis
basics.
basics
To
to
add
add
a
a
new
new
item
item
to
to
the
the
database,
database
base,
base
you
you
create
create
a
a
new
new
key.
key
Every
every
key
key
is
is
unique
unique
and
and
is
is
used
used
to
to
identify
identify
a
a
value
value
in
in
the
the
database.
database
A
a
key
key
can
can
also
also
have
have
a
a
data
data
type.
type
In
in
this
this
case,
case
we'll
we'll
use
use
a
a
string,
string
But
but
there
there
are
are
more
more
complex
complex
data
data
types
types
like
like
a
a
hash
hash
for
for
objects
objects
of
of
multiple
multiple
key
key
value
value
pairs,
pairs
lists,
lists
and
and
as
as
we'll
we'll
see
see
later,
later
JSON
json
data.
data
For
for
now,
now
let's
let's
go
go
ahead
ahead
and
and
save
save
a
a
string
string
with
with
a
a
key
key
of
of
hello
hello
and
and
a
a
value
value
of
of
world.
world
It
it
also
also
gives
gives
you
you
the
the
option
option
to
to
specify
specify
a
a
TTL
ttl
or
or
time
time
to
to
live,
live
after
after
which
which
point
point
that
that
data
data
will
will
be
be
automatically
automatically
deleted
deleted
if
if
you
you
want.
want
Leave
leave
it
it
blank
blank
to
to
keep
keep
the
the
data
data
forever.
forever
Now
now
the
the
unique
unique
thing
thing
about
about
Redis
redis
is
is
that
that
when
when
you
you
save
save
data,
data
that
that
data
data
is
is
kept
kept
in
in
memory
memory
as
as
opposed
opposed
to
to
the
the
disk
disk
like
like
it
it
would
would
be
be
on
on
most
most
other
other
traditional
traditional
database
database
systems.
systems
What
what
that
that
means
means
is
is
that
that
Redis
redis
is
is
extremely
extremely
fast.
fast
There's
there's
no
no
need
need
for
for
a
a
round
round
trip
trip
to
to
the
the
disk
disk
when
when
retrieving
retrieving
data.
data
But
but
on
on
Redis
redis
Cloud,
cloud
this
this
data
data
is
is
also
also
persisted,
persisted
which
which
means
means
there's
there's
never
never
any
any
actual
actual
data
data
loss.
loss
Now
now
to
to
make
make
a
a
read
read
to
to
the
the
database,
database
Let's
let's
go
go
over
over
to
to
the
the
workbench
workbench
panel,
panel
and
and
you'll
you'll
notice
notice
a
a
terminal
terminal
here
here
where
where
we
we
can
can
write
write
commands.
commands
Redis
redis
has
has
a
a
bunch
bunch
of
of
built
built
in
in
commands
commands
that
that
allow
allow
allow
allow
us
us
to
to
do
do
different
different
things
things
in
in
the
the
database.
database
For
for
example,
example
what
what
we
we
just
just
did
did
previously
previously
was
was
a
a
set.
set
With
with
a
a
command,
command
it
it
would
would
look
look
like
like
set
set
followed
followed
by
by
hello
hello
world.
world
Now
now
to
to
read
read
the
the
string,
string
we
we
can
can
use
use
the
the
get
get
command
command
followed
followed
by
by
the
the
key
key
name
name
of
of
hello.
hello
Now
now
there
there
are
are
tons
tons
of
of
other
other
commands
commands
we
we
could
could
execute
execute
here
here
to
to
interact
interact
with
with
our
our
data,
data
but
but
that's
that's
enough
enough
to
to
give
give
you
you
general
general
idea.
idea
Now
now
we're
we're
ready
ready
to
to
build
build
something
something
cool.
cool
And
and
in
in
order
order
to
to
do
do
that,
that
we'll
we'll
want
want
to
to
first
first
initialize
initialize
Next.
next
Js.
js
From
from
the
the
command
command
line,
line
run
run
npx
npx
create
create
next
next
app,
app
then
then
open
open
it
it
up
up
in
in
Versus
versus
Code.
code
The
the
project
project
has
has
only
only
one
one
dependency,
dependency
redisom,
redisom
which
which
you
you
can
can
install
install
with
with
npm.
npm
This
this
library
library
brand
brand
new,
new
so
so
keep
keep
in
in
mind
mind
that
that
there
there
may
may
be
be
changes
changes
or
or
enhancements
enhancements
in
in
the
the
near
near
future.
future
What
what
it
it
does
does
is
is
map
map
your
your
data
data
into
into
a
a
JavaScript
javascript
class
class
or
or
entity,
entity
making
making
it
it
really
really
easy
easy
to
to
build
build
a
a
consistent
consistent
schema
schema
around
around
your
your
data.
data
And
and
it
it
simplifies
simplifies
many
many
of
of
the
the
create,
create
read,
read
update,
update
and
and
delete
delete
operations
operations
that
that
you'll
you'll
want
want
to
to
do
do
on
on
the
the
database.
database
1st,
1st
we'll
we'll
need
need
to
to
connect
connect
to
to
our
our
cloud
cloud
database.
database
And
and
for
for
that,
that
I'm
i'm
creating
creating
a
a
file
file
called
called
dotenv.local
dotenv.local
that
that
contains
contains
environment
environment
variables
variables
that
that
will
will
automatically
automatically
be
be
picked
picked
up
up
by
by
Next.
next
Js.
js
Inside
inside
of
of
it,
it
we
we
have
have
a
a
value
value
of
of
redisurl,
redisurl
which
which
is
is
formatted
formatted
with
with
the
the
username
username
and
and
password
password
along
along
with
with
the
the
URL
url
and
and
port
port
of
of
the
the
actual
actual
database.
database
Replace
replace
these
these
values
values
with
with
the
the
ones
ones
provided
provided
by
by
Redis
redis
Cloud.
cloud
Now
now
from
from
there,
there
let's
let's
create
create
a
a
lib
lib
directory
directory
and
and
a
a
file
file
named
named
redis.js.
redis.js
Inside
inside
the
the
file,
file
we
we
have
have
a
a
few
few
imports
imports
from
from
redis
redis
ohm.
ohm
The
the
first
first
one
one
we
we
want
want
to
to
think
think
about
about
is
is
the
the
client.
client
That's
that's
the
the
main
main
entry
entry
point
point
for
for
interacting
interacting
with
with
the
the
database.
database
To
to
connect
connect
to
to
our
our
database
database
in
in
the
the
cloud,
cloud
we
we
call
call
client
client
open
open
followed
followed
by
by
process
process
dotenv
dotenv
e
e
dot
dot
redisurl.
redisurl
That
that
will
will
access
access
the
the
environment
environment
variable
variable
that
that
we
we
set
set
up
up
earlier.
earlier
Now
now
because
because
of
of
the
the
way
way
Next.
next
Js
js
works,
works
I'm
i'm
also
also
going
going
to
to
create
create
an
an
async
async
function
function
called
called
connect
connect
that
that
will
will
only
only
open
open
the
the
connection
connection
if
if
it's
it's
not
not
already
already
open.
open
Then
then
the
the
next
next
thing
thing
we'll
we'll
do
do
is
is
define
define
an
an
entity
entity
for
for
our
our
data.
data
An
an
entity
entity
is
is
basically
basically
like
like
a
a
database
database
table.
table
We
we
first
first
define
define
a
a
class,
class
like
like
car,
car
and
and
extend
extend
it
it
with
with
entity.
entity
From
from
there,
there
we
we
can
can
give
give
it
it
a
a
schema
schema
that
that
contains
contains
a
a
variety
variety
of
of
different
different
properties,
properties
each
each
with
with
its
its
own
own
specific
specific
data
data
type.
type
By
by
default,
default
this
this
represents
represents
a
a
hash
hash
in
in
the
the
Redis
redis
database.
database
However,
however
when
when
building
building
a
a
more
more
traditional
traditional
application,
application
you
you
might
might
find
find
it
it
easier
easier
to
to
work
work
with
with
JSON.
json
To
to
use
use
the
the
redisJSON
redisjson
module,
module
simply
simply
add
add
the
the
option
option
of
of
data
data
structure
structure
JSON
json
and
and
now
now
redis
redis
will
will
operate
operate
more
more
like
like
a
a
document
document
oriented
oriented
database.
database
Now
now
that
that
we
we
have
have
this
this
entity,
entity
we're
we're
ready
ready
to
to
start
start
creating
creating
data.
data
To
to
handle
handle
the
the
basic
basic
process,
process
I'm
i'm
going
going
to
to
export
export
an
an
async
async
function
function
here
here
called
called
create
create
car,
car
and
and
then
then
the
the
first
first
thing
thing
it
it
does
does
in
in
the
the
body
body
is
is
connect
connect
to
to
the
the
database
database
client.
client
From
from
there,
there
we
we
create
create
a
a
repository
repository
by
by
combining
combining
the
the
schema
schema
and
and
the
the
client
client
together.
together
If
if
we
we
want
want
to
to
create
create
new
new
data,
data
we
we
can
can
use
use
the
the
create
create
entity
entity
method
method
with
with
a
a
JavaScript
javascript
object,
object
which
which
later
later
we'll
we'll
get
get
from
from
a
a
form
form
input
input
in
in
the
the
UI.
ui
And
and
lastly,
lastly
we
we
can
can
call
call
repository
repository
save
save
with
with
the
the
car
car
data,
data
to
to
commit
commit
it
it
to
to
the
the
database,
database
and
and
Redis
redis
will
will
return
return
an
an
automatically
automatically
generated
generated
unique
unique
ID.
id
The
the
key
key
is
is
car
car
colon
colon
unique
unique
ID,
id
then
then
the
the
value
value
is
is
JSON
json
data
data
with
with
the
the
schema
schema
that
that
you
you
defined.
defined
Now
now
the
the
question
question
becomes,
becomes
how
how
do
do
we
we
run
run
this
this
function?
function
For
for
that,
that
we'll
we'll
need
need
2
2
things.
things
We
we
need
need
an
an
API
api
route,
route
which
which
will
will
give
give
a
a
name
name
of
of
cars
cars
dotjs
dotjs
to
to
handle
handle
the
the
write
write
operation
operation
on
on
the
the
back
back
end.
end
Then
then
we'll
we'll
need
need
a
a
React
react
component,
component
which
which
I'll
i'll
give
give
a
a
name
name
of
of
carform.js
carform.js
in
in
the
the
lib
lib
directory
directory
that
that
that
that
will
will
handle
handle
the
the
user
user
input
input
and
and
make
make
a
a
request
request
to
to
that
that
API
api
route.
route
Let's
let's
first
first
implement
implement
the
the
API
api
route.
route
We
we
first
first
import
import
the
the
create
create
car
car
function
function
we
we
just
just
defined,
defined
then
then
every
every
API
api
route
route
in
in
Next,
next
exports
exports
a
a
default
default
function
function
named
named
handler,
handler
which
which
contains
contains
a
a
request
request
and
and
response,
response
where
where
the
the
request
request
is
is
the
the
incoming
incoming
data
data
and
and
the
the
response
response
is
is
the
the
the
the
outgoing
outgoing
data
data
you
you
want
want
to
to
send
send
back
back
to
to
the
the
client.
client
In
in
this
this
case,
case
we'll
we'll
want
want
to
to
use
use
the
the
request
request
body,
body
which
which
will
will
be
be
JSON
json
data
data
from
from
the
the
form,
form
to
to
create
create
a
a
new
new
car.
car
Once
once
Redis
redis
is
is
done
done
writing
writing
that
that
data,
data
we
we
can
can
then
then
send
send
a
a
response
response
back
back
to
to
the
the
client,
client
letting
letting
them
them
know
know
it
it
was
was
successful
successful
with
with
the
the
new
new
unique
unique
ID.
id
Now
now
that
that
We
we
have
have
an
an
API
api
endpoint.
endpoint
We
we
want
want
to
to
call
call
it
it
from
from
the
the
front
front
end
end
when
when
a
a
form
form
is
is
submitted.
submitted
In
in
carform.js,
carform.js
I
i
have
have
a
a
React
react
component,
component
and
and
And
and
in
in
the
the
JSX,
jsx
we
we
have
have
a
a
standard
standard
HTML
html
form
form
with
with
a
a
few
few
different
different
text
text
inputs.
inputs
It
it
also
also
has
has
a
a
submit
submit
button,
button
and
and
we
we
will
will
intercept
intercept
the
the
submit
submit
event
event
by
by
passing
passing
a
a
function
function
to
to
the
the
form
form
called
called
handleSubmit.
handlesubmit
In
in
the
the
handleSubmit
handlesubmit
function,
function
we'll
we'll
first
first
call
call
event
event
preventDefault
preventdefault
to
to
prevent
prevent
the
the
page
page
from
from
refreshing
refreshing
on
on
submit.
submit
And
and
then
then
here's
here's
a
a
cool
cool
trick
trick
when
when
handling
handling
form
form
data
data
in
in
a
a
React
react
component.
component
Normally,
normally
to
to
convert
convert
the
the
form
form
event
event
to
to
JSON,
json
you
you
would
would
have
have
to
to
access
access
each
each
individual
individual
property,
property
which
which
leads
leads
to
to
some
some
really
really
ugly
ugly
and
and
tedious
tedious
code.
code
A
a
better
better
approach
approach
is
is
to
to
convert
convert
the
the
event
event
target,
target
which
which
is
is
the
the
HTML
html
form,
form
to
to
the
the
formData
formdata
class,
class
which
which
is
is
built
built
into
into
the
the
browser.
browser
That
that
will
will
organize
organize
the
the
form
form
fields
fields
into
into
a
a
bunch
bunch
of
of
key
key
value
value
pairs,
pairs
which
which
we
we
can
can
then
then
turn
turn
into
into
a
a
plain
plain
JavaScript
javascript
object
object
by
by
using
using
object
object
from
from
entries.
entries
Now
now
it's
it's
important
important
to
to
point
point
out
out
that
that
the
the
name
name
that
that
you
you
provide
provide
to
to
the
the
form
form
input
input
determines
determines
the
the
name
name
of
of
the
the
key.
key
So
so
you'll
you'll
wanna
wanna
make
make
sure
sure
that
that
that
that
name
name
matches
matches
the
the
schema
schema
that
that
you
you
chose
chose
for
for
your
your
Redis
redis
data.
data
Now,
now
the
the
final
final
step
step
is
is
to
to
make
make
a
a
request
request
to
to
the
the
API
api
endpoint,
endpoint
which
which
we
we
can
can
do
do
by
by
using
using
the
the
fetch
fetch
API
api
in
in
the
the
browser.
browser
And
and
for
for
the
the
body,
body
we
we
pass
pass
it
it
the
the
JSON
json
stringified
stringified
form
form
data.
data
You'll
you'll
want
want
to
to
make
make
sure
sure
the
the
content
content
type
type
is
is
JSON,
json
and
and
the
the
method
method
is
is
post.
post
From
from
there,
there
we
we
can
can
send
send
the
the
request,
request
convert
convert
it
it
to
to
JSON,
json
and
and
then
then
console
console
log
log
the
the
result.
result
And
and
now,
now
there's
there's
just
just
one
one
thing
thing
left
left
to
to
do.
do
Let's
let's
Let's
let's
go
go
into
into
the
the
index.
index
Js
js
file
file
and
and
declare
declare
the
the
car
car
form
form
there.
there
And
and
now,
now
we
we
can
can
fire
fire
up
up
the
the
Next.
next
Js
js
app
app
by
by
running
running
npm
npm
run
run
dev.
dev
In
in
the
the
UI,
ui
you
you
should
should
have
have
a
a
form
form
that
that
looks
looks
like
like
this.
this
Mine
mine
looks
looks
a
a
little
little
prettier
prettier
because
because
I've
i've
added
added
Bootstrap
bootstrap
for
for
styling,
styling
and
and
when
when
you
you
fill
fill
it
it
out
out
and
and
submit
submit
it,
it
it
it
should
should
console
console
log
log
the
the
ID
id
that
that
was
was
created
created
by
by
Redis.
redis
In
in
addition,
addition
you
you
should
should
be
be
able
able
to
to
open
open
up
up
Redis
redis
Insight
insight
to
to
see
see
the
the
data
data
there
there
as
as
well.
well
At
at
this
this
point,
point
we
we
have
have
a
a
very
very
basic
basic
full
full
stack
stack
application
application
with
with
Redis.
redis
Now
now
you
you
might
might
be
be
wondering,
wondering
how
how
do
do
I
i
query
query
and
and
filter
filter
this
this
data
data
to
to
show
show
it
it
on
on
the
the
front
front
end?
end
That's
that's
where
where
Redis
redis
search
search
comes
comes
in.
in
It's
it's
a
a
very
very
powerful
powerful
module
module
that
that
allows
allows
you
you
to
to
index
index
and
and
search
search
across
across
across
across
your
your
dataset.
dataset
To
to
use
use
it
it
though,
though
we
we
first
first
need
need
to
to
create
create
an
an
index.
index
And
and
to
to
do
do
that,
that
I'm
i'm
going
going
to
to
go
go
back
back
into
into
the
the
redis.js
redis.js
file
file
and
and
create
create
a
a
new
new
function
function
called
called
create
create
index.
index
All
all
this
this
function
function
needs
needs
to
to
do
do
is
is
reference
reference
the
the
repository
repository
and
and
call
call
the
the
create
create
index
index
method.
method
Now
now
before
before
we
we
use
use
this
this
function,
function
another
another
thing
thing
I
i
want
want
to
to
point
point
out
out
is
is
that
that
we
we
can
can
go
go
up
up
into
into
our
our
schema
schema
and
and
add
add
a
a
text
text
search
search
true
true
option
option
to
to
any
any
fields
fields
that
that
want
want
to
to
enable
enable
full
full
text
text
search.
search
What
what
this
this
allows
allows
us
us
to
to
do
do
is
is
query
query
this
this
data
data
with
with
fuzzy
fuzzy
matching
matching
where
where
it
it
can
can
recognize
recognize
typos
typos
and
and
common
common
words,
words
yet
yet
still
still
return
return
the
the
intended
intended
result.
result
Let's
let's
go
go
ahead
ahead
and
and
add
add
the
the
full
full
text
text
option
option
to
to
the
the
description.
description
Action.
action
Now
now
creating
creating
the
the
index
index
is
is
only
only
something
something
you
you
need
need
to
to
do
do
once.
once
For
for
convenience,
convenience
I'm
i'm
going
going
to
to
add
add
another
another
API
api
route
route
here
here
called
called
create
create
index
index
text
text
that
that
imports
imports
that
that
function
function
and
and
then
then
sends
sends
a
a
response
response
back.
back
Once
once
defined,
defined
we
we
can
can
then
then
go
go
to
to
the
the
browser
browser
and
and
access
access
the
the
URL
url
API
api
create
create
index
index
to
to
add
add
the
the
index
index
to
to
the
the
database.
database
Now
now
that
that
we
we
have
have
an
an
index,
index
let's
let's
go
go
back
back
to
to
the
the
redis
redis
dotjs
dotjs
file
file
and
and
create
create
a
a
function
function
to
to
search
search
for
for
cars
cars
in
in
the
the
database.
database
This
this
function
function
will
will
take
take
a
a
query
query
as
as
its
its
input,
input
which
which
will
will
be
be
whatever
whatever
the
the
user
user
types
types
into
into
the
the
form.
form
And
and
then
then
it
it
calls
calls
the
the
repository
repository
search
search
method,
method
which
which
has
has
all
all
kinds
kinds
of
of
different
different
capabilities
capabilities
like
like
pagination,
pagination
It
it
can
can
retrieve
retrieve
the
the
first
first
and
and
last
last
items,
items
it
it
can
can
get
get
a
a
count
count
of
of
the
the
total
total
items
items
in
in
the
the
database,
database
and
and
also
also
perform
perform
logical
logical
comparisons
comparisons
like
like
greater
greater
than,
than
less
less
than,
than
and
and
so
so
on.
on
The
the
first
first
method
method
to
to
call
call
is
is
where,
where
which
which
references
references
one
one
of
of
the
the
properties
properties
in
in
the
the
JSON
json
data.
data
In
in
this
this
case,
case
we
we
can
can
search
search
the
the
make
make
of
of
the
the
car
car
for
for
exact
exact
equality
equality
with
with
the
the
EQ
eq
method
method
and
and
pass
pass
it
it
the
the
query
query
as
as
an
an
argument.
argument
If
if
we
we
also
also
want
want
to
to
search
search
the
the
model
model
of
of
the
the
car
car
at
at
the
the
same
same
time,
time
we
we
can
can
chain
chain
or
or
model
model
and
and
also
also
check
check
app
app
for
for
equality.
equality
Now
now
when
when
it
it
comes
comes
to
to
the
the
description,
description
we
we
don't
don't
want
want
exact
exact
equality,
equality
but
but
instead
instead
we
we
want
want
to
to
check
check
the
the
matches
matches
within
within
a
a
full
full
text
text
search
search
context.
context
That
that
tells
tells
it
it
to
to
return
return
results
results
even
even
if
if
there
there
typos
typos
and
and
things
things
like
like
that.
that
And
and
finally,
finally
we
we
tell
tell
it
it
to
to
return
return
all
all
the
the
results
results
from
from
that
that
query.
query
That
that
takes
takes
care
care
of
of
the
the
search
search
logic.
logic
Now,
now
once
once
again,
again
we
we
need
need
an
an
API
api
route,
route
which
which
we
we
can
can
easily
easily
set
set
up
up
by
by
adding
adding
a
a
search
search
dotjs
dotjs
file,
file
inside
inside
of
of
which
which
we
we
export
export
a
a
handler.
handler
It'll
it'll
grab
grab
the
the
search
search
query
query
from
from
the
the
URL,
url
call
call
the
the
searchCars
searchcars
method,
method
and
and
then
then
return
return
the
the
response,
response
which
which
will
will
be
be
an
an
array
array
of
of
cars,
cars
back
back
to
to
the
the
client.
client
And
and
now,
now
the
the
last
last
thing
thing
we
we
need
need
is
is
a
a
form
form
on
on
the
the
front
front
end
end
to
to
make
make
calls
calls
to
to
the
the
search
search
endpoint.
endpoint
I'm
i'm
creating
creating
a
a
new
new
file
file
called
called
searchform.js,
searchform.js
which
which
is
is
a
a
React
react
component,
component
and
and
in
in
the
the
JSX,
jsx
we
we
have
have
an
an
input
input
that
that
triggers
triggers
a
a
search
search
function
function
whenever
whenever
where
where
it
it
is
is
changed.
changed
So
so
that'll
that'll
fire
fire
whenever
whenever
the
the
user
user
types
types
into
into
the
the
form.
form
Now,
now
this
this
component
component
will
will
also
also
need
need
to
to
have
have
state
state
to
to
represent
represent
the
the
hits
hits
or
or
results
results
that
that
we
we
get
get
back
back
from
from
the
the
search
search
engine.
engine
We
we
can
can
define
define
that
that
state
state
with
with
the
the
use
use
state
state
hook
hook
and
and
initialize
initialize
it
it
as
as
an
an
empty
empty
array.
array
In
in
the
the
search
search
function,
function
we
we
will
will
first
first
grab
grab
the
the
current
current
value
value
of
of
the
the
form
form
and
and
then
then
format
format
it
it
as
as
a
a
URL
url
parameter.
parameter
The
the
API
api
route
route
is
is
expecting
expecting
it
it
in
in
that
that
format
format
to
to
pass
pass
the
the
value
value
along
along
to
to
Redis.
redis
Now
now
you'll
you'll
also
also
notice
notice
that
that
I'm
i'm
only
only
going
going
to
to
execute
execute
this
this
code
code
if
if
the
the
query
query
length
length
is
is
greater
greater
than
than
2.
2
That's
that's
just
just
to
to
prevent
prevent
excessive
excessive
API
api
calls
calls
to
to
the
the
database
database
or
or
API
api
route.
route
It
it
would
would
also
also
be
be
a
a
good
good
data
data
to
to
debounce
debounce
this
this
code
code
because
because
currently
currently
it
it
will
will
make
make
an
an
API
api
call
call
for
for
every
every
keystroke,
keystroke
and
and
that's
that's
probably
probably
more
more
API
api
calls
calls
than
than
you
you
actually
actually
need
need
for
for
something
something
like
like
this.
this
From
from
there,
there
we
we
can
can
use
use
the
the
fetch
fetch
API
api
to
to
make
make
a
a
request
request
to
to
the
the
search
search
endpoint
endpoint
along
along
with
with
the
the
parameters.
parameters
The
the
result
result
we
we
get
get
back
back
will
will
be
be
an
an
array
array
of
of
cars
cars
that
that
we
we
can
can
set
set
as
as
the
the
state
state
on
on
this
this
component.
component
Now
now
let's
let's
display
display
the
the
card
card
data
data
by
by
setting
setting
up
up
an
an
unordered
unordered
list,
list
then
then
map
map
each
each
individual
individual
hit
hit
to
to
a
a
list
list
item.
item
I'm
i'm
using
using
the
the
entity
entity
ID
id
as
as
the
the
key,
key
and
and
then
then
displaying
displaying
ever
ever
data
data
I
i
want
want
to
to
show
show
in
in
the
the
UI,
ui
like
like
the
the
make
make
and
and
model
model
and
and
image
image
of
of
the
the
car.
car
Congratulations.
congratulations
You
you
just
just
built
built
a
a
full
full
stack,
stack
full
full
text
text
search
search
feature
feature
with
with
Redis
redis
and
and
Next.
next
Js.
js
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
If
if
you
you
wanna
wanna
see
see
more
more
Redis
redis
or
or
Next.
next
Js
js
content,
content
let
let
me
me
know
know
in
in
the
the
comments.
comments
Thanks
thanks
for
for
watching,
watching
and
and
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The speakers discuss various modules and projects used in building a full text search project using a React app and SDK. They also explain how to connect to a database through a public endpoint URL and a default password, and recommend a crash course for learning. They provide instructions for creating a new subscription and creating a new database, and discuss creating a schema for data on a database and creating a new car form. They also explain how to run a function on a React component and use the workbench panel to access and read data. Finally, they discuss creating a search endpoint and the use of an unordered list to display car data. They end by thanking the audience and saying they will see them in the next video.
Is Redis the ONLY database you need? // Fullstack app from scratch with Next.js & Redis
Most developers already know that Redis is a mega fast in memory database often used as a cache to make traditional database as faster. But what most developers don't know is that Redis can also be used as a primary app database, thanks to a suite of modules that add additional data structures and commands to core Redis. They can handle JSON data, full text search, graph relationships, and many other features. In today's video will put this claim to the test by building a full text autocomplete search inspired by something like Algolia or Elasticsearch search where the user can add items to the database and instantly view the filtered results. We'll build this project from scratch using Next. Js, allowing us to use React on the front end and Node. Js to interact with Redis on the back end. As an added bonus, Redis just released a brand new SDK called Redis Ohm that supports object mapping in Node. Js. If you're new here, like and subscribe and you can follow along with the full article on Fireship IO. Let's first take a look at what we're building today. We have a form that when submitted will add a new item to the database. In Redis, this data would normally be saved as a hash data structure, but a hash doesn't support nested objects. So instead, we'll be storing this data as native JSON thanks to the redisJSON module. Now, after adding a few items to the database, we may want to retrieve them later. When I type into the search form field, you can see that it automatically updates the results in the UI after every keystroke. That's made possible able by Redisearch, which is an incredibly powerful module that can index all of the fields on your JSON dataset. At which point, you can perform complex queries like you would with the where clause in SQL and aggregations like sum and count. Now we're ready to start building. There are a few different ways you can get started with Redis. The easiest option is to sign up for Redis cloud. I collaborated with Redis Enterprise Cloud to make this video, and they're providing a $200 credit and also a chance to win a Tesla Model 3 if you use this code before January 31st. So that's pretty awesome, but more importantly, Redis is consistently the most loved database out there. I've used it myself for many years and that's why I cited to work with them on this video. After you sign in, you'll be prompted to create a new subscription. Go ahead and do that, and you can choose a free fix plan to play around. Once that's done, create a database and when creating it, make sure to add the add on modules of redis search and redisJSON. And you now have your own a database that can scale infinitely in the cloud. To connect to it, you'll notice this public endpoint URL, as well as a password for the default user. Now the question becomes, on how do we connect to our database? This is optional, but the first thing I would recommend doing is downloading the Redis Insight tool, which gives you a GUI to analyze and manage data in the database. Once installed, click the option to add a new database and then paste in the public URL that that is cloud provided you with. Then also enter the username of default and the password it generated, and then it should automatically connect to your database. The cool thing about Redis is that it's really easy to learn because everything is organized into a set of key value pairs. Here's a little crash course of the Redis basics. To add a new item to the database, base, you create a new key. Every key is unique and is used to identify a value in the database. A key can also have a data type. In this case, we'll use a string, But there are more complex data types like a hash for objects of multiple key value pairs, lists, and as we'll see later, JSON data. For now, let's go ahead and save a string with a key of hello and a value of world. It also gives you the option to specify a TTL or time to live, after which point that data will be automatically deleted if you want. Leave it blank to keep the data forever. Now the unique thing about Redis is that when you save data, that data is kept in memory as opposed to the disk like it would be on most other traditional database systems. What that means is that Redis is extremely fast. There's no need for a round trip to the disk when retrieving data. But on Redis Cloud, this data is also persisted, which means there's never any actual data loss. Now to make a read to the database, Let's go over to the workbench panel, and you'll notice a terminal here where we can write commands. Redis has a bunch of built in commands that allow allow us to do different things in the database. For example, what we just did previously was a set. With a command, it would look like set followed by hello world. Now to read the string, we can use the get command followed by the key name of hello. Now there are tons of other commands we could execute here to interact with our data, but that's enough to give you general idea. Now we're ready to build something cool. And in order to do that, we'll want to first initialize Next. Js. From the command line, run npx create next app, then open it up in Versus Code. The project has only one dependency, redisom, which you can install with npm. This library brand new, so keep in mind that there may be changes or enhancements in the near future. What it does is map your data into a JavaScript class or entity, making it really easy to build a consistent schema around your data. And it simplifies many of the create, read, update, and delete operations that you'll want to do on the database. 1st, we'll need to connect to our cloud database. And for that, I'm creating a file called dotenv.local that contains environment variables that will automatically be picked up by Next. Js. Inside of it, we have a value of redisurl, which is formatted with the username and password along with the URL and port of the actual database. Replace these values with the ones provided by Redis Cloud. Now from there, let's create a lib directory and a file named redis.js. Inside the file, we have a few imports from redis ohm. The first one we want to think about is the client. That's the main entry point for interacting with the database. To connect to our database in the cloud, we call client open followed by process dotenv e dot redisurl. That will access the environment variable that we set up earlier. Now because of the way Next. Js works, I'm also going to create an async function called connect that will only open the connection if it's not already open. Then the next thing we'll do is define an entity for our data. An entity is basically like a database table. We first define a class, like car, and extend it with entity. From there, we can give it a schema that contains a variety of different properties, each with its own specific data type. By default, this represents a hash in the Redis database. However, when building a more traditional application, you might find it easier to work with JSON. To use the redisJSON module, simply add the option of data structure JSON and now redis will operate more like a document oriented database. Now that we have this entity, we're ready to start creating data. To handle the basic process, I'm going to export an async function here called create car, and then the first thing it does in the body is connect to the database client. From there, we create a repository by combining the schema and the client together. If we want to create new data, we can use the create entity method with a JavaScript object, which later we'll get from a form input in the UI. And lastly, we can call repository save with the car data, to commit it to the database, and Redis will return an automatically generated unique ID. The key is car colon unique ID, then the value is JSON data with the schema that you defined. Now the question becomes, how do we run this function? For that, we'll need 2 things. We need an API route, which will give a name of cars dotjs to handle the write operation on the back end. Then we'll need a React component, which I'll give a name of carform.js in the lib directory that that will handle the user input and make a request to that API route. Let's first implement the API route. We first import the create car function we just defined, then every API route in Next, exports a default function named handler, which contains a request and response, where the request is the incoming data and the response is the the outgoing data you want to send back to the client. In this case, we'll want to use the request body, which will be JSON data from the form, to create a new car. Once Redis is done writing that data, we can then send a response back to the client, letting them know it was successful with the new unique ID. Now that We have an API endpoint. We want to call it from the front end when a form is submitted. In carform.js, I have a React component, and And in the JSX, we have a standard HTML form with a few different text inputs. It also has a submit button, and we will intercept the submit event by passing a function to the form called handleSubmit. In the handleSubmit function, we'll first call event preventDefault to prevent the page from refreshing on submit. And then here's a cool trick when handling form data in a React component. Normally, to convert the form event to JSON, you would have to access each individual property, which leads to some really ugly and tedious code. A better approach is to convert the event target, which is the HTML form, to the formData class, which is built into the browser. That will organize the form fields into a bunch of key value pairs, which we can then turn into a plain JavaScript object by using object from entries. Now it's important to point out that the name that you provide to the form input determines the name of the key. So you'll wanna make sure that that name matches the schema that you chose for your Redis data. Now, the final step is to make a request to the API endpoint, which we can do by using the fetch API in the browser. And for the body, we pass it the JSON stringified form data. You'll want to make sure the content type is JSON, and the method is post. From there, we can send the request, convert it to JSON, and then console log the result. And now, there's just one thing left to do. Let's Let's go into the index. Js file and declare the car form there. And now, we can fire up the Next. Js app by running npm run dev. In the UI, you should have a form that looks like this. Mine looks a little prettier because I've added Bootstrap for styling, and when you fill it out and submit it, it should console log the ID that was created by Redis. In addition, you should be able to open up Redis Insight to see the data there as well. At this point, we have a very basic full stack application with Redis. Now you might be wondering, how do I query and filter this data to show it on the front end? That's where Redis search comes in. It's a very powerful module that allows you to index and search across across your dataset. To use it though, we first need to create an index. And to do that, I'm going to go back into the redis.js file and create a new function called create index. All this function needs to do is reference the repository and call the create index method. Now before we use this function, another thing I want to point out is that we can go up into our schema and add a text search true option to any fields that want to enable full text search. What this allows us to do is query this data with fuzzy matching where it can recognize typos and common words, yet still return the intended result. Let's go ahead and add the full text option to the description. Action. Now creating the index is only something you need to do once. For convenience, I'm going to add another API route here called create index text that imports that function and then sends a response back. Once defined, we can then go to the browser and access the URL API create index to add the index to the database. Now that we have an index, let's go back to the redis dotjs file and create a function to search for cars in the database. This function will take a query as its input, which will be whatever the user types into the form. And then it calls the repository search method, which has all kinds of different capabilities like pagination, It can retrieve the first and last items, it can get a count of the total items in the database, and also perform logical comparisons like greater than, less than, and so on. The first method to call is where, which references one of the properties in the JSON data. In this case, we can search the make of the car for exact equality with the EQ method and pass it the query as an argument. If we also want to search the model of the car at the same time, we can chain or model and also check app for equality. Now when it comes to the description, we don't want exact equality, but instead we want to check the matches within a full text search context. That tells it to return results even if there typos and things like that. And finally, we tell it to return all the results from that query. That takes care of the search logic. Now, once again, we need an API route, which we can easily set up by adding a search dotjs file, inside of which we export a handler. It'll grab the search query from the URL, call the searchCars method, and then return the response, which will be an array of cars, back to the client. And now, the last thing we need is a form on the front end to make calls to the search endpoint. I'm creating a new file called searchform.js, which is a React component, and in the JSX, we have an input that triggers a search function whenever where it is changed. So that'll fire whenever the user types into the form. Now, this component will also need to have state to represent the hits or results that we get back from the search engine. We can define that state with the use state hook and initialize it as an empty array. In the search function, we will first grab the current value of the form and then format it as a URL parameter. The API route is expecting it in that format to pass the value along to Redis. Now you'll also notice that I'm only going to execute this code if the query length is greater than 2. That's just to prevent excessive API calls to the database or API route. It would also be a good data to debounce this code because currently it will make an API call for every keystroke, and that's probably more API calls than you actually need for something like this. From there, we can use the fetch API to make a request to the search endpoint along with the parameters. The result we get back will be an array of cars that we can set as the state on this component. Now let's display the card data by setting up an unordered list, then map each individual hit to a list item. I'm using the entity ID as the key, and then displaying ever data I want to show in the UI, like the make and model and image of the car. Congratulations. You just built a full stack, full text search feature with Redis and Next. Js. I'm gonna go ahead and wrap things up there. If you wanna see more Redis or Next. Js content, let me know in the comments. Thanks for watching, and and I will see you in the next one.
The speakers discuss various modules and projects used in building a full text search project using a React app and SDK. They also explain how to connect to a database through a public endpoint URL and a default password, and recommend a crash course for learning. They provide instructions for creating a new subscription and creating a new database, and discuss creating a schema for data on a database and creating a new car form. They also explain how to run a function on a React component and use the workbench panel to access and read data. Finally, they discuss creating a search endpoint and the use of an unordered list to display car data. They end by thanking the audience and saying they will see them in the next video.