00:06.1
00:11.9
Everything is set now!. Login and signup are ready.What to do next? Add the link now.
00:12.0
00:29.6
When the logout button is clicked, I have to go to sign out. It is working. Now let's give action to 'SELL'.
00:29.7
00:34.5
When the 'SELL' button is clicked a form should appear. We have already designed the form.
00:34.6
00:39.4
ok, let's show that component here, we have to set the path first.
00:39.5
00:49.2
Let's go to App first. Then set the path.
00:49.3
00:54.1
What is the name of the component?
00:54.2
00:59.0
Is it Create? yes.
00:59.1
01:08.8
It's not coming Automatically. First, change that javascript.
01:08.9
01:18.6
Let's name the route as 'create'.
01:18.7
01:28.4
import Create from './Pages/Create
01:28.5
01:33.3
Let's check the form now.
01:38.3
01:43.1
There is 'name','category','price', and 'fileupload'.
01:43.2
01:48.0
First, let's give them actions.
01:48.1
01:52.9
As usual, you have to move each one into a state.
01:53.0
01:57.8
Let's meet again after doing this.Before that let's go to the 'create' form.
01:57.9
02:02.7
Here is the 'Create' form. It's a big form.
02:02.8
02:07.6
Let's give the actions.
02:07.7
02:12.5
Let's give actions to 'name','price' and 'category' except 'fileupload'.
02:12.6
02:17.4
Let's meet again after giving action to these form fields.
02:17.5
02:22.3
Let's show them how to upload an image.
02:22.4
02:27.2
We have already shown that in the previous tutorial.
02:27.3
02:46.8
So we have given a state to every field except, the image state change. We will do it now.
02:46.9
02:51.7
There is an input field for the image. Its type is file.
02:51.8
02:56.6
Write 'onChange' listener there.
02:56.7
03:06.4
Let's change the file inside the listener.
03:06.5
03:11.3
Here also an 'event' is coming.
03:11.4
03:26.0
setImage(e.target.files[0])
03:26.1
03:30.9
It's an array, when uploading multiple files it will go into an array.
03:31.0
03:35.8
We want the first file.
03:35.9
03:45.6
Let's display the chosen file in this tag.
03:45.7
03:50.5
'src' already exists there in the last. We have to display the image only if it exists.
03:50.6
03:55.4
Let's write its logic first.
04:10.2
04:15.0
There is a type called BLOB. Just google it for further details.
04:15.1
04:24.8
We have to convert BLOB as a URL then only it can preview in HTML.
04:24.9
04:39.5
For that javascript giving a method called URL.createObjectURL.We are passing this image to this function.
04:39.6
04:49.3
If there is no image, let's pass an empty string.
04:49.4
04:54.2
Let's try it now.
04:54.3
04:59.1
Let's choose a file now.
04:59.2
05:04.0
It's working.
05:04.1
05:08.9
Now let's have to store these items to the firestore.
05:13.9
05:18.7
And in storage.
05:18.8
05:23.6
Image is stored in storage, and data is stored in firestore.
05:23.7
05:28.5
What will we get in return when uploading an image?It gives us an URL in return.
05:28.6
05:33.4
And putting that URL in 'src.'
05:33.5
05:43.2
This is one collection. Similar to that, another collection will come called products.
05:43.3
05:53.0
One document is a product. There is a product id and product URL.
05:53.1
05:57.9
Firebase will store that image and give back the URL for that image.
05:58.0
06:02.8
Let's implement it.
06:02.9
06:12.6
For that, let's give action to a button called 'upload'.
06:12.7
06:37.1
Before that, let's remove the form tags.We are giving action to the button instead of form.
06:37.2
06:42.0
Are there any changes in style? No
06:42.1
06:46.9
Let's give action to that button.
06:47.0
06:51.8
In the onClick event, the image should be uploaded and the form submitted.
06:51.9
07:06.5
For that, let's write a function called handle submit.
07:11.5
07:16.3
Handle submit is an arrow function.
07:36.0
07:45.7
Now let's upload this image into the file upload of firebase.
07:45.8
07:50.6
Now we have to go to config and say we are using firestore.
08:10.3
08:15.1
Let's upload that file
08:15.2
08:20.0
For that we need two contexts.
08:20.1
08:24.9
userContext and firebaseContext.
08:29.9
08:34.7
We need to know which user is uploading the file.
08:34.8
08:54.3
We are giving userid. There is a page called 'view post' that is used for showing posts in large sizes.
08:54.4
09:09.0
We can fetch the user details using this userid.
09:09.1
09:23.7
We are storing userid along with user details in collection.
09:23.8
09:28.6
First let's upload the file.
09:28.7
09:58.0
Let's import two contexts first.FirebaseContext and AuthContext.
10:03.0
10:07.8
File uploading is possible only after login.
10:47.1
10:51.9
Now we have set everything.
10:56.9
11:01.7
We have done all prepration to use firestorage of firebase.
11:01.8
11:06.6
Let's upload this image to firestorage.
11:06.7
11:11.5
For that firebas.
11:16.5
11:21.3
Storage is a function in that we have another function called ref.
11:26.3
11:31.1
Let's give path in the ref function.
11:31.2
11:36.0
path where our image gets uploaded.
11:36.1
11:40.9
Let's give /image as path
11:41.0
11:45.8
Let's give the name also.
11:45.9
11:50.7
Lets use back tick
11:50.8
11:55.6
for writing javascript.
12:05.5
12:10.3
image name is acessible here
12:10.4
12:15.2
That is a BLOB. It has all the details about the image, like name, filesize.
12:25.1
12:29.9
Let's use put method to upload the file.
12:30.0
12:34.8
Let's give image into the put method.
12:39.8
12:59.3
In the 'then' block we use the ref object to take the image URL.
12:59.4
13:28.7
ref.getDownloadURL
13:28.8
13:33.6
Let's console the URL.
13:38.6
13:43.4
For checking whether image is uploaded or not.
13:43.5
13:48.3
Save the code.After uploading the file.
14:03.1
14:07.9
Check the console
14:08.0
14:12.8
It says we have no permssion.
14:12.9
14:17.7
We have to get logged in to upload a file.
14:17.8
14:22.6
Let's log in to clear this prblem.
14:42.3
14:47.1
After logged in let's go to create.
14:47.2
14:52.0
Give action to this button either by link or by history method.
15:06.8
15:11.6
Upload the file.
15:16.6
15:21.4
Show the URL
15:26.4
15:31.2
Go to the Storage
15:31.3
15:36.1
A folder called storage is created.
15:41.1
15:45.9
Let's push this to fire store.
15:50.9
15:55.7
It is an object.
16:00.7
16:05.5
Let's give collection name as products.
16:10.5
16:15.3
We are giving name,category
16:25.2
16:30.0
to collection
16:35.0
16:39.8
Write like this if object has same name and key.
16:39.9
16:44.7
There is no need to specify
16:49.7
16:54.5
Two things are missing
16:54.6
16:59.4
userid equal to user from Authcontext.
16:59.5
17:04.3
userId:user.uid
17:09.3
17:14.1
Next give a date as createdAt
17:14.2
17:19.0
Which mention about when the product is created.
17:38.7
17:43.5
New date give us the current date.
17:58.3
18:03.1
After doing this we uploaded the products.
18:13.0
18:17.8
Let's upload
18:17.9
18:22.7
Uploading is finished.
18:27.7
18:32.5
Because of pressing the button two times,file uploaded two times.
18:32.6
18:37.4
Here there is userid,Go to users please
18:37.5
18:42.3
This id and userid are same right? yes
18:47.3
18:52.1
We are taking the details by matching this id
18:57.1
19:01.9
Let's display these in home page dynamically.
19:11.8
19:16.6
Let's import useHistory
19:26.5
19:31.3
Let's use that
19:46.1
19:50.9
We have imported the usehistory.
19:51.0
19:55.8
Let's redrect to home page.
19:55.9
20:00.7
Let's do it
20:00.8
20:05.6
Reload the page
20:05.7
20:10.5
Fill the form
20:15.5
20:20.3
It's working.
20:20.4
20:25.2
Let's display these items as cards in home page.
20:25.3
20:30.1
Press control+P
20:30.2
20:35.0
There you can type the file name you want to go.
20:40.0
20:44.8
We need to display these posts if and only if when they are mounted for the first time.
20:49.8
20:54.6
This is the parent div of post.
20:54.7
20:59.5
Let's check the quick view.
21:09.4
21:14.2
This is one card, we have to make this card dynmaic.
21:29.0
21:33.8
we need to collect the uploaded products.
21:33.9
21:38.7
Let's use useEffect
21:43.7
21:48.5
and useContext
21:58.4
22:03.2
Let's write context first.
22:08.2
22:13.0
We are repeating the previous step here.
22:32.7
22:37.5
We have to store the products in one state.
22:42.5
22:47.3
Let's initialize state also.
23:02.1
23:06.9
products is an array
23:07.0
23:11.8
Multiple datas will be there.
23:16.8
23:21.6
Let's call to the firebase using useEffect.
23:46.2
23:51.0
give there collection name.
24:05.8
24:10.6
It give us a snapshot in return.
24:30.3
24:35.1
Let's get a parameter called snapshot in then block.
24:35.2
24:40.0
There is an array called docs.
24:40.1
24:44.9
There is alots of methods in each documents.
24:45.0
24:49.8
We need method called data and property called id.
25:04.6
25:09.4
There is an array method called map which returns an array.
25:14.4
25:19.2
Let's make a variable called allpost.
25:29.1
25:33.9
Doc is an array
25:34.0
25:38.8
Product is the first argument in map
25:48.7
25:53.5
We have to call a function called data on this document to access data.
26:03.4
26:08.2
When we return something inside the map, it will return to this array.
26:13.2
26:18.0
There is a method called data
26:18.1
26:22.9
It returns an object of the document.
26:27.9
26:32.7
let's spread this object
26:32.8
26:37.6
Include productid.
26:42.6
26:47.4
Change the name to product
26:52.4
26:57.2
Let's give id here
27:07.1
27:11.9
We entered into firestore then go to products collection take all that collection.
27:12.0
27:16.8
Its give us snapshot object in return.
27:16.9
27:21.7
There is another object called docs inside that object.
27:21.8
27:26.6
Docs is an array actually.
27:31.6
27:36.4
It is an array of each document.
27:36.5
27:41.3
When we map the doc, we will get each product.
27:46.3
27:51.1
We have to call a function called data to get data inside the product.
27:51.2
27:56.0
We return both data and the id.
28:01.0
28:05.8
We place allPost into setState.
28:05.9
28:10.7
Try to print that allPost first
28:10.8
28:15.6
ok, let's print it.
28:25.5
28:30.3
Go to inspect.
28:30.4
28:35.2
Ok, an array is there
28:35.3
28:40.1
Here is the array
28:45.1
28:49.9
Let's put allPost into state.
28:50.0
28:54.8
The rest is simple
28:54.9
28:59.7
Take data from each object and show it here.
28:59.8
29:04.6
Let's do the first card,the rest you guys have to manage.
29:14.5
29:19.3
Let's put curly brackets to make this div dynamic.
29:29.2
29:34.0
Let's call products.map
29:53.7
29:58.5
We have to return this div.
29:58.6
30:03.4
Let's save and check.
30:03.5
30:08.3
It's working. Now let's update the values.
30:13.3
30:18.1
First give the image.
30:28.0
30:32.8
Is this a price?
30:42.7
30:47.5
Now we need name
30:47.6
30:52.4
We have to place it inside curly braces to make it dynamic.
30:52.5
30:57.3
The name is right below.
30:57.4
31:02.2
This is category.
31:31.7
31:36.5
We give the ctegory and name.
31:51.3
31:56.1
Add the date also.
32:06.0
32:10.8
Let's check the output.
32:10.9
32:16.1
We added only one product.
32:21.1
32:25.9
Let's add a new product now.
32:40.7
32:45.5
Change the image
32:55.4
33:00.2
We have done with it.
33:05.2
33:10.0
When the post gets clicked,
33:10.1
33:14.9
Post details showing page should be displayed.
33:15.0
33:19.8
Let's create the route first.
33:44.4
33:49.2
Put the route as view.
33:49.3
33:54.1
Import view post.
34:18.7
34:23.5
Let's check it now.
34:28.5
34:33.3
We have to print dynamic data here.
34:48.1
34:52.9
You can use link tag or history.push to give hyperlink to buttons and all.
34:53.0
34:57.8
We have to send the data to viewpost when the button is clicked.
34:57.9
35:02.7
Inside view there is header and view.
35:02.8
35:07.6
Let's go inside this view.
35:07.7
35:12.5
This are some dummy datas.
35:12.6
35:17.4
Let's make it dynamic.
35:17.5
35:22.3
Sidheeq will explain it
35:22.4
35:27.2
From here we will get all the datas inside the collection.
35:27.3
35:32.1
There is url,productname,price and all.
35:32.2
35:37.0
There is no need to fetch it agian.
35:37.1
35:41.9
Let's place this data inside the context.
35:42.0
35:46.8
Open the viewpost
35:56.7
36:01.5
Here we added a section called seller details.
36:01.6
36:06.4
Seller details stored in another collection of firebase.
36:06.5
36:11.3
We have to fetch it by using userid.
36:16.3
36:21.1
products details are going to store in a context.
36:21.2
36:26.0
Let's repeat it once again. When a post is clicked that post details will be stored in the context,
36:26.1
36:30.9
and push into view.
36:31.0
36:35.8
In view we display the product detail.
36:35.9
36:40.7
Collect user datas from firebase using userid.
36:40.8
36:45.6
Normally we follow the method of filtering datas using id.
36:50.6
36:55.4
Here we follow the context method to make it more comfortable.
36:55.5
37:00.3
Let's begin
37:00.4
37:05.2
Inside the app
37:10.2
37:15.0
We have to make a context first.
37:15.1
37:19.9
Make a new file
37:20.0
37:24.8
Name it as postContext
37:24.9
37:29.7
Context created for a purpose
37:29.8
37:34.6
Seperate context creation according to the purpose is the better way.
37:39.6
37:44.4
Make a context file called as postContext.
37:44.5
37:49.3
Which method we are going to use.
37:49.4
37:54.2
Use any method according to your wish.
38:04.1
38:08.9
We are creating a context.
38:23.7
38:28.5
Context is initially null
38:38.4
38:43.2
Is there any other component called post?No
38:43.3
38:48.1
This is a function.
38:53.1
38:57.9
We have to destructure it now.
39:17.6
39:22.4
We have to place a value in provider.
39:22.5
39:27.3
So let's use a state now.
39:47.0
39:51.8
We have to export the function now.
39:51.9
39:56.7
Let's give value here.
40:01.7
40:06.5
postdetails and setpost details are objects of value.
40:11.5
40:16.3
Export using default keyword because it is a component.
40:16.4
40:21.2
PostContext is a named export.
40:21.3
40:26.1
Let's use the context in index.
40:26.2
40:31.0
Let's use it in app instead
40:31.1
40:35.9
We need this context in home and view only.
40:40.9
40:45.7
Let's wrap everything with it.
41:10.3
41:15.1
Let's wrap this post.
41:25.0
41:29.8
we need it in home too.
41:29.9
41:34.7
First let's set it.
41:54.4
41:59.2
We need the context.
42:43.4
42:48.2
importing useHistory from router dom
43:22.6
43:27.4
Let's check after finishing everything.
43:37.3
43:42.1
We need useEffect,useState and useContext.
43:56.9
44:01.7
Let's make a userdetails state.
44:01.8
44:06.6
Is there two states?No
44:06.7
44:11.5
postdetails coming from context,next is from firebase.
44:36.1
44:40.9
We are directly giving the ret from context
44:41.0
44:45.8
There is no need for product state.
44:45.9
44:50.7
No need for product state instaed we need to take it from context.
44:50.8
44:55.6
Let's use the context now.
45:15.3
45:20.1
We have to call firebase inside useEffect.
45:59.4
46:04.2
Auto import is happening here.
46:19.0
46:23.8
What is the name of collection? users
46:23.9
46:28.7
The imprtant thing to not here is, it is a query.
46:33.7
46:38.5
To take data by filteration.
46:38.6
46:43.4
We already know userid.
46:43.5
46:48.3
We get the coresponding data only.
47:03.1
47:07.9
The syntax is
47:08.0
47:12.8
Three strings are there, first string for
47:12.9
47:17.7
id for filtering
47:27.6
47:32.4
second string for logical operator.
47:32.5
47:37.3
Here we need equalto oerations
47:47.2
47:52.0
Now we need to give usersid
48:01.9
48:06.7
userid inside postDetails
48:11.7
48:16.5
Destructure it
48:36.2
48:41.0
userid inside product
48:41.1
48:45.9
let's give it here
48:50.9
48:55.7
check inside users collection by using the id.
49:00.7
49:05.5
check for postid.
49:05.6
49:10.4
if there is postid,
49:10.5
49:15.3
we get an array of documents
49:15.4
49:20.2
It's raining outside that's why we talk louder.
49:20.3
49:25.1
It's the order of manna sir,
49:25.2
49:30.0
There is a method called get.
49:30.1
49:34.9
We can use get method to take document,that document will be available in then.
49:35.0
49:39.8
Let's place a variable called res
49:39.9
49:44.7
That response is an array.
49:44.8
49:49.6
Lets use foreach
49:49.7
49:54.5
to take that array
50:04.4
50:09.2
a document is coming here
50:14.2
50:19.0
Let's set the user.
50:28.9
50:33.7
Firebase has an object called data
50:33.8
50:38.6
We have to call data function to get data
50:38.7
50:43.5
There is no error
50:48.5
50:53.3
let's render this datas here
50:53.4
50:58.2
We get details of post and user
50:58.3
51:03.1
Let's show it in the UI
51:03.2
51:08.0
Let start from the image
51:13.0
51:17.8
Let's use user details also.
51:17.9
51:22.7
Fill the rest by your self.
51:22.8
51:27.6
Change the user name also.
51:37.5
51:42.3
check whether it is correct or not?
51:42.4
51:47.2
it is user name
51:47.3
51:52.1
Let's place the phone number also
51:57.1
52:01.9
Let's click here
52:02.0
52:06.8
There is an error
52:11.8
52:16.6
We have to use the ternory operator here.
52:21.6
52:26.4
We can use a ternory operator here.
52:26.5
52:31.3
We are calling this data using useeffect.
52:36.3
52:41.1
We can use the && here
52:41.2
52:46.0
It's working now.
52:46.1
52:50.9
We have compelted almost everything now
52:51.0
52:55.8
You have to implement further detailed things.
52:55.9
53:00.7
You can add alot more features to this project.
53:00.8
53:05.6
The best project will get cash prices from nikhilsir.
53:10.6
53:15.4
You can submit the github link in the form given in the discription.
53:15.5
53:20.3
The react tutorial is finished now.
53:20.4
53:25.2
What is the review about react tutorial?
53:25.3
53:30.1
We have finished three projects now
53:30.2
53:35.0
Is there anything else to study
53:35.1
53:39.9
Extra features to implement on top of this.
53:40.0
53:44.8
did you set everything needed to develop a frontend webaplication using react through this tutorial
53:49.8
53:54.6
Are you done well in my absents?
53:54.7
53:59.5
There is only few things to learn in react.
53:59.6
54:04.4
You have to practice more for better understanding.
54:04.5
54:09.3
These are common basics things repeated in every project.
54:14.3
54:19.1
Did you announce cash awards?
54:19.2
54:24.0
They have announce cash awards in my absence.
54:24.1
54:28.9
Who will give the awards?he specifically mention your name for that sir
54:29.0
54:33.8
If you have any problem to submit link through youtube can submit the link in the form given in the discription.
54:43.7
54:48.5
There are three projects we have mentioned for cash price.
54:53.5
54:58.3
You can sumbit all the three projects.
55:08.2
55:13.0
First project is todo application
55:13.1
55:17.9
Second is netflix design
55:18.0
55:22.8
Did you play the movies in netflix?
55:22.9
55:27.7
We are playing the trailer there..
55:27.8
55:32.6
You can integrate some more animations there.
55:32.7
55:37.5
You can play the banner with some movies
55:42.5
55:47.3
You can add movies into playlist
55:47.4
55:52.2
You can set the login page for netflix.
55:52.3
55:57.1
Third project is OLX
55:57.2
56:02.0
We use firebase as backend.
56:02.1
56:06.9
You can host OLX from firebase itself.
56:07.0
56:11.8
Find and do it.
56:11.9
56:16.7
Evaluation will be seperate for each project.
56:16.8
56:21.6
You have to submit three projects in one form.
56:31.5
56:36.3
How much time you need to complete these project?
56:36.4
56:41.2
fifteen days are not enough for completing three projects.
56:41.3
56:46.1
We need more people for competation.
56:51.1
56:55.9
We can set some targets in views or in likes.
56:56.0
57:00.8
ok, for every video minimum 10,000 views
57:00.9
57:05.7
Then we will distribute cash awards.
57:10.7
57:15.5
Remember these things ok
57:15.6
57:20.4
Challange is completed now but dont stop yourself
57:20.5
57:25.3
You have to learn more things like
57:25.4
57:30.2
Redux,you always comment but that
57:30.3
57:35.1
Redux is used for state management
57:35.2
57:40.0
In redux context shared in different way
57:49.9
57:54.7
Let's give redux tutorials later
57:54.8
57:59.6
They are hurry to go to their home.
57:59.7
58:04.5
They invite me for two days but it is one month already.
58:09.5
58:14.3
I invite ganesh for first shoot,a
58:14.4
58:19.2
It is very funny days
58:19.3
58:24.1
There were alot performance by ganesh
58:24.2
58:29.0
That was not toleratable
58:29.1
58:33.9
What are the other things to study except redux.
58:34.0
58:38.8
There is a library called MObx
58:38.9
58:43.7
and Redux-saga
58:43.8
58:48.6
There are alot of state management libraries.
58:48.7
58:53.5
What is nextjs? it is used for server side rendering.
58:58.5
59:03.3
Different pages are coming from the server
59:18.1
59:22.9
Gatsby is like react app
59:23.0
59:27.8
Next thing to do is
59:32.8
59:37.6
Importent thing to remember is testing
59:37.7
59:42.5
Let's do unit test by jest tool
59:42.6
59:47.4
You can use bootstrap for designing
59:52.4
59:57.2
There are two types of bootstraps available
59:57.3
60:02.1
ReactBootstarp ,
60:07.1
60:11.9
We can use the components instead of css files
60:12.0
60:16.8
Small changes like camelcasing will be there
60:26.7
60:31.5
Material ui is there
60:31.6
60:36.4
Materilalize frameworks are available for css
60:46.3
60:51.1
These three projects are enough as homework
60:56.1
61:00.9
Complete the project by yourself
61:05.9
61:10.7
After completing these three projects.
61:15.7
61:20.5
There are many queries from companies for react developers
61:20.6
61:25.4
There is no profile for that
61:25.5
61:30.3
you can submit the resume in theform given in discription
61:40.2
61:45.0
Resume should be atteractive
61:45.1
61:49.9
Submit the resume in the form
61:59.8
62:04.6
God bless you
62:09.6
62:14.4
Take exclusive membership for clear doubts while studying
62:14.5
62:19.3
You can comment for the master projects needed
62:19.4
62:24.2
You can choose the technology also
62:24.3
62:29.1
If people are there let's host master project
62:29.2
62:34.0
Many people got job after completing master project
62:43.9
62:48.7
You can share the you placement experience as video in the form given in the discription
62:53.7
62:58.5
submit Public link of feedback video uploaded in google drive in the form
63:18.2
63:23.0
you can share your experience with us in feedback video
63:32.9
63:37.7
Many people share their experience of placement in linkedin.
63:52.5
63:57.3
all the best
63:57.4
64:02.2
Complete the projects, send resumes,and send feedback video also anything else to mention
64:02.3
64:07.1
Teaching is another experience
64:07.2
64:12.0
It is different from developing
64:12.1
64:16.9
These two knowledges are different
64:17.0
64:21.8
For teaching you should know deeply about that topic
64:21.9
64:26.7
Sir asking questtions like kids
64:26.8
64:31.6
I replayed like i dont know
64:36.6
64:41.4
I feel the same thing ,i am getting clear about many concepts when am coming for teaching
64:41.5
64:46.3
In development we guess alot of things
64:56.2
65:01.0
If you workout a subject for teaching you can clear any interview
65:06.0
65:10.8
Learn yourself and teach others also
65:10.9
65:15.7
Conduct workshop for react
65:15.8
65:20.6
You can invite ganesh and sidheek for inaguration
65:25.6
65:30.4
Connect more people with technology
65:40.3
65:45.1
Help others also for getting a high income tech job.
65:45.2
65:50.0
Bye and all the best
