View the live demo via this link<\/a> and access the source code on GitHub<\/a>.<\/p>\n\n\n\n To follow along with this article, we need to have:<\/p>\n\n\n\n Xata<\/a> is a serverless database built on top of PostgreSQL and Elasticsearch. It comes with useful integrations with popular frameworks and technologies like Next.js, Netlify, Nuxt.js, Vercel, Remix, and SvelteKit.<\/p>\n\n\n\n Cloudinary<\/a> is a cloud-based and end-to-end platform with tools and functionalities for storing, processing, editing, managing, delivering, and transforming media assets.<\/p>\n\n\n\n The screenshot below shows the application we’ll create.<\/p>\n\n\n\n Users can fill in their name, provide a message and upload their avatar through the form on the right. After clicking Send<\/strong>, the data gets saved to Xata\u2019s database. We’ll fetch the chats from the database and display them on the left side of the application.<\/p>\n\n\n\n The avatar image upload is handled by Cloudinary\u2019s Upload widget.<\/p>\n\n\n Download, clone, or fork this starter template<\/a> that contains the UI for the chat app.<\/p>\n\n\n Next, navigate to the project directory, and run the command below to install Chakra UI, Next.js, Xata\u2019s SDK, and every other necessary dependency, then run the application.<\/p>\n\n\n The starter template consists of the following files:<\/p>\n\n\n\n We’ll start by creating a new database called chat-app<\/strong> on our Xata account.<\/p>\n\n\n\n Next, create a We’ll get the images from the media uploads in our Cloudinary account.<\/p>\n\n\n\n The database schema is ready, so let\u2019s set up the Xata instance next, and integrate it into the application.<\/p>\n\n\n\n Run the command below to install the CLI globally.<\/p>\n\n\n Next, run Once in the browser, give the API a name and click the Create API key<\/strong> button.<\/p>\n\n\n\n Back on the dashboard, click the Get Code Snippet<\/strong> button at the top-right corner and copy the second command. We’ll use it to initialize the project locally with the aid of the CLI.<\/p>\n\n\n\n Run the command in the terminal and choose from the configuration options. The screenshot below shows the configurations for this application.<\/p>\n\n\n\n The CLI will automatically create a We\u2019ll start by fetching the messages that already exist in the database. Update the Here, we did the following:<\/p>\n\n\n\n We’ll then loop through the data and display the individual messages in the UI.<\/p>\n\n\n When a user clicks the Upload Avatar<\/strong> button, Cloudinary\u2019s Upload widget<\/a> will open, enabling the user to upload a picture. Let\u2019s set it up. Update the <\/a>Prerequisites<\/h2>\n\n\n\n
\n
<\/a>What is Xata?<\/h2>\n\n\n\n
<\/a>What is Cloudinary?<\/h2>\n\n\n\n
<\/a>What We’ll Create<\/h2>\n\n\n\n
![\"the](\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1764210928\/blog-Build_a_Chat_App_With_Cloudinary_and_Xata-1.png\")
<\/a><\/figure><\/div>\n\n\n<\/a>Getting Started<\/h2>\n\n\n\n
npx create-next-app xata-cloudinary-chat-app -e https:\/\/github.com\/nefejames\/hackmamba-xata-chat-app-ui<\/span>\n or\n yarn create next-app xata-cloudinary-chat-app -e https:\/\/github.com\/nefejames\/hackmamba-xata-chat-app-ui<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n npm i\n<\/code><\/span><\/pre>\n\n\n\n
components\/ChatContainer.js<\/code>. The container that holds the chats.<\/li>\n\n\n\ncomponents\/ChatInput.js<\/code>. Where users can input and submit new chats.<\/li>\n\n\n\ncomponents\/ChatProfile.js<\/code>. Holds each user\u2019s name, avatar, and chat message.<\/li>\n\n\n\nlayout\/index.js<\/code>. The layout for the application.<\/li>\n\n\n\nutils<\/code>. This will hold the Xata instance and avatar upload logic, which we’ll set up later.<\/li>\n<\/ul>\n\n\n\n<\/a>Setting Up the Xata Database<\/h2>\n\n\n\n
![\"creating](\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1764210930\/blog-Build_a_Chat_App_With_Cloudinary_and_Xata-2.png\")
<\/a><\/figure>\n\n\n\nmessages<\/code> table that will contain the records of the chat messages that users submit. Each record will have message<\/code>, author<\/code>, img<\/code>, and id<\/code> properties; the id<\/code> is automatically generated by Xata.<\/p>\n\n\n\n![\"creating](\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1764210932\/blog-Build_a_Chat_App_With_Cloudinary_and_Xata-3.png\")
<\/a><\/figure>\n\n\n\n<\/a>Setting Up the Xata Instance<\/h2>\n\n\n\n
npm<\/span> install<\/span> @xata<\/span>.io\/cli -g\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\nxata auth login<\/code>, which will prompt you to create a new API key in the browser or use an existing one; we\u2019ll go with the first option.<\/p>\n\n\n\n![\"login](\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1764211132\/blog-Build_a_Chat_App_With_Cloudinary_and_Xata-6.png\")
<\/a><\/figure>\n\n\n\n![\"creating](\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1764210934\/blog-Build_a_Chat_App_With_Cloudinary_and_Xata-4.png\")
<\/a><\/figure>\n\n\n\n![\"xata](\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1764210937\/blog-Build_a_Chat_App_With_Cloudinary_and_Xata-5.png\")
<\/a><\/figure>\n\n\n\nxata.js<\/code> file that contains the XataClient<\/code> instance we need. Let\u2019s move on to the coding aspects of the application.<\/p>\n\n\n\n<\/a>Fetching the Messages in the Database<\/h2>\n\n\n\n
index.js<\/code> file with the following code:<\/p>\n\n\n import<\/span> { Box, Flex, Heading } from<\/span> \"@chakra-ui\/react\"<\/span>;\n import<\/span> ChatContainer from<\/span> \"@components\/ChatContainer\"<\/span>;\n import<\/span> ChatInput from<\/span> \"@components\/ChatInput\"<\/span>;\n import<\/span> { getXataClient } from<\/span> \"@utils\/xata\"<\/span>;\n\n export<\/span> default<\/span> function<\/span> Home<\/span>({ data }<\/span>) <\/span>{\n return<\/span> (\n <div<\/span>><\/span>\n <Heading<\/span> as<\/span>=\"h1\"<\/span> mb<\/span>={5}<\/span>><\/span>\n Xata Chat App\n <\/Heading<\/span>><\/span>\n <Flex<\/span> flexDir<\/span>={[<\/span>\"column<\/span>\", \"row<\/span>\"]} justifyContent<\/span>=\"space-between\"<\/span>><\/span>\n <ChatContainer<\/span> chats<\/span>={data}<\/span> \/><\/span>\n <Box<\/span>><\/span>\n <ChatInput<\/span> \/><\/span>\n <\/Box<\/span>><\/span>\n <\/Flex<\/span>><\/span>\n <\/div<\/span>><\/span><\/span>\n );\n }\n\n export<\/span> async<\/span> function<\/span> getServerSideProps<\/span>(<\/span>) <\/span>{\n const<\/span> xata = getXataClient();\n const<\/span> data = await<\/span> xata.db.messages.getAll();\n return<\/span> { props<\/span>: { data } };\n }\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n\n
getXataClient<\/code> utility and initialized a new instance.<\/li>\n\n\n\nmessages<\/code> table and fetched all records with getServerSideProps<\/code>.<\/li>\n\n\n\nChatContainer<\/code> component through props.<\/li>\n<\/ul>\n\n\n\n<\/a>Displaying the Messages in the ChatContainer Component<\/h2>\n\n\n\n
import<\/span> { Box, VStack } from<\/span> \"@chakra-ui\/react\"<\/span>;\n import<\/span> ChatProfile from<\/span> \".\/ChatProfile\"<\/span>;\n\n export<\/span> default<\/span> function<\/span> ChatContainer<\/span>({ chats }<\/span>) <\/span>{\n return<\/span> (\n <Box<\/span>><\/span>\n <VStack<\/span> spacing<\/span>={5}<\/span>><\/span>\n {chats.map((chat) => (\n <ChatProfile<\/span>\n key<\/span>={chat.id}<\/span>\n author<\/span>={chat.author}<\/span>\n img<\/span>={chat.img}<\/span>\n message<\/span>={chat.message}<\/span>\n \/><\/span>\n ))}\n <\/VStack<\/span>><\/span>\n <\/Box<\/span>><\/span><\/span>\n );\n }\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n<\/a>Setting Up Avatar Upload Functionality in ChatInput Component<\/h2>\n\n\n\n
ChatInput.js<\/code> file with the following code:<\/p>\n\n\n import<\/span> { useState } from<\/span> \"react\"<\/span>;\n import<\/span> { Box, Button, Input, Flex } from<\/span> \"@chakra-ui\/react\"<\/span>;\n import<\/span> ShowImageUploadWidget from<\/span> \"@utils\/upload\"<\/span>;\n\n export<\/span> default<\/span> function<\/span> ChatInput<\/span>(