Up next in 10
Build a Next.js Job Resume & CV Editor & Parser to Export to PDF in Browser Using TypeScript
Feb 26, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-next-js-job-resume-cv-editor-parser-to-export-to-pdf-in-browser-using-typescript/
Show More Show Less View Video Transcript
0:00
Uh hello guys. In this video, I'll show
0:02
you I built out a NexJS
0:05
uh job and CV rum PDF editor. So if
0:10
you're applying for a job, you can
0:12
actually use this editor to actually
0:15
directly create your rumé in a matter of
0:17
minutes. So we are running this next
0:19
year application
0:21
directly inside the browser. We are
0:23
running it on localhost 3000. So the
0:26
interface looks something like this. You
0:28
simply click the create a rum and this
0:32
user interface looks something like
0:34
this. So
0:36
it's a builder and a parser as well.
0:39
[snorts] So if you want to create it
0:41
from scratch, you have a bunch of
0:43
templates which are also there.
0:46
So this is template one, template two.
0:56
So we running this directly inside the
1:00
browser as you can see npm run that. So
1:03
this started the local development
1:04
server.
1:17
So this is the actual builder resumeum
1:20
builder. So as you can see you can
1:24
actually
1:25
zoom in. So on the right hand side this
1:28
is the actual resume which will look
1:29
something like this. So here you can
1:31
actually edit the details such as
1:33
changing the name
1:37
here. This is email address, phone
1:39
number, website everything you can
1:41
customize it. After customizing it you
1:43
can even change the colors as well.
1:46
theme everything you can change phone
1:48
size
1:51
and then
1:54
you can export this rumé to a PDF file.
1:59
So it's actually coded. So we have this
2:02
download button at the bottom screen. So
2:04
once you click the download button that
2:06
rum will be exported. So as you can see
2:08
our rum is successfully created. So it's
2:11
an a static web application. It's coded
2:15
directly inside the NexJS. So if you
2:18
need the source code of this, the link
2:20
is given in the description. Uh you can
2:22
directly purchase the source code. So
2:24
after purchasing the source code, you
2:25
will automatically get the source code
2:27
from Google Drive. So I coded this from
2:30
scratch. So each component as you can
2:32
see is divided into its appropriate
2:34
TypeScript file here. So everything is
2:37
customizable. So once you get the source
2:39
code, you will be able to add more
2:40
features on top of this application. So
2:43
each component as you can see I coded
2:45
this from scratch
2:48
so it's easy for you to actually see the
2:50
source code and edit the details. So
2:53
it's coded as you can see using the
2:56
latest version of nextjs
2:59
which is a really and also react as
3:01
well.
3:03
So we are also using redex tailwind CSS
3:06
as well for this. So we are running this
3:09
local host. So it's easy for you to
3:11
deploy this project as well. So we have
3:13
this npm run build command. So this will
3:16
build out the next year's project.
3:20
So you can see in a matter of minutes
3:22
you basically change the details
3:25
everything you change the company name,
3:27
job title, description everything.
3:32
You can add more jobs as well by
3:34
clicking this button.
3:39
Similarly, if you want to add more
3:41
education details, you click the add
3:43
school button. So, here you specify
3:45
school, degree, date, additional
3:48
information, everything.
3:51
And you can add multiple projects. So,
3:54
click, you just need to click add
3:55
project. So, this will create this
3:57
widget for you. So, right here you can
3:59
specify your project details,
4:00
everything. If you want to delete this,
4:03
you can click the dustpin icon. So same
4:06
goes with skills.
4:09
You can also change the visibility of
4:11
each section. Change the order as well
4:13
by using this hide section. Move down,
4:16
move up.
4:27
So it's really easy. You will see you
4:29
can also change font.
4:48
So [snorts] the thing is that it doesn't
4:50
have a back end. It directly runs in the
4:52
browser. So it's a static web
4:55
application.
4:56
So all the processing directly happens
4:59
in the browser. So
5:01
if you are interested in this, the link
5:03
is given in the description. You can
5:05
directly purchase the source code. So if
5:07
you still face any issues after you
5:09
purchase it in running or deploying the
5:11
project, you can message me. I will
5:12
definitely help you.
5:16
But uh definitely check this out.
5:44
You can either start from scratch or if
5:47
you already have a PDF file, you can
5:49
drop that PDF file right here and it
5:52
will convert that PDF file into a réumé.
5:56
So
5:59
all the options are present. So,
6:20
hey,