<\/a>Tech Stack<\/h2>\n\n\n\nJamstack is unique because it encourages you to combine various technologies to build a full-stack application. The following technologies will be used to build an Image gallery:<\/p>\n\n\n\n
\n- Next.js<\/strong> is a React framework for building single-page Javascript applications. With Next.js, you can utilize serverless functions to build your application’s front end and backend without the need for a backend framework.<\/li>\n\n\n\n
- Xata<\/strong> is a serverless database with a built-in search and analytics engine. It has an excellent developer experience as it provides an easy-to-navigate dashboard, well-written documentation, a playground, and code snippets.<\/li>\n\n\n\n
- Cloudinary<\/strong> is an end-to-end solution for digital media. It offers a complete and safe API for quickly uploading media assets.<\/li>\n\n\n\n
- Netlify<\/strong> is a web hosting platform.<\/li>\n<\/ul>\n\n\n\n
<\/a>Prerequisites<\/h2>\n\n\n\nBefore getting started with this tutorial, you should have the following:<\/p>\n\n\n\n
\n- Knowledge of React and React hooks.<\/li>\n\n\n\n
- Basic understanding of ES6 Javascript features.<\/li>\n\n\n\n
yarn<\/code> or npm<\/code> installed as a package manager.<\/li>\n<\/ul>\n\n\n\n<\/a>Getting Started<\/h2>\n\n\n\nClone the starter project in your preferred directory with the git<\/code> command below:<\/p>\n\n\ngit clone<\/span> --branch starter https:\/\/github.com\/Giftea\/image-hub.git<\/span>\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\nRun yarn<\/code> or npm install<\/code> to install all dependencies, and yarn dev<\/code> or npm run dev<\/code> to start the project on http:\/\/localhost:3000<\/a><\/p>\n\n\n\n<\/a>Setting Up Xata<\/h2>\n\n\n\nTo use Xata<\/a>, you have to create an account and set up your development environment.<\/p>\n\n\n\n![\"Xata](\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1764220744\/blog-Building_a_Full-Stack_JAMStack_Application_With_Xata_Cloudinary_and_Next.js-1.png\")
<\/a><\/figure>\n\n\n\nAutomatically, a workspace<\/strong> will be created for you. A workspace is similar to a GitHub organization; it\u2019s a grouping of databases where you can also invite collaborators and work together on those databases.<\/p>\n\n\n\nClick Add a database<\/strong> to create a database in your new workspace.<\/p>\n\n\n\n![\"Xata](\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1764220746\/blog-Building_a_Full-Stack_JAMStack_Application_With_Xata_Cloudinary_and_Next.js-2.png\")
<\/a><\/figure>\n\n\n\nWith the click of a button, a full-featured database was created. The database schema is made up of tables, which you’ll use to design the business model of your website.<\/p>\n\n\n\n![\"Database](\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1764220749\/blog-Building_a_Full-Stack_JAMStack_Application_With_Xata_Cloudinary_and_Next.js-3.png\")
<\/a><\/figure>\n\n\n\nLet\u2019s add a table. Click Add a table<\/strong> and name it “images”. Automatically, the new table has a column id<\/strong>. A unique id is generated for every record on a table.<\/p>\n\n\n\nEach image should have an image URL and tags. Go ahead and add two new columns to the images table:<\/p>\n\n\n\n
\nimg_url<\/code>: String<\/li>\n\n\n\ntags<\/code>: Multiple Select<\/li>\n<\/ul>\n\n\n\n![\"\"\/](\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1764221200\/blog-Building_a_Full-Stack_JAMStack_Application_With_Xata_Cloudinary_and_Next.js-13.gif\")
<\/figure><\/div>\n\n\nThe image gallery will have users, and each user can create an image, so let\u2019s create a new \u201cusers\u201d table and link it to our images table. <\/p>\n\n\n\n
\nfirstname<\/code>: String<\/li>\n\n\n\nlastname<\/code>: String<\/li>\n\n\n\npassword<\/code>: String<\/li>\n\n\n\nemail<\/code>: Xata provides an \u201cEmail\u201d type for emails. Also, mark email as \u201cUnique\u201d.<\/li>\n<\/ul>\n\n\n\n![\"user](\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1764220751\/blog-Building_a_Full-Stack_JAMStack_Application_With_Xata_Cloudinary_and_Next.js-4.png\")
<\/a><\/figure>\n\n\n\nNow, let\u2019s link the users<\/strong> table to the images table. To do this, add a new column to the images table, give it a type of \u201cLink\u201d, name it user<\/code>, and select the users<\/strong> table to link both tables.<\/p>\n\n\n\n![\"Link](\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1764220754\/blog-Building_a_Full-Stack_JAMStack_Application_With_Xata_Cloudinary_and_Next.js-6.png\")
<\/a><\/figure>\n\n\n\nThe database schema for the project is all set; database management has never been simpler. The following steps will be taken to set up the Xata development environment on our local machine:<\/p>\n\n\n\n
\n- Run
npm install @xata.io\/cli -g<\/code> to install the CLI globally.<\/li>\n\n\n\n- Next run
xata auth login<\/code> in your terminal.\n\n- Select Create new API key in browser<\/strong>.<\/li>\n\n\n\n
- Give your API key a name to create an API key.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- Now Xata CLI is installed and you\u2019re authorized. Navigate back to your Xata dashboard.<\/li>\n\n\n\n
- On the left sidebar, click the images<\/strong> table.<\/li>\n\n\n\n
- Click <\/> Get code snippet<\/strong> at the top-right corner.<\/li>\n\n\n\n
- You should see some commands to set up dev environment.<\/li>\n\n\n\n
- We\u2019ve installed the CLI already so copy the second command.<\/li>\n\n\n\n
- Back in your terminal run the command in your project folder.<\/li>\n\n\n\n
- Select the following options for the prompts:<\/li>\n<\/ul>\n\n\n
\u2714 Do you want to use code generation in<\/span> your project? \u203a Generate JavaScript code with<\/span> ES modules\n \u2714 Choose the output file for<\/span> the code generator \u2026 src\/xata.js\n \u2714 Do you want to generate the TypeScript declarations? \u2026 no\n \u2714 Choose a default<\/span> development branch (fallback branch). \u203a <None>\n \u203a Warning: Your .env file already contains an API key. The old API key will be ignored after updating the file.\n \u2714 Your XataClient is generated at .\/src\/xata.js\n \u2714 Project configured successfully.\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nIn the root of your project, you should see an env<\/code> file with your XATA_API_KEY<\/code> and your XataClient<\/code> in \/src\/xata.js<\/code>.<\/p>\n\n\n\nAll Xata configurations are done. Let\u2019s start writing some code!<\/p>\n\n\n\n
<\/a>Create User<\/h2>\n\n\n\nAdd a new file to the \/pages\/api\/<\/code> directory, name it register.js<\/code> and add the code block below:<\/p>\n\n\n \/\/ pages\/api\/register.js<\/span>\n import<\/span> { getXataClient } from<\/span> \"..\/..\/src\/xata\"<\/span>; \/\/ import XataClient func<\/span>\n import<\/span> { promisify } from<\/span> \"util\"<\/span>;\n import<\/span> bcrypt from<\/span> \"bcryptjs\"<\/span>; \/\/ bcrypt to hash user password<\/span>\n\n const<\/span> hash = promisify(bcrypt.hash); \/\/ hash password<\/span>\n const<\/span> xata = getXataClient(); \/\/ initialize XataClient<\/span>\n\n export<\/span> default<\/span> async<\/span> function<\/span> register<\/span>(req, res<\/span>) <\/span>{\n const<\/span> { firstname, lastname, email, password } = req.body; \/\/ destructure user input from req.body<\/span>\n const<\/span> userExist = await<\/span> xata.db.users.filter({ email }).getFirst(); \/\/ fetch user from database using email address<\/span>\n\n if<\/span> (userExist) {\n res.status(400<\/span>);\n throw<\/span> new<\/span> Error<\/span>(\"User already exists\"<\/span>); \/\/ throw error if user with email already exists<\/span>\n }\n\n \/\/ CREATE A NEW USER IF NO USER WITH THE EMAIL ADDRESS EXISTS<\/span>\n const<\/span> user = await<\/span> xata.db.users.create({\n firstname,\n lastname,\n email,\n password<\/span>: await<\/span> hash(password, 10<\/span>),\n });\n\n res.json({ message<\/span>: \"Success\"<\/span> });\n if<\/span> (!user) {\n res.status(400<\/span>);\n throw<\/span> new<\/span> Error<\/span>(\"Invalid user data\"<\/span>);\n }\n }\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nIn the code block above, getXataClient<\/code> is used to initialize xata<\/code> and bcrypt<\/code> is used to create a hash<\/code> for the user\u2019s password.<\/p>\n\n\n\nIn the register<\/code> function, the user\u2019s details are destructured from req.body<\/code>, and the user email<\/code> is used to check if the user already exists. If the user exists, an error<\/code> is returned, otherwise, a new user account is created and added to the database.<\/p>\n\n\n\nNavigate to \/pages\/register.js<\/code> and update the handleOnSubmit<\/code> function as shown below:<\/p>\n\n\n const<\/span> handleOnSubmit = async<\/span> (e) => {\n e.preventDefault();\n setLoading(true<\/span>)\n try<\/span> {\n await<\/span> fetch(\"\/api\/register\"<\/span>, {\n method<\/span>: \"POST\"<\/span>,\n headers<\/span>: {\n \"Content-Type\"<\/span>: \"application\/json\"<\/span>,\n },\n body<\/span>: JSON<\/span>.stringify({ firstname, lastname, email, password }),\n }).then((t<\/span>) =><\/span> t.json());\n router.push('\/login'<\/span>)\n setLoading(false<\/span>)\n } catch<\/span> (error) {\n console<\/span>.log(error);\n }\n};\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nClick Join<\/strong> at the top-right corner of the web page to navigate to the register page. Fill in the input fields and register a user. If successful, you\u2019d be redirected to the login page.<\/p>\n\n\n\nGo back to your Xata dashboard and check if the users<\/strong> table has been updated.<\/p>\n\n\n\n![\"Xata](\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1764220757\/blog-Building_a_Full-Stack_JAMStack_Application_With_Xata_Cloudinary_and_Next.js-7.png\")
<\/a><\/figure>\n\n\n\nWe\u2019ve created our first user record! Let\u2019s authenticate the new user to access other features of the application.<\/p>\n\n\n\n
<\/a>Authenticate User<\/h2>\n\n\n\nAdd a new file to \/pages\/api\/<\/code> directory, name it login.js<\/code> and add the code block below:<\/p>\n\n\n\/\/ \/pages\/api\/login<\/span>\n import<\/span> cookie from<\/span> \"cookie\"<\/span>; \/\/ import cookie<\/span>\n import<\/span> { getXataClient } from<\/span> \"..\/..\/src\/xata\"<\/span>; \/\/ import XataClient func<\/span>\n import<\/span> { promisify } from<\/span> \"util\"<\/span>;\n import<\/span> bcrypt from<\/span> \"bcryptjs\"<\/span>;\n import<\/span> jwt from<\/span> 'jsonwebtoken'<\/span>\n\n const<\/span> compare = promisify(bcrypt.compare); \/\/ to compare password<\/span>\n const<\/span> xata = getXataClient(); \/\/ initialize XataClient<\/span>\n const<\/span> KEY =
<\/a>Prerequisites<\/h2>\n\n\n\nBefore getting started with this tutorial, you should have the following:<\/p>\n\n\n\n
\n- Knowledge of React and React hooks.<\/li>\n\n\n\n
- Basic understanding of ES6 Javascript features.<\/li>\n\n\n\n
yarn<\/code> or npm<\/code> installed as a package manager.<\/li>\n<\/ul>\n\n\n\n<\/a>Getting Started<\/h2>\n\n\n\nClone the starter project in your preferred directory with the git<\/code> command below:<\/p>\n\n\ngit clone<\/span> --branch starter https:\/\/github.com\/Giftea\/image-hub.git<\/span>\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\nRun yarn<\/code> or npm install<\/code> to install all dependencies, and yarn dev<\/code> or npm run dev<\/code> to start the project on http:\/\/localhost:3000<\/a><\/p>\n\n\n\n<\/a>Setting Up Xata<\/h2>\n\n\n\nTo use Xata<\/a>, you have to create an account and set up your development environment.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nAutomatically, a workspace<\/strong> will be created for you. A workspace is similar to a GitHub organization; it\u2019s a grouping of databases where you can also invite collaborators and work together on those databases.<\/p>\n\n\n\nClick Add a database<\/strong> to create a database in your new workspace.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nWith the click of a button, a full-featured database was created. The database schema is made up of tables, which you’ll use to design the business model of your website.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nLet\u2019s add a table. Click Add a table<\/strong> and name it “images”. Automatically, the new table has a column id<\/strong>. A unique id is generated for every record on a table.<\/p>\n\n\n\nEach image should have an image URL and tags. Go ahead and add two new columns to the images table:<\/p>\n\n\n\n
\nimg_url<\/code>: String<\/li>\n\n\n\ntags<\/code>: Multiple Select<\/li>\n<\/ul>\n\n\n\n<\/figure><\/div>\n\n\nThe image gallery will have users, and each user can create an image, so let\u2019s create a new \u201cusers\u201d table and link it to our images table. <\/p>\n\n\n\n
\nfirstname<\/code>: String<\/li>\n\n\n\nlastname<\/code>: String<\/li>\n\n\n\npassword<\/code>: String<\/li>\n\n\n\nemail<\/code>: Xata provides an \u201cEmail\u201d type for emails. Also, mark email as \u201cUnique\u201d.<\/li>\n<\/ul>\n\n\n\n<\/a><\/figure>\n\n\n\nNow, let\u2019s link the users<\/strong> table to the images table. To do this, add a new column to the images table, give it a type of \u201cLink\u201d, name it user<\/code>, and select the users<\/strong> table to link both tables.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nThe database schema for the project is all set; database management has never been simpler. The following steps will be taken to set up the Xata development environment on our local machine:<\/p>\n\n\n\n
\n- Run
npm install @xata.io\/cli -g<\/code> to install the CLI globally.<\/li>\n\n\n\n- Next run
xata auth login<\/code> in your terminal.\n\n- Select Create new API key in browser<\/strong>.<\/li>\n\n\n\n
- Give your API key a name to create an API key.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- Now Xata CLI is installed and you\u2019re authorized. Navigate back to your Xata dashboard.<\/li>\n\n\n\n
- On the left sidebar, click the images<\/strong> table.<\/li>\n\n\n\n
- Click <\/> Get code snippet<\/strong> at the top-right corner.<\/li>\n\n\n\n
- You should see some commands to set up dev environment.<\/li>\n\n\n\n
- We\u2019ve installed the CLI already so copy the second command.<\/li>\n\n\n\n
- Back in your terminal run the command in your project folder.<\/li>\n\n\n\n
- Select the following options for the prompts:<\/li>\n<\/ul>\n\n\n
\u2714 Do you want to use code generation in<\/span> your project? \u203a Generate JavaScript code with<\/span> ES modules\n \u2714 Choose the output file for<\/span> the code generator \u2026 src\/xata.js\n \u2714 Do you want to generate the TypeScript declarations? \u2026 no\n \u2714 Choose a default<\/span> development branch (fallback branch). \u203a <None>\n \u203a Warning: Your .env file already contains an API key. The old API key will be ignored after updating the file.\n \u2714 Your XataClient is generated at .\/src\/xata.js\n \u2714 Project configured successfully.\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nIn the root of your project, you should see an env<\/code> file with your XATA_API_KEY<\/code> and your XataClient<\/code> in \/src\/xata.js<\/code>.<\/p>\n\n\n\nAll Xata configurations are done. Let\u2019s start writing some code!<\/p>\n\n\n\n
<\/a>Create User<\/h2>\n\n\n\nAdd a new file to the \/pages\/api\/<\/code> directory, name it register.js<\/code> and add the code block below:<\/p>\n\n\n \/\/ pages\/api\/register.js<\/span>\n import<\/span> { getXataClient } from<\/span> \"..\/..\/src\/xata\"<\/span>; \/\/ import XataClient func<\/span>\n import<\/span> { promisify } from<\/span> \"util\"<\/span>;\n import<\/span> bcrypt from<\/span> \"bcryptjs\"<\/span>; \/\/ bcrypt to hash user password<\/span>\n\n const<\/span> hash = promisify(bcrypt.hash); \/\/ hash password<\/span>\n const<\/span> xata = getXataClient(); \/\/ initialize XataClient<\/span>\n\n export<\/span> default<\/span> async<\/span> function<\/span> register<\/span>(req, res<\/span>) <\/span>{\n const<\/span> { firstname, lastname, email, password } = req.body; \/\/ destructure user input from req.body<\/span>\n const<\/span> userExist = await<\/span> xata.db.users.filter({ email }).getFirst(); \/\/ fetch user from database using email address<\/span>\n\n if<\/span> (userExist) {\n res.status(400<\/span>);\n throw<\/span> new<\/span> Error<\/span>(\"User already exists\"<\/span>); \/\/ throw error if user with email already exists<\/span>\n }\n\n \/\/ CREATE A NEW USER IF NO USER WITH THE EMAIL ADDRESS EXISTS<\/span>\n const<\/span> user = await<\/span> xata.db.users.create({\n firstname,\n lastname,\n email,\n password<\/span>: await<\/span> hash(password, 10<\/span>),\n });\n\n res.json({ message<\/span>: \"Success\"<\/span> });\n if<\/span> (!user) {\n res.status(400<\/span>);\n throw<\/span> new<\/span> Error<\/span>(\"Invalid user data\"<\/span>);\n }\n }\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nIn the code block above, getXataClient<\/code> is used to initialize xata<\/code> and bcrypt<\/code> is used to create a hash<\/code> for the user\u2019s password.<\/p>\n\n\n\nIn the register<\/code> function, the user\u2019s details are destructured from req.body<\/code>, and the user email<\/code> is used to check if the user already exists. If the user exists, an error<\/code> is returned, otherwise, a new user account is created and added to the database.<\/p>\n\n\n\nNavigate to \/pages\/register.js<\/code> and update the handleOnSubmit<\/code> function as shown below:<\/p>\n\n\n const<\/span> handleOnSubmit = async<\/span> (e) => {\n e.preventDefault();\n setLoading(true<\/span>)\n try<\/span> {\n await<\/span> fetch(\"\/api\/register\"<\/span>, {\n method<\/span>: \"POST\"<\/span>,\n headers<\/span>: {\n \"Content-Type\"<\/span>: \"application\/json\"<\/span>,\n },\n body<\/span>: JSON<\/span>.stringify({ firstname, lastname, email, password }),\n }).then((t<\/span>) =><\/span> t.json());\n router.push('\/login'<\/span>)\n setLoading(false<\/span>)\n } catch<\/span> (error) {\n console<\/span>.log(error);\n }\n};\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nClick Join<\/strong> at the top-right corner of the web page to navigate to the register page. Fill in the input fields and register a user. If successful, you\u2019d be redirected to the login page.<\/p>\n\n\n\nGo back to your Xata dashboard and check if the users<\/strong> table has been updated.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nWe\u2019ve created our first user record! Let\u2019s authenticate the new user to access other features of the application.<\/p>\n\n\n\n
<\/a>Authenticate User<\/h2>\n\n\n\nAdd a new file to \/pages\/api\/<\/code> directory, name it login.js<\/code> and add the code block below:<\/p>\n\n\n\/\/ \/pages\/api\/login<\/span>\n import<\/span> cookie from<\/span> \"cookie\"<\/span>; \/\/ import cookie<\/span>\n import<\/span> { getXataClient } from<\/span> \"..\/..\/src\/xata\"<\/span>; \/\/ import XataClient func<\/span>\n import<\/span> { promisify } from<\/span> \"util\"<\/span>;\n import<\/span> bcrypt from<\/span> \"bcryptjs\"<\/span>;\n import<\/span> jwt from<\/span> 'jsonwebtoken'<\/span>\n\n const<\/span> compare = promisify(bcrypt.compare); \/\/ to compare password<\/span>\n const<\/span> xata = getXataClient(); \/\/ initialize XataClient<\/span>\n const<\/span> KEY =
yarn<\/code> or npm<\/code> installed as a package manager.<\/li>\n<\/ul>\n\n\n\n<\/a>Getting Started<\/h2>\n\n\n\nClone the starter project in your preferred directory with the git<\/code> command below:<\/p>\n\n\ngit clone<\/span> --branch starter https:\/\/github.com\/Giftea\/image-hub.git<\/span>\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\nRun yarn<\/code> or npm install<\/code> to install all dependencies, and yarn dev<\/code> or npm run dev<\/code> to start the project on http:\/\/localhost:3000<\/a><\/p>\n\n\n\n<\/a>Setting Up Xata<\/h2>\n\n\n\nTo use Xata<\/a>, you have to create an account and set up your development environment.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nAutomatically, a workspace<\/strong> will be created for you. A workspace is similar to a GitHub organization; it\u2019s a grouping of databases where you can also invite collaborators and work together on those databases.<\/p>\n\n\n\nClick Add a database<\/strong> to create a database in your new workspace.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nWith the click of a button, a full-featured database was created. The database schema is made up of tables, which you’ll use to design the business model of your website.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nLet\u2019s add a table. Click Add a table<\/strong> and name it “images”. Automatically, the new table has a column id<\/strong>. A unique id is generated for every record on a table.<\/p>\n\n\n\nEach image should have an image URL and tags. Go ahead and add two new columns to the images table:<\/p>\n\n\n\n
\nimg_url<\/code>: String<\/li>\n\n\n\ntags<\/code>: Multiple Select<\/li>\n<\/ul>\n\n\n\n<\/figure><\/div>\n\n\nThe image gallery will have users, and each user can create an image, so let\u2019s create a new \u201cusers\u201d table and link it to our images table. <\/p>\n\n\n\n
\nfirstname<\/code>: String<\/li>\n\n\n\nlastname<\/code>: String<\/li>\n\n\n\npassword<\/code>: String<\/li>\n\n\n\nemail<\/code>: Xata provides an \u201cEmail\u201d type for emails. Also, mark email as \u201cUnique\u201d.<\/li>\n<\/ul>\n\n\n\n<\/a><\/figure>\n\n\n\nNow, let\u2019s link the users<\/strong> table to the images table. To do this, add a new column to the images table, give it a type of \u201cLink\u201d, name it user<\/code>, and select the users<\/strong> table to link both tables.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nThe database schema for the project is all set; database management has never been simpler. The following steps will be taken to set up the Xata development environment on our local machine:<\/p>\n\n\n\n
\n- Run
npm install @xata.io\/cli -g<\/code> to install the CLI globally.<\/li>\n\n\n\n- Next run
xata auth login<\/code> in your terminal.\n\n- Select Create new API key in browser<\/strong>.<\/li>\n\n\n\n
- Give your API key a name to create an API key.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- Now Xata CLI is installed and you\u2019re authorized. Navigate back to your Xata dashboard.<\/li>\n\n\n\n
- On the left sidebar, click the images<\/strong> table.<\/li>\n\n\n\n
- Click <\/> Get code snippet<\/strong> at the top-right corner.<\/li>\n\n\n\n
- You should see some commands to set up dev environment.<\/li>\n\n\n\n
- We\u2019ve installed the CLI already so copy the second command.<\/li>\n\n\n\n
- Back in your terminal run the command in your project folder.<\/li>\n\n\n\n
- Select the following options for the prompts:<\/li>\n<\/ul>\n\n\n
\u2714 Do you want to use code generation in<\/span> your project? \u203a Generate JavaScript code with<\/span> ES modules\n \u2714 Choose the output file for<\/span> the code generator \u2026 src\/xata.js\n \u2714 Do you want to generate the TypeScript declarations? \u2026 no\n \u2714 Choose a default<\/span> development branch (fallback branch). \u203a <None>\n \u203a Warning: Your .env file already contains an API key. The old API key will be ignored after updating the file.\n \u2714 Your XataClient is generated at .\/src\/xata.js\n \u2714 Project configured successfully.\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nIn the root of your project, you should see an env<\/code> file with your XATA_API_KEY<\/code> and your XataClient<\/code> in \/src\/xata.js<\/code>.<\/p>\n\n\n\nAll Xata configurations are done. Let\u2019s start writing some code!<\/p>\n\n\n\n
<\/a>Create User<\/h2>\n\n\n\nAdd a new file to the \/pages\/api\/<\/code> directory, name it register.js<\/code> and add the code block below:<\/p>\n\n\n \/\/ pages\/api\/register.js<\/span>\n import<\/span> { getXataClient } from<\/span> \"..\/..\/src\/xata\"<\/span>; \/\/ import XataClient func<\/span>\n import<\/span> { promisify } from<\/span> \"util\"<\/span>;\n import<\/span> bcrypt from<\/span> \"bcryptjs\"<\/span>; \/\/ bcrypt to hash user password<\/span>\n\n const<\/span> hash = promisify(bcrypt.hash); \/\/ hash password<\/span>\n const<\/span> xata = getXataClient(); \/\/ initialize XataClient<\/span>\n\n export<\/span> default<\/span> async<\/span> function<\/span> register<\/span>(req, res<\/span>) <\/span>{\n const<\/span> { firstname, lastname, email, password } = req.body; \/\/ destructure user input from req.body<\/span>\n const<\/span> userExist = await<\/span> xata.db.users.filter({ email }).getFirst(); \/\/ fetch user from database using email address<\/span>\n\n if<\/span> (userExist) {\n res.status(400<\/span>);\n throw<\/span> new<\/span> Error<\/span>(\"User already exists\"<\/span>); \/\/ throw error if user with email already exists<\/span>\n }\n\n \/\/ CREATE A NEW USER IF NO USER WITH THE EMAIL ADDRESS EXISTS<\/span>\n const<\/span> user = await<\/span> xata.db.users.create({\n firstname,\n lastname,\n email,\n password<\/span>: await<\/span> hash(password, 10<\/span>),\n });\n\n res.json({ message<\/span>: \"Success\"<\/span> });\n if<\/span> (!user) {\n res.status(400<\/span>);\n throw<\/span> new<\/span> Error<\/span>(\"Invalid user data\"<\/span>);\n }\n }\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nIn the code block above, getXataClient<\/code> is used to initialize xata<\/code> and bcrypt<\/code> is used to create a hash<\/code> for the user\u2019s password.<\/p>\n\n\n\nIn the register<\/code> function, the user\u2019s details are destructured from req.body<\/code>, and the user email<\/code> is used to check if the user already exists. If the user exists, an error<\/code> is returned, otherwise, a new user account is created and added to the database.<\/p>\n\n\n\nNavigate to \/pages\/register.js<\/code> and update the handleOnSubmit<\/code> function as shown below:<\/p>\n\n\n const<\/span> handleOnSubmit = async<\/span> (e) => {\n e.preventDefault();\n setLoading(true<\/span>)\n try<\/span> {\n await<\/span> fetch(\"\/api\/register\"<\/span>, {\n method<\/span>: \"POST\"<\/span>,\n headers<\/span>: {\n \"Content-Type\"<\/span>: \"application\/json\"<\/span>,\n },\n body<\/span>: JSON<\/span>.stringify({ firstname, lastname, email, password }),\n }).then((t<\/span>) =><\/span> t.json());\n router.push('\/login'<\/span>)\n setLoading(false<\/span>)\n } catch<\/span> (error) {\n console<\/span>.log(error);\n }\n};\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nClick Join<\/strong> at the top-right corner of the web page to navigate to the register page. Fill in the input fields and register a user. If successful, you\u2019d be redirected to the login page.<\/p>\n\n\n\nGo back to your Xata dashboard and check if the users<\/strong> table has been updated.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nWe\u2019ve created our first user record! Let\u2019s authenticate the new user to access other features of the application.<\/p>\n\n\n\n
<\/a>Authenticate User<\/h2>\n\n\n\nAdd a new file to \/pages\/api\/<\/code> directory, name it login.js<\/code> and add the code block below:<\/p>\n\n\n\/\/ \/pages\/api\/login<\/span>\n import<\/span> cookie from<\/span> \"cookie\"<\/span>; \/\/ import cookie<\/span>\n import<\/span> { getXataClient } from<\/span> \"..\/..\/src\/xata\"<\/span>; \/\/ import XataClient func<\/span>\n import<\/span> { promisify } from<\/span> \"util\"<\/span>;\n import<\/span> bcrypt from<\/span> \"bcryptjs\"<\/span>;\n import<\/span> jwt from<\/span> 'jsonwebtoken'<\/span>\n\n const<\/span> compare = promisify(bcrypt.compare); \/\/ to compare password<\/span>\n const<\/span> xata = getXataClient(); \/\/ initialize XataClient<\/span>\n const<\/span> KEY =