How to Create a Resume Builder App with Xata and Cloudinary Using NextJs

Introduction

Resumes play an essential role in getting a job, as it aids in ascertaining a candidate's level of competency for a job role. That said, it needs to be built with care.

In this article, we will learn how to use Xata, a serverless, branch-able, scalable, consistent, highly available, searchable database to build a resume builder’s backend, and Cloudinary, a cloud-based asset management service, to manage all assets. At the same time, Next.js will be used to handle the front-end development.

Here’s a sneak peek at what we’ll be building

The source code of the project is available here on GitHub

Here is a working demo on CodeSandbox

Project Demo

The video below shows what we will be building in this article.

Why Xata and Cloudinary

Xata allows us to combine a Serverless Relational Database, a search engine, and an analytics engine, all behind a single consistent API. There’s also support for edge caching, a workflow for zero-downtime schema migration, and first-class branch support.
At the same time, Cloudinary gives us a lot of power to optimize and transform images automatically, which makes it easy to build any application.

Prerequisites

To follow along, we will need the following:

1. Basic knowledge of Next.js.
2. Basic knowledge of JavaScript/TypeScript
3. Node.js installed.

Project Overview

In this project, we will examine how Xata works as a serverless database that can power the backend of any application. Also, to explore the beauty of assets management Cloudinary has to offer.

Below are the packages we will use in this project:

1. Next.js: A React Framework to build our Frontend.
2. Xata: A Serverless Data Platform to build our backend
3. Cloudinary: To power and manage our assets.
4. Tailwind CSS: A utility-first CSS framework to support and develop our design
5. React-Hook-Form: To handle all our form input
6. React Icons: To add beautiful Icons to our pages.
7. Base64: Passwords are encoded using Base64.
8. ReactToPrint: To print our components in the browser
9. jsPDF: A library to generate our PDFs in JavaScript.
10. Yup: A JavaScript schema builder to parse and validate our form input values.
11. React-hook-form validation resolver: A JavaScript schema builder to parse and validate our form input values.
12. HeroIcons

Project Pages

In the Project, we will have the following Pages

1. Home/Landing Page
2. Signup Page
3. Login Page
4. Dashboard Page
5. My Resume Page
   • Edit Resume
   • Download Resume
6. Create Resume Page

Getting Started

In this section, we will be doing the following:

1. Creating a Database on Xata
2. Building the front end with Next.js
3. Cloudinary Setup
4. Linking our Database with our Frontend and Cloudinary
5. Deploying Our App to Netlify

Creating a Database on Xata

To create our Database, we need to login into our Xata dashboard
by clicking any preferred login option

After logging into our dashboard, click on the Add a database button to create a database.

Clicking the Add a database button, we can now specify the name and location of our database.

For this project, we will name our database “basic_info,” as shown in the image below. We can change it to any other name if we want.

Creating tables

Now, we need to create the tables for our project. In our project, we will need two tables, namely:

1. basic_info
2. user table

Xata represents data as tables, columns, and rows. Schemas describe this structure. Click on "+ Add a Table" and enter a name to add a table.

Defining schema
We can now define our project schema for our table by clicking the “+” icon on the table header. By default, all tables contain one column: the ID column, which gives each row a unique identifier. It can have any value that is unique across all rows of data.
In adding columns, we find that each column has various types.

We will use string throughout our project schemas, as shown below.

The User table looks like this after we have created our schema columns.

In our basic_info table, we need to create our schema columns with the names:

Working with our data
We are now ready to process requests for data from clients and insert incoming data into our database after setting it up as described above.
To look at how we can use our data, we now have to proceed to step two under the Getting started above: Building our front end with Next.js.

Building the front end with Next.js

For fast development, we will clone the Example repo from Xata.
This example showcases how to use Next.js with Xata as our data layer.
With this template, we will get out-of-the-box:

1. API Route to connect to your Xata database
2. Type-safe Codegen
3. Accessibility-Ready
4. Dark/Light mode
5. Respect prefers-reduce-motion for CSS Transitions

Bootstrapping our Next.js App

To proceed, we copy the command below and paste it into our project folder in the terminal to bootstrap the Xata Example repo.

npx create-next-app --example with-xata with-xata-app

Now, we can navigate to the project directory by running the following:

 cd with-xata-app

Also, we can type git clone and then paste the URL below to clone the example repo.

git clone https://github.com/vercel/next.js.git

then we navigate into the project directory by running:

cd next.js

then

cd examples

then

cd with-xata

Linking Xata Workspace and Running Codegen

The next step is to link our Xata Database to our client side. To accomplish this, we need to install Xata CLI
It will help us manage our databases more effectively.

To install the Xata CLI globally, we run the command below:

npm i --location=global @xata.io/cli

To use the Xata CLI, we need to authenticate it to access our workspace and database. We will be doing this globally by running the following:

xata auth login

In our terminal.

Using the xata auth login gives us two options:

1. To create a new API Key: This will open our browser and when we’re logged in, Xata allows us to create a new API key for use with the CLI.

2. Use an existing API Key: This will prompt for an existing key we have, which we can paste into our terminal. We will go with the first option for this project, creating a new API key.

Upon providing an API key, a global configuration of the CLI will be made, which stores our API key in

~/.config/xata/credentials.

Now that we know all the steps to set up our Xata CLI let us run Xata auth login in our terminal using the code below.

xata auth login

Here is what our project folders should look like

Installation
The next step is to install all the packages we will use for our project, starting with Tailwind CSS by following the Installation guild here
Next is to install other packages listed above by running the below command in our terminal

npm install react-hook-form react-icons base-64 react-to-print jspdf yup 

It is essential to verify the dependencies in the package.json file to confirm whether they have been installed.

This should be the current state of our dependencies.

Cloudinary setup

To set up our Cloudinary account, we must follow the Cloudinary React image transformations documentation in this guide

Next is to install Cloudinary React, which allows us to quickly and easily integrate our application with Cloudinary and Cloudinary URL-gen. This enables us to create Cloudinary URLs for our images and videos by running the command below:

npm i cloudinary-react @cloudinary/url-gen 

Linking our Database with our Frontend and Cloudinary

Our Components
Below is the list of components we will use in our project:

Download.jsx

Here is our preview resume component.

DownloadandPreview.jsx

This is our Download and Edit component Button

Education Component

This is the Education section in our resume

Extras.js

This is the Extras section of our resume

Imagesandmedia.js

This is the Image and media section of our resume

Interest.js

This is the Interest section of our resume

Nav.jsx

Nav Section of our pages

References.js

Reference Section of our Resume

Skills.js

Skills Section of our Resume

TopMenu.jsx

Top Menu section of our Resume

The next folder is our context folder, which has the following structure:

Inside our globalContext.jsx, we have

and signupContext.jsx , we have

After creating our components and state context, we can move on to creating our project APIs, which have the following structure.

edit.js
This handles our CV editing

fetchall.js
Fetch all user API

getuser
Get all user's API

signup.js
Signup API

upload.js
This handle or CV Form creation

Our Pages
Also, most of the content here will be code snippets from our code. Please find the code here on GitHub.

Pages Structure

index.js

Our landing pages

signup.js

login.jsx

stepone.jsx

Dashboard.jsx

steptwo.jsx

Edit Page

Preview.jsx

The page to download our Resume

Our Stylesheets

Also, most of the content here will be code snippets from our code. Please find the code here on GitHub.

Pages Structure

Home.module.css

Nav*.module.css*

Preview.module.css

root.module.css

Signup.module.css

steptwo.module.css

Deploying Our App to Netlify

Our app must now be deployed to Netlify using this guide after we have linked our front end to our database.

Conclusion

This post discussed creating a Resume Builder App with Xata and Cloudinary Using NextJs. I hope you enjoyed reading this article.

Here is a list of what we did in this article

1. Set up a Next.js project.
2. Make use of Xata for backend services
3. Manage assets with Cloudinary
4. Use CSS and Tailwind CSS in a Next.js project
5. Manage state using the Context API in a Next.js project.
6. Use NPM packages Project Overview.

Resources and References

These resources might be helpful:

• Xata doc
• Cloudinary Image transformations with React
• How to Deploy Next.js Sites to Netlify