Telling stories is one of the most effective ways to sell ourselves. In recent times, visual content has dominated the web, making storytelling with pictures an even more captivating technique.<\/p>\n\n\n\n
This blog post aims to build a portfolio that provides an overview of storing, sending, and retrieving data and using these data to promote ourselves.<\/p>\n\n\n\n
At the end of the post, your portfolio should look like this<\/a>.<\/p>\n\n\n\n The live demo of this application is available here<\/a>. Here\u2019s the source code<\/a> for the project.<\/p>\n\n\n\n To complete this project, you’ll need to have:<\/p>\n\n\n\n To get you started, the prerequisites are attached with links to guide you. You can also catch up with crash courses.<\/p>\n<\/div>\n\n\n Xata<\/a> is a branchable, serverless database that offers a web UI making working with data seamless, an indefinitely scalable data API, and more.<\/p>\n\n\n\n Xata<\/a> allows you to store, retrieve, update, delete, search through data, and more.<\/p>\n\n\n\n Cloudinary<\/a> provides extensive video management and a cloud-based image platform while optimally creating, managing, and delivering digital experiences. With Cloudinary<\/a>, you can store, upload, transform, download, and embed images.<\/p>\n\n\n\n Head to Cloudinary<\/a> and log in to your account or create an account here<\/a>.<\/p>\n\n\n\n After successfully creating an account, Cloudinary<\/a> will then redirect you to your account’s dashboard page, where you can see account details that will be useful later on, including your:<\/p>\n\n\n\n Do not share these details with anyone.<\/p>\n<\/div>\n\n\n Next, go to Media Library<\/strong> to create a folder to house your images.<\/p>\n\n\n\n Upload images to the created folder with a simple drag and drop. Next, copy the uploaded image links. You\u2019ll use this when building your application.<\/p>\n\n\n\n Visit\u00a0Xata\u00a0to log in to your account or create an account\u00a0here<\/a>.<\/p>\n\n\n\n After creating an account,\u00a0Xata\u00a0will redirect you to create a workspace for your project. Next, you\u2019ll create a database to house your project data. You’ll then create tables serving as the database component holding your data. Finally, you\u2019ll add data to the table you created in the step above.<\/p>\n\n\n The image column content is the URLs of images copied from Cloudinary.<\/p>\n<\/div>\n\n\n You\u2019ll be bootstrapping Open your Node.js terminal after you’ve navigated to the directory you want the project on:<\/p>\n\n\n You’ll get some prompts, including a prompt to create a dummy new table (Prerequisites<\/strong><\/h2>\n\n\n\n
\n
npm<\/code>. Run the command node -v && npm -v<\/code> to verify that you have them installed or install them from here<\/a>.<\/li>\n\n\n\n<\/a>What is Xata?<\/h3>\n\n\n\n
<\/a>Why Cloudinary?<\/h3>\n\n\n\n
<\/a>Getting Started<\/h2>\n\n\n\n
<\/a>Setting Up a Cloudinary Account<\/h3>\n\n\n\n
\n
<\/a>Setting Up Your Xata Account<\/h3>\n\n\n\n
<\/a>Project Setup and Installation<\/h2>\n\n\n\n
with-xata<\/code> template using the create-next-app<\/code> command.<\/p>\n\n\n\nnpx create-next-app --example with<\/span>-xata with<\/span>-xata-app<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nnextjs_with_xata_example<\/code>). If you already have an existing database, you can ignore. Otherwise, accept to get some content displayed on npm run start<\/code>.<\/p>\n\n\n\nInstall the Xata CLI<\/h3>\n\n\n\n