Algolia, Firebase, and Next.js — Let's build a search app | Firebase Semi-Live

Aug 15, 2023

Algolia, Firebase, and Next.js — Let's build a search app | Firebase Semi-Live

Welcome back to Firebase Semi-Live, the live Firebase coding show. In this series, Firebase Developer Advocate, David East will discuss how you can build a search application with Firestore and Algolia.

Firebase Extension for Algolia → https://goo.gle/3sA6bhk
Algolia → https://goo.gle/3z2GYym

Subscribe to Firebase → https://goo.gle/Firebase

#FirebaseSemiLive

product: Firebase - Cloud Firestore, Firebase - Extensions; fullname: David East; re_ty: Publish;

Content

0.05 -> [Music]

5.359 -> hey everybody welcome to firebase semi

8.96 -> live the live coding show where i live

11.92 -> code it in here but you watch it not

14.08 -> live out there and today we're going to

16.16 -> be tackling a new thing it's building

20.64 -> a search app with firestore in algolia

24.8 -> so at google i o we announced that there

27.519 -> is a new extension that integrates

30.08 -> firestore collections with algolia

32.16 -> indexes and so if you add new documents

35.68 -> to firestore they get synced through the

38.239 -> extension to algolia and you can do all

39.84 -> the searching stuff and it's amazing

43.04 -> but when i say we

45.52 -> it's not just me because i have a very

47.92 -> very special guest on today and so i'm

50.32 -> going to bring in my friend

52.48 -> sajid momen from algolia

57.039 -> sajid hey david welcome to the show man

60.32 -> thanks david appreciate it i'm really

62 -> excited to be here uh looking forward to

64.159 -> talking more about the firebase uh

66.479 -> extension that we built at algolia and

69.36 -> i'm excited super excited to kind of go

71.36 -> into it

72.56 -> yeah so i heard that

75.28 -> uh that you wrote the extension is that

77.36 -> true

78.479 -> yeah that's totally true i mean um so

80.96 -> just a little bit uh background so i'm

83.119 -> basically a developer and i'm actually

85.6 -> at algolia leading the

87.759 -> or head of integrations for the partner

89.36 -> alliances team and the firebase team

91.759 -> reached out to

93.2 -> uh our support and it made it made the

96.159 -> message made it back to me where i've

98.24 -> been where we engaged them to uh on this

102.24 -> particular collaboration on building the

104 -> extension uh to be actually

107.759 -> talked about at google i o so super

109.84 -> excited about uh when that event

111.6 -> happened and we were also called out

115.2 -> yeah i love it because extensions is

116.88 -> really good for that you know

118.479 -> integrative glue uh all that uh

121.92 -> you know

122.88 -> it's it's disingenuous to call it

124.96 -> boilerplate code but uh but all that

128.08 -> stuff that's you want to get just right

130.16 -> that's running on the server that

131.44 -> integrates the two together and so i'm

133.04 -> really excited today to get started with

134.64 -> it uh but but before we do that uh i've

138.08 -> been you know i've been on this youtube

139.68 -> channel for for such a long time and so

141.599 -> many people who watch this they're like

142.879 -> oh that's that's that david east guy

144.56 -> he's uh doing the the youtube stuff

147.52 -> again

148.319 -> uh but people don't know you sajid and

150.959 -> so i wanted to do a nice ice breaker and

153.84 -> i want to do my favorite icebreaker game

156.72 -> and usually you do like three truths or

158.959 -> two truths in a lie but i want to take

160.64 -> it up to the next level today and so i

162.48 -> want four truths and a lie so what do

165.68 -> you got for me

167.44 -> oh okay let me think about this uh

170.4 -> all right

171.68 -> all right i got one a little bit

173.519 -> embarrassing can't believe i'm actually

175.44 -> saying this here but

177.2 -> at one point in my life i actually had

179.92 -> four cats

181.28 -> living with me

183.36 -> i know four is a lot but uh yeah so

186.959 -> that happened and so that's one

191.44 -> oh another one

194.319 -> another one uh actually uh on i love to

197.28 -> travel so on one of my trips actually i

200.48 -> hiked

201.599 -> the highest

203.2 -> freestanding mountain in the world

205.76 -> so that's one

207.28 -> okay and

209.2 -> so i'll actually uh on one of my trips

211.68 -> uh in argentina

214.239 -> uh i was at the tip end of argentina

217.2 -> where they actually had the post office

220.4 -> at the end of the world so i decided to

223.44 -> send some postcards to my family and

225.12 -> friends

226.48 -> so that's three

228.64 -> one of my trips to maui i you know my

232 -> friends and i decided to go for a dive

234.72 -> and in in our dive we actually saw a

237.04 -> shark and

238.319 -> we decided hey you know let's get a

240.319 -> closer look but then i think the sharks

242.879 -> saw us coming towards it and it started

244.799 -> to start to chase us but i was fine i

247.439 -> wasn't scared because you know as long

250.08 -> as i was able to uh outswim my friends

252.799 -> i'm you know i'm good to go right so

256 -> and so the last one let's see

259.359 -> um

261.68 -> yes i was actually

264.8 -> i faced a big cat

267.199 -> and when i say big cat i'm talking about

268.88 -> like a lion or something i couldn't see

270.639 -> if it was dark one of your four cats no

272.96 -> no no this was yeah i thought it was i

274.88 -> love cats i was like oh you know maybe i

277.12 -> should try to uh pet a big cat out in

279.6 -> when i was in safari in tanzania off of

282.4 -> the negoran girl crater

284.479 -> it was dark so i couldn't really see

285.759 -> other than the eyes looking at me and at

288.88 -> that point

290.08 -> you know a friend was with me i just

291.68 -> outran my friend so i was i was not

293.52 -> nervous there either so

295.199 -> i think that should be five right

297.52 -> all right so we got cats

299.44 -> sharks

301.28 -> big cats

303.44 -> post offices at the end of the world

305.919 -> and the heightened

307.44 -> and the hike up to freestant hollis

310.08 -> freestanding mountain okay so there's so

312.16 -> many ways to go about this so we have a

313.759 -> whole episode to get to so i'm just

315.28 -> gonna i'm gonna be guessing these

316.639 -> throughout the episode all right so i

318.56 -> gotta

320.32 -> i gotta think here like if you're trying

322.4 -> to go with some obvious things

324.56 -> or

325.36 -> there's so many ways to to

327.6 -> dissect this but let's get we're going

329.36 -> to get moving on on the app so

332.08 -> uh

333.199 -> i have here we're going to dive down

335.28 -> into the laptop now i have here the

338.639 -> cloud firestore console open our our

341.6 -> data editor and

343.68 -> this has a collection of products in it

346.8 -> and it's just a bunch of generated data

349.36 -> so now not another thing with the data

351.039 -> set here is important uh at all for

353.84 -> demonstrative purposes today but what is

356.24 -> cool is that there is a thousand so then

358.8 -> you know thousands that's good

360.08 -> searchable

361.199 -> amount of products here and so what i

363.36 -> want to do is i want to set this up

364.56 -> through algolia so i'm going to start

367.52 -> just you know from scratch by doing it

369.52 -> through extensions and if i scroll down

372.319 -> here we got this

373.919 -> beautiful

375.759 -> little card right there and this is

377.52 -> going to take me through this multi-step

379.52 -> process

380.8 -> where it's going to say like hey let's

383.68 -> let's review what's going on here and

385.44 -> it's going to say we're going to create

386.4 -> a cloud function called execute index

388.4 -> operation

389.52 -> and so sajid if i have this right this

391.68 -> is the whole this is the heart of it

393.44 -> right this is really the thing that

394.8 -> monitors uh firestores uh you know

398.479 -> updates and then this is where you can

400.319 -> on create update and delete this is

402.24 -> where you sync it with the algolia index

404.56 -> right

405.36 -> yep that's correct i mean the the

408.639 -> the extension it is pretty simple it's

411.199 -> actually just one cloud function

413.199 -> that any update uh add update delete uh

416.88 -> is triggered and this function is pretty

418.72 -> much handling all those three uh

420.88 -> scenarios and then it's kind of doing

423.36 -> its own thing doing its thing actually

424.96 -> so

425.759 -> and if you want to look at it there's

427.12 -> always this view source uh i'm not gonna

429.039 -> get into it right now but if you want to

430.16 -> look at it you out there the audience

431.36 -> this is a good good place to look at

432.8 -> some source and one thing to add here uh

435.199 -> you know if there's any feature requests

437.28 -> or any issues you can definitely open up

439.68 -> those issues in the github repo and

441.84 -> we're happy to address them as quickly

444.4 -> as we can

445.84 -> you know what while you're there you

447.44 -> should just go and drop it a star thank

450.08 -> you yeah i would really appreciate it

451.759 -> yeah thank you yeah that's what we do we

454 -> you know get up stars

455.919 -> you know that's what life's all about

457.599 -> you know

458.479 -> uh all right so moving on to the next

460.4 -> one and so we're talking about billing

461.84 -> and usage here and so this uh has got to

465.039 -> set up some billing for cloud functions

467.44 -> but as long as you're within the free

468.879 -> tier which i cannot remember what it is

470.8 -> but it's it's large uh you should be

473.68 -> fine uh and algolia 2 has

477.28 -> your big free trial and uh you have like

480.24 -> your basic searching after that too so

482.4 -> there's there's a lot of um

484.56 -> uh space to explore here before you're

487.44 -> ready to take it up to the pricing level

489.599 -> so

490.56 -> exactly i think that's why you know a

492.319 -> lot of developers love firestore and as

494.16 -> well as algolia there's that free tier

496.72 -> that where you can kind of play around

498.24 -> with you know firestore as well as

500.56 -> testing out some search functionalities

502.56 -> and with the free tier for algolia at

505.28 -> least the first two weeks you pretty

507.039 -> much have access to everything on the

508.56 -> platform and then it just

510.639 -> goes into the basic search

512.479 -> features

513.599 -> yeah

514.64 -> all right all right so now here we are

516.88 -> this is the important part we can't we

518.56 -> won't mess these up all right so uh even

521.44 -> though we can reconfigure a lot of them

522.8 -> but right now we don't wanna we gotta

524.48 -> get you know

525.6 -> we haven't got a show to do all right so

527.839 -> collection path uh i my collection path

530.72 -> is products because that was the what i

532.64 -> just showed in uh

535.36 -> in the collections the only collection i

537.12 -> have of products that's the thousand

539.279 -> document

540.399 -> uh collection and

542.56 -> this every time something uh gets added

545.839 -> removed deleted from that collection

548.08 -> that's what that cloud function is going

549.839 -> to look at

551.04 -> now we have indexable fields and if i

554 -> remember properly oh look i got the nice

556.72 -> uh

557.839 -> autofill i have location of the product

560.72 -> the material it's made from name price

564.08 -> and i also i think skew is one i wanted

567.04 -> to add uh so yeah these are things and

570 -> sajid if i have this right this is what

571.68 -> algolia is going to use to actually

574.24 -> index this field so when we search with

576.959 -> algolia it knows to you know make these

580 -> searchable

581.519 -> yeah and actually it's the extension so

583.92 -> any adjustments that happen uh add

586.08 -> create uh or update and create uh we

589.839 -> will check to see

591.6 -> if those

593.04 -> uh changes have happened on those fields

595.2 -> before we send it to algolia kind of

596.8 -> save you on any operations uh hits to

599.68 -> algolia but we extract those fields from

603.12 -> the firebase document and then send it

605.68 -> over to algolia

607.279 -> and then

608.48 -> yeah sorry uh one more thing yeah you go

610.88 -> ahead

611.68 -> yeah and those then appear into algolia

613.92 -> and after that it's uh then you could

615.519 -> kind of configure algo that particular

617.2 -> index in algolia for whether it's

619.6 -> searchable i mean i'm sure

621.519 -> a lot of these fields you may not want

623.2 -> them to be searched more they could be

625.6 -> for display they could be used for uh

628.079 -> facets and we can kind of go into that

629.839 -> uh when we kind of do a tour of the

631.68 -> algolia dashboard

633.44 -> yes so i'm just going to stick with

634.88 -> these three for now because i'm just

636.16 -> trying to keep it simple and so ah

638.48 -> speaking of the algolia console we have

640.48 -> our first

641.76 -> uh you know request to do this so we

644 -> need to have an algolia index name

647.12 -> so

648.24 -> i have an algolia account set up here

651.76 -> and i don't have any indexes or anything

653.68 -> i just have a nagolia app and so from

655.92 -> here i need to create an index to

658.399 -> provide into there and so if i want to

661.44 -> do that i click in here i just click on

663.6 -> to the left and then it says all right

664.959 -> let's let's create an index and so i'm

667.2 -> going to call this index products

669.04 -> because i'm just going to name them the

670.48 -> same and is that a pretty normal move

673.12 -> that you think such pretty much

675.839 -> pretty much but what we do is also

678.8 -> depending on how big the site is or your

681.04 -> application you can have

682.959 -> multi-language multi-uh

685.839 -> environments so you could probably do

688 -> pro prod underscore en for english

690.8 -> underscore products if you wanted to do

692.72 -> separate uh you know separate indexes

694.959 -> per

696.8 -> uh per uh environment and languages but

699.92 -> that's really up to you you know the

701.519 -> application or to the developer so

704.56 -> right and i uh i just decided to refresh

706.88 -> and skip even though you have a lovely

708.959 -> uh tutorial i decided i'm gonna skip

710.8 -> through it because we got we got you

712.959 -> know we got time to hit uh so now we

716.32 -> have this set up and our index name is

718.32 -> products i'm going to come back here

720.399 -> and i'm just going to write or select

722.88 -> products so that's good and then now i

724.959 -> need algolia application id that's

728.16 -> pretty simple if i have that right if i

730.079 -> go into

731.6 -> uh api keys i like how you have the the

734.32 -> copy right there that's always

736.8 -> uh i just i need more

739.36 -> more of that in my life

740.959 -> and so i'm gonna paste that in and then

743.36 -> now this is this is a good discussion

746.32 -> here because when i first set this up i

749.44 -> i messed this up myself uh and so i want

752.399 -> to make sure that you know other people

754.32 -> are good to go on here so we need to

756 -> create an algolia api key and so we're

758.24 -> right here

759.279 -> and so if i go to all api keys

761.839 -> i have some that i've already set up

763.839 -> when i was tested around before but

765.2 -> we're going to do this from scratch so

766.399 -> i'm going to create a new api key

768.32 -> and

769.519 -> what it's really good we have this

771.36 -> written here but

772.639 -> kind of walk me through this sajid we

774.32 -> have add object delete object all these

776.399 -> api keys uh need these specific uh

780.16 -> you know uh permissions so uh

783.2 -> these are i i assume the whole point

785.76 -> here is to be as granular as possible

787.92 -> with what it can do and not give it too

789.6 -> much

790.959 -> yeah that's correct uh currently i'm

792.959 -> we're kind of giving too much as i

794.56 -> described in the documentation but

796.24 -> that's okay you know so what we want to

798.079 -> do is uh good thing that you're actually

800.88 -> selecting a index

802.88 -> if you don't select an index then that

804.8 -> api key has access to all those indexes

807.44 -> and the different permissions you've

808.8 -> actually given so it is good to actually

811.44 -> create an api key and lock it down and

813.44 -> narrow the focus to a particular index

815.92 -> and the permission itself uh from

817.92 -> security best practices

819.92 -> um you know at the same time you know

822 -> you if you somehow lose an api key you

825.04 -> can always create another one but you

826.32 -> know

827.12 -> uh but i think from a security best

828.639 -> practice it's best to kind of reduce the

830.48 -> number of permis get just put the right

832.56 -> level number of permissions

834.639 -> and uh be exact about what uh index you

838 -> want to select

839.68 -> yeah i like to not give something too

841.519 -> much you know power if it doesn't need

843.76 -> it then you know because you're only

845.839 -> you know you're only going to hurt

846.959 -> yourself i'd rather run into an error

848.88 -> telling me that it can't do something

850.639 -> then give it just limitless power to you

852.88 -> know

853.76 -> you know take me down so uh

857.04 -> so i think i have it all at object

859.199 -> delete object let's see here add object

861.68 -> delete object list indexes delete index

864.32 -> tab delete index yes i do settings edit

866.639 -> settings list

868.24 -> all right all right so that looks good

870.32 -> so now i have this set up

872.48 -> i'm going to create it and then right

874.72 -> here let's copy it

876.72 -> and i'm just going to

878.399 -> paste it in here all right

880.399 -> now we're not going to do the transform

881.92 -> function name but i do want you to do a

883.44 -> little plug for because this is pretty

884.56 -> new you know it says experimental here

886.24 -> so uh tell us what's this all about

888.8 -> sure uh so a couple of requests that

890.88 -> we've gotten from our developers who are

893.279 -> using the extension

895.04 -> and what they wanted to do was to enrich

898.24 -> the payload going into algolia so once

900.959 -> we were able to capture the data from

903.04 -> the document from a firestore document

905.44 -> they wanted to do additional processing

907.44 -> whether they added new new attributes to

910.399 -> the payload before it went to algolia or

912.56 -> maybe modify the existing uh attributes

915.44 -> in the payload or the values of them and

917.6 -> then send it to algolia so this is

919.6 -> another cloud function that you can set

921.68 -> up and uh put the function name in here

924.56 -> as long as it's running in the same

926.24 -> cloud um you know uh region as the okay

930.16 -> as the extension

931.519 -> yes and it's in the description that

933.04 -> kind of uh lays out what what needs to

935.36 -> be done there but uh but it's

937.519 -> experimental in terms of you know one

940.24 -> thing that isn't in place is security uh

942.959 -> just make you know once that cloud

944.32 -> function is public anybody can actually

946.16 -> hit it so um it's experimental right now

949.04 -> until you know i put in the security uh

952.48 -> pieces into it so you know it's

954 -> protected so only the

956.079 -> extension cloud function is hitting it

958.959 -> and allowed to hit it so

961.44 -> that's awesome it's so it's basically

963.04 -> like you know array map in the cloud but

965.199 -> you know really

966.72 -> you know you can do it do what you want

968.24 -> that's pretty cool

969.6 -> um awesome well the last thing we're

971.44 -> going to do before we install we're just

972.48 -> going to set our our region do you have

974.24 -> a favorite region sergeant i always

976.959 -> choose the first one iowa

978.959 -> i want you know i went to high school in

980.72 -> northern virginia let's do that then

983.199 -> let's do that yeah i like that northern

984.8 -> virginia let's do that so install

986.56 -> extension

987.759 -> and so now this extension is going to

990.24 -> install so let's uh let's see how that

992.72 -> goes all right yeah oh and look at that

996 -> that installed how did that happen that

997.6 -> was pretty fast so now that we are it

999.44 -> was lightning fast

1001.12 -> uh and so now that we uh

1004.32 -> are in i'm gonna click get started

1006.32 -> because one of the things that we need

1008.32 -> to handle now is that we have a thousand

1010.72 -> documents in the firestore collection

1012.88 -> but we need to sync these with the

1015.839 -> algolia index because our algolia index

1019.519 -> if we go over here to indices

1022.48 -> products no records yet and we want this

1024.319 -> to happen so we want to take existing

1025.919 -> records and we want to put them into the

1028.72 -> index and we can do that through a

1030.559 -> script right right down here yes that's

1032.959 -> correct so one of the things that

1035.12 -> firebase team will implement hopefully

1037.36 -> in the future is a hook that would

1040.559 -> execute this script automatically on a

1043.679 -> extension install or possibly a

1045.76 -> configuration change

1047.76 -> if you change the index name or maybe

1049.679 -> the collection path in the future that

1051.679 -> we're hoping those hooks would be

1053.76 -> would automatically kick off the

1055.039 -> reimport process for you but for now

1057.28 -> this has to be done manually so

1059.6 -> the right the documentation kind of

1061.2 -> provides the

1062.559 -> the details on what needs to uh you know

1065.039 -> what command that needs to be executed

1067.039 -> and currently it's a unix command so for

1069.28 -> windows right hopefully windows users

1070.96 -> they can use powershell or some some

1072.72 -> type of command uh line tool that they

1074.72 -> can actually kick off a bash script uh

1077.76 -> one thing that needs to be

1079.919 -> transformed or adjusted in this

1081.44 -> particular script is anything that says

1083.2 -> unspecified parameters needs to be

1085.36 -> removed as well as the google

1087.12 -> application credentials

1089.76 -> yes so all i'm going to do is i'm going

1091.28 -> to copy this because i love i love

1092.799 -> copying pasting code and so i'm over

1095.2 -> here now in a code editor this is a

1098.48 -> visual studio code and this is a next js

1101.76 -> app so it's a framework on top of react

1104.4 -> it makes it really easy to get started

1106.16 -> writing react apps and all sorts of

1108.08 -> other stuff um the app itself is not

1110.48 -> super important but

1112.32 -> you know

1113.44 -> this it's uh you can check out next js

1116.4 -> to you could really get the same app i

1119.039 -> have up and running pretty quickly

1121.84 -> and so what i have here is i have this

1123.76 -> and i had run this one before so i'm

1125.6 -> just going to delete that and i'm going

1127.6 -> to paste in

1129.36 -> this and i'm always weary of multi-line

1132.08 -> unix commands because i always feel like

1133.679 -> i'm going to do something wrong and one

1135.2 -> of the things i did wrong is when i set

1138.08 -> this well i'm gonna get rid of the

1139.28 -> transform function because we don't need

1140.4 -> that but uh this whole path to service

1143.679 -> account key i have a service account

1145.36 -> here sa.json

1147.36 -> and for

1148.559 -> for your uh

1151.919 -> let's see here for for people who need

1154.32 -> that let's go to where is it uh

1157.039 -> let's see if we go into service accounts

1160.16 -> and if you look service account and you

1162.64 -> generate a new private key

1164.64 -> it will generate that json and then i

1166.799 -> just went and dragged that into my

1168.559 -> folder so that is how i have my service

1170.88 -> account so

1172.799 -> and from here

1174.32 -> the the service account we will

1176.08 -> reference that dot slash sa.json

1178.96 -> and this is what i did wrong you want to

1180.48 -> make sure you keep that slash in there

1181.919 -> because if you don't

1183.76 -> bad things happen and that right

1184.96 -> sergeant yeah pretty much because when

1186.88 -> you run that npx command it doesn't have

1189.44 -> access to those environment variables

1192 -> and by having that slash continuation

1194.48 -> slash it then is able to set those

1197.2 -> environment variables so that the import

1199.44 -> process can use the you know get the

1201.2 -> information it needs to kick off

1203.52 -> the import get the data from your

1205.28 -> firestore database and put it into

1206.799 -> algolia

1208.64 -> right and and so this is all the same

1210.4 -> information that we've configured with

1211.76 -> the function and that this mpx

1214.64 -> which is you know a fancy npm command uh

1217.6 -> utility uh you have just it calls this

1220.88 -> uh firestore algolia search and

1223.36 -> this seems like at first when i ran this

1225.2 -> i thought this was going to be scary

1226.4 -> because i was like oh this seems like

1228.159 -> it's going to do a lot but it wasn't it

1229.52 -> was actually it was really good so

1231.76 -> i have this saved c dot sh and so if i

1234.72 -> do sh seed dot sh in my terminal

1239.76 -> let's see here oh yes i had this i think

1242.24 -> no i know what this is this is something

1243.84 -> to do with the way i have it set up

1246.84 -> i looked into this but i was too lazy to

1249.679 -> fully do this so i think if you move all

1251.679 -> these onto one line

1253.52 -> um

1254.32 -> you're fine uh it's something with the

1256.559 -> way it reads i can't remember because it

1258.799 -> i think it skips a lot of things so i

1261.2 -> just moved this all into one line i

1263.2 -> could probably find the proper way to

1264.64 -> fix this but i don't

1266.799 -> know you know maybe in some in the

1268.159 -> comments they can they can tell us

1269.76 -> people in the comments are really good

1271.36 -> at spotting all the things i do wrong so

1273.679 -> i never have to worry about finding it

1275.28 -> myself

1276.559 -> yeah you know david i actually i was

1278.559 -> thinking about creating a one-line

1279.919 -> command which i could do and provide

1282.24 -> both the users or developers a single

1285.12 -> line command or a multi-line command

1287.12 -> look at this so hard to read

1288.88 -> exactly that's the only reason that i

1291.6 -> chose to show the multi-line uh command

1294.08 -> just because it's easy to read yeah

1296.64 -> yeah so i think that i think it's just

1298.72 -> something with the this terminal said i

1300.72 -> i looked into this briefly and i saw

1302.4 -> something and then i remember someone

1304.4 -> being like you can do this or you could

1305.76 -> just put on one line and i was like one

1307.36 -> line that sounds good

1309.2 -> um

1310.72 -> awesome see now it's working um

1313.919 -> and so it's gonna run through but before

1316 -> it does anything and right now this is

1317.44 -> just mpx at work uh pulling down the

1320.159 -> package that is this

1322 -> and then it gives me some warnings but i

1324.24 -> found that this uh

1326.159 -> didn't actually uh it said

1328.88 -> that this was missing but uh it didn't

1331.36 -> actually

1332.48 -> uh give me any problems i i think it's

1334.64 -> just reading something

1336.4 -> yeah actually correctly with environment

1337.919 -> variables because i'm using a json

1340 -> instead of a environment variable

1341.919 -> well it's currently a warning right it's

1343.76 -> not a i mean it does scare you in terms

1346.24 -> of it says severity right but the it's

1348.48 -> actually a warning letting you know

1349.679 -> that's not set and it's a good point

1351.44 -> it's not currently being used by the

1353.44 -> import script so

1355.28 -> exactly i and i'm yeah and i'm not using

1357.84 -> any of the i mean we're using service

1359.44 -> account.json uh that is that has all the

1362.72 -> credentials needed and these are

1364.48 -> environment variables we're not using

1365.919 -> those um all right so it's gonna say

1368.08 -> like hey you know you know this is about

1370.48 -> to happen do you want to continue and

1372.08 -> it's awesome that the default is no uh

1374.32 -> because you know like if you makes you

1376 -> actually read it and and figure out what

1377.76 -> you're doing before you do it but i'm

1378.799 -> going to say yes

1380.159 -> and then when i do we're just going to

1381.679 -> sit here and then

1384.64 -> boom and that look that was quick that

1386.559 -> was so quick and so now if we go to

1389.2 -> algolia give the page a little refresh

1393.919 -> look at that we got all these records in

1396.08 -> here that's

1397.12 -> and look at that yep and david one more

1398.88 -> thing that i want to kind of show you it

1400.72 -> may you may look at this and wonder why

1402.96 -> why do i only show uh see two attributes

1405.2 -> there is actually a link that can uh you

1407.919 -> know show the rest of them

1409.44 -> there you go

1410.799 -> yeah yeah exactly yeah because you know

1412.96 -> these are big cards and we can even do

1414.88 -> our search in here so if i search

1416.96 -> uh it's

1418.48 -> synergistic i use buzzwords uh and so we

1422.24 -> have our two synergistic records uh and

1425.2 -> also one of the things i want to point

1426.4 -> out here is that object id that's a

1428.72 -> special key isn't that right yes that's

1430.559 -> actually used by algolia that's uh the

1432.64 -> way we actually look for our identifiers

1435.279 -> unique identifiers and that is the

1436.96 -> attribute that we use for that

1439.679 -> and object id this is the same as your

1442.4 -> document that

1443.6 -> yes as your document id in firestore

1445.76 -> exactly so that mental mapping is really

1448 -> important at this point just say hey i

1449.76 -> have this object id

1452.48 -> now i have you know i so that way you

1454.559 -> can reference the two so this is going

1455.84 -> to be very important later

1457.76 -> so we have this all set up um

1460.24 -> like we have this basic search that we

1462.24 -> can do now but is there anything you

1463.6 -> want to uh you know teach us about the

1465.84 -> algolia console before we move on uh

1467.679 -> yeah sure i mean this is this is great

1469.52 -> now we've got the document in all your

1471.679 -> documents inside of the algolia index

1474.24 -> and this is

1475.52 -> per index you can actually configure

1477.2 -> each index differently right

1479.44 -> so i'd say the first thing i would

1480.96 -> probably want to do you've already done

1482.159 -> a quick search uh do a test search and

1484.88 -> one of the things that algolia will do

1486.4 -> will search all the attributes so maybe

1489.36 -> a developer maybe you need to figure out

1491.12 -> your use case and figure out which are

1492.88 -> my searchable attributes so

1494.88 -> the best way to actually configure that

1497.039 -> is you go to configurations

1499.2 -> and yeah thank you and then search about

1501.12 -> attributes so this way if you have yeah

1504.08 -> like you could probably change name

1506.24 -> uh materials could be the other search

1508.88 -> attributes

1510.559 -> perfect because there could be an image

1512.799 -> url that you don't want that to be a

1514.4 -> searchable attributes last modified

1516.32 -> things like that so

1518.4 -> those could you know maybe the image

1520.24 -> assets could be you the image url could

1522.08 -> be used for more display purposes so

1523.84 -> when you're displaying the search

1524.96 -> results you can actually then show an

1527.279 -> image there and

1529.039 -> other attributes that may not be

1530.32 -> searchable could be used for facets

1532 -> which could actually if it's down um

1535.2 -> right below i think if you scroll down

1537.039 -> you can actually then yes self assets so

1539.84 -> this is for facet searching so if you

1541.44 -> decided that you want a particular maybe

1543.84 -> material could be a good one that you

1545.6 -> may want to use for

1546.88 -> facets in addition to

1549.12 -> for a searchable field you do this and

1550.88 -> if you save

1552.08 -> and then go back to browse you will then

1553.76 -> see

1557.2 -> that you'll have a facet

1563.919 -> so this might

1565.2 -> might not be the best example for facets

1567.039 -> but you know just kind of show you you

1568.88 -> know quickly that you can do that right

1571.36 -> so my my next question is

1575.76 -> it's got to be the freestanding mountain

1577.36 -> right like you you got all these things

1580 -> going on you didn't climb the

1581.52 -> freestanding mountain right

1583.279 -> uh i didn't climb it i hiked it see i

1586.08 -> did say i hiked you liked it yeah oh

1588.64 -> you're right you did say you hiked it so

1590.08 -> you actually did we did we hiked the

1592 -> freestanding mountain yeah and if you do

1594.48 -> you know the amount that i'm referring

1596.84 -> to i don't it's i'm not good on my

1599.6 -> mountain

1600.72 -> it's uh kilimanjaro

1603.279 -> oh you you you hiked kilimanjaro that is

1606.08 -> like one of those that's one of those

1607.6 -> life things

1609.84 -> i hiked

1611.039 -> about kilimanjaro

1613.44 -> it was it was a it was a great adventure

1615.44 -> yeah so it was it was very tough though

1618.88 -> all right all right i'm going to keep

1620.08 -> thinking all right what the next one is

1621.279 -> all right all right

1623.6 -> all right so we have uh our search set

1627.12 -> up um let's uh let's move on to where

1630.32 -> we're gonna do this in ui now so what i

1633.12 -> one of the things i really appreciated

1634.559 -> using

1635.679 -> uh

1637.279 -> algolia was that we have uh search ui

1640.64 -> and so here in your documentation uh

1643.679 -> you have all these different instance

1645.36 -> search libraries that you know hook up

1647.279 -> ui with the algolia client and uh makes

1651.12 -> it really easy to show you know uh hits

1654.24 -> as you refer to them uh as you search

1657.039 -> it's it's really cool it's super fast

1659.039 -> and then the react one i found to be

1660.559 -> just like very easy to use

1663.039 -> uh and so i'll there'll be links in the

1665.679 -> show notes for uh for this or the

1668.32 -> description uh and

1670.399 -> uh so check this out the way it works is

1672.64 -> you instantiate an algolia search client

1675.919 -> and then from here you have this

1677.6 -> provider uh in react uh like if you're

1680.399 -> an angular user and that's another cool

1681.919 -> thing i liked i like how there was

1683.279 -> angular one they put the song view one

1685.6 -> there's vanilla js like there's so many

1687.6 -> different ways to hook this up so yeah

1689.279 -> if you're like i'm not a react developer

1690.88 -> well it doesn't matter

1692.48 -> tons of support and i'd love to add

1693.76 -> something here i mean one of the things

1695.36 -> that we love uh you know

1698 -> you know promote on algolia to our

1700.08 -> customers is algolia is uh the best

1703.279 -> relevance engine and we provide the best

1705.6 -> speed you know on the first keystroke

1707.36 -> you're able to see um

1709.6 -> see results but also we actually talk

1713.36 -> you know how great our developer

1715.36 -> documentation is and i'm sure if

1717.12 -> anyone's already using algolia they can

1719.039 -> actually attest to this and you've

1720.48 -> already taken take a look at this as

1722.32 -> well we provide sdks i mean we

1724.32 -> definitely have the apis that you can

1725.84 -> directly build your sdks around but we

1728.88 -> provide sdks in all the different

1730.96 -> popular languages as well as the our

1733.52 -> instant search library which are all

1735.039 -> these pre

1736.159 -> set up

1737.279 -> widgets that you know you really don't

1739.52 -> have to develop uh you know your own

1741.919 -> widgets you can just use ours and

1743.52 -> customize it however you want so in this

1746.64 -> in the widgets itself like you said we

1748.24 -> have view react uh plain javascript and

1751.6 -> i think it might be one more but i can't

1753.2 -> think of it right now oh angular yes

1755.919 -> yes

1756.96 -> so one of the things i'm trying to find

1758.559 -> you had a really

1759.84 -> i remember found a good copy okay let's

1762 -> just keep

1762.96 -> rolling because what we're going to do

1764.159 -> is

1765.52 -> yes okay so this is all right this is

1768 -> this is similar to what we're going to

1769.2 -> do we're going to do something very much

1770.48 -> like this so

1771.6 -> in my

1772.72 -> uh code editor i'm going to show you all

1775.76 -> out there what packages i have installed

1778.559 -> we have algolia search i'm using the the

1781.36 -> beta version of the firebase sdk the new

1783.6 -> awesome tree shakeable uh much lighter

1786 -> version so we're gonna take a look at

1787.039 -> that uh i have next react direct dom and

1790.159 -> then the react instant search dom uh for

1793.679 -> uh the library we're gonna use uh and

1795.52 -> then we also just have some typescript

1797.039 -> types um and i have firebase admin set

1799.84 -> up for us for this import script i've

1802.159 -> written and then also you know obviously

1803.6 -> typescript because i love typescript uh

1806.72 -> you know i just install it sometimes

1808.08 -> when i don't even use it and i'm just

1809.36 -> kidding i won't do that uh so now we

1814.08 -> we have our homepage component and if i

1816.88 -> i think i need to

1818.72 -> run do i have it running no i don't have

1820.799 -> it running all right so what we're going

1821.76 -> to do is we're going to run npm run dev

1824.559 -> and that's going to kick us off at

1826.32 -> localhost 3000 and with any luck it's

1830 -> just going to be this really boring html

1832.64 -> or css reset

1834.799 -> page with let's search on it because

1836.72 -> that's what we do we're going to search

1838.48 -> and so the first thing we're going to do

1840 -> here

1840.96 -> is at the top we're going to import the

1844.08 -> algolia search library

1847.52 -> and

1848.799 -> that is from

1851.2 -> algolia search and i'm going to use

1853.12 -> light i like that you have this light

1855.12 -> library and it's

1857.279 -> actually if i remember properly it is a

1858.96 -> default export so it's like algolia

1861.12 -> search

1862.399 -> and then from there i can create a

1864.32 -> search client

1867.519 -> and this will be actually you know what

1869.44 -> one of the things your docs do that i

1870.799 -> really like is that i can copy and paste

1872.32 -> things yep and so this is it's what it

1874.64 -> does it takes in your app id which we

1877.12 -> created and then this key right here and

1881.279 -> um let me copy this first and then let's

1883.679 -> talk about that sure

1886.48 -> so

1887.44 -> what let me just do some formatting but

1889.2 -> uh

1890 -> what so which key is this

1892.64 -> and uh and and why

1895.2 -> you know is it you know

1897.279 -> is it safe to use on the client all that

1899.6 -> those type of questions that people

1900.88 -> usually have good question yes so this

1903.279 -> key is actually a special key not a

1905.679 -> special key you can actually generate

1906.88 -> another key but it only has the browse

1909.279 -> permission on it which is key to keys

1912.08 -> for searching you don't want to add any

1913.679 -> other permissions other than browse for

1915.84 -> especially this is going to be

1918.159 -> a you know browsable by any developer

1920.96 -> who's looking at your markup or

1923.039 -> javascript that wants to deliver onto

1924.88 -> their browser so this is a special key

1927.039 -> that you just specifically add the

1928.72 -> browse uh

1930.88 -> permission on it and that's all all that

1933.6 -> key does and there's actually one that's

1935.039 -> already created for you uh in the api

1937.519 -> keys uh section of the algolia dashboard

1940.64 -> so if you go back yes api keys

1944.559 -> and then there's the search only api key

1947.679 -> right that's that's the one right here

1949.6 -> yep okay cool

1951.36 -> all right well

1953.279 -> all right now we we got our keys all set

1955.44 -> up we are good to go yep

1957.6 -> and the next thing that we'll do is

1959.519 -> we're gonna import from the search

1962.799 -> library

1963.919 -> and that is where we get all of our ui

1967.2 -> and from here i believe we have yes we

1970.399 -> have instant search which is the i think

1972.559 -> this is a provider i'm not uh

1974.88 -> my react is it's okay uh i think you

1977.84 -> know i'm okay every act uh says instant

1980.559 -> search and then uh just to get

1982.72 -> everything we have a search box

1984.72 -> component and then we also have a

1988.08 -> uh a hit was it

1990.72 -> hit props or maybe oh no i think i

1992.96 -> provide the hit i think that's it all

1994.32 -> right um

1996.08 -> let's just go with these i feel like i'm

1997.6 -> missing one but we'll fig we'll figure

1999.279 -> that out if i am missing it maybe your

2000.88 -> docs has it

2002.159 -> um

2003.279 -> let me click back or is it oh it was

2006.24 -> right here

2007.2 -> it is it is hits maybe i just wasn't

2008.96 -> looking right okay maybe vs code was

2011.12 -> failing me oh it is hits okay yes i was

2013.36 -> right all right cool so we have these

2015.6 -> three things uh which i love that it's

2017.279 -> only three things to set this up

2019.2 -> and instead of let's search let's start

2021.679 -> with the

2022.72 -> instant search

2024.559 -> didn't turn it into a component for me

2027.279 -> and now within here this needs a search

2030.32 -> client

2031.44 -> and that's just search client and then

2033.12 -> if i believe properly it needs an index

2036.08 -> as well index name yes and then ours is

2038.799 -> products

2040.159 -> yeah that's right and and then from here

2042.32 -> i

2043.12 -> created a little

2044.84 -> div with a class of site grid because i

2047.84 -> have uh

2048.96 -> my own oh sorry i'm gonna react class

2051.119 -> name

2052.079 -> i do that every time uh

2054.48 -> and i have

2056.48 -> uh and these just if you're looking at

2058.159 -> this being like what else have you done

2059.44 -> here i i have next.js's uh

2063.119 -> you know you create your own document in

2065.119 -> here uh where i put some some google

2067.679 -> fonts in there and then i also have a

2069.919 -> custom app which is how you import

2071.839 -> global styles

2073.599 -> you know a lot of react developers use

2075.839 -> style components and motion and all this

2078.72 -> cool css and js

2080.56 -> uh

2081.359 -> solutions i'm not that cool um so i use

2085.04 -> global styles uh though i do know the

2088.159 -> author of emotion shout out to kai

2091.44 -> he's cool um

2093.28 -> but uh but yeah so i'm just i'm just

2095.599 -> doing it i'm not doing it the cool react

2097.2 -> way uh so inside here

2100 -> this is where i start using my i'm gonna

2102.079 -> have my search box

2104.56 -> and then within search box then i'm

2106.96 -> gonna have hits and if i recall properly

2110.079 -> with hits

2111.839 -> um here let's look at the docs yes

2113.44 -> that's right it's a single

2114.96 -> escaped component and i think you need

2117.359 -> to provide a hit component

2119.839 -> yes and then i have one in our own

2123.2 -> component which i made this little

2125.68 -> one see like yeah i'm using bem in here

2128.72 -> block uh element modifier not cs and js

2131.839 -> it's yeah i'm so not cool uh and i'm

2134.48 -> going to import

2136.88 -> from

2138.16 -> dot dot

2139.68 -> dot dot slash components

2142.72 -> slash hit

2144.56 -> and we're going to import

2146.96 -> now not hit okay cool

2149.839 -> and so this is going to take in we can

2152.16 -> we just we'll do this for now

2154.72 -> oh it was it doesn't like it for some

2156.8 -> reason oh i know why because of the way

2158.56 -> i did the props so this uh before i just

2161.2 -> totally fix it for everyone basically i

2163.04 -> have these props in here if i

2165.839 -> just change this to

2168.96 -> hit i believe

2172.96 -> uh and this will break but if i change

2175.359 -> the hit yeah then it's happy um because

2177.68 -> it needs to have a prop of hit and i

2180.079 -> change this to item and i think i i

2182.4 -> probably should just have it as like hit

2185.2 -> and then

2186.56 -> delete that

2187.839 -> yeah and then it's happy okay so look at

2189.92 -> that we're fixing problems on the fly

2192.24 -> uh i'm bound to mess up but not on that

2194.64 -> one all right

2197.28 -> so now

2198.32 -> let's let's just see what this looks

2199.599 -> like in the ui oh okay let's yeah david

2202.56 -> before you uh show this in the ui oh oh

2205.76 -> no you didn't see that no one in the

2207.119 -> audience saw that no what you're saying

2208.64 -> you're you're supposed to grill me what

2210.64 -> happened oh my gosh what's the next

2212.8 -> what's the next ask well because i know

2214.8 -> what it is

2215.92 -> and i just didn't want to disappoint you

2218.56 -> by guessing what the lie was

2221.04 -> and

2221.92 -> that is

2224.32 -> you thought you could trick me

2227.359 -> by doing the easy one

2230.32 -> and thinking that i wouldn't guess it

2232 -> but there's you didn't have four cats it

2233.839 -> was probably like three cats wasn't it

2236.88 -> five cats you got you got me you got me

2239.119 -> it wasn't for now it's kidding it is for

2241.44 -> cats yes when i was young i was getting

2243.92 -> all these cats bringing them to bringing

2246.24 -> them to my house even though it's not my

2248 -> cats so at one point

2249.839 -> i had four cats

2251.359 -> live with me

2253.04 -> so that was only like a couple of days

2254.96 -> stint though you're like a cat collector

2257.839 -> pretty much pretty much but you know

2259.44 -> when you're young

2261.119 -> in our lives where we collect cats

2263.44 -> yeah

2264.48 -> yeah no all right all right so you you

2266.8 -> collected cats you hate mount

2268.96 -> kilimanjaro all right

2271.599 -> all right i'm gonna catch you off guard

2273.04 -> i feel like i'm gonna get this

2274.88 -> all right uh okay so we have this and

2278.88 -> this is setting up i uh yeah explain

2281.68 -> this to me uh what is so i have these

2284.56 -> these are these are my data so this is

2286.56 -> good i like this

2287.92 -> but

2288.72 -> um

2290.24 -> why is it these default ones because i

2292.24 -> haven't typed anything in the search box

2295.119 -> oh well actually uh what do you mean

2297.44 -> like this what why is it returning all

2299.359 -> of it

2300.16 -> um it's not returning all of it because

2301.52 -> you know we have a thousand but it's

2302.96 -> returning you know i want to do my math

2304.72 -> here you know but um it's returning a

2306.72 -> certain number of of boxes and um

2310.4 -> and we haven't typed anything yet so

2312.24 -> that it's you know providing some

2313.599 -> default thing right now which is cool

2315.52 -> because i want this i i this is like

2317.28 -> behavior that i want something default

2319.52 -> um but yeah what's

2320.96 -> do we know what the uh

2323.52 -> or where you could like point people to

2326.4 -> yeah you know you can actually uh this

2328.24 -> is one thing that i'm actually uh just

2332 -> uh blanked on right now but i think by

2334.24 -> default we're providing every everything

2335.92 -> and it's uh a limited number but i

2338.839 -> think congratulated or something okay

2340.4 -> well we'll do some research in that and

2341.839 -> see what that is because it's super cool

2343.119 -> it does it uh and so if i start

2344.96 -> searching now uh let's say i'm searching

2347.2 -> for plastic

2348.96 -> and then i'll just search the first one

2350.24 -> i see oh yeah look at that

2352.8 -> yep and so we can get to that i can

2354.8 -> clear my search that's super fast and

2357.28 -> then the what i want to do so we have

2359.599 -> that and i think that's super cool is

2361.28 -> that you know just to recap kind of how

2362.96 -> it works is create a provider with the

2365.28 -> search client in there and the index

2366.88 -> name we want um this is just a sample

2369.599 -> little like hey let's create a grid of

2371.359 -> things and

2372.64 -> uh so it looks that way and then the

2374.64 -> search box this is all ui provided by

2376.88 -> algolia the amount of like you i've

2378.8 -> written here is pretty scant and that's

2381.28 -> pretty cool and then we have the hits

2383.28 -> list and then that takes in a hit

2385.44 -> component which we imported from here

2387.68 -> and that look this is just a straight

2389.44 -> functional component it doesn't do

2390.96 -> anything fancy at all we're gonna

2393.04 -> eventually here pass the on click

2395.44 -> uh you know call back down into here so

2398 -> when we click that details button we'll

2399.68 -> get the the hit serve back up to us

2402.48 -> um and we'll handle that in here in a

2404.8 -> second to load stuff from firestore but

2406.24 -> that's it you know and that's really

2407.92 -> that's cool and i can componentize this

2409.68 -> somewhere in my site and then my you

2411.52 -> know i have my algolia search with

2414.4 -> firestore all all set up in one tiny

2416.4 -> component that's pretty it's pretty rad

2419.119 -> i know i mean that's i mean that's kind

2420.88 -> of why a lot of the developers love us

2423.2 -> is because we provide so many things out

2425.2 -> of the box keep it as simple as possible

2427.119 -> i mean same thing goes for the firebase

2428.72 -> algolia extension i mean once you've

2431.04 -> kind of configured it you're not really

2433.28 -> doing more than you know what's been

2435.68 -> configured unless you actually use the

2437.2 -> transform function but that's really up

2439.68 -> to the developer if they want to do

2441.04 -> additional enrichment where they may

2443.28 -> actually end up adding more logic to it

2445.2 -> but that that's kind of owned by the

2446.64 -> developers on that part

2448.8 -> yeah well i just clicked this i knew

2450.4 -> this was going to error out so if anyone

2451.839 -> in the audience is like yeah

2453.76 -> got him

2454.72 -> uh you didn't because i knew this was

2456.319 -> going to error uh and so what what we're

2459.28 -> going to do now is

2460.88 -> is we are going to get

2463.28 -> sachin caught in his lie because you oh

2467.839 -> did not see

2470.079 -> the a big cat

2472.88 -> ah you know tanzania

2475.28 -> yes i actually did

2477.04 -> i was actually

2478.8 -> camping on the gorongo crater with the

2480.96 -> my with my safari camp

2482.96 -> and

2484 -> luckily there was a lot of other camps

2485.599 -> with us but a friend of mine's like hey

2488.24 -> there should be some fireflies around

2489.92 -> here and while i was looking for

2491.76 -> firewood because it was really cold on

2493.28 -> the rim of the nagoran girl crater i was

2495.76 -> just kind of walking on the edges of the

2497.52 -> camp and i was like oh and my lights

2500.4 -> were turned off so i actually no sorry

2502.56 -> my i had my flashlight because i was

2504 -> looking for a firewood and uh i pointed

2506.96 -> into the the you know the forest or the

2509.68 -> brush near the edges of the camp and i

2511.92 -> saw like something light up and i was

2513.599 -> like oh fireflies got i grabbed my

2515.599 -> friends like hey you want to see

2516.8 -> fireflies i found them

2518.48 -> and uh and i showed it to him and he's

2520.72 -> like okay turn off your light so we can

2522.16 -> actually see him turn them off it

2524 -> disappeared he's like uh turn him back

2526.079 -> on in that direction and it wasn't

2528.8 -> fireflies it was eyes looking at us now

2533.04 -> you know definitely the the eyes itself

2535.76 -> it was a cat eyes just because you know

2538 -> collected four cats obviously so

2540.8 -> uh so we kind of backed up a little bit

2543.76 -> and i just ran for it left my friends in

2545.839 -> the dust i know i'm terrible friend

2547.2 -> right so but yeah that's uh that's when

2550 -> i faced a big cat

2552.079 -> oh my gosh yeah not not me

2554.8 -> not not not this this guy

2557.839 -> i wouldn't be doing that

2559.599 -> okay well all right i'm gonna

2562.319 -> it's totally okay i'm gonna have to

2564.88 -> think about this because we only got two

2566.319 -> left

2567.119 -> two more left yeah two more so i'm

2569.28 -> either gonna totally fail or get you on

2570.96 -> this last one all right all right let's

2572.24 -> move on

2573.839 -> i will get this all right so now what

2575.599 -> we're gonna do is we're gonna surface

2576.8 -> the click and to do that we're going to

2579.599 -> do something a little

2581.52 -> a little fancy not super fancy uh it's

2584.16 -> called the hit and so what we have to do

2586 -> is just wrap create a higher order

2587.92 -> component this is some react stuff don't

2589.52 -> worry too much

2590.8 -> about it but we pass in the item and

2593.68 -> then on oh let's do it as an object i

2596.079 -> believe item and then on click

2599.119 -> and then

2600.319 -> react's probably going to yell at me

2602.8 -> react sorry typescript what type of cool

2604.56 -> i have very permissive uh typing you

2607.52 -> know no strict mode i think on because

2609.119 -> it would be really mad at me otherwise

2611.2 -> um

2612.079 -> and so what i want to do here is i want

2613.52 -> to return the hit component

2616.16 -> but i'm going to turn it as hit

2618.88 -> and we're going to pass in or say the

2620.56 -> hit itself we're going to pass in hit is

2623.359 -> hit

2624.24 -> and then on click is on click i probably

2626.16 -> could have spread these props but that's

2627.92 -> fine stick to not being a cool react

2630.24 -> developer

2632.839 -> and

2634.72 -> yes uh oh i probably want to do it as

2636.88 -> capital t since it is a component all

2639.04 -> right this is a horrible naming

2640.48 -> convention and i don't recommend doing

2642.16 -> this at home um but here we go and so

2645.44 -> now if i have this right let's do a

2647.92 -> console.log

2650.88 -> just to make sure before we do anything

2652.72 -> fancy

2654.079 -> okay so that's getting rendered because

2656 -> i'm doing it not just on oh yeah it's

2657.68 -> right because i'm not doing it on the

2658.64 -> click it is getting rendered but if we

2659.92 -> do

2661.52 -> like

2663.44 -> uh let's see here hit

2665.839 -> i don't want a name

2668.319 -> that's fine

2669.44 -> this is gonna get confusing with the

2670.8 -> scoping but it's fine

2672.96 -> oh yeah this is

2674.64 -> yeah don't name things like the way i do

2676.319 -> we don't

2677.599 -> think thank goodness for block scoping

2679.839 -> um

2681.2 -> and so now let's clear this out if i

2683.04 -> have this right oh man that did get

2685.119 -> messed up see and it's because of the

2686.72 -> way i have this but i'm just gonna trust

2688.96 -> that this works that's a horrible thing

2691.2 -> but i bet you this oh sorry right in

2693.28 -> here

2694.079 -> this should work um

2696 -> and so now

2698 -> uh this is what i'll do it

2699.76 -> i know i won't all right so

2701.52 -> uh

2702.8 -> we're going to be able to serve on click

2704.319 -> into here oh it's because we didn't

2705.599 -> assign on click

2708.319 -> into these oh wait no how did i do this

2710.88 -> now ah i think this is it i think this

2712.48 -> is when they're going to get me

2713.92 -> uh

2714.72 -> passing on click oh i think this is why

2718 -> because then from here

2720.16 -> i say

2722.88 -> the hit

2724.4 -> yes this is what i think i wanted to do

2727.28 -> oh i oh man no i don't need to do that

2730.16 -> uh

2730.839 -> hit because this is going to pass in a

2734.319 -> hit i believe

2736.4 -> that's like hit

2738.8 -> and then

2740.8 -> hit

2742.16 -> and then on click

2746.48 -> yes and then what we want to do is we're

2748.079 -> just going to do

2749.76 -> uh

2751.359 -> that's a lot log i think this will work

2755.2 -> think so

2756.319 -> i think so let's do a refresh and we're

2758.48 -> going to make sure this is good oh no i

2759.92 -> broke it man i can't remember what i did

2761.599 -> now

2762.8 -> this is why we are semi live uh right i

2766 -> believe i did something like this but

2767.28 -> there was a way i passed in the

2769.2 -> hit maybe i did it like

2771.52 -> no i think that's right i think the hit

2773.92 -> i think you put

2775.44 -> yeah and then but no but needs to go

2777.44 -> through as the component property that's

2779.119 -> why

2780 -> i did it wrong maybe it is the function

2782.8 -> i can't remember what i did now this is

2784.88 -> so frustrating for me because i

2787.52 -> practiced this

2789.04 -> um

2790.56 -> let's see here we have the hit and that

2792.56 -> will go through but we have to be able

2793.68 -> to pass in like a cl a click call back

2796.4 -> maybe oh i know what i do i want to do

2797.92 -> it inside of here that's what i think it

2800.079 -> is so if i do console.log

2802.96 -> yes i think that was how i wanted to

2805.119 -> handle it

2806.16 -> yes oh my gosh it was so simple i was

2808.64 -> just trying to make it i was trying to

2810.24 -> over engineer it i was trying to what i

2812.48 -> really needed to do is i needed to bring

2814.16 -> in my

2815.119 -> redux provider

2817.04 -> and then do my redux stunks with my saga

2820.72 -> and then i needed to you know use

2823.359 -> reducer

2824.64 -> on a use effect yeah that's what i was

2826.8 -> trying to do but all i needed to do is

2828.24 -> just pass into here um

2830.96 -> all right so the cool thing about this

2832.24 -> object is is that this is the same

2835.359 -> key

2836.16 -> as the firestore key so this brings us

2838.48 -> to a very important topic of

2839.76 -> conversation and that is uh i now have

2843.04 -> data that's being synced across two

2844.96 -> separate systems uh i have it stored in

2848.24 -> firestore and i also have it stored in

2850.24 -> algolia uh

2852.16 -> as an algolia index and so

2854.96 -> what is the source of truth here which

2857.04 -> one do i use which one do i lean on

2859.2 -> sajid do you have any recommendations

2861.119 -> here

2862.079 -> yes definitely i mean the source of

2863.52 -> truth should always be your firestore

2865.119 -> database i mean that's where you'll

2867.68 -> your app will be making changes it'll

2869.2 -> sync up to the firestore uh your

2871.2 -> database and then eventually make it to

2873.119 -> algolia now depending on latency and

2876.319 -> delays that

2877.76 -> because one of the things from algolia

2880.24 -> side is there is a priority on how we

2883.119 -> deliver

2884.16 -> whether it's indexing or searching

2886.16 -> searching is always prioritized over

2887.92 -> indexing so if the system is bogged down

2890.72 -> because other customers are you know

2892.96 -> this is a algolia hosted environments we

2895.359 -> have our own uh cloud

2897.839 -> algolia cloud that runs all of our

2900.559 -> algolia search

2903.04 -> our search itself

2904.48 -> and

2905.52 -> so if if there's a lot of searching if

2908.079 -> if the environments are overloaded

2910.16 -> searching will take more of a priority

2912.48 -> over indexing so there might be some

2914 -> delays in some cases so it's always

2916.559 -> better to trust or best to trust your uh

2919.359 -> your firebase uh database

2921.359 -> okay as a source of trade yeah so i

2923.52 -> think what you're saying is is that

2926 -> it's the shark right mm-hmm oh oh we're

2929.599 -> back to that again sure yeah okay so it

2932.16 -> was just a shark

2933.76 -> it was a shark you didn't get chased it

2935.04 -> wasn't was no

2937.119 -> yes it was actually so the thing is that

2939.52 -> [Laughter]

2941.28 -> we uh we did go and uh dive uh maui we

2945.359 -> did see a shark and instead of the shark

2947.68 -> chasing us we were stupid enough to say

2950.4 -> hey let's swim to the shark because you

2952.72 -> know it's not fun seeing a shark in the

2954.8 -> distance it's great when it's right in

2956.16 -> our because the giant cat wasn't enough

2958.079 -> for you

2959.28 -> no no i think uh i think we do a lot of

2961.76 -> dumb things uh you know it's not just me

2964 -> included i think everybody does a lot of

2965.28 -> dumb things right so

2966.72 -> but that's where you know a lot of the

2968.4 -> great stories come from if you if i

2970.079 -> didn't do any of those dumb dumb things

2971.92 -> i would have nothing to tell

2974.4 -> well no that has made this a lot a lot

2976.4 -> of fun see i i was the first one i

2977.839 -> thought of but then i was like you know

2979.359 -> what that sounds like one of those ones

2980.559 -> where you jump for it yeah

2982.8 -> and you wrong should have just gone with

2984.8 -> my first inspiration

2986.079 -> i try to make it as obvious as possible

2988.48 -> but i guess you went to the four cats

2990.16 -> first

2991.04 -> i did i did it just seemed like it would

2992.72 -> be the one you'd overlook

2994.559 -> all right

2995.68 -> well

2996.48 -> inside of here let's let's do some let's

2999.359 -> do some react stuff so i'm going to

3002 -> import

3003.76 -> from i'm going to try to use the right

3005.359 -> react away uh import from react let's do

3009.44 -> use state and

3012.72 -> yeah i think that uh probably use state

3015.28 -> and use effect

3017.839 -> um

3019.119 -> uh i'm already scared doing this all

3021.04 -> right so uh

3022.8 -> use state so what i want to do here is i

3024.96 -> want to be able to set whatever is like

3027.359 -> the current clicked upon record and so

3030 -> that's going to start with null

3032.16 -> and so it's going to be record and set

3035.28 -> record

3036.64 -> and so when you click inside here

3039.2 -> i'm going to say set record

3041.92 -> um and then that will get processed and

3045.76 -> what we want to do is do a use effect

3048.72 -> that's right and then i will

3051.2 -> don't worry about this uh you people who

3053.599 -> don't

3055.04 -> care about react uh because i'm not even

3057.04 -> sure if this is right uh i think what i

3059.28 -> want to say is every time record changes

3061.839 -> let's import from firebase

3064.72 -> so we're gonna we're gonna use the brand

3066.319 -> new firebase sdk i'm very very excited

3069.44 -> about this

3070.559 -> and so what's great about this is is

3072.4 -> everything we import are going to be

3074.079 -> free floating functions which is fun to

3076.8 -> say free floating functions

3080.96 -> and then from here we're going to use

3083.92 -> firestore and we're going to use a brand

3085.599 -> new package called firestore lite

3087.68 -> which is so if we're using algolia

3089.359 -> search light let's use firestore light

3091.359 -> this is

3092.4 -> significantly smaller than firestore it

3094.24 -> doesn't do as much no real time reads

3096.72 -> and offline but if you just need a

3098.24 -> simple rest api like we want right now

3100.16 -> this is awesome to use

3102.24 -> and so what we're going to do is we're

3103.52 -> going to create our app from firebase

3106.24 -> and

3108.559 -> and that i have an actual import

3112.48 -> from

3114 -> uh what is it dot dot slash firebase

3117.119 -> config which i believe that is a default

3119.599 -> export so i'll just call it config

3123.359 -> and then just to show everyone that you

3125.599 -> know it's not total magic yeah just my

3128.16 -> firebase keys are in here

3130.64 -> and now i can do some cool stuff with

3133.599 -> uh firestore lights so the first thing

3135.44 -> you do is i need to get firestore

3137.2 -> instance i'll need to get the collection

3140.72 -> that i want to talk to so products in

3142.8 -> this case and then i'm going to need to

3144.48 -> be able to get the doc so three nice

3146.8 -> little free floating functions

3148.72 -> and we'll get the db from get firestore

3152.8 -> i'm gonna pass in the firebase app

3154.16 -> instance even though this is optional to

3155.68 -> do in the new world it's still kind of

3156.96 -> fun i know i know you can so i just kind

3158.88 -> of like you know kind of like doing it

3161.119 -> and then i'm going to create a

3163.52 -> uh

3165.04 -> a fun little function called uh

3168.72 -> product doc and what this will do is

3171.68 -> you'll have an id

3173.2 -> and this will turn a collection

3175.599 -> did not want that

3177.2 -> it's a little function that says okay

3178.96 -> let's

3179.68 -> do the collection

3181.28 -> of

3182.16 -> products and i need the

3184.64 -> slash products slash

3188.72 -> id

3190.079 -> and so now if i call this i can say

3192.079 -> product

3193.599 -> i can say like doc is product even

3195.839 -> though i would not do that but product

3197.119 -> docked and i can you know i can pass in

3198.4 -> whatever string in there and it will

3199.839 -> return to me a collection instance

3203.119 -> and so now inside here what i can do is

3206.8 -> oh yeah you can't let's do this as an

3209.119 -> async function

3211.2 -> we're going to get the

3213.52 -> docs data of the record and so we're

3216.4 -> going to say

3217.92 -> doc is product doc

3221.359 -> of

3222.48 -> record

3223.92 -> dot object

3226 -> id

3228.88 -> and

3229.839 -> and it's called that it's called record

3231.599 -> doc

3232.8 -> and then from here we can get the data

3235.28 -> or snapshot

3237.599 -> from record

3239.04 -> doc

3241.359 -> uh

3242.8 -> i'm sorry we call get doc

3245.2 -> of record doc so i'm speeding through

3247.839 -> this people but what we are

3250.96 -> oh and i need to pass in the

3253.76 -> uh what is it the

3255.839 -> first instance is db i believe so

3260.64 -> no what is it that i need to pass in

3262.24 -> first i can't remember i should probably

3263.68 -> just read the docs

3265.04 -> um yeah i just passed in a reference and

3267.119 -> so if i'm returning a record

3269.76 -> and this returns a reference

3272.559 -> oh i'm returning a collection i need to

3274.48 -> return a document that's that's my

3276.319 -> problem oops

3279.119 -> fires see that's why i use typescript

3280.96 -> people

3282.079 -> um and so now we're gonna pass that in

3284.4 -> but it's not it's

3285.92 -> record doc

3288.319 -> awesome

3290.96 -> and we'll wait it

3292.48 -> and then console.log

3295 -> snapshot.data so

3298.559 -> what does it not like async function

3300.96 -> what am i

3302.24 -> what am i missing oh i just gotta call

3304 -> it a name ac function load that's a

3306.16 -> horrible name

3307.52 -> and then we'll just call load in here

3310.4 -> so effectively everything i just did and

3312.16 -> i got across my fingers this is going to

3313.599 -> work is is that we are saying hey

3317.28 -> whenever someone clicks uh something

3320.319 -> we're going to set a record

3322.559 -> and that's going to be from the callback

3324.96 -> of whatever hit was clicked

3327.52 -> this will

3328.72 -> trigger this use effect because we are

3331.119 -> triggering off of this record it's going

3333.28 -> to call this and i just wrap this in an

3335.119 -> async function so i could use a weight

3337.359 -> and then we'll get the data so let's

3339.76 -> let's do that there's other ways i could

3341.28 -> have done this this seems to be is this

3343.359 -> the official react way we'll have to if

3345.119 -> you're in the comments let me know so

3346.96 -> let's let's test this it's going to be

3349.68 -> error at first let's

3351.44 -> that's right it's going to have an error

3352.88 -> at first so what we want to do is we

3354.24 -> want to check to see if

3357.44 -> if record

3360.24 -> not equal null let's do this

3365.119 -> all right not record duck record

3367.52 -> all right

3370.16 -> and this error i know how to recover

3371.92 -> from this errors and hopefully the

3373.52 -> beautiful thing about this is is this

3375.04 -> might be one of the last times we ever

3376.88 -> see this error because what's happening

3378.88 -> right here this is uh

3381.359 -> just a bit of a quirk of hot module

3383.92 -> replacement uh where it's saying hey you

3387.04 -> already created a firebase app because

3388.48 -> some internal state that's being kind of

3390.559 -> clobbered over uh we have uh a

3394.24 -> like

3395.599 -> i don't know if it's a fix but we we're

3397.2 -> changing some behavior so that this

3398.96 -> won't happen anymore uh and that will

3401.119 -> happen when we do our final release of

3404.16 -> the of the new of the sdk that's

3406 -> currently in beta so the

3408.72 -> uh the simple fix for this is actually

3412.079 -> pretty easy uh and like i said hopefully

3414.4 -> you'll never see this again but we go to

3416.96 -> this git apps method and what we want to

3418.88 -> do is we want to check to see like is

3420.319 -> there an app does it exist if so use

3423.119 -> that if not let's initialize an app and

3426.559 -> so i can say

3427.88 -> gitapps.length

3429.52 -> is uh equal to

3431.76 -> one

3433.28 -> and then we'll just say get apps

3437.599 -> of zero

3440.72 -> uh else

3442.24 -> do that so get old

3444.079 -> good old ternary

3445.68 -> operator

3447.52 -> and that way let me save now

3454.319 -> ah there we go

3455.839 -> so this is good let's click one of these

3458.4 -> details and just like that it worked and

3461.68 -> what's cool about this is is that this

3463.68 -> is this has other pieces of information

3466.88 -> in it from firestore

3468.64 -> that it didn't have

3470.799 -> in

3471.76 -> bump this up that we didn't have in

3474.24 -> algolia so i didn't index price or sku

3478.079 -> or this uh little numeric id we just did

3481.839 -> these three so i can search on these

3483.76 -> three and then i use firestore like

3485.44 -> you're saying as my source of truth and

3487.839 -> if i had

3489.2 -> more time i'd probably just put this

3490.64 -> into the ui but for now uh let's uh

3494.799 -> i want to talk about two more things

3496.079 -> before we go and the first is is that i

3498.64 -> hear there's some pretty cool logs

3500.88 -> in uh

3502.4 -> in here yeah i mean we've only scratched

3504.96 -> the surface of algolia's platform and

3507.04 -> there's so much more that we provide but

3509.359 -> from an index point of view

3511.44 -> for troubleshooting

3512.96 -> the logs the api logs is where you could

3514.799 -> go to see if any of the requests are

3517.119 -> actually making it to algolia and this

3519.119 -> is kind of where you'll find out whether

3520.799 -> your api keys are correct whether you

3523.359 -> have the right permissions so always

3525.2 -> check out the logs to see am i actually

3527.68 -> getting

3528.88 -> if are the requests are actually is

3530.799 -> actually being made here and then when

3532.16 -> you click on each uh

3534.319 -> maybe one of those items then you'll

3536.24 -> you'll see the request itself and the

3538.559 -> response that uh is sent back to you so

3540.48 -> maybe if you click the first one uh

3542.48 -> david yes there you go

3544.4 -> so yeah there's a little bit more detail

3545.76 -> information

3547.52 -> so this is a good way to always uh you

3549.92 -> know anytime you're actually developing

3551.44 -> a good way to check out the logs verify

3553.68 -> everything is kind of connected properly

3555.68 -> and you know

3557.119 -> yeah and you can see actually four days

3558.88 -> ago i have this 403 because i was using

3560.96 -> the wrong key i didn't even know it and

3562.799 -> then when i looked in here i was like oh

3564.24 -> i'm using the wrong key and so stuff

3566.16 -> like this is pretty useful

3567.68 -> yes exactly and then there's also stats

3569.68 -> as well so for anyone that's actually

3572.72 -> wanting and wanting to understand like

3574.4 -> what number of records created uh you

3576.72 -> know search operations this is also a

3578.72 -> good way to identify if anybody's you

3581.599 -> know actually using your search key you

3583.599 -> know if your search operations has gone

3585.76 -> up

3586.4 -> uh this is a way to kind of track that

3588.16 -> as well

3590 -> awesome

3591.04 -> oh the very last thing i want to talk

3592.559 -> about is security because security is

3594.96 -> very important and so this is on the

3597.76 -> firebase side and so the cool thing

3600 -> about this is this is a search that in

3602.64 -> my case let's just say that this is like

3604.24 -> a public searchable thing that i wanted

3606.559 -> um

3607.68 -> people to do

3608.96 -> for my site like anyone can go and

3610.559 -> search and find it so my rules are

3613.68 -> pretty simple i'm going to match at

3616.16 -> the document level under the products

3618.16 -> collection so match products you know

3620.72 -> with this capture for this id

3623.68 -> and then i can say hey allow

3626 -> read if it's true uh around right and

3628.799 -> false because i don't want anyone to

3630.319 -> write but this still this has been set

3632.4 -> this entire time um and so if you still

3635.68 -> have um

3637.76 -> uh like an admin uh

3640.64 -> service account or something like that

3641.92 -> you can

3643.04 -> that can be ignored by this so this is

3644.88 -> still good for like any type of admin

3647.2 -> operation uh but for any specific user

3650 -> they can't mess with your product so in

3652 -> my current case this is good i only want

3653.68 -> admins to write to this and it makes my

3655.44 -> security rules you know secure and and

3657.599 -> pretty easy here so

3660.16 -> wow that's that's it we

3662.4 -> just covered a lot of stuff yeah i hope

3664.88 -> uh people can

3666.64 -> people will remember this well actually

3668.24 -> it's a recording so they can always go

3669.44 -> back right yeah you just go back you

3671.44 -> know you just watch it on 2x 0.5 x

3674.079 -> whatever your preferred playback speed

3675.68 -> is i always do 2x i i just like come on

3677.68 -> i need to get to this i want to actually

3679.28 -> get to the code and then i slow it down

3681.44 -> because then it's just i want to capture

3684 -> everything properly but or

3685.76 -> otherwise we make mistakes right

3688.24 -> that's true i do i agree with you i'm

3690.24 -> i'm a 1.5 x person yeah myself i can't

3693.119 -> do 2x it's too much for me yeah it's

3694.88 -> kind of fast yeah i agree yeah so all

3698.64 -> right well thank you for coming on the

3700.16 -> show sajid that was awesome uh

3703.599 -> if anyone wants uh any more information

3706.16 -> uh like you know check out the the get

3708.319 -> up repo all the links we have in the

3709.68 -> description algolia's got tons and tons

3711.599 -> of docs and tons and tons of

3712.799 -> integrations check those out uh if you

3715.2 -> want to see more algolia stuff uh let us

3718.16 -> know in the comments uh you know this is

3720.24 -> just something we did on a whim for fun

3722.48 -> and we're happy to do more and just just

3724.559 -> let us know what you all want and what

3726.079 -> you all think so

3727.68 -> thanks for tuning into the show and

3729.68 -> we'll see you on the next firebase semi

3732.24 -> live

3733.359 -> amazing thanks david thanks everyone it

3735.119 -> was uh great to be on this show

3738.24 -> [Music]

3743.44 -> you

Source: https://www.youtube.com/watch?v=ZNVAPpTpKpk