Up next in 10
I Built this React PDF Viewer & Renderer 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-viewer-renderer-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:02
in this video I will show you a PDF
0:05
renderer or viewer that I developed
0:07
inside browser it's a react CHS
0:10
application where you can select a PDF
0:12
document and read this online without
0:15
using any kind of third party desktop
0:17
software you don't need to install any
0:19
software you can do this online by
0:21
visiting or using this react application
0:24
which
0:25
runs statically in the browser so no
0:29
server s dep Tendencies are used it's
0:31
completely in the static it it is
0:34
executed entirely in the browser so this
0:37
is actually the user interface of this
0:39
application uh here you will select a
0:41
PDF file that you want to read uh you
0:44
simply select the file and then the
0:46
pages will load here you will see it
0:48
will display the first page and we have
0:50
these rich controls out there we can
0:53
navigate to the next page or previous
0:55
page we have the set of controls you can
0:58
go to the second page so so and we then
1:01
we can even zoom out zoom in you can all
1:05
these controls are there this is really
1:06
important because if you want your text
1:09
is small then in that in those cases you
1:12
can use these controls to zoom in zoom
1:15
out so you can easily read the text in
1:18
the PDF document then we also have the
1:20
rotate functionality if you want to
1:22
rotate the page you can click this
1:24
button to rotate the page in
1:27
anticlockwise or clockwise Direction so
1:29
this is a actually the loocking uh you
1:32
can rotate the page as well and then we
1:35
have the control to actually view it in
1:38
full screen so if you want to actually
1:39
make the editor in full screen you can
1:41
even do that as well so click this
1:43
button escape and then to exit the full
1:46
screen mode this is actually a really
1:50
good alternative to any uh desktop
1:53
software that you use to actually view
1:56
PDF documents such as aobi acrobat so
1:58
it's completely
2:00
free it works in the browser it is coded
2:03
entirely in react CH using open source
2:05
packages so we also have the settings
2:09
where you can modify this resolution
2:12
DPI and the color depth value as well
2:15
click on save
2:18
settings so you can easy do that and
2:22
then we have also have various themes
2:24
out there this is a dark theme but I
2:26
personally like we also have the light
2:27
theme as well so if you are working in
2:29
night you can toggle in between
2:32
different themes out there this is a
2:34
night theme this is a dark theme this is
2:36
the overall project guys if you are
2:38
interested the link is given in the
2:40
description you can directly purchase
2:41
the full source code of this project uh
2:44
once you purchase it you will be
2:45
redirected to Google Drive where you
2:47
will actually get the zip file which
2:49
will actually contain this full
2:51
directory structure and each application
2:54
is divided into multiple components here
2:56
you will see it is coded inside
2:58
typescript each component is having its
3:01
own file right here and let me show you
3:03
the package.json file which dependencies
3:06
we have used for this uh building this
3:08
application
3:09
so uh let me just open this package.json
3:12
file and as you can see here we are
3:15
using the latest version of react which
3:18
is
3:19
18.0 at the time of recording this
3:23
video
3:24
so and then for third party dependencies
3:29
we are using p PDF lip we are also using
3:32
react PDF as well which is these are two
3:35
PDF related libraries of
3:38
JavaScript this is for specifically for
3:40
react PDF and for the user interface we
3:44
are using Tailwind CSS which is a
3:46
popular CSS framework so if you are
3:49
interested guys in this source code you
3:51
will get this full directory
3:53
structure once you purchase it from
3:56
Google Drives so now to run this project
3:58
it's very easy you come to the command
4:00
line and simply execute the command npm
4:03
run Dev so this will start the
4:05
development server Local Host
4:08
5173 and you will be able to run this
4:11
application and when it comes to
4:13
deployment if you want to deploy this
4:15
application you can simply run this
4:17
build command so there is a second
4:19
command out there which is build so this
4:21
will build out all the assets it will
4:24
create a disc directory if you do want
4:26
to do that let me just show you
4:29
mpm run build so it will build out every
4:33
everything into a disc folder which you
4:35
can directly deploy this if you are
4:37
using any shared hosting or if you are
4:39
purchasing a domain name if you want to
4:41
deploy this it's really easy it will
4:44
create on the left hand side after the
4:46
command finishes it will create this
4:48
disc directory and you can see that the
4:51
disc directory is created and this is
4:54
your minified code so you can easily
4:56
deploy this application as well so now
4:59
now let me show you some passive income
5:01
that I'm earning through this tool here
5:03
so once you deploy this you can easily
5:06
rank this tool on Google and then you
5:08
can
5:09
actually put
5:11
advertisements to actually earn some
5:13
passive income so the user will come to
5:17
your tool they simp simply select the
5:19
PDF document and they can easily read
5:22
the PDF document so uh some I have a
5:26
website which is approved by ISO ISO is
5:28
a ad Network here you can see per day
5:31
basis I'm earning this passive income
5:34
right here through this tool and also on
5:38
AdSense as well so I also have a domain
5:41
approved on AdSense as well so same you
5:44
can see that the passive income I'm
5:46
earning so this is a great potential
5:49
project you can directly purchase it
5:50
guys the link is given in the
5:53
description so you will be able to use
5:56
this project it's a PDF renderer and
5:59
view viewer which works entirely in the
6:01
browser no serice site code is involved
6:04
it's a static website so thank you very
6:07
much for watching this video and also
6:09
check out my website as well free mediat
6:11
tools.com which contains thousands of
6:14
tools regarding audio video and image
6:16
and I will be seeing you in the next
6:18
video