Books Store app using MERN Stack || React Virtual Conference 2021
7K views
Nov 9, 2023
Session Details : 1. Having Mongo Db locally (Docker Container) and in Cloud 2. Node JS + Express to build API 3. Web API talking to Local and Cloud Mongo Db 4. Creating Books Store App using React 5. Integrating React App with Web API Conference Website: https://globaltechconferences.com/event/react-virtual-conference-2021/ C# Corner - Community of Software and Data Developers: https://www.c-sharpcorner.com C# Live - Dev Streaming Destination: https://csharp.live #react #webdevelopment #MERN
View Video Transcript
0:00
So you can install this Mongo instance on our local laptop or use Mongo Atlas
0:08
It's a pretty good thing. I always use it in all my demos, previous demos
0:14
So this is the first time I'm switching to the local container. I just wanted to try this, and I really liked it
0:20
So let's spend a couple of minutes on this one. What we can do is we can go to hub.docker.com
0:29
and hub.docker.com and we can clearly go ahead and see the container
0:38
see this image, the Docker image. We can search for the Mongo
0:46
I think the net is a little slow now. Explore. And we can select the official image
0:56
and you will have this here. This is an official image. And inside this official image
1:06
you will see that all we need to do is pull Docker, pull Mongo
1:09
It gets the Mongo image on our local DB. These have done a fantastic job on specifying
1:18
how do we need to run and the port on which it listens to 7.0
1:25
and they themselves has given that how do we need to run this
1:29
So we need to docker run interactive and give the name of the image
1:35
and we can put it this 27107. And if you want to do it through the doc.yml also
1:44
it's pretty much the same. The only difference is we use this
1:51
the port mapping, whatever is a port mapping, we need to do that one
1:58
That's pretty much from that perspective. So we'll see, come back over here
2:04
and let me do Docker PS. And the moment I do the Docker PS
2:11
I will be able to see here is the Docker container which is running
2:19
and I just started four hours ago. Just wanted to test that everything is working
2:24
So here I will hit on 27017 on my local machine that gets routed to 27107
2:32
Okay, that's the name of that image is Mongo in Docker. So what we can do is we can go ahead and dock logs
2:42
and I can give this container if you want to see what's happening inside that
2:47
And you see that tons and tons of logs are flushing out. So this tool, we can use it as part
2:52
of the initial investigation to find out if at all how the things are going and some of the things
3:04
which we can do first round of investigation right from these logs
3:10
get deeper talker inspect and give the adf four so we can give the first three or first four
3:20
characters but ensure that you're giving the complete id of that so if this guy will give you
3:25
a tons and tons of information where uh where you can uh come and do the second round of investigation
3:32
so it says that uh what is that it's going to start and what is the current state of this
3:38
current state of this, the image it is using, the image ID, and what is the name which we have given
3:46
And here you can see that the host port is 27017. And the port binding, we can see this 2701
3:57
That same thing, whatever we have seen there. And other important things is we can dig deeper into this particular stuff to learn at a high level
4:07
I'm just trying to quickly go through. So this is the slash data slash DB
4:13
That's where, this is the volume. On the volume mount, I did a volume mount
4:17
so that data will be persistent. And this is the volume inside
4:22
It says data.db and data.config.db. That's a couple of things. And one more thing I wanted to highlight
4:31
is the public IP. This is pretty much a very important skill set
4:38
You need to know that when you're using it on, when you're using that on local
4:45
you have to definitely use that. Because I'll show that difference. What will, what will be that
4:56
In a minute, I'll show the difference. Why do you need to use that, right
5:01
You need to definitely need to have this, it's public IP. It will be very handy and you'll spend hours together if you don't use this piece
5:11
And that's pretty important to know what is the public IP. Okay, these are some of the things which I wanted to bring it onto the table
5:18
which will definitely help us if you are doing some investigation. Okay, now the next thing is, okay, this is all fine, Swami
5:25
I know that what else you're bringing onto the table. I said, okay, let's go and do this
5:30
Rock and roll. You have to do the Docker exec IT and the container ID, bin and SH, the shell
5:41
I feel more comfortable in the bash, so I can do the same thing
5:47
Docker exec hyphen IT and ADF four characters. I will do bin bash
5:58
okay technically i'm in the same so you can uh you can see that host name it's uh it's the
6:07
computer on which i mean the container on which it's running so you can see that uh host name
6:12
and i do an exit if i do host name it's my uh my my host uh my computer name it comes is
6:21
Vishwanath Swami. And if I do the docker exact and I do an host name, it shows the container name
6:28
because technically that's the computer or it itself is a container. So it reads it as a
6:35
computer. So if you're a command line guy, if you're a GUI guy like me, you can do this where
6:45
you can see this running logs over here. The one which I showed you through the command line
6:51
you can come and do investigation. If something is going wrong, you can get it over here
6:56
And the other thing is stats. You can see the memory usage and other stuff over here
7:02
And you can do an inspect, whatever I did the inspect. At a high level, you can do here
7:06
But it doesn't give that much of a wealth of information, whatever you've seen on the command line
7:13
You will definitely not get that much of wealth. But at least at a high level
7:17
this gives a pretty good information. but I would suggest we need to get deep down into this one Okay now let do that Now we are in container If I do LS I be seeing the file system I do Mongo So the moment I do Mongo right now I
7:37
inside my Docker container. I'm not in my local machine. You see that right now I'm inside this
7:43
and it works as a shell. I'm not using any Windows commands. I'm using the Linux commands, right
7:51
and you can see that I do show DBs and I can see that all the DBs are there and
7:59
I can say that use books DB and I can go show collections and I can say that
8:11
DB dot books dot find and this one it's showing all those rows which which are
8:24
there in my listing now I did a pretty so you can see this few rows right now I
8:29
have the few rows so let me show you that in a moment that's executing so
8:40
So these are a couple of roles. These all the things will be very much important
8:46
or will be handy if you're using your local instances, local container of the Mongo
8:52
because you need to get down and to find out what all the tables which are there
8:56
why I'm unable to connect and all those things. And I was talking about the inspect and the public IP
9:02
That is pretty much very, very important. Why? I'll come and I'll show you
9:06
Because let's imagine a scenario where you're executing your Web API. And the Web API you are executing through the Kestrel RIS server
9:16
And right now your Docker container is inside the Docker, the MongoDB is inside the Docker container
9:22
So when you go to the config settings, when you go to this app settings, technically this is applicable for anyone and everyone
9:30
So if you come to this app settings, inside the app settings, we give the connection string in one method
9:35
We say that mongodb colon double slash localhost2701. Now, if you execute it here, it understands that the localhost is available
9:46
Perfect. It goes in. But the moment you execute this shopping API inside the container, now it is two containers
9:53
in a separate world. How does one container recognize the other container
9:57
If you try with this localhost, definitely it's going to blow. It's not going to work
10:02
So what we generally do is we can technically come and update this connection string in line number seven, sorry, line number six
10:13
Or one more thing what we do is however you are executing, you need to pass this connection string and give the public IP, the public IP
10:22
Whatever we have seen that IP here previously, that IP you have to specify
10:27
So again, 172.17.0.2, that's an IP. Now, between two containers, it recognizes what should be the path
10:36
So that's a high-level 30,000 foot about the Docker. Again, I'll show you this piece
10:43
That's very, very important because I have spent a few hours' time wasted
10:49
So if you see the IP address, whatever is that, 172.17.0.2. So that's what you need to specify
10:55
So here I can technically switch between the connection string of the local
11:01
when I'm executing this API using IIS Express Orchestral. When I am executing this particular API
11:09
as a container instance, then I need to switch the connection string
11:14
It should not be localhost. It should be the public IP. So that's about the tip
11:20
Why do we need to have these basic commands handy? Okay, let's come back to the API front
11:28
because I already created this entire application. We'll go step by step
11:34
but I just created at a high level what this application is and how does it look
11:41
Let me do a clear and so that we can keep this guy side and handy
11:49
Let me show it. I mean, we'll be doing everything and we'll spend a lot of time
11:55
Okay. So I can quickly come and add this and come back to list
12:01
So all these things are getting tracked which API I'm going to
12:08
and what is the content length which I'm returning and what is the milliseconds it is taking time
12:14
So everything is getting tracked over there. Suppose I can come to George Reddy
12:18
and I'm creating this thing as an inactive. So that will be all the things, whatever I'm doing
12:30
I can go ahead and I can see that those things, everything is getting tracked to the Morgan logger
12:37
We'll see about that. And that's about this one. Let's see the API first
12:44
Let me close this. Let me go to the backend. So this backend we have created using the node.js and express. Okay. So that's a pretty simple
12:58
backend. So I'll just talk about, talk through what are the things which has been used, anything
13:04
which I wanted to highlight, I'll highlight that one. So first thing what I wanted to highlight is
13:11
about these two files env files and example dot env files so if you come to the dot git dot
13:22
dot git ignore file you see that dot env dot env local dot env development local or these are the
13:29
files which are being ignored by default okay so if even if we use this env file that's not going
13:37
to be checked in into any project repository so we are safe over there okay we are pretty much
13:45
safe over there so i've used the use my connection string to my local host and imagine as i was
13:53
mentioning suppose if this back end if i'm adding a docker file and executing it as part of the
13:58
container then we should not use localhost we should use either the container name or the public
14:04
i'm going with the public ip until unless we are not using the docker compose to spin up multiple
14:11
containers i will go by the public ip whatever the ip which you have seen in the previous command
14:16
okay so ensure that please do not ever store any connection string then create example dot
14:23
env and specify what should be the connection string just like your mongodb mongodb your
14:30
your MongoDB server, your port number, your database name, something like that
14:35
But please do not store any of those credentials or any important things there
14:40
And ensure that before checking, you're not, without knowing, you're not checking these files
14:46
Ensure that those files have been tagged inside this Git ignore. That's one tip
14:52
And coming back to this one let start seeing this one It a much a simple Node server I have chalk
15:05
We can use chalk or colors, but I found chalk. People are using chalk colors and one more guy are there in the game
15:18
So when I go and see the trend, the chart was leading
15:22
So I was more lean towards this chalk. Okay, that's a simple thing
15:29
So I'm using chalk.env express, express async handler, joy for schema validation
15:36
Mongoose for MongoDB, and Morgan is for this logger. You see this, all the logging stuff
15:42
which is being spit here, they are coming from this guy, Morgan
15:49
So we'll see real quick. I want to show you something. Suppose if I have this one, now I'm coming back here
15:59
I do save. Node 1 is restarting my server, and it is trying to go and find the MongoDB server
16:12
And inside this persistence, I have created a file just to connect
16:17
I'm just connecting it. And if at all it is connected, I'm showing that in C on board that I was able to connect to my MongoDB connection
16:25
Please do not do this one. I did it just as this is a hollow world because I'm spitting this connection string
16:33
That you do that, that means your connection string will be in while people are going to bring down your database
16:42
Please never, ever do this. I'm doing it only for the demonstration purpose. Okay
16:46
and once I'm not able to connect it, I am spitting this error message
16:52
shock.red.bold, and I was not able to connect the host name. I am spitting it over here
16:58
That's the red one. So if I go back and fix this
17:03
so I do come back over here and now see this? Within a fraction of a second
17:10
it was able to connect. Please do not ever, ever do this. I'm doing it
17:14
I'm really sorry, but please do not do this one. I'm splitting this connection string and it has come here
17:21
And that's, I mean, I'm just highlighting few of those points. And if you, I just wanna show one more point
17:29
Let me go and this one more small improvisation I did from my previous, this thing
17:39
Let me go and select. This was part of my mean stack demonstration, which I did last year, I assume
17:53
I don't remember exactly. So if you see this one, at all the places we did this require
18:03
And here also you see this all the places we have require. And one small improvisation over that is this time I'm doing the import
18:12
and one catch over there is if you i tag this one as a module and when you do a module you have to
18:22
please be very careful when you are using that libraries which is coming framework libraries you
18:30
have to specify like import the particular item from the from the library it's going to recognize
18:36
but if it is the file which we have written let's assume we come back to this router
18:41
and router was written by me and i exported this export default router and that's what i'm saying
18:49
that import book router that's what i exported it here book router book router from this one and
18:56
if you want to do this and go ahead and save this without the js file it's going to crash
19:03
it says that it's not uh it's it's unable to find it so that's one particular tip so if you're
19:10
using if you want to use import and make this as a module the type as a module and ensure that all
19:18
the classes which you write you can do import from that particular class ensure that you are
19:24
having this js extension that's one particular where am i in app file so that you know app.js
19:33
we can come and see the differentiation if you see this express is being like this constant
19:39
required but I did import express and here everything was required the Morgan logger or the
19:45
book router so I did it using the import here that that's one small improvisation over that
19:53
and the next important thing is this course I have made it wide open but we should never do that
20:00
please ensure that you're doing very least privileges had only the host which we should
20:06
allow and only the methods which we should allow. Do not ever open it for
20:11
while. I just did just for the demonstration purpose. Okay. And in the
20:16
previous version, I have used the same one. Some people will use body
20:26
parser. Now Express, they themselves are providing this out of the box so we can
20:32
and use this one. Previously, we used this body partures to parse the body
20:39
Okay, that's one particular thing. And coming back to the server, I'm giving the high level tips
20:46
without wasting much of the time. So the other thing is this we have already covered
20:52
And okay, the other thing is, how are we using that .env file
20:58
So you can drop the .env file at the top level and you can use it
21:03
At the time, you don't need to go ahead and specify the path
21:10
but I want to highlight that from my, yeah, you can do directly like that
21:16
You can say specify require or import whatever it is, slash dot env slash config, that itself will take care
21:23
Now, if you are storing this env file somewhere in the folder structure, please ensure
21:28
that you are giving the full path of that. So I said path.resolve process, CWD
21:37
current working directory, and then backend slash config.env. So that's when it's going to pick up the configuration
21:44
whatever we have specified here. And you don't give that. You have to struggle for a couple of hours
21:50
You might crack it in a minute or two. But I was breaking my head and scratching my head
21:59
Even though I don't have ears, I had to scratch my head to figure it out if I stored it in a different location
22:06
That's one tip. And the other tip, which we have already seen
22:10
that if I'm not able to connect, I am exiting the process
22:16
because I don't want to go ahead. And because we can't do anything, if I'm not
22:20
able to connect to the data store, no point in we going and trying something Okay cool So that one thing And the other thing is we have to focus on this models real quick and
22:35
so we are using this mongoose and have this picture url title author some basic types and
22:44
this one is schema schema validator so in the previous version i have used joy happy joy
22:55
You can come and see that models, the schema validator, I have used this happy joy
23:04
So if you try to go ahead and search this happy joy
23:08
so they themselves will specify that this has been deprecated. So even if you go to this NPM of this happy joy
23:18
so they specify that happy joy has been deprecated, difference which I faced problem yesterday is like if we use this JavaScript we will have an
23:59
habit of using the number as a lower lowercase n if you see this book schema here the number is
24:08
lowercase but here in this mongoose schema if you go to this mongoose mongo schema
24:16
if you go to this mongoose schema i want to show you the data types where it has got
24:28
uppercase so the schema schema types if you see that the schema type is uppercase n so it's not
24:36
a lowercase n just be careful if you want to do if you're using this one just ensure that there is
24:42
an uppercase in. That's another tip. And I have a couple of middlewares, one for this
24:50
logger. So this is Morgan Logger. I really like this guy. They give all beautiful logging
25:00
What was the end point? I mean, it's like we can customize. I just kept it to the pretty
25:05
simple thing, but we can customize as much as we want here. Okay. And the controllers are pretty
25:12
much simple controllers. You can see that like get all books. We're just going away book
25:19
the book model dot find. So it's going to find everything. We have seen that we did it here
25:25
from the console in the MongoDB. Okay. Now how do we add book? There are small mini validations
25:32
not such a big one. We are first doing a basic validator, whatever is the required parameters
25:38
If we don't specify, it's going to throw an error. And a similar book, if it is existing
25:45
then it says that similar book already exists. In both the things, we are specifying 400. And
25:53
once it is there, we are creating it. Okay. I think we have covered pretty much a thing. I can
26:00
go and check this see we have all these things it has come come out so we have
26:08
four just wanted to check that do we have four rows or anything more okay one
26:14
two three four five we have five five rows so I think it should be five one
26:21
two three four five yeah I counted it wrong I'm really sorry for that okay so
26:28
So this is George Reddy's, this thing is here. So I want to go and capture this
26:34
And we'll see that post we will see in a moment. So we'll do the send
26:41
So you got that George Reddy's details. It shows that the book is active
26:46
And one more tip over here is, just wanted to keep it simple
26:50
Today I'm testing with the local host. And tomorrow the URL might change
26:55
I might run on a different port number. Even though it is local, I might run on different ports
27:03
So all we can do is we can go ahead and create an environment
27:08
And inside that environment, we can go ahead and create a variable and host it here
27:13
Because the advantage is at this point of time, I have one, two, three, four, five endpoints
27:19
In real time, we might have a minimum 20 to 25 or more than 50 endpoints we have
27:24
And every time I can't go and change the port in all 25 different tabs, it will be a painful thing
27:34
So all I can do is I can pretty much come over here and change this at one instance
27:38
Please, if you are using this, this is one of the other tips which we can go ahead and do that
27:43
So we have got this jots record. So I can come back over here in the put
27:49
I am going here and I want to send this. See if it is working
28:00
If not, I will send all the other parameters. I did false
28:05
Then I can come back over here and come here. A small, right now you can see this, the John's book is disabled right now
28:16
Okay. So that's a small thing. and we can go ahead and delete any of those rows
28:20
we can specify. Okay, that's pretty much. We can come back to the..
28:31
I'm just seeing, did I miss anything? Okay, these are the methods which we have it here
28:37
And the entire source code, whatever I'm showing here, will be available inside this folder
28:45
Speaker Series 2021. And inside that, you will be seeing a folder called 11th June 2021 underscore bookstore underscore month
28:56
And here you will have both the back end and front end, except even that example, what are the config which I specified
29:05
Example.env, even that will be pointing to your local host. If you have the local instance of the Mongo installed on your laptop
29:15
or you have the Docker container, you have covered. If you are using the Atlas, Mongo Atlas
29:21
or you have some other Mongo instance, ensure that you're changing. And all we have to do is just do an NPM install
29:30
and you're good to go. Everything is in that way. It's all covered
29:36
So we'll see. Come back over here. and a small middleware kind of thing
29:42
because the endpoints, if you see the endpoints like getbookbyid or updatebook or deletebook
29:52
all things are the same route, like book slash bookid. And you have to go ahead and search this book
29:59
For every functionality, all these three functionalities, the first piece is the book should exist in the system
30:06
before you go and either retrieve it or delete it or update it
30:10
So that's pretty much. So even though it's one or two lines
30:15
but still moved it to a reusable method and moved it to a reusable method
30:23
so that we'll be able to use it. I'll come back to that one
30:28
and before that I was able to, I want to show that, see this specifying that it's been deprecated
30:34
please start using this joy. So that's one important point. And this one is async, express async handler
30:43
I think it's going to take some time for that one. Let's take, yeah
30:52
So I took a little time. I didn't have that much patience. I'm sorry for that
30:56
So this one, a simple middleware for handling exceptions inside the async express routes
31:02
and passing them to your express error handlers. So that's this one
31:09
So how do we use it is, whatever our async method is there
31:14
that method we have to wrap it inside this async handler. So if you want to compare
31:20
how our methods were there previously, and if I come in over here
31:25
So we can see that this was an async method. And let me take the getAllBooks
31:33
So that's very simple. So it's just one line. So we have this one line
31:37
So we had this async function. Now if you see, compare with this latest version
31:42
getAllBooks, you have the same functionality. See this, the same functionality, whatever you have it there
31:47
getAllBooks, the request and response. And you're throwing this one line, exactly the same one line
31:55
All we have to do is just wrap it and any of those exceptions will get route to this middleware over here
32:04
So error handler. So it properly does that. So we're using that one
32:09
And another tip about this one. So it doesn't make sense to every time go and check that
32:17
So if you see this getbookedbyid, it's pretty lean. It's just one line because we are using this as part of the middleware
32:23
every time you go with those endpoints where it depends upon the id parameter id which you pass
32:30
we it's one of the way to handle there might be better ways but this is what i have learned
32:35
some others so i'm just passing on to others so if it is helpful we can definitely use it and
32:43
update is again the simple thing we use the same middleware to find if the record exists then it
32:50
comes as part of the body. And the delet is also pretty much the same
32:54
You use the same one. So here we are exporting these all methods
32:58
And coming back to the router, coming back to the routes, you can see that it's a pretty much very lean router
33:08
You don't have any flush inside this. It just creates expressed, and we are creating that book router
33:17
And we have imported all the methods, seven methods, six, particularly, six methods we have imported
33:24
And the first one, does book exists? That we are hooking it to the middleware
33:31
So any route which finds the book ID, so it goes and exudes
33:36
does this book exist on this particular ID? If it, then go to the next step
33:41
Else it throws from there itself. You can see that in the controller
33:47
Let's see that here it goes and tries to find that. If at all, the book doesn't exist
33:53
So, I mean, if it is any problem, we are throwing this finder
33:57
And if this book exists, then we are calling the next. That means go to the next handler
34:04
And if not, we are throwing 404. So that's the one. And final pieces is all pretty lean
34:14
So on this end point where without, I mean, for this books
34:20
for these two verbs, whether it is books or whether it is get books or post books
34:28
So in that, there are nothing coming as part of the route parameter So in that we are calling this get all books get by ID And anything like get book by ID or update book by ID or delete book by ID where we have this ID parameter coming in all
34:42
these three endpoints. So three endpoints are there and by default it's going to take care of
34:48
the middleware is going to run in these three requests specifically and it's going to handle
34:52
That's pretty much about the backend and we have seen a couple of backend calls there
34:58
and let's come back to the front-end. So this front-end is pretty simple
35:05
Is it executing? Yes. It's running. Okay. So the front-end, I didn't use much of the React bootstrap
35:15
or anything including the... I kept it like Redux or any of those things
35:21
Kept it to the pretty simple to showcase that how quickly we'll be able to create
35:26
the CRUD operations in this monstack. So we have covered, we have covered about Mongo
35:36
we covered about Express and Node.js, and we have seen few tips and tricks
35:40
What I felt was helpful, I just passed it off. And what we are using is one thing is
35:48
we are using this React router. And this is the one which I am using
35:56
okay so we are using that and react spinner as well as react toastify so to show some toasts
36:07
on this one so let me turn it this so that now we'll be able to see those things at this point
36:14
of time i'll turn it this okay let's spend some time before we go and discuss that one
36:22
Anything to focus here? No, nothing to focus over there. And these are the simple things
36:29
which it comes out of the box, nothing new. Okay, so nothing new here
36:37
So those are the frameworks. And let's come back to this public folder
36:43
And inside this public folder, you can see this, we are using the
36:49
we are using this one. and the font awesome, the CDN. So all those icons we see this, it's coming from this
36:59
It's coming from that font icon. So we have this root, the div root is here
37:05
So that one, and inside this public, I have a few images
37:08
One is this loader and few books I just hard coded. So dynamically it generates a random number
37:14
between one and 10. And anytime we add a new book, it just adds that one
37:20
the random number and it generates. So that's the one. And here, if we come back to the app here
37:29
you can see this component where, one second, yeah, this is the first component
37:37
where we go ahead and get this app and we are dropping it here in the router
37:43
and we are specifying this document.getElementById root. So root, we have already seen that in the index.html
37:52
where div is root. So that one. And the next thing, what is happening over here is
37:59
in this index file, we are telling that here is the, here is the first element and take that element
38:07
And where we have to load that, you have to load it in this
38:11
we have to load it in this container. So this element, the first piece is the element, and the second piece is a container
38:16
So that's one thing. And one more thing is, what are the bootstrap, which we do have
38:25
That's what I forgot. Or did I remove that? I'm really sorry
38:29
Because we should see that as part of the BOT. One second
38:36
I'm really sorry, guys. Yeah, bootstrap. It's been installed. I don't know. For some reason, I could not see that
38:42
The bootstrap is there. Because without bootstrap, I can't do the styling
38:47
I'm really sorry for that. For some reason, it's there. I'm really sorry
38:54
Yeah. The bootstrap is also important. The bootstrap I have included here
38:58
And if you see the bottom, it's being used from the CDN
39:03
Okay. Those are the two important pieces. I can help myself without those two things Now we know that how these things are getting hooked up So in the HTML file in the HTML file we do have the container or the div
39:21
and where we are going to load everything. And here we have the font or something
39:27
Okay, let's go to the next step in the process. So here we have this app
39:31
and this app is loading the top nav bar and it has got the footer and it has got this stew and here is the toaster and then we are
39:46
having the sticky sidebar you can see this over here the sticky sidebar 15% of that so two columns
39:58
and the 10 columns I have the 12 columns I divided into 2 comma 10 and here is this switch where we
40:05
go and route it to different things. So it's all the, everything is coming
40:11
in play because of this styles, which is there inside this, which is there
40:17
inside is this one. Okay. So let's quickly start and start breaking the application and then let's
40:23
start understand. So I'm starting the server. And let me start
40:40
I'm starting the one, because if you see this one, I mean, it's not needed that you should use the same structure
40:46
but I'm going to check in this structure. So what is happening here is in this package
40:50
if you start, it starts the node. From here, I'm going to the backend
40:55
I'm starting the server JS. And if you specify NPM, if you specify this piece
41:05
where I can go back and see that. So, NPM run server, that means it is
41:11
coming and hitting this line number 9, where it starts the node 1. And
41:15
instead of node, we are starting with the node 1. Nothing special. It's
41:19
pretty simple. So, we have connected. And here, it's going to build that. Okay, while it is building
41:25
let's go ahead and build up some other theory. How did we
41:29
organize this? So, under comparison, I mean, it's all the best practices, which
41:35
you will be using might be entirely different from what I'm using it. It might not be the best
41:41
practice. It might be my personal choice. It might be my personal choice. Okay. So under the layout
41:46
I'm marking it the footer sidebar and top nav bar. We can have our own component specific CSS
41:54
but I made it like a server of Ghaniwarni, put all these style sheets in one place
42:00
but you guys can follow the best practice and go ahead and have separate styles
42:08
for each and every component. Okay, so what do we have here
42:13
We are using this router and we heavily used this icons and the bootstrap functionality
42:25
And by default, the default props is there and the prop type
42:29
and you can see that this one link which says a book bookstore that's going to the dashboard and
42:38
list books and about pages so again if you come to this pages created this home and about about
42:47
is just a small page which shows that and home page is like a just like a dashboard to create
42:55
what all the facilities which are available in the application. It's only for those pieces if you come and see that
43:01
These are the two things. Like if I come to home page, it's just this one
43:07
And if you navigate to the dashboard, it's just like a couple of widgets
43:11
And each of these widgets generally, it's not the application dashboard. It's like a landing page
43:18
Let me rephrase that. It's not an admin dashboard or something where we will show that how many books are there in the stock or what all the purchases which has
43:29
happened over last one week or those kind of graphs and other things which comes that is an
43:33
entirely different dashboard let me call this as a landing page it's just a landing page when once
43:38
you go and hit this one okay so here we have this switch case where if it comes to the route we show this and if it goes to about it we are coming in here and showing this one okay now i can show this there was a small spinner you can
43:59
see this just for a fraction of second you can see that there was a spinner i will because we are
44:07
already running that so that might be the reason we could not see that for a longer time let me go
44:14
ahead and stop this i think that the first tweet it might take i again i'm starting it and maybe
44:21
maybe you like to wrap in next two or three minutes yeah yeah sure sure sure so so we have
44:29
seen that flickering and another another tip in the list page okay another tip is the way
44:39
i organized is like a screens where i mean under the screens if you have different modules we can
44:45
have books and push all these four inside that books and service and again in the service
44:52
I used fetch and if you go ahead and do a comparison whether to use Axios or whether to use fetch
45:02
the fetch I mean the Axios has got more facilities than fetch so you can see that we can do the
45:12
canceling and we can have interceptors and a lot of other things and if you see that data which is
45:19
coming in this and the body. These are some of the differentiation
45:24
and inbuilt protection from cross-site request forgery. Here it doesn't, but my use case was pretty simple
45:33
just do a CRUD operation. So I was sticking to this one
45:37
I'm not doing any of those facilities. I'm not using it. I just was sticking to this one
45:44
Okay, so that's pretty simple. So if you see that fetch, i have the url and i'm doing the post and doing this assigning this value i mean i'm doing the
45:56
stringify of this book taking out all those properties and these are all simple operations
46:03
and you can see let's go through the list one real quick and see this one we have the use state
46:10
one for the books and one for the loading so that's what we are seeing over here if you
46:17
go and go back to some other place and come over here you can see that the loading symbol as long
46:25
the loading is there we are we are showing this we are showing this clock loader this is one of
46:32
the excellent thing you have got hundreds of loaders and i selected this this is the bare
46:38
minimum I have selected. There are hundreds and hundreds of designs. Okay. So that's one thing
46:43
And this table, we already know that until this loading, this will be hidden. If it is false
46:49
we'll show this one. And here, books.map is coming in here. One thing which I wanted to highlight
46:55
here is the rounded circle where this one and a little bit of shadow on top of this. And
47:02
And this is a picture URL which is coming as part of the API call
47:07
And this is another if condition we are using. If the book is active, we are showing the green thumbs up
47:14
And book is deactivated, we are showing the red thumbs up. And it's all pretty much an icon without much of a textual label
47:23
Like everything, it shows that edit book or a delete book. and we can pretty much go and come back here without harming anything
47:33
or we can go and delete that particular row. It shows a small toaster
47:40
So a small application which needs all the facilities like you can do add, update and something
47:51
Let me add this row. I can see this month rates record has been created
48:02
It's a smaller. I mean, these are dynamically generated, these random numbers
48:08
And that's it. So this was the demo from my side
#Programming