Up next in 10
I Built this React PDF Resume Editor Passive Income 10$/Month Web App Using react-pdf in Browser
Mar 17, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/i-built-this-react-pdf-resume-editor-passive-income-10-month-web-app-using-react-pdf-in-browser/
Watch My Visual Studio Code IDE Setup Video For Fonts,Themes & Extensions
https://youtu.be/Bon8Pm1gbX8
Hi Join the official discord server to resolve doubts here:
https://discord.gg/cRnjhk6nzW
Visit my Online Free Media Tool Website
https://freemediatools.com/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:03
in this video I will show you a PDF
0:05
resume editor application uh that I
0:07
developed inside react
0:09
CH uh so here you can come to this
0:11
application and create your resume for
0:14
any job application or any student if
0:18
you are a student you can create resumes
0:19
in PDF instantly so this is a single
0:22
page application you can see it's
0:24
deployed on my website as well freem
0:26
mediat tools.com BDF resume editor you
0:29
you can try this application so on the
0:32
left hand side we have this template
0:35
right here from this template you can as
0:38
I make changes here if I change the name
0:42
here you can see instantly on the right
0:44
hand side it will be
0:47
changed so from a template we are
0:50
actually making the resumes so just wait
0:53
let me open the zoomit
0:56
tool so you can see we have this basic
0:59
code right here name label email so you
1:03
can change designation you can change
1:06
the email as well
1:13
so you can see that on the right hand
1:16
side this information is instantly the
1:19
live preview so as soon as you change
1:21
the information the changes are
1:26
done and here you can mention the
1:28
website here
1:38
so after if you have made changes there
1:40
is a export button here uh so if you
1:42
click the export button instantly your
1:44
is resume will be downloaded in a PDF
1:47
format so if you click the open the PDF
1:50
you will see the reflection of the
1:52
changes right here so you come to this
1:55
tool you simply plug the details on the
1:58
right hand side it will reflect it back
2:01
and this is actually gaml code if you
2:03
don't know about this language y ml so
2:07
you can actually this is a human
2:10
readable data language so this is a
2:14
simple template of resumer here you can
2:16
even generate online in gaml so you can
2:19
paste this
2:21
template so on the right hand side your
2:24
resume will be generated so you can see
2:26
you can edit everything right here this
2:29
is actually coded inside react CH here
2:31
you will see that so if you need this
2:33
source code guys you can first of all
2:35
try this tool in on this and then
2:38
purchase it the link is given in the
2:40
description from my Pro Cod store.com
2:42
website and on the checkout page the
2:46
demo of this tool is given so you can
2:47
first of all try this tool on this
2:50
website and uh then after download after
2:54
you make the payment you will be
2:56
redirected to Google Drive where you
2:58
will actually get this zip file file and
3:00
you just need to extract the zip file
3:02
and which will contain this full
3:04
directory structure and uh let me show
3:07
you the source code here it is divided
3:09
into multiple components right here each
3:12
component is coded inside typescript you
3:15
can see it also have a CSS file attached
3:19
to it as well
3:20
so uh the dependencies I've used is
3:23
actually react PDF which is a very
3:26
popular PDF generation library for
3:30
react specifically for react and then
3:32
Mark down to jsx which we have also used
3:36
and we have also used this code mirror
3:38
syntax highlighter as well for using
3:40
this so if you don't know about react
3:42
PDF this is actually a PDF generation
3:46
Library specifically for react CH so
3:48
this is their
3:50
website so it actually creates PDF files
3:53
on the browser so it's a single page
3:55
application guys it's really fast it
3:57
doesn't work it doesn't need any ser
4:00
it's very easy to deploy as well so once
4:02
you come to this once you open this
4:04
website uh once you open the code after
4:06
you purchase it simply open the terminal
4:10
and if you're running it for the very
4:11
first time you just need to install npmi
4:14
so this will install all the nodejs
4:16
module it will create this folder and
4:19
then after that you just need to say npm
4:21
run Dev this will start the development
4:25
server so you can see we are running it
4:27
on Local Host 517 3 but if you want to
4:30
deploy this inside your own domain name
4:33
it's very easy you simply run the
4:35
command npm run buil so this will build
4:38
out this actual project here and it will
4:40
create a disc
4:42
directory on the left hand side which
4:45
will actually hold all the project code
4:48
so that you can easily deploy this to
4:50
any shared hosting or any website that
4:53
you are hosting your website so it can
4:56
be a simple HTML CSS and JavaScript
4:59
files it will create here in the disc
5:01
folder if you see in the assets folder
5:03
we got our minii CSS and the Javascript
5:06
file here and this is your index.html
5:08
file which you will upload to your
5:10
shared hosting so it's that easy to
5:12
deploy guys it's very
5:14
easy and once you deploy this you can
5:16
put advertisements as well let me show
5:18
you some passive income that I'm earning
5:20
from these tools so this is iso.com
5:23
which is an ad Network so I actually get
5:26
some passive income each day if you see
5:28
from this tool
5:30
and also from Google AdSense as well so
5:32
I also have AdSense approved domain as
5:34
well so you can see each day I'm earning
5:36
some passive income from this tool you
5:38
can even do that as well so after
5:40
purchasing it you will get full
5:41
commercial right you can codify the
5:43
source code and also you can add
5:45
additional features as well so it's a
5:47
good starting point you can see you can
5:50
change
5:52
this to your resume
5:56
so so as you make the changes it will be
5:59
deflected
6:12
back if I open this in the local
6:15
environment Local Host
6:22
5173 can see that it opens now so
6:36
you can see the changes are reflected
6:39
back and there is export button you can
6:41
export this to a PDF document so it's
6:44
very easy guys you just need a template
6:47
here you can actually save this template
6:50
as well so it will save this template as
6:52
a yl file you can even open this yml
6:57
template if you have this template
7:01
or if you want to create a new template
7:03
there is a new button right here simply
7:05
click the new button and just paste it
7:06
so this is a Resume Builder application
7:10
for react CH which builds your resume
7:13
instantly it's a
7:15
static uh one page single page
7:17
application you can try this by visiting
7:19
on free media
7:22
tools just added this tool here so
7:26
before purchasing it you can actually
7:28
try this tool
7:33
and thank you very much guys for
7:35
watching this video and I will be seeing
7:38
you in the next one
#Jobs
#Career Resources & Planning
#Resumes & Portfolios