Transcript for transcript_Vadoo_1W8ClLzSz4HnpLErwbPmu8a6vK6bHHm-N.txt

transcript_Vadoo_1W8ClLzSz4HnpLErwbPmu8a6vK6bHHm-N.txt

[00:03:34]  Hi, hi.
[00:03:39]  Hi.
[00:03:40]  So, would you be taking care of this interview today?
[00:03:43]  Like, on behalf of Anil?
[00:03:46]  What do I? Yes, yes.
[00:03:48]  Great, great.
[00:03:49]  So, I had shared a link with Anil.
[00:03:52]  I'll share it again in the chat section.
[00:03:55]  Basically, just to give you a short preface, the students are currently studying in their
[00:04:01]  second years.
[00:04:02]  So unlike conventional colleges, we train our students in mobile app development and
[00:04:06]  web app development from the very first date of joining itself.
[00:04:10]  And we also custom train them.
[00:04:13]  In the sense, my manager Shivani, she reached out to Anil a few months before and she asked
[00:04:21]  Anil what kind of requirements he will have six months down the line.
[00:04:25]  And he had mentioned the react and flask and that's what we have actually trained of students
[00:04:30]  in as well.
[00:04:31]  So, are you able to access the sheet that I have sent in the chart section?
[00:04:38]  Yeah, I am able to just open it.
[00:04:42]  Great.
[00:04:44]  You should be able to edit the fields over there as well.
[00:04:50]  Yes.
[00:04:52]  Hi, Anil. How are you?
[00:04:53]  Yeah, hi, Ranjith. I'm doing good. How are you?
[00:04:56]  I'm doing good. Thanks for asking.
[00:04:58]  Yes. So, we connected two interactions before the final interview.
[00:05:04]  So, here are the interaction feedback given for each student by Anil.
[00:05:08]  And here, you can find all the topics that we have covered so far.
[00:05:12]  So, so far, the entire topic is complete.
[00:05:14]  If you are asking questions from these topics, ideally, the student should be able to answer.
[00:05:19]  They have also done some projects.
[00:05:22]  If you allow them, they will be showcasing it as well.
[00:05:25]  So we are also joined by two of our solutions engineers like Arun and Saitej.
[00:05:31]  You see like we continue to provide support to companies that hire our students for up
[00:05:35]  to a year.
[00:05:37]  We have regular sync ups and we try to understand any concerns that companies might have and
[00:05:41]  we solve that as well.
[00:05:42]  So Arun and Saitej is here.
[00:05:45]  They'll be taking tech inputs and they'll be observing the interview.
[00:05:50]  So this is for the internal feedback.
[00:05:52]  So can we ask the first student to join?
[00:05:57]  Yeah, sure.
[00:05:59]  Great.
[00:06:00]  So, Arun, we can ask the first student to join.
[00:06:02]  Thank you.
[00:06:04]  Yeah, okay.
[00:07:04]  Hello, sir. Am I audible?
[00:07:07]  Yes, yes, you are audible.
[00:07:10]  So hi, Srikar, how are you?
[00:07:13]  I'm good, sir.
[00:07:15]  Okay, so let's start.
[00:07:18]  So give me a brief background of your technical education, what you have learned so far.
[00:07:24]  Hello sir, my name is Rikal. I am from Hyderabad, Telangana. I am currently pursuing BSc in
[00:07:30]  Computer Science from NextGen Institute of Advanced Technology. I am currently learning
[00:07:34]  front-end technologies. I am more focused on frameworks and libraries like React.js,
[00:07:43]  Next.js and backend Python plus.
[00:07:49]  and I did a project using Python plus can next is a full stack project, which is a simple
[00:07:57]  blocks application.
[00:08:01]  Okay, okay. So you know React and Next.js both?
[00:08:07]  Yes.
[00:08:08]  So what's the difference between the both and when to choose which one to use for a project?
[00:08:15]  So React is a front-end library, whereas Next.js is a full-stack framework.
[00:08:24]  So actually, Next.js is built on React.
[00:08:30]  So it has a few additional features.
[00:08:34]  So if you want to do full stack projects,
[00:08:37]  we can choose Next.js.
[00:08:40]  And for better SEO optimization also, we can go for next year's.
[00:08:47]  Okay, so how better SEO optimization happens in Next.js and not in React?
[00:08:54]  I mean, in Next.js, we use server components.
[00:09:01]  And it also provides its own tags like image tag, link tag.
[00:09:09]  It has the optimization.
[00:09:10]  For example, if we take image tag, it is automatically responsive.
[00:09:15]  I mean, based on the size of the device, it will be.
[00:09:19]  it will adjust the size and it also provides link tag and lazy loading
[00:09:32]  Okay, okay. So you know about the JavaScript thing, right? So what's the difference between
[00:09:39]  where let and constant JavaScript?
[00:09:45]  I mean,
[00:09:49]  based on the const is used for constants.
[00:09:54]  I mean, the data which is not changing and let and where based on the scope differences,
[00:10:02]  we use let and where I have no argument was not.
[00:10:10]  Okay, so if we are defining any variable in JS, so which you will prefer where or let?
[00:10:18]  Let.
[00:10:20]  Why?
[00:10:30]  I mean, I don't know.
[00:10:35]  I mean, I know that there will be scope differences between let and where, but
[00:10:43]  Okay.
[00:10:47]  What are the different data types that are in JavaScript?
[00:10:52]  numbers, boolean, string, undefined.
[00:11:01]  Okay, and what's the difference between null and undefined?
[00:11:11]  when the
[00:11:19]  I mean,
[00:11:25]  I mean, when the value is not defined, undefined is basically a data type, sir, whereas null
[00:11:35]  is when the value is not given.
[00:11:37]  I mean, when the value is not given, it will be undefined.
[00:11:42]  And when it will be none?
[00:11:52]  I mean, no idea.
[00:11:56]  Okay, so what are arrow functions in JavaScript?
[00:12:03]  I mean, arrow functions.
[00:12:12]  Basically, they are functions we use arrow.
[00:12:27]  I know but I can't explain.
[00:12:33]  So why we use arrow functions if you have used some of them?
[00:12:42]  In React, we use, I mean, for taking props and using the props, we use arrow functions.
[00:12:48]  And in nothing of it also, I mean, we use that for promises to handle promises.
[00:13:00]  Okay.
[00:13:01]  What is a promise?
[00:13:04]  promise is basically
[00:13:08]  I mean, it has three conditions.
[00:13:12]  It's a request.
[00:13:15]  Promise is basically a request.
[00:13:17]  It has three.
[00:13:20]  One is...
[00:13:23]  I mean.
[00:13:26]  Sir, can I take a minute, sir?
[00:13:29]  Yes, sir.
[00:13:41]  promise is basically a request it has three i mean three conditions one it is pending stage
[00:13:48]  one it is pending stage whether if the if the profit the promise is not fulfilled
[00:13:54]  it will be in pending it is in continuous it will be in full-fledged state and
[00:14:00]  Another is success case and failure case.
[00:14:05]  and they will be handled separately, success case and failure case.
[00:14:13]  Okay.
[00:14:15]  So what are props and react?
[00:14:20]  props are basically the data we send yeah additional data we send to a any component i mean
[00:14:33]  And what is the direction of sending a prop?
[00:14:37]  From parent to child, we can't send reverse.
[00:14:42]  If I want to send something from a child to parent, how can I do that?
[00:14:46]  We can use context, react context.
[00:14:51]  I mean, if we store anything on React, we can directly send to any children.
[00:15:02]  Okay, the basic purpose of context is just of passing this thing from child to parent.
[00:15:10]  Yes, I mean, we can't send directly from child to parent.
[00:15:16]  We can send, but it will be a difficult process.
[00:15:19]  So if we put the data in context, we can send to any children components.
[00:15:29]  Okay, so you have built some projects around Next.js and React.
[00:15:38]  So can you go through one of the projects which you think that you are, it's the full stack one, the next smart thing?
[00:15:48]  So what is the next smart thing?
[00:15:49]  Yeah.
[00:15:50]  The next smart thing is front end only.
[00:15:53]  I did full stack another project.
[00:15:58]  So, okay, so what you have done in the next month?
[00:16:02]  Can you give me a basic idea of how you approached it and how you developed it?
[00:16:08]  In the next month, I used React.js to build it.
[00:16:14]  So I use predefined APIs for login and for data fetching also.
[00:16:19]  I use predefined APIs.
[00:16:20]  So it's basically front end.
[00:16:22]  I directly use the predefined APIs of products.
[00:16:27]  I mean,
[00:16:28]  Nextmart products and I fetch the data.
[00:16:33]  Then I and I also applied authentication.
[00:16:41]  using the same predefined API, there was predefined API using our user details.
[00:16:47]  When we give our user details, it provides as a token using the token.
[00:16:54]  We can now get to different pages and it's basically next month.
[00:17:01]  It's a it's like an e-commerce application in which we can buy the products and we can add to the cart.
[00:17:09]  and okay that's it we can add to the cart for the calling the apis what you have used in the react app
[00:17:18]  For calling the API, I use useEffect.
[00:17:21]  I am using useEffect.
[00:17:24]  In useEffect, I directly call.
[00:17:26]  No, you use any library or inbuilt fetch.
[00:17:29]  What you have used for calling the API?
[00:17:33]  Fetch.
[00:17:33]  I use fetch.
[00:17:36]  Okay, and you have called it in use effect.
[00:17:40]  Yes.
[00:17:41]  So what is a use effect?
[00:17:44]  Use effect is a react hook which handles the side effects of the, I mean, which handles the side effects.
[00:17:51]  I mean, after the first render, whatever we want to run, we will run in the use effect.
[00:17:58]  So will it be run only one time or multiple times?
[00:18:03]  I mean,
[00:18:07]  It will be run one time if we know it will be run one time.
[00:18:14]  Okay, so do we need to do anything to make it run one time or it's by default run one time?
[00:18:22]  We give a dependency array, empty dependency array to run one time.
[00:18:29]  Okay.
[00:18:30]  So if I put something in the dependency array, what would happen?
[00:18:35]  I mean, it's like whenever the, if we put something in the array, based on it, it will be changed.
[00:18:43]  I mean, okay.
[00:18:44]  If inside that array that data is changing, then it will be use effect will be run.
[00:18:56]  Okay.
[00:18:59]  And can you tell me some other hooks that you have used in your application?
[00:19:05]  I use use state.
[00:19:09]  Okay, what's the purpose of that?
[00:19:12]  Whenever there is changing data, I mean, continuously changing data, we'll put in use state.
[00:19:19]  It provides a setter function.
[00:19:21]  Using that setter function, we can update the value and it will be rendered automatically whenever the data is changed.
[00:19:31]  Okay. And just like you have said that you have called an API in the use effect.
[00:19:37]  Well, so for example, if I am on a login page, for example, and I'm just click the submit button after entering the details and I close the application.
[00:19:48]  So what would happen in that case? Would the request be succeeded? And what will how you have handled that thing if you have done that?
[00:19:58]  I mean, after clicking the submit button, sir?
[00:20:02]  Yeah, after clicking the submit button, I accidentally closed the window.
[00:20:06]  So what would happen in that case and how you can handle that?
[00:20:19]  Using try catch we can handle the errors.
[00:20:26]  So do you think there will be some error if I close the window?
[00:20:30]  The request will be sent, sir.
[00:20:33]  I mean, the request will be fetched, sir.
[00:20:40]  but I don't think error occurs.
[00:20:43]  So what will happen you think like you are browsing Amazon or something and you click on a button and you close the window.
[00:20:52]  So what happens behind the scene?
[00:20:57]  Once if we click login, I mean, once if we log in and we close the tab, it will be logged in again if we go to the page.
[00:21:06]  I mean, token request will be sent and the token will be generated to the front end.
[00:21:10]  So token will be will be stored.
[00:21:14]  So the user will be logged in.
[00:21:18]  Okay.
[00:21:18]  So for the login process that you have mentioned that you have used some token thing.
[00:21:23]  So how you manage the token if the user send a request and it receives a token.
[00:21:29]  So how you store it and then process and all these things.
[00:21:33]  Can you briefly describe what happened?
[00:21:35]  When the user gave details and login details, then when the API request is checked in the
[00:21:47]  background, it will check whether the user is correct or not.
[00:21:50]  If the user is correct, it will send a JWT token to the front end.
[00:21:56]  In the front end, we can store the JWT token in cookies or local storage.
[00:22:01]  So, it will be stored in the cookies.
[00:22:06]  We can set a particular amount of period of time.
[00:22:12]  In that time, the JWT token will be stored.
[00:22:15]  So, if the user comes after a while, it will check whether the JWT token is present or not.
[00:22:22]  If the JWT token is present, it will be logged in.
[00:22:25]  And if it is not, again, it will redirect to the login page.
[00:22:31]  Okay, so you have stored in local storage or cookie?
[00:22:36]  In next month, I stored in cookies.
[00:22:40]  Okay, and you generate the token on front end, like the time you have mentioned that it will be expired or it comes from the server?
[00:22:48]  No, in the front end.
[00:22:50]  Okay, so how you decided that the token is generated and how you have set the time for that?
[00:23:01]  In cookies, there will be, I mean, cookies, we can send the data and beside that we can send the expiry, we can send the time, we can set the time there.
[00:23:15]  Oh, and have you implemented JWT on the server or any other authentication method yet you have used?
[00:23:26]  Yes, sir. JWT I used.
[00:23:28]  What is JWT and what all things to do while setting up authentication?
[00:23:34]  JWT is basically JSON web token.
[00:23:39]  So it is a lightweight token.
[00:23:42]  Based on the if a user first when the user sends the data, it will check whether the
[00:23:47]  first the user it will check whether the user is present in the database or not.
[00:23:51]  If the user is present in the database.
[00:23:54]  It will check the password which the user gave and the password in which the database is in database, which is hashed password.
[00:24:07]  Basically, in database, the password will be hashed and we will check the both.
[00:24:12]  It returns a...
[00:24:15]  Boolean value true or false if it is true, we will generate a web token JSON web token and we'll send to the front end and the same process again in the front end we can.
[00:24:31]  Okay, so why you have chosen to do all these things in the front end like expiry and all these and not in the back end thing?
[00:24:42]  Any specific reason for that or?
[00:24:46]  I mean, in the next month, then I only learned about, I mean, front end, I was doing front end.
[00:24:52]  So I tried just front end side, but began doing back end also.
[00:24:59]  Okay.
[00:25:00]  Task provides cookies.
[00:25:01]  So I didn't try it that time.
[00:25:04]  So you know about refresh token and access token?
[00:25:07]  Yes.
[00:25:09]  Yes.
[00:25:10]  What is the use of refresh token?
[00:25:14]  I mean, the token also will be set for a particular time.
[00:25:18]  So whenever the token is expired, a new refresh token will be generated.
[00:25:25]  So so that the user will be.
[00:25:28]  user will user flow will be good
[00:25:33]  Okay, okay. And which database you have used in the backend?
[00:25:37]  SQL.
[00:25:40]  in the blocks application, right?
[00:25:42]  Yes.
[00:25:45]  Okay, and for SQLite, which ORM you have used or you have directly used it?
[00:25:52]  SQL Alchemy.
[00:25:53]  SQL Alchemy.
[00:25:54]  What is SQL Alchemy and what is an ORM?
[00:26:02]  It's basically, I mean, it provides interaction between the
[00:26:09]  direct interaction with the database to our flask functions or classes.
[00:26:19]  Okay.
[00:26:21]  Ordered relation management.
[00:26:22]  ORM.
[00:26:23]  Ordered relation management.
[00:26:26]  Okay.
[00:26:32]  So what you have implemented in blocks application, so you have used the next year said the front end and Python as a backend thing.
[00:26:42]  Yes.
[00:26:44]  Okay.
[00:26:45]  So can you briefly describe what is the how the flow goes through for the creating a blog and all these in your application?
[00:26:53]  Yes.
[00:26:54]  Yes, can I share this thing?
[00:26:57]  Yes, yes.
[00:27:12]  Sir, is it visible?
[00:27:14]  Yes, it's visible.
[00:27:16]  So this is my block sensor.
[00:27:18]  Basically, my idea was to just to showcase, I mean, I learned XJS and Python Plus.
[00:27:24]  Just I tried all the things which I learned.
[00:27:27]  So this is home and this is portfolio where I locally fetched the data.
[00:27:34]  Okay.
[00:27:37]  illustrations, websites and applications.
[00:27:42]  So this is normal and basically this is a block app where the users can see the blocks.
[00:27:50]  So first further we need to log in first.
[00:28:03]  Whenever the user is logged in, he is able to access the dashboard.
[00:28:19]  He is able to log in the dashboard where he can post any blog.
[00:28:24]  I mean, for example, we can post any blogs here.
[00:28:28]  Title, description and image content.
[00:28:30]  If we give, if we send, we can see our blog posts here.
[00:28:35]  We can delete and update also.
[00:28:38]  Okay, so what do you do for UI styling? What you have used in this project?
[00:28:44]  I mean, I use normal CSS.
[00:28:46]  And you have implemented dark mode also, I think.
[00:28:50]  Yes, toggle.
[00:28:52]  So how does it work in any React or Next.js application? How would you change something to dark mode or light mode?
[00:29:03]  Yes, I mean.
[00:29:07]  I mean, so is it working in your application?
[00:29:12]  Like, yeah.
[00:29:13]  So how you have done this thing?
[00:29:15]  I mean, this conditional rendering, I mean, whenever the.
[00:29:21]  based on the input to conditions and if the user is in dot mode then
[00:29:29]  I changed the background and in other case I kept the background white.
[00:29:38]  Okay, okay. So you know about the tailwind?
[00:29:43]  Yes.
[00:29:44]  Oh, why we use tailwind?
[00:29:48]  we can directly use the css using tailwind class i mean tailwind classes directly in our
[00:29:56]  tags you know directly in tags so which is better the normal css or the tailwind one
[00:30:03]  tailwind is better but i was not comfortable so i used to
[00:30:09]  okay no no issues in that
[00:30:12]  How you handle dynamic routes in the next years?
[00:30:17]  Actually, we can...
[00:30:22]  in routing is directly file based in next years when we create a file for example if you want to
[00:30:28]  create a blog page we can we will directly give blog blog we will directly create a folder named
[00:30:35]  blog in the app app and that app route
[00:30:40]  And if we want to create a dynamic route, we will provide the file name in a square brackets.
[00:30:47]  I mean, in square brackets.
[00:30:49]  So it will automatically become dynamic.
[00:30:53]  Okay.
[00:30:53]  And how if in the particular app, the dynamic page, you want to fetch that ID that you have passed, how would you do that?
[00:31:05]  I mean, whenever we give, if we created a dynamic route, whenever we give the path after the block, if we give anything, it will take that path and it will be fetched in the route.
[00:31:23]  So how would you fetch it? It will automatically fetch or you need to do something to fetch it?
[00:31:28]  No, we use params. I mean, we take the from the params.
[00:31:36]  Okay.
[00:31:40]  For the image thing, what you have used in next year is that the image on the first page you have shown.
[00:31:47]  So how you have handled that?
[00:31:50]  What component we use for that?
[00:31:54]  Actually, in Next.js, there is a pretty different image for Next.js, which is more optimal.
[00:32:03]  But here in my project, I use the same image.
[00:32:10]  So what's the difference between the Next.js image thing and the normal HTML image?
[00:32:16]  I mean, next year's image is more optimal.
[00:32:18]  Like, for example, it is responsive.
[00:32:22]  It is more, if we, based on our devices, it will be handled automatically.
[00:32:28]  I mean, it is responsive.
[00:32:32]  Okay, is the web page you have designed right now, is this responsive or not?
[00:32:39]  Mobile responsive or?
[00:32:42]  No, sir.
[00:32:43]  So do you know how to make websites responsive?
[00:32:48]  Yes, sir.
[00:32:50]  How, if we talk about next year's, how would you make a web page as responsive that it will be shown in a good design in the mobile as well as in the web?
[00:33:00]  In next year's I didn't try but generally in normal websites I use media queries but in next year's I didn't try.
[00:33:12]  How that media queries work, you know about that?
[00:33:17]  Yes, sir. I mean, based on our condition, for example, if we give condition beside the
[00:33:24]  media queries.
[00:33:29]  Okay.
[00:33:37]  And for context, what you have used context API for any other library?
[00:33:43]  context database.
[00:33:44]  Okay, why you chose the context API, why not another library?
[00:33:48]  Is there a specific reason like there is a react redux also for this state management
[00:33:55]  thing?
[00:33:58]  I mean, I don't I mean, I just can't I used it.
[00:34:03]  I have no idea.
[00:34:05]  Okay.
[00:34:05]  Okay.
[00:34:05]  What is a state and react application?
[00:34:10]  state
[00:34:13]  Okay, whenever there is a continuously changing data,
[00:34:21]  it is known I mean we'll store in state
[00:34:29]  Okay.
[00:34:30]  State is a continuously changing data.
[00:34:33]  Using use state, we will store the data and we will...
[00:34:38]  manage the changing data.
[00:34:44]  Okay, okay.
[00:34:56]  And you have designed databases in the flask.
[00:35:01]  Yeah, model.
[00:35:02]  So what is the use of the index when we are defining any model or in our backend for the database?
[00:35:13]  Like if I am a user table.
[00:35:16]  And in one of the columns, I have implemented index.
[00:35:20]  So, you know, the purpose of index, why we use index.
[00:35:24]  I mean, the uniqueness, I mean, unique ID.
[00:35:28]  What is primary key used for them?
[00:35:35]  You know about indexing, the normal indexing in database.
[00:35:42]  Yes, I mean.
[00:35:46]  It's basically what is primary primary key primary key is used for uniquely identify the something I mean to uniquely identify.
[00:35:58]  the data I mean in data if we identify an item uniquely we will use then we will set
[00:36:06]  a foreign key particular
[00:36:14]  whenever to mean
[00:36:20]  I have no idea about it.
[00:36:24]  Okay, so like for the act you have implemented the JWT authentication.
[00:36:31]  So how you manage the session for a particular this thing like a user locked in.
[00:36:37]  So how you manage the session of particular.
[00:36:43]  session i mean i directly used cookies and i i gave expiry date to their cookie so it will be
[00:36:50]  handled for that particular time
[00:36:54]  Okay.
[00:36:58]  What is a dictionary in Python?
[00:37:02]  A dictionary in Python is it stores a key value parameter.
[00:37:10]  Okay, and what is an object in JavaScript?
[00:37:18]  an object in JavaScript.
[00:37:20]  Same thing, I mean, it also stores a key value pair.
[00:37:27]  Okay, and for example, I have an endpoint in flask and I want to return a JSON data.
[00:37:34]  So how can I return that?
[00:37:38]  We can use JSONify method.
[00:37:42]  What it does?
[00:37:45]  It changes into JSON object.
[00:37:52]  Okay.
[00:38:00]  And for the forms, like I have a user form, and if I want to handle the validations in
[00:38:06]  print end, how would I do that?
[00:38:12]  User validations.
[00:38:14]  Yes, you have I have a email and password field and user enter some wrong data.
[00:38:21]  So how would you handle that?
[00:38:26]  I mean, in class, I wrote validations.
[00:38:32]  No, no, in the front end part, I'm asking.
[00:38:35]  the front end like we see now if we enter something wrong data in any of the website
[00:38:40]  it shows that yes the password is wrong or something
[00:38:51]  We can give, I mean, in password, if we give the type equal to password, if other than password, if something is given, it will be automatically handled.
[00:39:00]  If the type is mentioned and we can handle customizing our front end.
[00:39:10]  using the try catch method if the pass if we put a condition we can we can show something below the input
[00:39:21]  Okay. And in React, what is JSX?
[00:39:27]  JSX is a JavaScript XML which is a mixture of JavaScript and HTML.
[00:39:33]  It is similar to HTML.
[00:39:35]  So we can basically write HTML in Java.
[00:39:39]  I mean, we can basically write JavaScript using HTML like a format.
[00:39:50]  Okay.
[00:40:00]  You know about prop dealing.
[00:40:03]  Yes, I'm probably.
[00:40:05]  What is proper drilling?
[00:40:08]  Prop drilling is basically we can send data from parent to child.
[00:40:14]  I mean, if we want to send data from a parent to a child, we should send from, I mean, line by line, we need to send.
[00:40:25]  So it is a long process.
[00:40:27]  I mean, we can't directly send to the...
[00:40:29]  direct child which required the data.
[00:40:33]  So is it a problem in the application?
[00:40:36]  Yes, to avoid the problem we use context.
[00:40:42]  Okay, and there is a concept called lifting state up.
[00:40:45]  What do you mean by that if you know?
[00:40:49]  No, sir, I have no idea.
[00:40:53]  Okay, and so for example, that you need to create a chat application just like chat
[00:40:59]  bugity or any other thing.
[00:41:02]  So how would you proceed from if I say that you have need to create a full stack application
[00:41:08]  you are using next year's and class.
[00:41:11]  So what will be your thought process?
[00:41:12]  How will you proceed with the entire flow?
[00:41:16]  if you need to design this thing can you briefly describe that
[00:41:20]  i mean first i will i will create a project when i will separate front end and
[00:41:27]  i will create two folders front end and back end and in front end um
[00:41:33]  I will use next years to create front end.
[00:41:39]  I will create routes based on our requirement of the project.
[00:41:44]  I create routes and dynamic routes where I handle all the front end.
[00:41:49]  And in back end, I create...
[00:41:53]  class and we can handle it.
[00:41:56]  So what all things will be required in creating a
[00:42:00]  chat application if you
[00:42:03]  what all technologies like the database how would you choose that what technologies you will implement in that
[00:42:13]  for chat application.
[00:42:15]  Yes.
[00:42:21]  I mean, we require database, flask and next year's.
[00:42:28]  Okay, you know about WebSockets, if you have ever heard.
[00:42:32]  I heard about it, but I don't know.
[00:42:36]  Okay.
[00:42:37]  No issues.
[00:42:56]  You know how to send a static file from a server,
[00:43:01]  class server to the front end.
[00:43:04]  Just like I have an image in my back end.
[00:43:09]  I mean, in using flask, sir?
[00:43:14]  Yes, yes.
[00:43:17]  HTML files or static image files?
[00:43:20]  An image image.
[00:43:25]  I mean, we can use a render template to send any files, static files, static files or any
[00:43:35]  HTML files or anything.
[00:43:36]  So we can directly send through.
[00:43:41]  Okay.
[00:43:44]  What is a request and response object in flask?
[00:43:48]  I mean, whenever the user requests something, I mean, this request is actually a predefined
[00:43:58]  module in Flask.
[00:44:01]  So this request and response provides few different methods.
[00:44:06]  For example, if a user is filling a form and in the Flask, we want to acquire the data,
[00:44:14]  we use request.form.
[00:44:15]  I mean, we get the data from there.
[00:44:20]  and we can similarly respond.
[00:44:24]  Okay.
[00:44:25]  And yes, yes.
[00:44:31]  Request is basically what the I mean, whenever the user requests request the API.
[00:44:38]  We the API will send the response.
[00:44:46]  Okay, okay. And you know about server-side rendering?
[00:44:51]  Yes, sir.
[00:44:52]  What it is?
[00:44:54]  I mean, in Next.js, we have, Next.js provides different rendering techniques like server-side
[00:45:02]  rendering and static-side generation.
[00:45:05]  And in server-side rendering, all the rendering process will happen at the server-side.
[00:45:10]  I mean, whenever the user requests something, any page or something.
[00:45:15]  All the fetching of the data will be handled at the backend.
[00:45:22]  I mean, fetching of the data and applying JavaScript.
[00:45:26]  And it will directly send an applied HTML file directly to the user.
[00:45:33]  So the user, whenever the user requests, it will be smooth flow and there is no lag at the client side.
[00:45:45]  Okay, and how we use that, how to define that there is a server side or a client side?
[00:45:53]  I mean, we use the get server.
[00:45:57]  Get server.
[00:46:06]  Like I have a page in Next.js, I have created a component.
[00:46:10]  You know what is a component?
[00:46:12]  Yes.
[00:46:13]  What is component?
[00:46:16]  I mean, I mean.
[00:46:20]  It's basically it's like a reusable code.
[00:46:23]  I mean, we can we can.
[00:46:27]  break our we can break our website into different components where we can render all the components
[00:46:35]  i mean it's a block of code i mean okay so uh i have uh two pages in my next years
[00:46:44]  and uh so if i create a new page
[00:46:48]  a component in next year.
[00:46:51]  So by default, it is server rendered or client rendered?
[00:46:56]  By default, I mean, without using any method.
[00:47:00]  Yes, yes.
[00:47:03]  Since the components in Next.js are server, I think they are server set.
[00:47:12]  And if I want to use it in a client, how would I use that?
[00:47:18]  I mean, the above we use use client, we need to give use client so that we can use a use
[00:47:26]  effect.
[00:47:27]  We can once we give use client at the top of our, I mean, the top of our component,
[00:47:34]  I mean, at the top of our page, we can use.
[00:47:39]  use effect we can use hooks and event handlers
[00:47:45]  Okay, so I can't use hooks in server-side pages.
[00:47:54]  I mean, we can't use the react books.
[00:47:57]  I think next year's has its own.
[00:48:04]  Okay.
[00:48:34]  Yeah, so that's it, I guess.
[00:48:37]  So, yeah, it's nice talking to you, Srikar.
[00:48:40]  So, like, I haven't introduced Inderpreet.
[00:48:42]  Inderpreet is our tech lead in Wadu A team.
[00:48:45]  So, yeah, he is the one who supervises the project.
[00:48:49]  So, yeah.
[00:48:52]  any other questions you have, anything you want to discuss, you can discuss right now.
[00:48:57]  If you want any feedback or any questions you need from Inderpreet, you can check with him.
[00:49:06]  Sir?
[00:49:09]  Yes.
[00:49:10]  I mean, where I need to improve, I mean, I want feedback.
[00:49:17]  So I think you need to focus more on the JavaScript basics because everything is built up on that thing.
[00:49:26]  So, focus on that. The basics are the important things.
[00:49:32]  I mean, JavaScript was completed. I mean, I did long back, sir. So, I was more focused on React and Next.js. So, I was not revised.
[00:49:43]  Okay, you keep on revising the things because these are the things that you regularly use in React and Next.js also.
[00:49:53]  Yes.
[00:49:57]  Anything else?
[00:50:01]  I will definitely improve my JavaScript.
[00:50:10]  I'm sure.
[00:50:12]  Thank you.
[00:50:16]  Thank you.
[00:50:18]  Thank you, sir.
[00:50:23]  Yeah, thank you, Srikar. Thank you, Inderpreet and Anil. Shall I ask another student to join?
[00:50:30]  Yes, sir.
[00:50:32]  Thank you.
[00:50:32]  Yes, we could help.
[00:50:48]  Hi, Krishna. Hi, sir. Am I double, sir?
[00:50:52]  Yes, yes, you are audible.
[00:50:54]  Yes, sir. Thanks.
[00:50:56]  Okay, so how are you?
[00:50:58]  Fine, sir.
[00:50:59]  Okay, so let's start.
[00:51:02]  Okay, sir.
[00:51:03]  Okay, so give me a brief background of your technical things that you have learned.
[00:51:09]  I mean, what I'm doing, but.
[00:51:15]  So tell me the technical details, technical things that you have learned so far.
[00:51:20]  Yes, my name is Saikrishna. I'm from Hyderabad. I'm currently pursuing my BSc in business learning.
[00:51:27]  And so far I learned technical skills like React, frameworks like React, Next.js.
[00:51:34]  and backend Python Flask and databases like MongoDB and SQL Alchemy.
[00:51:45]  Okay, and what all projects you have built during the learning phase?
[00:51:50]  Yes, I built with Next.js blocks application and product application.
[00:52:00]  With React, I built Tasty Kitchen.
[00:52:03]  It's like Swiggy.
[00:52:05]  I mean, it solves the problem of delivery of food.
[00:52:11]  Okay, so tell me more about that Tasty Kitchen project that you have built.
[00:52:17]  So how you approached it, how you started thinking in terms of front end, back end?
[00:52:23]  Yes, Tasty Kitchen.
[00:52:25]  Tasty Kitchen, I was developed with React, using React.
[00:52:30]  And...
[00:52:30]  Firstly, it has a login page.
[00:52:35]  In login page, when the user was logged in, based on the user details, the JWT token is
[00:52:41]  created with the support of middleware.
[00:52:47]  and with the JWT token he was routed to the home page.
[00:52:52]  In the home page we have sections like, sir can I screen share it?
[00:52:58]  Yes, yes.
[00:53:04]  Just a minute, sir.
[00:53:30]  Sir, is it visible?
[00:53:32]  Yes, it's visible.
[00:53:34]  OK, sir.
[00:53:35]  And here, this is the login page of my website.
[00:53:39]  OK.
[00:53:40]  And here I gave username and password.
[00:53:43]  And I have a show password icon.
[00:53:45]  And if user is not logged in yet,
[00:53:50]  he can utilize sign up page and here he can give email password username and this is the back button
[00:54:00]  wait a minute so here with the user user details if we click down login
[00:54:09]  and the JWT token is created with the JWT token and the protected route is activated.
[00:54:16]  And he can, I mean, he can go through the homepage.
[00:54:21]  Here the homepage, it will suggest the popular restaurants.
[00:54:26]  It will suggest the popular restaurant like Cape Madrasi.
[00:54:30]  These are the popular restaurants.
[00:54:32]  and I implemented the pagination of every restaurant.
[00:54:37]  There are almost 30 restaurants in my website.
[00:54:44]  Okay, just a minute.
[00:54:46]  So, if the example, these are the, I mean, these are the photos with ratings.
[00:54:54]  And we have the sort option like highest to lowest, lowest to highest.
[00:54:58]  It will show from lowest to highest.
[00:55:04]  Example, Kef Madrasi.
[00:55:07]  In this restaurant, we have many dishes.
[00:55:10]  You can add it into a cart, like how many quantities you can add it.
[00:55:19]  And if we see in the cart page, we have
[00:55:29]  payment option also and here also he can decrease or increase the items he can buy when the
[00:55:38]  he can add multiple items also like
[00:55:44]  Go be.
[00:55:48]  and cart is shown and the total amount is also shown.
[00:55:54]  When he clicked on the payment function,
[00:55:56]  payment successfully, message was displayed.
[00:56:00]  and we have return to home page option also.
[00:56:04]  Yes. Okay. So for the designing thing in the front end part, what you have used?
[00:56:13]  designing thing of printed bar.
[00:56:17]  I didn't get it.
[00:56:21]  So any library you have used for the design part?
[00:56:24]  JavaScript library.
[00:56:27]  I mean, React.js.
[00:56:30]  for like tailwind or something ah yes sir tailwind i have used tailwind tailwind and a few pages css
[00:56:40]  normal css vanilla css okay which page is the normal css in which one are the tailwind ones
[00:56:48]  This is the normal CSS. I mean, in the pagination, I have used normal CSS to display the products in this manner for the pagination component.
[00:57:07]  And if we and this entire thing was, I mean, this entire homepage was created through Tailwind CSS.
[00:57:17]  I mean, with the help of Tailwind CSS.
[00:57:22]  Okay. So you know about JavaScript?
[00:57:27]  Yes, somewhere else because I long back ago done.
[00:57:34]  Okay, what is JavaScript?
[00:57:37]  JavaScript is a language which we can use.
[00:57:43]  I mean,
[00:57:47]  Yes, you are audible.
[00:57:51]  Yes, JavaScript is a language where we can, I mean...
[00:57:58]  again implement the functions and change the data or update the data using a field.
[00:58:07]  It's a dynamic one. Okay, how you define a variable in JavaScript?
[00:58:13]  Using let where const. What's the difference between all three?
[00:58:19]  Yes, const means when the data was unchangeable.
[00:58:24]  I mean, it is fixed and final.
[00:58:27]  We use const.
[00:58:28]  And when the data is changing, we use let.
[00:58:32]  And where the data is in the string, I mean, I don't know what to say.
[00:58:40]  Okay.
[00:58:41]  Yes, sir.
[00:58:46]  What's the difference between React.js and Next.js?
[00:58:49]  React.js is a JavaScript library, Next.js is a framework.
[00:58:54]  Where React.js is just for UI development and Next.js is to make full stack websites.
[00:59:02]  And both are used to make a single page web application.
[00:59:07]  And in the React, I mean, the routing of pages is installing the third party packages.
[00:59:15]  Whether in Next.js, we cannot use it.
[00:59:21]  I mean, we use its page routing.
[00:59:24]  I mean...
[00:59:27]  In next years, we will create the folder with the name, I mean, home is home, cart means
[00:59:34]  cart, with the homepage and having special optimizations like link and image type.
[00:59:43]  Okay, okay. What are components in React?
[00:59:48]  components in react functional components and arrow components
[00:59:55]  What's the difference between both?
[00:59:58]  I mean, functional components, both are almost same, sir.
[01:00:02]  But I mean, the script, I mean, the syntax was different.
[01:00:08]  In arrow components, we use equal to hyphen, greater than symbol.
[01:00:14]  to declare a block of code.
[01:00:17]  And functional component, it's like a JavaScript component.
[01:00:25]  So arrow component is not a JavaScript component.
[01:00:28]  Yes, it is also a JavaScript component, but syntax was different.
[01:00:35]  What's the arrow function then?
[01:00:39]  Arrow function, both are same, but syntax is different.
[01:00:47]  Have you heard of class components?
[01:00:50]  Class components, yes.
[01:00:52]  Dot this as prefix.
[01:00:53]  It's a older one.
[01:00:58]  So is it a type of component or no?
[01:01:02]  It's a on the beginning days of react, we use arrow.
[01:01:06]  I mean, on the beginning days, we use class components.
[01:01:15]  I mean, it is like a object oriented.
[01:01:17]  I mean, it's like a OOPS data structure in Python.
[01:01:21]  We use .this as prefix.
[01:01:23]  And it is hard to decode the data to the data.
[01:01:30]  Okay, what are react hooks?
[01:01:33]  React hooks.
[01:01:36]  React hooks use effect and use it.
[01:01:41]  These are the only two hooks in React.
[01:01:44]  Yes, sir.
[01:01:45]  Use context.
[01:01:46]  So many are there, but I didn't go through it.
[01:01:51]  I used only use effect and use state.
[01:01:56]  What's the difference between both?
[01:01:58]  Use state is to...
[01:02:00]  store the data or to update the data or to store the data to update the data we use use state and
[01:02:09]  when the side effects are happening in the websites we use you use effect like a api calling and
[01:02:20]  yes and set timeouts set timeout methods we use use use effect okay so use effect run only one
[01:02:31]  time or it runs multiple time uh it runs only when the i mean when the
[01:02:42]  website is run I mean after the run it's a run only one time
[01:02:50]  If I refresh a page, will it run again or it won't run?
[01:02:56]  it run again okay if i want to if if i want to run it multiple times how can i do that
[01:03:07]  i mean in the dependencies in the if the dependency array was empty then the
[01:03:15]  use of it is run only one time based on the dependency.
[01:03:21]  If I remove the dependency array, what would happen?
[01:03:26]  I don't know. I think it runs one time.
[01:03:32]  Okay.
[01:03:37]  What is JXX?
[01:03:39]  JavaScript, JXX stands for JavaScript XML.
[01:03:43]  And it is the combination of JavaScript and XML.
[01:03:46]  XML is advanced level of HTML.
[01:03:54]  Okay.
[01:03:57]  So have you used props and react?
[01:04:00]  Yes, sir.
[01:04:01]  What are props?
[01:04:03]  Props are the shortened property to.
[01:04:07]  I mean, to share the data from one component to another component, and it is
[01:04:11]  unidirectional.
[01:04:15]  Okay, what do you mean by unidirectional?
[01:04:18]  Unidirectional means in React, only parent can send the data.
[01:04:26]  Okay, for example, I have a parent and a child.
[01:04:30]  Like I have a page and in that I have a pop-up as a child or a model you call.
[01:04:38]  So now if I do something on the model thing, like I select something.
[01:04:44]  And I want to send the data back to the parent component.
[01:04:48]  How would I do that?
[01:04:50]  Using React context.
[01:04:52]  Without it, I can't send?
[01:04:56]  No, sir.
[01:04:58]  I think so.
[01:04:58]  Prop drilling method.
[01:05:01]  What is prop drilling?
[01:05:03]  What is prop drilling means to share the data through the props from the end chain.
[01:05:15]  Okay, so can I share the state as a prop from parent to child?
[01:05:22]  Yes, sir.
[01:05:25]  So can it be used to send data back from child to the parent?
[01:05:31]  No, I don't think.
[01:05:35]  I think it's not.
[01:05:39]  Okay.
[01:05:46]  You know about DOM?
[01:05:49]  DOM is a document object model.
[01:05:53]  So how React works, if you know how it uses DOM?
[01:05:58]  Yes.
[01:06:00]  Using React, actually, it creates the virtual DOM.
[01:06:05]  Okay.
[01:06:05]  and it's a lightweight copy of original DOM.
[01:06:08]  When, I mean, DOM is like a tree-like,
[01:06:13]  DOM stands for Document Object Model.
[01:06:17]  It's a tree-like structure, and it will hold the elements in the project.
[01:06:25]  And with using of React, React creates the virtual DOM.
[01:06:32]  Whenever the changes in like elements like SDM, H1 or paragraph,
[01:06:39]  first it will change the virtual DOM.
[01:06:42]  And then the virtual DOM is applied to the real DOM.
[01:06:45]  It's like a layer.
[01:06:50]  Okay.
[01:06:55]  Yes.
[01:06:56]  So for the filtering that you have shown in the your project, what do you have used for
[01:07:03]  filtering the data according to the rating highest and lowest?
[01:07:06]  How you have achieved this thing?
[01:07:08]  Using filter method.
[01:07:13]  Sorry, I didn't get you what you have used using filter methods.
[01:07:17]  I mean, I using filter method.
[01:07:20]  I mean, we have the data in the back end and with that, like in the ratings, the numbers, then I mean.
[01:07:33]  You have done it in the front end or the back end?
[01:07:36]  Front end, sir.
[01:07:38]  Okay, so you have used the filter method.
[01:07:41]  Yes, sir.
[01:07:42]  What's the difference between filter and map?
[01:07:45]  Yes, filter method will show the particular elements.
[01:07:49]  I mean, filter method helps us to...
[01:07:53]  show the particular elements where map will show all the elements which are present in the filter.
[01:08:03]  Okay, so if I want to show the all elements, I would use the for loop.
[01:08:07]  Why would I use map?
[01:08:10]  Map is a shorthand function.
[01:08:13]  It's just a shorthand function.
[01:08:18]  Using for loop, I think code will be complex.
[01:08:23]  Okay, you know the difference between null and undefined.
[01:08:29]  Yes, undefined means when the variable is not declared.
[01:08:35]  I mean, the value is not declared, we get undefined.
[01:08:41]  And none means none means if the value is zero, I think it's none.
[01:08:48]  There is no element like empty.
[01:08:52]  Oh, yes.
[01:08:56]  And in React, we have lifecycle methods.
[01:08:59]  Can I access that lifecycle methods in functional component?
[01:09:04]  Yes, sir.
[01:09:06]  Like, how?
[01:09:09]  I didn't get it.
[01:09:13]  you have implemented a component using functional methods.
[01:09:18]  Yes, sir.
[01:09:19]  So if I want to access the lifecycle methods,
[01:09:24]  like mounting and all these,
[01:09:26]  can I access that directly?
[01:09:30]  No, sir.
[01:09:33]  Okay, and if I want to access what we need to use?
[01:09:39]  I don't know.
[01:09:42]  Okay.
[01:09:48]  Yes.
[01:09:50]  Then how for the you have implemented the APIs.
[01:09:54]  So what yes, what library you have used for sending request?
[01:10:00]  receiving library or the default fetch method
[01:10:05]  Yes, I mean, it's a predefined API.
[01:10:08]  I'm just fetching it using useEffect hook.
[01:10:12]  Okay, you know about Axios.
[01:10:16]  Axios.
[01:10:18]  Yeah, yes, but
[01:10:23]  I heard that name, but I didn't use this.
[01:10:27]  Okay, so for example, if I fetch something from using the fetch API,
[01:10:33]  how I handle it in my front end part.
[01:10:37]  So what it returns, how I use it and
[01:10:43]  to fetch the data sir yes using you use effects using use effect in that we
[01:10:51]  data is taken from the request in the json format or json and the request is fetched through the url
[01:11:04]  through the API and next we are taking it back through the request.
[01:11:14]  So for example, if an API you get an error, how would you handle it in the front end part?
[01:11:23]  Using try and exception blocks.
[01:11:28]  Okay, so it's try and exception or try or catch.
[01:11:33]  Try catch exception.
[01:11:37]  We can use it anything.
[01:11:40]  So in Python, we use try catch or try exception?
[01:11:46]  In Python, we use try catch.
[01:11:51]  Okay.
[01:11:53]  Have you heard of a sink of it?
[01:11:57]  Yes, sir.
[01:11:58]  Why we use them?
[01:12:00]  I think means if I mean,
[01:12:07]  in a sync, a sync await, a sync function is to, I mean, when the two tasks are run to the parallel, I mean,
[01:12:18]  they should run parallelly, like fetching the data and taking the request.
[01:12:23]  And using a sync means first we are taking the data from the request.
[01:12:29]  If the task is completed.
[01:12:31]  Then we will fetch the data.
[01:12:35]  I mean, we will declare it through using prefix as await.
[01:12:41]  Okay, what is a promise?
[01:12:46]  Promise promise means it is based on the request and it is three types.
[01:12:58]  What?
[01:13:01]  Sir, what are the three types?
[01:13:03]  Wow, what are the three three times means promise?
[01:13:08]  I don't I mean, it's the long back.
[01:13:10]  I was a
[01:13:13]  I didn't get it.
[01:13:16]  So you haven't used async await in the current project that you have shown?
[01:13:21]  Yes, I used in like fetching the data.
[01:13:29]  Okay.
[01:13:31]  Yes, sir.
[01:13:43]  You heard of use memo.
[01:13:47]  I know sir.
[01:13:48]  Use callback?
[01:13:49]  I didn't use this.
[01:13:50]  I know it.
[01:13:51]  Okay.
[01:13:52]  What is an ORM?
[01:13:53]  I don't know.
[01:13:54]  I don't know.
[01:13:55]  I don't know.
[01:13:56]  I don't know.
[01:13:57]  I don't know.
[01:13:59]  ORM means I don't know what it is.
[01:14:05]  Can you give me an example of an ORM that you have used?
[01:14:09]  I don't know.
[01:14:13]  I don't know.
[01:14:18]  I don't know.
[01:14:19]  In the app that you have shown me, so what database you have used in the backend?
[01:14:26]  Backend, I mean, I use MongoDB and SQL.
[01:14:37]  Okay, so how you interact with the SQL and Flask?
[01:14:41]  SQL and Flask, like importing from SQL Alchemy.
[01:14:48]  and it's like a static static answer we should declare the like we should declare what is sql
[01:14:57]  alchemy sql alchemy in flask yes
[01:15:06]  SQL Alchemy.
[01:15:11]  So why you have used it?
[01:15:12]  Was there any specific purpose to use it or?
[01:15:18]  Yes, SQL Alchemy is I'm used SQL Alchemy to connect to the SQL like SQL SQL database.
[01:15:30]  I mean, it's just a connection between SQL and I mean, database and the request.
[01:15:41]  Okay, and what is a primary key and a foreign key?
[01:15:46]  Prime, I said.
[01:15:50]  I didn't get primary key and foreign key in database.
[01:15:56]  Primary key is a unique key.
[01:16:00]  I mean, it's a unique one and the second one I don't know.
[01:16:05]  Okay, and for authentication, what you have used in the backend, like for login and register?
[01:16:12]  For this website, sir?
[01:16:13]  Yes.
[01:16:16]  For this website, I used
[01:16:20]  It's a predefined API, sir.
[01:16:24]  I'm just fetching it and I'm just seeing the user is there or not.
[01:16:31]  So you haven't developed the backend for it?
[01:16:34]  Yes, I have another project.
[01:16:39]  Can I show it?
[01:16:41]  Yes.
[01:16:56]  Just a minute.
[01:17:49]  Sir, is it visible?
[01:17:52]  Yes, it's visible.
[01:17:54]  So, it's just, I mean...
[01:18:01]  It's on process.
[01:18:03]  It's not completely done.
[01:18:06]  Okay.
[01:18:08]  It's on process because I have issues on backend.
[01:18:13]  Okay, no issues in that. So in the project, Tasty Kitchen, you have mentioned that you have implemented authentication and authorization using JWT.
[01:18:23]  Ah, yes, using JWT token.
[01:18:26]  So in the front end or back end?
[01:18:30]  in the front end zone.
[01:18:32]  Okay, so how you have done it?
[01:18:37]  I mean, using cookies.
[01:18:43]  So you get a token from the backend and you store it in the.
[01:18:48]  Yes, based on the user details, I have a street and a JWT token is created and I have stored in cookies.
[01:18:59]  So pretty okay.
[01:19:01]  So you have created the backend for this project that you have showing.
[01:19:06]  Yes, sir.
[01:19:08]  So you have created, you must have created a user table for this.
[01:19:14]  Yes.
[01:19:15]  So what all columns you have created in that table?
[01:19:20]  username and password.
[01:19:23]  These two columns.
[01:19:25]  And how are you saving the password?
[01:19:28]  Sir, the password, how are you saving in the database?
[01:19:36]  I mean, in this, I use the MongoDB.
[01:19:43]  So you are talking about that.
[01:19:46]  So have you hashed it or you have stored it directly?
[01:19:50]  I have hashed it, sir.
[01:19:52]  So why we use hashing?
[01:19:55]  Hashing, we use hashing to protect the password.
[01:20:01]  to protect the password from you.
[01:20:06]  If anybody to protect their passwords.
[01:20:10]  Okay, and in Flask, how you create an endpoint,
[01:20:13]  API endpoint?
[01:20:16]  I don't get it, I didn't get it.
[01:20:20]  For example, I want to create a login API in Flask.
[01:20:25]  Okay, sir.
[01:20:26]  How can I create it?
[01:20:29]  Okay, app route.
[01:20:30]  I mean, in the syntax, we use app route slash login.
[01:20:36]  Okay.
[01:20:37]  slash login and in that we are getting the data as request in the JSON format.
[01:20:45]  When the API is seated and then the user details are came through the data request
[01:20:53]  and based on the data request the password is hashed and
[01:20:58]  It is sent to the MongoDB to store somewhere, to store a particular database, which we created.
[01:21:10]  Okay.
[01:21:15]  And when in the login table, when we click on the login, it will find the person is existed or not.
[01:21:24]  So how will you find that a person exists or not in a table?
[01:21:30]  Using .find1 based on the username, email.
[01:21:40]  Okay, and if I want to find everyone in the user table, how can I do that?
[01:21:48]  Everyone in the user table.
[01:21:52]  He is a dot.
[01:21:54]  I didn't get it.
[01:21:58]  For example, I have 10 users stored in the user table.
[01:22:02]  Okay, sir.
[01:22:03]  I want to fetch them all.
[01:22:05]  Okay.
[01:22:06]  Using get request.
[01:22:10]  what we use in the get request the get request we use
[01:22:20]  What will be the query that based on what criteria?
[01:22:28]  We use a dot find means we get all the users list.
[01:22:34]  Okay.
[01:22:39]  What is server side rendering?
[01:22:42]  Server side rendering means everything is happened in the server side, like fetching the data, like fetching the data and timers.
[01:22:56]  All the things are happening in the server side on the built-in.
[01:23:01]  Okay, for example, in Next.js, I created a page, a component.
[01:23:06]  Yes, sir.
[01:23:07]  By default, it's a server rendered or client rendered?
[01:23:11]  Server side rendering.
[01:23:13]  So if I want to make it client rendering, how can I do that?
[01:23:17]  We use client on the top of our code.
[01:23:23]  Okay.
[01:23:25]  And the code is changed to the client.
[01:23:33]  Okay, so for example, I have a server rendered component and I am using use state hook in that.
[01:23:42]  So will it work?
[01:23:44]  No, sir.
[01:23:45]  Why?
[01:23:47]  Because in server side rendering, you can't use it.
[01:23:53]  and we can't use it because of no user interaction.
[01:24:04]  Okay, if I don't use use effect and create a server rendered object and I have just formed a user form just like you have shown here.
[01:24:15]  Suppose this is a user.
[01:24:17]  This is not a client rendered.
[01:24:18]  This is server rendered.
[01:24:20]  Okay, sir.
[01:24:21]  So won't it work like just have.
[01:24:23]  no hooks so user interact can user interact with it yes he will interact with it
[01:24:33]  so you just told that user interaction is not there in the server render components
[01:24:39]  i mean like on submit button those are functions
[01:24:47]  like external function.
[01:24:50]  Okay.
[01:24:51]  Yes.
[01:25:00]  What is flask that you have used as a backend?
[01:25:03]  So what is flask basically?
[01:25:06]  Basically, Python flask is a micro framework.
[01:25:12]  It is used to make small projects.
[01:25:18]  It is used to small projects and the single page web application.
[01:25:25]  Why it's a micro?
[01:25:27]  Because of having less packages.
[01:25:33]  Okay.
[01:25:35]  Yes.
[01:25:43]  How you set up a basic flask application?
[01:25:47]  Yes, sir.
[01:25:50]  First, firstly, I'm setting up in the virtual environment.
[01:25:55]  And then I created and I will activate it.
[01:25:58]  And then I created app.py, which we will write the project.
[01:26:03]  And then.
[01:26:04]  we will import we will install the flask flask dependencies and i mean flask module and then
[01:26:13]  from that we are creating app instance and then we are finally debugging run equal to two
[01:26:24]  Okay, and if I want to use some environment variables in flask.
[01:26:30]  Yes, sir.
[01:26:31]  How can I do that?
[01:26:34]  Creating the page dot envs dot env.
[01:26:41]  What are environment variables?
[01:26:43]  Environment variables means it will protect the data from other dependencies.
[01:26:56]  Mm.
[01:26:56]  No.
[01:27:01]  Okay. And just like the project that you are showing here, so have you implemented the validations on the form?
[01:27:11]  Validations. Validations. Yes, sir.
[01:27:16]  What validations have you done if I, for example, this remove the example.com and just log in?
[01:27:23]  So will the user be able to log in or not?
[01:27:27]  Yes, sir.
[01:27:28]  I didn't.
[01:27:31]  You logged in.
[01:27:35]  So should it happen?
[01:27:38]  I didn't put any validations.
[01:27:43]  How can you put validations?
[01:27:45]  How can you check for that?
[01:27:47]  I mean, in the back end where the suffix should be gmail.com or
[01:27:57]  We are telling the developer is telling them in this in this data.
[01:28:07]  suffix should be like this.
[01:28:11]  Okay, so it's front end.
[01:28:17]  It is done on the back end.
[01:28:20]  I mean, the thing is done on the back end.
[01:28:25]  Okay.
[01:28:28]  Yes, and...
[01:28:38]  So you know about what is lifting the state in react.
[01:28:47]  state state lifting i didn't
[01:28:53]  You know what is the state in react?
[01:28:55]  Yes, state is to just.
[01:28:59]  Just over the data.
[01:29:01]  to update the data.
[01:29:05]  Okay, what does it mean by lifting state up?
[01:29:09]  I don't know.
[01:29:12]  Okay, so for example, there are two child components and both use the same state.
[01:29:20]  So where the state should be placed?
[01:29:26]  states replaced
[01:29:28]  I don't know
[01:29:32]  If you have to create an application where two components are there, child components.
[01:29:39]  Yes, sir.
[01:29:40]  So where you will put the state both use both need to use the same state.
[01:29:46]  We use a react context.
[01:29:49]  So for react context also you need to store the data somewhere.
[01:29:52]  No.
[01:29:53]  Yes, sir.
[01:29:54]  Where would you store it?
[01:30:00]  I don't know.
[01:30:03]  How you create a context?
[01:30:08]  It's a...
[01:30:13]  I mean, I'm not focused on that.
[01:30:18]  What is context?
[01:30:21]  Context is to store the data and it will we should make a utilize to.
[01:30:28]  I mean, we are allowing to utilize to all the components.
[01:30:34]  Have you used it any of the projects?
[01:30:38]  Not yet, sir.
[01:30:41]  Okay.
[01:30:43]  Any state management library you have used?
[01:30:48]  State management library.
[01:30:53]  No, sir.
[01:30:59]  Okay, you know what are fragments in react?
[01:31:03]  Yes, a fragment is like a like a component and it's like a container.
[01:31:09]  It will wrap the all the elements.
[01:31:12]  What is the difference between fragment and div then?
[01:31:16]  Fragment and div.
[01:31:17]  Why we use fragment if there is div?
[01:31:21]  Yes, a fragment is bit faster than two.
[01:31:24]  I mean, loading time.
[01:31:26]  Because it's next year's component.
[01:31:32]  I mean, it's next year's segment.
[01:31:35]  We are importing the fragment.
[01:31:39]  Hmm.
[01:31:45]  Yes.
[01:31:49]  Okay.
[01:32:00]  If you want to show some error or something on front end part, how will you show that error?
[01:32:10]  I don't know.
[01:32:10]  I'm showing the error.
[01:32:11]  Yeah.
[01:32:12]  Yeah.
[01:32:13]  Yes.
[01:32:13]  Using prior try catch using try catch.
[01:32:17]  We will show that.
[01:32:22]  Okay.
[01:32:23]  Yes, using try catch method.
[01:32:25]  If the user is unauthorized, then we will store the message in the used state and we will display the error message paragraph.
[01:32:39]  Okay, so you have used routing in Next.js.
[01:32:43]  routing yes sir how you create a dynamic route in next year's dynamic route
[01:32:55]  Dynamic route in access.
[01:33:02]  Yes, sir.
[01:33:03]  In empty area.
[01:33:06]  Yes, sir.
[01:33:08]  In entire is, I mean, we will create the file.
[01:33:13]  And we will give a name and having prefix in three dots.
[01:33:18]  Then the dynamic routes is created.
[01:33:22]  in the square places.
[01:33:26]  Okay, and if you want to get that particular route that you have created, for example, in the like you have a block page, it's ID must be like block slash one, two, three, four, five, six.
[01:33:40]  And if you want to get that in the component, how would you do that?
[01:33:44]  Yes, first on that.
[01:33:47]  First on the component, I will give onClick function, where if the user clicked on the function, and then in the front end part, it will route to the particular page.
[01:34:04]  If I want to fetch that particular route value.
[01:34:08]  Yes, sir.
[01:34:09]  How can I do that?
[01:34:11]  Particular route value.
[01:34:13]  Like, for example, you have given like stick the block page.
[01:34:18]  You click on the block you have shown here and if opens a new page.
[01:34:23]  Yes, sir.
[01:34:23]  Like that.
[01:34:24]  there must be some URL of it.
[01:34:26]  Yes, sir.
[01:34:28]  So if I want to fetch that number of the block in that particular component, can I do that?
[01:34:35]  Yes, sir.
[01:34:37]  How?
[01:34:39]  Number of the block.
[01:34:41]  I didn't get it, sir.
[01:34:44]  So if you have created a dynamic route.
[01:34:48]  Yes, sir.
[01:34:49]  So the value of the there will be a value variable value dynamic value.
[01:34:55]  Yes, sir.
[01:34:56]  How you can get it in a page.
[01:35:00]  I mean, just I'm finding the page like slash one based on the IDs.
[01:35:09]  Okay.
[01:35:10]  So you have created API route in Next.js.
[01:35:15]  API route in Next.js.
[01:35:19]  Have you created APIs in Next.js?
[01:35:21]  Yes, sir.
[01:35:22]  API authentication.
[01:35:23]  How?
[01:35:25]  I created a folder named API.
[01:35:31]  I have created a folder in API and I have created authentication.
[01:35:38]  What is the file name that we must give an API to work as a route?
[01:35:46]  Work as a route.
[01:35:48]  Route.js.
[01:35:52]  And if I want to give a file name for a component to render.
[01:36:00]  What it would be?
[01:36:02]  File name to component.
[01:36:06]  Like you are this must be a component, not the blog.
[01:36:11]  So what is the file name that we create for it?
[01:36:15]  I mean, we created a folder named blocks and that we have from that route.
[01:36:22]  When the user click on the something post and the data is sent to the route and the route will find the particular page.
[01:36:35]  And then we will get this URL like a block slash.
[01:36:42]  So if I have created a file page dot JS.
[01:36:49]  Yes, sir.
[01:36:50]  What it will be the purpose of this?
[01:36:52]  In page dot JS, it's a common thing.
[01:36:55]  I mean, it is routed easily.
[01:37:01]  Can I change the file name?
[01:37:04]  Yes, but it will not render.
[01:37:07]  I mean, it is not routed.
[01:37:10]  Okay. And if I want to use any particular CSS that should be available in the whole Next.js application, where should I declare that?
[01:37:23]  In global CSS.
[01:37:25]  And for a particular page?
[01:37:27]  For a particular page, we will give the name .css.
[01:37:33]  And what is the use of layout.js?
[01:37:36]  Layout.js is it's a main file.
[01:37:40]  It's a main file.
[01:37:41]  It will hold all the project project folders.
[01:37:48]  I mean, it will also can I create a layout file for each route?
[01:37:54]  Yes, we will create a folder and we will create a layout page and then the layout page will
[01:38:00]  page will access the main file of the other descending files.
[01:38:08]  what we describe in the layout file.
[01:38:12]  layout.js okay in layout file we get we will have body and html tag
[01:38:22]  and imported global CSS.
[01:38:25]  Yes. And have children. I have children. I mean, in
[01:38:32]  Carly places we have children. Yes. Okay.
[01:38:40]  Yes, you have used Git.
[01:38:43]  Yes, GitHub. I mean, yes. For what purpose you have used GitHub?
[01:38:52]  GitHub to storing our, I mean, to store the code in the cloud.
[01:39:02]  Okay. Can you name some commands of GitHub popular commands the commonly use?
[01:39:10]  Git init means git initials. Git initials, I mean, git init, we give the link of repository to create, to initialize it.
[01:39:23]  and we will use git commit to commit the code into the repository.
[01:39:37]  We will use git commit message to tell why we are changing this.
[01:39:45]  I mean, to tell why we are updating this.
[01:39:51]  Okay.
[01:39:52]  Yes.
[01:40:01]  Hi Krishna, so yeah, it was good nice to interact with you. So Inderpreet is our tech lead in
[01:40:10]  Wadu A team. So he handles all the major projects. So if you have anything you would want to discuss
[01:40:16]  or any questions you would want to ask, you can ask now. Yes.
[01:40:22]  Sir, am I improving?
[01:40:27]  Yes, you need to just focus on the basic things.
[01:40:32]  What's the purpose of different things that you use on the regular purpose?
[01:40:38]  Okay.
[01:40:38]  So that would be very helpful and keep on reading what all, why things are used the way they are.
[01:40:46]  Yes, I may need to into in back and also.
[01:40:51]  Yeah, you need to just implement few projects regarding that class.
[01:40:56]  So you can know that how things really work.
[01:41:01]  Our APIs are created, our authentication works.
[01:41:04]  Yes.
[01:41:06]  That's all. Anything else?
[01:41:10]  Yes, sir. Okay.
[01:41:15]  Okay.
[01:41:16]  Okay.
[01:41:21]  Yeah, thank you, Krishna. You can leave the meet.
[01:41:37]  Yeah, hi, Ranjit. Your voice is pretty low.
[01:41:40]  Am I audible now?
[01:41:41]  Yeah.
[01:41:43]  Yes, I mean, do you have any feedback for these candidates since it's the final interview?
[01:41:50]  Yeah, so I think Inderpreet has already shared the feedback.
[01:41:53]  So, yeah, some basics, JavaScript basics, they are a little low on
[01:41:59]  because probably because, like, they have, like, had that long time ago.
[01:42:05]  So, yeah, and apart from that, like, from my whatever I have seen,
[01:42:10]  like, they do have some...
[01:42:11]  a good bookish knowledge but practical knowledge more is needed i guess okay so like we have trained
[01:42:19]  them up to a certain level right um when you interacted with the students did you get the
[01:42:24]  confidence that these are the students who you will be able to train further and take uh under
[01:42:31]  you know a wadu
[01:42:34]  Yeah, so like what is the process next?
[01:42:39]  So like are they going to graduate right now or it would be some internship period?
[01:42:44]  So yeah, just wanted to take care of that.
[01:42:47]  No, so they've been trained, right?
[01:42:49]  What happens over here is let's say you like them, you can hire them immediately.
[01:42:52]  They'll relocate to your office location and they'll work with you like any of your full-time employees for one whole year.
[01:42:59]  So Monday to Friday or Monday to Saturday, morning to evening, they'll be working with you.
[01:43:03]  During the time period as well, we will be having bi-weekly sync-ups and let's say that
[01:43:10]  you are facing any issues or if you have any grievance, it will be addressed immediately.
[01:43:15]  So let's say that the students have joined and after one month you are expecting to learn
[01:43:20]  some, teach them some other technologies, you can let us know and we will like, parallelly
[01:43:25]  we will train them in whatever technologies you require as well.
[01:43:29]  So this is not like just one year internship period.
[01:43:33]  We want them to contribute to Vadu.
[01:43:36]  And meanwhile, we'll provide any support that is needed from our end.
[01:43:41]  Got it.
[01:43:42]  Yeah, definitely.
[01:43:43]  Like, yeah, they do have the basic skills.
[01:43:46]  And I think like, yeah, they should be able to.
[01:43:48]  like pick up the remaining things on the job i mean uh yeah we will share the feedback like
[01:43:55]  whom we would be interested in and all in the document or like i'll share it over the whatsapp
[01:44:01]  yeah yeah you can just let me know like who you would like to proceed
[01:44:05]  just taking confirmation there are two positions right
[01:44:10]  Yeah, but like we have asked for two, but we'll see like based on whether we are looking at, I mean, whether they have the skill or not.
[01:44:23]  Right. So we'll see whether we will be taking two or like, yeah, we'll be only taking one or what will happen.
[01:44:29]  Yeah.
[01:44:29]  Yeah, so like if there are two positions open, not only these candidates, we have other candidates trained in React and the Gen A as well.
[01:44:38]  We'll be able to train them in Flask and Git to you.
[01:44:41]  You can let me know if there are two openings.
[01:44:44]  Yeah.
[01:44:45]  Sure, sure.
[01:44:46]  But if the requirement itself is one, we understand.
[01:44:48]  Yeah, so like we do have two openings, but again, like as I mentioned, right, based on the skill level, we will be like able to take whether, yeah, how many we would want to take.
[01:45:00]  Yeah, definitely, definitely.
[01:45:01]  Thanks.
[01:45:02]  Thanks for your time and thanks for joining.
[01:45:04]  I'll get in touch with you maybe on Monday for the results.
[01:45:08]  Sure, sure.
[01:45:09]  Yeah.
[01:45:09]  Thanks.
[01:45:10]  Thanks, Inderpreet.
[01:45:11]  Thank you.
[01:45:12]  Thanks.
[01:45:21]  Yeah, so we can leave, I guess.
[01:45:22]  We'll discuss over WhatsApp.
[01:45:24]  Okay.