0:00
Uh hello guys, welcome to this video. So
0:02
in this video I'll show you I built out
0:04
a EPUB uh viewer and uh renderer
0:08
directly in the browser. If you want to
0:09
read your ebook viewer,
0:13
you can basically use this react
0:15
application that I developed. It's a
0:16
single page application where you can
0:18
actually read your EUB files. EUB is a
0:23
very popular files similar to PDF.
0:26
So the interface is quite simple. You
0:29
simply drag and drop your E-UP file
0:32
whichever file that you want to read. So
0:34
once the EUP file loads directly in the
0:36
browser you will be able to read this.
0:38
So now page by page by page first of all
0:41
it shows you the cover of this page
0:43
cover of this book. Now we have all the
0:45
controls out there. You can open the
0:48
table of contents. So line by line it
0:50
actually shows you the page number. You
0:55
the whole ebook. You can go to any
0:57
section by clicking the sidebar section
1:00
menu and as you can see
1:08
you simply select that and it also
1:11
supports night mode as well. So I
1:13
basically coded this react application
1:15
from scratch. So if you need the source
1:17
code of this I have given the link you
1:18
can directly purchase it. It's a single
1:21
page application. So it's we are using
1:23
the latest version of react as you can
1:30
And we are using this library EUB 2 to
1:33
actually integrate the viewer
1:36
to read and view EUP files directly in
1:38
the browser. It's a full project. All
1:42
the components are divided into its
1:44
appropriate TypeScript file. So once you
1:46
get the source code, it will be easy for
1:47
you to see how I coded this and also you
1:49
can add additional features on top of
1:51
this. So, so we are running this project
1:55
locally as you can see in in VS code. As
1:59
you can I am running this project npm
2:01
rundev which started this project on
2:04
local host 80080. It will be easy for
2:06
you to deploy this application as well.
2:09
So you can go to any section right here
2:11
or you can zoom in zoom out. All these
2:17
We support light mode everything. You
2:21
can go to the next chapter
2:23
by clicking the next and the previous
2:25
buttons. It also shows you the total
2:27
pages which are there which is 22. It
2:29
shows you the current page as well at
2:31
the bottom side. So in this easy way you
2:36
read the full EUP file here by opening
2:39
this table of content as well going to
2:43
any section write this. So it's really
2:46
easy kind of an application that I
2:48
developed in ReactJS. So if you're
2:50
interested in this full project the link
2:52
is given in the description. You can
2:54
directly purchase it. So it has all the
2:56
buttons here to go to the next page. You
2:59
can easily read any file. So just need
3:03
to load the file by dragging and
3:05
dropping. And after that similarly that
3:08
we read the PDF file we can read the EUP
3:13
here these buttons are also there. You
3:15
can click to go to the previous and the
3:18
next page. So as you can see that so
3:23
so all the processing happens directly
3:25
in the browser. It's an single page
3:27
offline editor where you basically open
3:30
your EUP files and you can read this
3:33
without having internet connection. So
3:35
once you deploy the app, it is actually
3:39
can be offline as well. So it doesn't
3:46
this is the overall react ep viewer. If
3:50
you are interested in this project guys,
3:52
uh the link is given. You can directly
3:55
purchase it. Once you purchase it, uh
3:58
all the source code will be downloaded
4:00
from a zip file from Google Drive
