Have questions or feedback? Head over to our Discord server! discord.gg/TWBtv5an7N Solve advanced programming challenges and become an expert software engineer with CodeCrafters! 40% discount on your membership - app.codecrafters.io/join?via=CodeCompleteYT
I have been banging my head several times as a backend developer trying to whip up simple FE interfaces. Your video is the first that gets me somewhere. At last. Your patient explanations but some queries to ChatGPT are making me progress a little. Thanks a lot.
Excellent video. The only criticism I have is the contrast is insufficient for those with low vision. I realize the focus is on the code, but the UI determines its accessibility. Please keep that in mind for future projects. Thanks!
My god this is absolute life saver this video! I was struggling hard understanding the concepts and you explained it so well! Definitely gained a sub from me!
That was really cool, I was looking into "react-search-box" package for the same functionality but that package was not very easily customizable. I didn't know I could implement it in such a straightforward manner. Thanks a lot!
Great video. It would be a much better user experience if you use text wrapping if you have the browser open on the side. And a bonus if you close the explorer on the side. Sometimes it's difficult to see what you typed
Good question! That makes sense when we have < 100 items in our database for example but if we had 100,000 items for example, it would take a lot of bandwidth and time to first fetch all that data
@@Code_Complete aren't we fetching the entire list then filtering the result right now every time, so even with more items we would be fetching the entire list with every api call right? in that case won't it be better to fetch it once instead of every time input changes?
if you didn't remember how to reopen that all then open terminal 1) cd react-search-bar 2) npm install 3) npm run dev *** for those who closed the vscode and unable to open the whole website or local host***
Oh that’s an interesting question! Could you share more details about what you would like in the discord server linked in the channel page? We can discuss a possible solution there
Excelent tutorial, I had one question, Insted of showing the results on the same page can we use react router to redirect to another page and show the results there?
How to make delay between requests when typing, without delay it would be like dos attack to server😂 Very helpful video, thank you, hope for answer) Edit: you can use debounce method
Both vite and create-react-app accomplish the same goal of starting a react project quickly. Vite is just better because it is more customizable and has a smaller bundle size
@@Code_Complete I'm asking what is the difference we will have while coding. This is okay that we will have bundler as Vite NOT webpack. And what are all major difference we will have using vite?
super👌 . please make image editor with features having color change of image(also gradient color and monochrome) compress the image to reduce size , image characterisation by their types (png, jpg... ect)
Hi I have a project the users table which I have to create a search bar and filtering the users but the API my partner back end did it now I become dizzy what should do? can you help me?
Hello, when i create a build file with vite. The routing system does not work like its work fine inside website navigation but when I write URL by myself it say GET no request found
@@Code_Complete But still debouncing will still result in more api calls, one solution i can think of is caching the data fetched from the api and then filtering the data in the frontend itself to reduce api calls. Is it right? Wanted to know what production level apps use
In JS if a value is "falsy" i.e. null, undefined, 0, "", etc. it is treated as false. In that line I chained up multiple values which could be truthy or falsy using && operators
@@Code_Complete thanks for your reply. Actually I was unaware that the filter function filters a particular element of the array based on the boolean returned from its callback.
Hey buddy great tutorial. I had a question that inside fetchData function i am not able to change fetch to using hook useEffect - which is the new way. The error we get is - Hooks can only be called inside of a body of a function component. Basically they are asking us to use hooks only at the top level of react function. So any idea how we implement onChange but with hooks and not just fetch
Hi please make video how to integrated otika or stisla bootstrap template to reactjs Because iam getting stuck sidebar not working when navigate to other page using react-router-dom
@@ilirbajrami2902basically debouncing delays the function call so instead of calling the api on every keystroke, you can set the delay to maybe 400ms so when the user stops typing or the keystrokes are delayed for more than 400ms then only the api would be called
But still this will still result in more api calls, one solution i can think of is caching the data fetched from the api and then filtering the data in the frontend itself to reduce api calls
Hello! Thank you very much for a very useful lesson! How to make it so that if we select Leanne Graham as a result, it will show us "username" and "email". For example: Leanne Graham Bret Sincereapril.biz
As he is teaching for beginners you should not laugh... and don't try to be very cool in comments... you don't might even know the solution for that issue... Ans for this issue is: You can implement debounce on frontend and cache on server side! Study more about debounce ❤
This is trash code. Each letter a sent to API? no one use alert() and maybe instead of input to alert you should fulfill the form? ahhh that was to hard i got it
![Eminem - Fuel (feat. JID) [Official Lyric Video]](http://i.ytimg.com/vi/t5H_CewqpKA/mqdefault.jpg)
Have questions or feedback? Head over to our Discord server! discord.gg/TWBtv5an7N
Solve advanced programming challenges and become an expert software engineer with CodeCrafters! 40% discount on your membership - app.codecrafters.io/join?via=CodeCompleteYT
Great tutorial mate! Made this project at 12am at night while waiting for champions league clash between bayern vs psg.
Thanks man! Hope your team won 😃
I have been banging my head several times as a backend developer trying to whip up simple FE interfaces. Your video is the first that gets me somewhere. At last. Your patient explanations but some queries to ChatGPT are making me progress a little. Thanks a lot.
Glad you found the video useful!
Clicked in this video accidentally, REALLY an AWESOME tutorial mate
This was so great. Easy and clear to follow without being too slow. Thank you!
Excellent video. The only criticism I have is the contrast is insufficient for those with low vision. I realize the focus is on the code, but the UI determines its accessibility. Please keep that in mind for future projects. Thanks!
You can add debounce to save network calls… thanks for you effort
Hey! Thank you so much for sharing your knowledge with us. This video was a big help for me.
My god this is absolute life saver this video! I was struggling hard understanding the concepts and you explained it so well! Definitely gained a sub from me!
That was really cool, I was looking into "react-search-box" package for the same functionality but that package was not very easily customizable. I didn't know I could implement it in such a straightforward manner. Thanks a lot!
just what i was looking for, thank you very much, i was trying to make my first react project using api but could not find relevant explanation.
Awesome! Short and very clear!
Just one word.... , superb.... Explanation
This tutorial is great!! Thank you for explaining what each line of code is for, I learned a lot!
thanks sir its wonderful tutorial for learning anything
Perfect tuto.... I'm from DR Congo and I wish all the best dear
Thank you so much 🙂
Question. How do you clear the search bar once you click on something? Great tutorial! Thanks!
Need more Tutorials like these
Kudos to you
Thanks a lot!
Helpful tutorial. In production apps, you'd need debouncing. Otherwise, you'd be calling the API on every key stroke.
Thank You so much for this wonderful lecture ☺️
Awesome tutorial man! Helped me a lot to learn api in react js!🔥
Glad it was useful!
Thank for creating this video
Very helpful, thank you!
Great video.
It would be a much better user experience if you use text wrapping if you have the browser open on the side. And a bonus if you close the explorer on the side.
Sometimes it's difficult to see what you typed
very well presented, thanks.
shanadar Jabardast Jindabad bhai ek dum super
Thank you brother, your tutorial really helped me
I’m glad it helped!
Make More Useful tutorial like this.!! Iam ready to learn More from you bro..😍💜
Thanks a lot!
I learned something new thanks
Loved you contents, thanks man
Superb and simple project
Glad you liked it!
Thx bro, that helped me a lot!!!
this is so helpful i was wondering how will I fetch multiple endpoint
this helps a lot thanks man
Wonderful tutorial. Please do a common implementation across various JS flavors like Angular/React/Vue/etc to show the variance…👏
I feel like you really get it in react you should also get it in other frameworks. Concept is same.
This was very helpful. Thank you very much.
Very helpful! Thanks! 😀
thanks a lot man
thanks for this tutorial, very helpfull!!!
Brilliant video and it has helped me a great deal.
Helpful! Thanks so much!
That was great tutorial ❤
super explanation bro. more videos we need
yeah its looking good and understandable can you please explain the hole thing what you have done ? like not technical tell me in 5lines
good tutorial!
wouldnt make more sense to fetch just one time the api and then run a filter method when input changes?
thanks!
Good question! That makes sense when we have < 100 items in our database for example but if we had 100,000 items for example, it would take a lot of bandwidth and time to first fetch all that data
@@Code_Complete true!
@@Code_Complete aren't we fetching the entire list then filtering the result right now every time, so even with more items we would be fetching the entire list with every api call right? in that case won't it be better to fetch it once instead of every time input changes?
if you didn't remember how to reopen that all then
open terminal
1) cd react-search-bar
2) npm install
3) npm run dev
*** for those who closed the vscode and unable to open the whole website or local host***
Can you please make a video how to implement binary search in this?
By the way this is a nice video
Oh that’s an interesting question! Could you share more details about what you would like in the discord server linked in the channel page? We can discuss a possible solution there
thank you
you have gained a subscriber!
Thanks for subscribing!
i'm rn on 17:47
i want to just say we should store that response in variable so we don't need to make request everytime!
am i right?
thank you very much
Similar answer I got from Chatgpt, but better explained.
Wonderful tutorial man
one for the infinite scrolling in this select too
Thanks for the great suggestion!
Excelent tutorial, I had one question, Insted of showing the results on the same page can we use react router to redirect to another page and show the results there?
Yes. You could use global state with the router.
How to make delay between requests when typing, without delay it would be like dos attack to server😂 Very helpful video, thank you, hope for answer)
Edit: you can use debounce method
Nice! Simple & Clear! ☀
Thank you! 🙂
thank you!!
You are good 👍
What is the difference in creating React application using npx create react app or using vite creat react app?
Both vite and create-react-app accomplish the same goal of starting a react project quickly. Vite is just better because it is more customizable and has a smaller bundle size
@@Code_Complete I'm asking what is the difference we will have while coding.
This is okay that we will have bundler as Vite NOT webpack.
And what are all major difference we will have using vite?
Great tutorial! I was wondering if we should be able to fetch results in the useEffect hook.
Great idea! That way the data only needs to be fetched once
how do i set the value selected under SearchResults back to Searchbox . Can you also share that ?
Can i use different api from another website like google books api
Is there a way to have this feature search through two collections in a data base?
super👌 . please make image editor with features having color change of image(also gradient color and monochrome) compress the image to reduce size , image characterisation by their types (png, jpg... ect)
will it return closest matching word? for example if i type "food" will it be able to detect the word "foods"
why didn't you use the useEffect for dependency?
Can you make another video same as this but the API call using redux and show a list whatever inside in API.
would be greate if you can cover FE interviews system design questions on this channel
Subscribed!!
Thats a great idea! Will look into it 👍
Hi I have a project the users table which I have to create a search bar and filtering the users but the API my partner back end did it now I become dizzy what should do? can you help me?
you should have shown the final output after finishing as this is a frontend project that mini view looks weird
Hello, when i create a build file with vite. The routing system does not work like its work fine inside website navigation but when I write URL by myself it say GET no request found
Nice tutorial! You haven't used async in fetch data funtion, then how it can be used as for performing async function fetching data?
You can use async/await which is the new way of doing things or you can use promise chaining using .then() which is slightly older
i am not able to use the given api i dont know why this doesnt work for my i think api provided is not active now
This does an API request on EACH change? Isn't that a HECK of a lot of API calls?
is it okay to use debounce?
Yup that would be great! I wanted to include that in this tutorial but thought it might be a bit too much for a beginners tutorial
@@Code_Complete But still debouncing will still result in more api calls, one solution i can think of is caching the data fetched from the api and then filtering the data in the frontend itself to reduce api calls. Is it right? Wanted to know what production level apps use
The video is great but if word wrap was on it will be easier to go with it.
Good point, thanks! Will use it in my future videos
what if i have my own API, im getting an error 'products.filter is not a function'
You should try logging out what products is. This likely means its not an array and could be an object or undefined
short and descriptive
Can you tell me what should i do to automatically hide the search list if I scroll the page?
use the propertie of your input html element, onFocus to show the suggestion and the items and onBlur to hide them
it works when it is lowercase but it deosnt work when it will be uppercase
Good catch, it should be user.name.toLowerCase().includes(value.toLowerCase())
At 15:50, I didn't understand how you evaluated those variables in the return statement as Boolean ?
In JS if a value is "falsy" i.e. null, undefined, 0, "", etc. it is treated as false. In that line I chained up multiple values which could be truthy or falsy using && operators
@@Code_Complete thanks for your reply. Actually I was unaware that the filter function filters a particular element of the array based on the boolean returned from its callback.
Hey buddy great tutorial. I had a question that inside fetchData function i am not able to change fetch to using hook useEffect - which is the new way. The error we get is - Hooks can only be called inside of a body of a function component. Basically they are asking us to use hooks only at the top level of react function.
So any idea how we implement onChange but with hooks and not just fetch
make sure the useEffect comes before any codeblock like if(){}
Hi please make video how to integrated otika or stisla bootstrap template to reactjs
Because iam getting stuck sidebar not working when navigate to other page using react-router-dom
Very nice tutorial, can you tell us how you integrate Google or Bing Search API? In react app thanks
its great but make video of the same project by using next 13 app router.
Use filter on server side bro.. dont take all the datas from API just to filter it in front-end..
Why not make it on click? When you're working on a large project with a lot of data, you want to use a button-enabled search.
lazy me didn't make alot component to make the react app look simpler and more organized
To the point. Amazing Job
Looking Forward for your new videos.
Thanks for this
Thanks a lot!
isn't this going to skyrocket your hosting bill by making an api request in every key stroke?
You would need to debounce the input.
@@farid9323 can you please explain a bit what do you mean with "debounce"?
@@ilirbajrami2902basically debouncing delays the function call so instead of calling the api on every keystroke, you can set the delay to maybe 400ms so when the user stops typing or the keystrokes are delayed for more than 400ms then only the api would be called
But still this will still result in more api calls, one solution i can think of is caching the data fetched from the api and then filtering the data in the frontend itself to reduce api calls
can you make tutorial on redux
Will do 😃
Use typehead
man use time staps, so whoever wants can chose the part they are looking for.
12:29
add something
Hello! Thank you very much for a very useful lesson! How to make it so that if we select Leanne Graham as a result, it will show us "username" and "email".
For example:
Leanne Graham
Bret
Sincereapril.biz
No need to create state in app man
No?
That poor API. Getting called with every letter typed or deleted 🤣
Also, its strongly advised that you don't use map id as the key. In this example, each json item has an id, so you should use that.
What should you do instead?
Why so much prop drilling, is it a standard practice?
As he is teaching for beginners you should not laugh... and don't try to be very cool in comments... you don't might even know the solution for that issue...
Ans for this issue is: You can implement debounce on frontend and cache on server side! Study more about debounce ❤
Api crying
This is trash code. Each letter a sent to API? no one use alert() and maybe instead of input to alert you should fulfill the form? ahhh that was to hard i got it