Setting Up Firebase via NPM (Node Client) in 10 mins - Firebase JavaScript Tutorial

[@SoftAuthor]

👉 Enroll now for the full course ➡ www.udemy.com/course/javascript-firebase-build-full-stack-web-apps-faster/?couponCode=JFYF-80OFF-JUN24
Use 80% OFF Code: JFYF-80OFF-JUN24 (Expires on June 30th, 2024)

[@kaviyasekar2578]

I do have a few doubts, if possible, can you help:
1) Can you initialize firebase without webpack.config.js Is it possible to initialize it between the script tag in the main html file
2) If yes, then how shall other html files access the firebase initialization
3) I am able to fetch all the restaurant documents and show them on the screen. I can apply searching functionality to it. But this process can cause charges in firebase as there is lot of data to read. So is there a way to prevent that.
4) I want to add a map location to each restaurant, how will I store that type of data in firebase v9 and how to represent the map location for each restaurant

[@SoftAuthor]

1-2. Yes, you can simply copy and paste the initialization code inside a javascript file and use other Firebase products inside other js files. When including the js files inside html file make sure the type="module" is set.
3. Once you fetch all the restaurant documents from the database, you can do the filtering on the client side without re-fetching any data from the database.
4. You will need the latitude and longitude of each restaurant and save those values along with other restaurant data when creating a restaurant.
Hope it helps!

[@kaviyasekar2578]

I have created restaurant finder pwa. I have used firebase cloud storage v9 to display and search through the data, watching your videos. My question to you is how to make it possible if I click on one restaurant it will give more details about it another page. Likewise I want to add the details page for each restaurant using firebase v9. Each restaurant will contain different details. Can u help?

[@SoftAuthor]

Yes absolutely.
1. In the restaurants page, you’re going to fetch all the restaurant documents and show them on the screen.
2. When you click any of the restaurant, you are going to pass the document id of it as a query parameter to your next page.
Then when you’re in the second page, you can either re-fetch a specific document by id from The database or you can pull that data from your javascript array that has all the restaurants.
Hope it helps. If you’ve any question, feel free to reach out.

[@kaviyasekar2578]

@@SoftAuthor Thank you for your reply. I have accomplished it.

[@SoftAuthor]

That's great news! Very well done!

[@kaviyasekar2578]

@@SoftAuthor I do have a few doubts, if possible, can you help:
1) Can you initialize firebase without webpack.config.js Is it possible to initialize it between the script tag in the main html file
2) If yes, then how shall other html files access the firebase initialization
3) I am able to fetch all the restaurant documents and show them on the screen. I can apply searching functionality to it. But this process can cause charges in firebase as there is lot of data to read. So is there a way to prevent that.
4) I want to add a map location to each restaurant, how will I store that type of data in firebase v9 and how to represent the map location for each restaurant

[@SoftAuthor]

@@kaviyasekar2578
1. Yes check this video at the end...ruclips.net/video/cd1t1AiODYo/видео.html
2. Yes you just have to add type="module" when you include the js file inside html file
3. You could implement client-side search functionality fetching data from firestore after frist time
4. You just need to get you'll need to get the latitude and longitude of each restaurant location..

[@kaviyasekar2578]

But how to represent the map location for each restaurant

[@SoftAuthor]

As I mentioned before, you'll need to get the latitude and longitude of each restaurant location.
This video may help:
ruclips.net/video/CgGHqI7P0yU/видео.html&lc=UgzeLCQ1hGzJVYY8b3t4AaABAg&ab_channel=SoftAuthor
Cheers