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:
- Basic knowledge of Next.js.
- Basic knowledge of JavaScript/TypeScript
- 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:
- Next.js: A React Framework to build our Frontend.
- Xata: A Serverless Data Platform to build our backend
- Cloudinary: To power and manage our assets.
- Tailwind CSS: A utility-first CSS framework to support and develop our design
- React-Hook-Form: To handle all our form input
- React Icons: To add beautiful Icons to our pages.
- Base64: Passwords are encoded using Base64.
- ReactToPrint: To print our components in the browser
- jsPDF: A library to generate our PDFs in JavaScript.
- Yup: A JavaScript schema builder to parse and validate our form input values.
- React-hook-form validation resolver: A JavaScript schema builder to parse and validate our form input values.
- HeroIcons
Project Pages
In the Project, we will have the following Pages
- Home/Landing Page
- Signup Page
- Login Page
- Dashboard Page
- My Resume Page
- Edit Resume
- Download Resume
- Create Resume Page
Getting Started
In this section, we will be doing the following:
- Creating a Database on Xata
- Building the front end with Next.js
- Cloudinary Setup
- Linking our Database with our Frontend and Cloudinary
- 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:
- basic_info
- 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:
- API Route to connect to your Xata database
- Type-safe Codegen
- Accessibility-Ready
- Dark/Light mode
- 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:
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.
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
- Set up a Next.js project.
- Make use of Xata for backend services
- Manage assets with Cloudinary
- Use CSS and Tailwind CSS in a Next.js project
- Manage state using the Context API in a Next.js project.
- Use NPM packages Project Overview.
Resources and References
These resources might be helpful:
Top comments (2)
nice work
Thank you @fadhilsaheer