Build a Full Stack Serverless App With Next js & Fauna
Build a Full Stack Serverless App With Next js & Fauna
Web devs have more power than ever to build ambitious full-stack apps. In this episode, Shadid Haque will teach us how to build a TikTok clone with Netlify Functions, Fauna, and Next.js!
00:00:00 Guest introduction
00:03:41 What do we build in a full stack app?
00:10:11 Where should we start?
00:12:29 Starting with a starter kit
00:22:37 Using ApolloProvider
00:29:27 Setting up Fauna database
00:49:24 Creating a register user function
00:59:59 Welcome
01:01:04 Building a log in function
01:24:16 Where should people go if they want to know more?
* repo: https://github.com/Shadid12/ticktok-c…
Links:
- https://fauna.com/
- https://ntl.fyi/functions
- https://nextjs.org/
- https://www.algolia.com/
- https://cloudinary.com/
- https://dev.to/shadid12
- https://dusty.domains/
This episode was sponsored by:
- Netlify (https://lwj.dev/netlify)
- Fauna (https://lwj.dev/fauna)
- Auth0 (https://lwj.dev/auth0)
Live transcription by White Coat Captioning (https://whitecoatcaptioning.com/)
Credits:
Local Elevator by Kevin MacLeod is licensed under a Creative Commons Attribution license (https://creativecommons.org/licenses/…)
Source: http://incompetech.com/music/royalty-…
Artist: http://incompetech.com/
Busybody by Audionautix is licensed under a Creative Commons Attribution license (https://creativecommons.org/licenses/…)
Artist: http://audionautix.com/
Additional sound effects obtained from https://www.zapsplat.com
Content
3.52 -> hello everyone and welcome to another
6.399 -> episode of learn with jason today on the
9.12 -> show we have should eat shady thank you
11.84 -> so much for hanging out with us how you
12.799 -> doing today
14.16 -> pretty good pretty good thanks for
15.599 -> having me today i am uh i am thrilled to
18.56 -> have you on the show um so for folks who
21.359 -> aren't familiar with your work do you
22.56 -> want to give us a little bit of a
23.359 -> background on yourself
25.359 -> yeah yeah absolutely so i'm sudeed i
28.08 -> work for fauna so fauna is a serverless
31.199 -> database with native graphql api
34.399 -> and
35.76 -> we are a globally distributed database
38.399 -> and fauna works really great with
41.92 -> jam stack type of application
44.719 -> so so yeah i work for i'm a developer
47.92 -> advocate um yeah i've been coding for
50.48 -> for some time
51.84 -> um
52.8 -> before phone i used to work for ibm and
55.36 -> uh
56.48 -> really
59.6 -> oh yeah yeah i did nice nice what uh
62.079 -> what team were you on
64 -> um i was actually on a front-end team so
66.88 -> um the carbon uh framework wait you were
69.76 -> on carbon
71.04 -> yeah i was i was oh that's amazing so i
73.6 -> don't know were you there when robin was
75.439 -> was the manager
77.759 -> yeah i think so now yeah okay that's
80 -> that's super cool so robin cannon at ibm
81.92 -> used to be my my manager as well before
84.08 -> he moved over to carbon this is so
86.56 -> interesting for everybody who's watching
88.08 -> i'm sorry
92.64 -> um anyways so so let's talk a little bit
94.88 -> about what we're going to do today now
96.64 -> that uh neither of us is at ibm anymore
99.28 -> um so
101.28 -> one of the things that i find really
102.479 -> fascinating about
104.079 -> front end development in general is that
107.28 -> we saw a push a while back and we saw
109.92 -> this in in boot camp curriculums and we
111.84 -> saw this in the way people talk about
113.28 -> things where
114.88 -> you see this pressure to become a full
116.88 -> stack dev
118.24 -> and
119.36 -> what that meant in 2010
122.479 -> is like you had to be able to get into
125.6 -> like virtual machines and and configure
128.08 -> docker and go stand up a
130.8 -> database on aws or google cloud or
133.44 -> whatever and then figure out how to how
135.36 -> do you do scaling how do you lock down
137.12 -> the security how do you do all of these
139.2 -> these really complicated things right
141.12 -> and then on top of that you also had to
143.04 -> be able to build a front end and all the
144.879 -> middleware in between that would connect
146.56 -> those things and you had to be able to
148.16 -> do the styling and the front end to make
150.239 -> this this whole experience look and feel
152.08 -> nice to use
154.959 -> as we've moved into into today in the
157.68 -> 20s
158.64 -> it feels like
160.4 -> that gap has significantly closed
163.04 -> because it's not really feasible to
164.959 -> become an expert in
166.879 -> literally everything right like it's
168.959 -> just you can't be seven devs in a trench
172.56 -> coat like we have we've gotta specialize
176.72 -> and so i think that uh that what we're
178.959 -> seeing is you know we we've seen
182.319 -> front end and and specifically this idea
185.12 -> of like front-end developers who know
187.04 -> enough
188.159 -> serverless to be dangerous
190.319 -> are
191.04 -> are capable of of uh
193.76 -> building what would be considered full
195.36 -> stack apps but without having to get
197.76 -> into container management and database
200.159 -> scaling and figuring out how to do like
202.959 -> massive security and and horizontal
205.519 -> scaling and database sharding and all of
207.519 -> these things that get really really
209.04 -> really complicated
210.48 -> um
211.44 -> so this is a this is a
213.92 -> fascinating time to be a front-end
215.92 -> developer because you you almost de
217.76 -> facto become
219.519 -> a full-stack developer uh
222.4 -> and and that's what we're talking about
223.76 -> today right is is building a full stack
226.959 -> app
227.84 -> but
228.56 -> why don't you talk a little bit about
229.68 -> what the the actual plan is here so that
232 -> that everybody who's maybe intimidated
233.519 -> by the idea of full stack can can get a
235.599 -> sense of like what do we actually build
238.159 -> in a full stack app
241.599 -> yeah absolutely so
243.519 -> basically a full stack app is
246 -> technically when you are able to store
248.64 -> data
249.68 -> in your data layer where when you're
252 -> able to retrieve that data and you're
255.04 -> able to do all sorts of things for for
257.519 -> example like all like if you have uh a
260.56 -> application like
262.639 -> facebook or reddit like all this social
264.56 -> media type of application where you can
267.44 -> pretty much do front operations where
269.84 -> you know data is stored somewhere in the
271.759 -> server and then
273.759 -> user can log back in and you can
276 -> retrieve that data and you know share
278.56 -> things with
279.84 -> the users in between or retrieve your
281.84 -> data things like that so pretty much
285.36 -> crud is an acronym uh meaning create
288.16 -> read update delete that's like when you
290.72 -> talk about apps
292.16 -> um those are the forward buckets of
295.04 -> operations that you're going to do
296.16 -> against any database
298.479 -> yeah yeah and previously like um if
301.52 -> you're um
303.039 -> if you know something about ruby on
304.4 -> rails or php
306.24 -> back in the
307.36 -> yeah
308.479 -> from back in the days like you have to
310.479 -> have like this entire stack running uh
313.52 -> pretty much
314.479 -> uh to do all these like back-end
316.24 -> operations you have to have a dedicated
318.4 -> uh database that is connected to your
321.52 -> php
322.639 -> application which is purely a back-end
324.88 -> application and you sort of have to
326.96 -> create rest endpoint or you can you know
330.32 -> you can do all sorts of stuff like mv
332.4 -> mvp and mvc was a pattern back in the
335.68 -> days things like that um yeah like you
338.88 -> had to do
340 -> all sorts of like you had to write a ton
342.32 -> of code to to save your data save user
345.28 -> sessions uh you know authenticate your
347.44 -> users
348.479 -> uh
349.28 -> manage like user state cookies like
352 -> there's tons of stuff that that went
353.759 -> into that
354.88 -> um however now with uh with rise of jam
358.479 -> stack and all these uh wonderful
360.319 -> services that available uh you know
362.24 -> netlify
363.759 -> fauna we can talk about fauna as a data
366.16 -> layer
367.039 -> uh you know netlify functions next.js
370.08 -> all this stuff
371.44 -> you can be
372.56 -> purely a front-end developer and you
375.6 -> should still be able to
378.16 -> pretty much create all the functionality
380.16 -> of a back-end stack
382.24 -> relatively
383.919 -> yeah relatively quick and
385.84 -> easily so so that's like huge you know
388.96 -> you can think of creating an entire
391.759 -> startup in a week you know you can roll
394 -> out a product very fast very quickly and
396.96 -> that's that's what we're kind of
399.28 -> trying to do here uh today we're gonna
401.12 -> we're gonna create like a
402.88 -> really simple sample application um to
405.68 -> demonstrate that to demonstrate the
407.36 -> power of jam stack uh next jazz netlife
410.96 -> functions fauna as a database
414.479 -> nice yeah i think that and that's that's
417.28 -> really interesting because you know
419.039 -> we're looking at
420.24 -> what we've got 82 minutes
422.4 -> and what what you just described is
425.12 -> ambitious as hell we're we're talking
426.72 -> about setting up a database we're
428.56 -> talking about setting up a new app we're
430 -> talking about like building a front end
432.08 -> building some middleware building a back
433.759 -> end uh all in the span of
436.56 -> what by the time i stop talking about it
438.4 -> it will be about 75 minutes right
440.96 -> so uh so this is
442.96 -> this is not a short order for for what
445.52 -> we can build but
447.28 -> with this new kind of model of like
450.8 -> we can combine existing tools that take
453.759 -> the heavy lifting of like
455.52 -> the the boilerplate
457.52 -> part
458.56 -> the the like base level foundation that
462.24 -> is the same for 95 of apps
465.28 -> we don't have to do that anymore we just
467.199 -> get to work on what our app
469.199 -> needs what our app does that's different
471.44 -> right so we're only building features
472.96 -> we're only building value we're not
474.4 -> doing boilerplate or foundation because
476.479 -> that's handled by tools that take care
478.08 -> of that for us um
480.08 -> so
480.96 -> because we have so much to cover i'm
482.72 -> actually going to
483.84 -> move us right along into programming so
485.599 -> that we can we can get as far as we can
487.84 -> here so let me do a a quick shout out
491.599 -> before we get started to our captioning
493.919 -> we've got rachel from white coat
495.68 -> captioning here today doing those
497.199 -> captions for us thank you so much rachel
498.72 -> for being here and that is made possible
501.039 -> through the support of our sponsors
502.879 -> netlify fauna and auth zero all of whom
504.96 -> are kicking in to make this show more
506.24 -> accessible to more people which uh which
508.319 -> means a lot to me
510 -> um we are talking to shadid today and i
513.12 -> am in the wrong window so let's pull
515.039 -> this up uh it is
517.76 -> hake shadeed
519.68 -> here
520.399 -> so you can get over there and uh and
522.399 -> give that a quick follow let me just
524.72 -> shut that down yeah get out of here
526.48 -> there we go get over there give it a
528.32 -> follow um
530.399 -> and we're gonna be talking about so
532.399 -> fauna is going to be our database
534.88 -> we're going to use netlify functions for
537.68 -> our serverless layers so let me drop
539.36 -> that in here and then we're going to use
542.32 -> next.js to build the app itself
545.36 -> um
546.64 -> and that's that's as much as i know what
548.72 -> what else should i
551.519 -> what what should i do next should he
554 -> yeah so um
555.839 -> we are also going to try to uh hook up
559.279 -> algolia um although like it's optional
562 -> we might not have the time to do it
564.72 -> uh but we might just touch a little bit
567.6 -> um so algolia is another great service
570.399 -> for full text search and it also uh
573.839 -> guides really well with matlify function
576.8 -> fauna and all the next year
580.08 -> and for storage i think we're going to
582.32 -> use cloud enery which is uh which is
585.2 -> just storing blobs
587.2 -> on the internet
589.04 -> it's a storage service so
590.959 -> yeah
592.32 -> blobs on the internet is actually the
593.92 -> title of my memoir
598.64 -> it's pretty cool
602.72 -> it's
603.83 -> [Laughter]
607.92 -> um okay so so what is my my first step
611.36 -> here like where where should i start
614.56 -> yeah let's start with the with the
616.72 -> diagram just to just you show people
618.56 -> right that's right uh diagram here
622.32 -> okay so this is uh this is a like a
626.16 -> quick and dirty
627.519 -> architectural diagram um and i recognize
630.88 -> logos but why don't you walk us through
632.48 -> what's happening here
634.24 -> yeah so our main front-end application
637.2 -> is written in next.js here okay and um
640.88 -> so what we're doing we're uh
642.72 -> communicating
645.519 -> uh to our application like our
647.76 -> application layer is going to be
649.92 -> uh
651.12 -> solely next.js so that's where our
653.519 -> front-end code lives now
656.079 -> in next 12 when you put functions in
659.12 -> your slash api directory
661.92 -> all those functions actually becomes
663.839 -> netlife functions so they automatically
666.64 -> become your serverless functions so
668.48 -> we're going to take a look at that
670.399 -> um so so that's where netlify comes in
673.36 -> nightlife functions comes in
675.36 -> okay we're going to deploy this whole
676.959 -> stack to nullify as well so you're going
680.24 -> to see how easy it is to deploy to
682.48 -> nullify
684.079 -> and we're going to use graphql
686.64 -> to easily communicate
688.399 -> to fauna so fauna is going to be our
691.279 -> data layer so this is pretty much fun
694.72 -> is a database but you can use it to do a
698 -> lot of your back-end stuff and we're
699.839 -> gonna see like how easy it is to
702.16 -> actually use fauna to act as a back-end
705.36 -> service okay
707.68 -> and uh
708.959 -> and
710 -> on top of that we can we can have
711.76 -> algolia to do some
713.76 -> you know full-text searching and all
715.839 -> sorts of searching that you see in
718 -> amazon or tech talk uh you could do a
720.88 -> ton with algolia
723.04 -> um uh we're gonna we won't probably have
725.68 -> time to touch too much onto that um
729.68 -> yeah and uh a cloud area is just uh
732.48 -> we're just storing our videos our blogs
735.36 -> and cloud area all right
737.519 -> excellent okay so let me get that out of
739.839 -> the way and then
741.68 -> if i want to get started here uh i'm i'm
744.079 -> expecting i need to create some code am
746.399 -> i starting with an empty folder do we
747.839 -> want to use a starter
750.639 -> yeah let's start with uh with a starter
752.959 -> kit so i have created
755.44 -> um a starter kit
758.72 -> okay so i'm going to grab
762 -> this starter kit and i'm going to uh
765.36 -> github repo clone
769.839 -> all right and then i'm going to
772.48 -> uh
774.88 -> yeah
775.92 -> jason do you
777.04 -> do you um do you want to do this or do
779.68 -> you want me to uh code along or should i
783.04 -> do that should we do that coding uh i
785.36 -> mean we can we can do it a couple ways i
787.44 -> can open this up in a vs code live share
789.44 -> session
790.32 -> uh or i'm i'm always happy to be hands
792.959 -> on keyboard that's uh that's
795.279 -> easy for me um
798.079 -> why can't i oh yeah this is what i want
799.92 -> so i want to get a repo fork and where
802.079 -> to go learn with oh wait i need to move
804.48 -> into it we're going to go into
807.2 -> uh was it tick tock yep and then i'm
809.76 -> going to github repo
811.76 -> fork
812.72 -> and we'll put it in learn with
815.12 -> jason
816.48 -> um tick tock
819.199 -> starter
822 -> oh wait
823.76 -> hold on
825.04 -> what
826.48 -> fine fine i'm gonna do it the other way
829.76 -> i'm gonna fork it from here because i
831.04 -> don't remember how to do it so let me
834.48 -> fork this
836 -> and i want to fork it to the learn with
837.44 -> jason repo
840.72 -> don't need any of that
843.519 -> okay
844.72 -> and so then we're going to say get
846 -> remote add
848.399 -> or no shoot get remote rename
853.6 -> origin
854.72 -> upstream does that work
856.56 -> see how much i remember get remote v ah
859.519 -> i did it get remote add
861.6 -> origin is gonna be learned with jason
864.56 -> i better get at github.com
869.199 -> learn with jason and tick
873.199 -> talk starter
875.519 -> dot get
877.6 -> all right
878.8 -> awesome
880.24 -> ah
881.36 -> get foo man all right here we go so i i
884.8 -> have that
886 -> set up and i can open up the code here
887.76 -> to look at it
890.959 -> um if you want to do the live share um i
894.48 -> can jump i can hop into it as well yeah
897.279 -> let's do it i'll get uh
901.279 -> get set up here
903.519 -> continue
905.68 -> okay
910.079 -> all right
912.88 -> and
914.72 -> okay i've copied that so then i'm gonna
916.8 -> drop it in your twitter dms
919.36 -> um
921.92 -> awesome so there's a link for you to
923.68 -> join
926.32 -> and
927.36 -> then i'm going to go back to your
928.48 -> profile
930.399 -> and come back here all right so
932.8 -> this should allow you to join up
936.959 -> and it's opening let's give it one
939.44 -> second
944.24 -> okay open
945.759 -> visual studio code
956.639 -> i think this should show
958.959 -> once you join here
963.199 -> what else
970.3 -> [Music]
979.04 -> okay so we're just waiting for the live
981.199 -> share servers to connect all the pipes
984.48 -> or i guess the tubes as as we all know
986.72 -> the internet is just a a series of
989.04 -> connected tubes
1001.92 -> oh no
1004.079 -> crap
1004.959 -> um
1005.839 -> okay i thought i was in the latest but
1008.32 -> maybe i'm not
1011.68 -> restart to update let me try again
1017.04 -> here comes here's the service
1019.68 -> let me get that live share going again
1026.16 -> and
1030.4 -> okay
1031.76 -> we're just gonna throw that in
1036 -> your dms one more time
1043.199 -> and there it goes
1048.88 -> all right this time it's gonna work
1050.799 -> first try
1055.36 -> chat how many of you all have used don't
1057.679 -> not now
1058.25 -> [Music]
1059.76 -> i don't know what it's doing and i'm
1061.12 -> unhappy about
1064.84 -> this okay we might have to you might
1067.84 -> have to just tell me what to code if
1069.12 -> this doesn't work here in a second
1072.16 -> okay uh
1075.6 -> just give me one second just going to
1080 -> and
1081.44 -> joining collaboration
1084.799 -> direct connection not supported in the
1086.799 -> browser oh no
1095.12 -> okay
1096.72 -> i think i'm in
1098.559 -> yeah i'm in your folder all right
1101.36 -> can you let's see i don't oh here you
1103.12 -> are here you are okay yeah yeah there
1105.2 -> you are all right so where should i
1111.36 -> where should i go like where are we
1112.88 -> starting
1114.32 -> okay so first of all let's do a npm run
1117.44 -> dev just to
1119.2 -> see what we got with the starter
1124.88 -> okay all right so we're oh wait
1127.679 -> i need to npm install don't i
1130.16 -> yeah
1131.12 -> all right let's let's run the npm
1132.64 -> install
1139.84 -> and then this will take a second here we
1142.16 -> go let me run npm run dev again
1146.559 -> what don't you like
1148.96 -> not supported
1152.559 -> are you
1157.2 -> what uh what oh hold on i'm in
1160.559 -> for whatever reason my terminal opened
1162.16 -> in node 12. let me just
1165.36 -> change that
1167.76 -> start server we're running at 3 000.
1169.919 -> let's get this going here
1172.48 -> so here's
1174 -> here's 3 000 i'm going back out
1176.48 -> and
1177.52 -> showtime
1178.48 -> hey we've got uh
1180.48 -> got ourselves a uh starter app right we
1183.36 -> can see hello next js fauna graphql
1186.24 -> we've got an upload button a login
1187.84 -> button and uh this this logo
1191.679 -> and
1193.76 -> all right this looks yeah this is cool
1195.76 -> okay so do you want to walk us through
1197.36 -> kind of where we're starting and then we
1198.48 -> can we can jump in
1200.559 -> that's awesome
1202.48 -> open login button okay i'm assuming
1203.919 -> we're going to fix that all right yeah
1206.72 -> um
1207.6 -> yeah all right so let's uh let's dive
1210.08 -> into the pages directory okay and in the
1212.72 -> pages yeah in the pages directory we're
1215.6 -> gonna go to the index.js file
1218.4 -> and this is where our
1220.72 -> um
1221.52 -> you know this is our entry point of the
1223.679 -> app
1224.48 -> and uh yeah this is our home page and
1228.24 -> this is where we're gonna have all the
1230.08 -> feed um all the tick tock feet show up
1233.039 -> so this is where we're gonna
1234.72 -> put them
1235.919 -> um
1236.96 -> so
1237.76 -> now if you take a look at that uh
1240.24 -> underscore app.js file how about this i
1243.28 -> i'm following you now so i should just
1245.12 -> jump to wherever you go
1247.2 -> oh okay all right
1249.12 -> so here we go
1250.72 -> yeah so now here we're in the
1253.48 -> app.js file
1255.76 -> so you're going to notice a couple
1257.039 -> things here so first of all we have our
1260.84 -> components wrapped into this layout
1264 -> component
1265.12 -> and index.js a layout component gives
1268.24 -> you
1269.12 -> you know global styling pretty much and
1271.2 -> that is to kind of look out here that's
1273.76 -> this header and this these login buttons
1277.039 -> and and all that stuff is is what's up
1278.799 -> here right
1279.76 -> that's all coming out of layout
1281.679 -> yeah so okay let's dive
1284.08 -> let's dive into the layout and again
1286.64 -> like this component has some
1289.12 -> you know the login logout button
1292.4 -> uh that
1294.08 -> upload button then the the nav bar and
1297.039 -> all that stuff so
1299.36 -> uh this layout is under the components
1301.84 -> folder and here we also have um
1304.96 -> yeah we also have a login and a signup
1308.159 -> component so when you click on that
1311.44 -> login button in the nav bar it shows up
1314.799 -> a model so those modals are just yes and
1319.039 -> again this
1320.48 -> is just html at this point like none of
1323.2 -> these things do anything right it's just
1326.159 -> it's not alert
1328.08 -> all right so
1329.44 -> if you're if you're familiar with react
1331.679 -> this should be you should be able to
1333.679 -> follow along um no problem like this is
1336.32 -> just some simple forms with
1338.559 -> um
1340.159 -> some form handling and handle changes
1342.72 -> and
1343.6 -> all that
1344.84 -> and yeah it's it wraps are
1348.88 -> all the components
1350.64 -> um
1351.52 -> all right
1352.4 -> now the next thing is the apollo
1355.039 -> provider and again we're using apollo
1357.6 -> provider to
1359.44 -> kind of
1360.48 -> call graphql so right uh
1363.36 -> yeah so we're gonna we're gonna
1365.919 -> uh call fauna graphql to query data from
1369.039 -> fauna and again we're gonna use fona
1371.039 -> database as
1372.559 -> our our back end right now
1375.679 -> yeah
1376.72 -> um so let's let's take a take a look at
1378.799 -> what what's inside a follow provider so
1382.48 -> um so this uh provider component comes
1385.44 -> from apollo client library and again
1388.88 -> we installed this package from from
1391.12 -> apollo
1392.24 -> and
1394.24 -> this
1395.44 -> takes in a client object which is also
1399.2 -> provided for you in the apollo client
1402.159 -> here so it's this is all provided for
1404.32 -> you in the starter starter code like
1406.72 -> this is all like
1408 -> some basic graphql setup
1412 -> checking for
1414.24 -> checking for headers and stuff like that
1416.24 -> like what graphql endpoints we're gonna
1418.559 -> hit
1419.84 -> things like that memory cache and stuff
1422.559 -> like that so again these are all what
1424.559 -> boilerplates you don't really need to go
1426.559 -> deep into it it's just all provided for
1428.559 -> you all right okay and so what what is
1432.32 -> ultimately happening here if i'm if i'm
1433.919 -> reading this correctly is
1435.76 -> with the apollo client down here at the
1437.679 -> bottom on lines 22 to 25
1440.08 -> we have the
1442.159 -> cash which is the way that apollo says
1444.64 -> if you make a query apollo hold on to
1446.72 -> that so that you don't have to make the
1447.84 -> same query multiple times and and it
1449.6 -> just makes things you know a little more
1451.36 -> efficient that's why you would use a
1452.96 -> client versus just making a fetch
1454.64 -> request
1455.679 -> and then the link
1457.36 -> is so that we can pass along whatever
1460.48 -> we're passing in as well as
1462.4 -> authorization headers
1464.24 -> um and so it looks like we are using
1466.72 -> cookies to get the fauna session and
1469.12 -> then we're getting a token
1471.039 -> out of that
1473.6 -> session here
1475.6 -> good
1476.48 -> and then uh we just pass that along in
1479.2 -> as a bearer token
1480.64 -> um and so if i'm understanding correctly
1483.2 -> what that means is whenever we send a
1486 -> request to apollo client
1488.159 -> that request will include this
1489.679 -> authorization header
1492.08 -> yes exactly great and uh
1494.88 -> yeah yeah and on line 12 if you take a
1497.279 -> look
1498.4 -> again here we have the fauna public
1501.36 -> secret token so this is the token that
1504.24 -> we're going to generate in fauna and
1506.88 -> plug it in to our environment variable
1509.52 -> so
1510.559 -> um
1511.919 -> should i go and
1514.559 -> set up should i like deploy this to
1516.08 -> nullify
1517.84 -> yes let's deploy this to magnifier so
1520.159 -> let's start it let's get it deployed so
1522.08 -> what i'm going to do is stop the server
1524.159 -> here and then i'm going to check we
1526.72 -> haven't made any changes yet
1528.4 -> so let me get push upstream origin main
1532.08 -> and make sure that we've got all the
1533.52 -> code up there i think we do we do
1536.08 -> and then what i'm going to do next is
1538.48 -> i'm going to run netlify init
1542.159 -> and that will start setting up our
1544.4 -> netify site i'm going to create and
1545.76 -> configure a new one we will put it on my
1548.559 -> team and we'll say tick tock
1551.84 -> clone
1555.2 -> uh oh somebody already did that one so
1557.279 -> let's go
1558.72 -> tick tock lwj
1561.279 -> yeah that's fine
1562.88 -> and our build command it auto detected
1564.96 -> npm run build the directory deploy is
1568.559 -> next i think that'll get changed by
1570.799 -> the uh
1572.4 -> the next function what is that
1578.08 -> that is a lie
1581.36 -> let's try that one more time
1586.24 -> huh what are you doing
1588.799 -> well that's annoying let's go
1590.72 -> set it up manually i guess
1594.72 -> so um i just ran nutlify open to get
1596.88 -> this in here and so you can see it set
1598.48 -> up the site but i need to uh to hook it
1600.799 -> up to a git repo so i'm going to go to
1604.48 -> build and deploy
1605.919 -> and we want to link to git so i'm going
1608.24 -> to choose github
1610 -> and that'll get us authorized and then
1611.919 -> in the learnwithjason.org
1616.32 -> i can get
1618 -> tick-tock
1620.88 -> here
1622.32 -> we're going to deploy the main branch uh
1624.559 -> yep all that is good let's deploy the
1626.72 -> site
1627.919 -> and what we should see in here is it
1630.48 -> should pick up
1633.12 -> uh like the next
1636.159 -> should pick up that it's a next site and
1637.76 -> all those things and and just make us
1640.399 -> get us a running site so let's let that
1642.88 -> run
1648.799 -> yeah just to um
1650.72 -> just to give you guys some context there
1652.88 -> is a netlify.tamil file
1656.32 -> in here
1658.72 -> so
1659.76 -> that's also
1661.039 -> it's actually using the
1662.799 -> nexus plugin
1664.88 -> nice
1668.799 -> good good what's up alex welcome
1671.039 -> everybody
1673.52 -> and did you let me look at this
1674.88 -> nullify.tamil um so you'd actually
1677.6 -> for for future projects you actually
1679.44 -> don't even need to do this we'll
1680.559 -> automatically install it for you
1682.559 -> um
1683.6 -> so it's it it netwlify knows that it's a
1686.08 -> next project and will just automatically
1688.96 -> set the right things up so the next
1690.399 -> works
1693.279 -> um
1694.399 -> so here we go it's all doing the stuff
1697.44 -> and in fact let me look just to make
1699.44 -> sure because we want to make sure we're
1701.2 -> using the
1703.76 -> okay you didn't install a version of the
1705.76 -> of the plugin good all right that's what
1707.52 -> we want
1708.48 -> so that way it'll use the latest version
1710.24 -> which is what we're after
1712.32 -> and
1713.52 -> we're function bundling
1716.72 -> almost
1724 -> we go deploying and this will be done in
1726 -> just a second here
1727.84 -> all right
1729.039 -> yeah so while this is happening we can
1732.64 -> um we can go to
1734.88 -> fauna fauna.com
1737.36 -> okay so this whoa
1740.159 -> so that deployed but pieces got missed
1741.919 -> what uh
1743.84 -> i wonder what changed here
1747.84 -> okay
1749.76 -> we can
1750.72 -> we can debug that in the meantime let's
1752.64 -> go to fauna and i'm going to log in
1755.2 -> because i've already got an account
1758.24 -> all right and
1759.36 -> i'll log in with my netlify account
1760.799 -> because i'm already signed into that for
1762.159 -> sure
1763.279 -> here we go
1767.44 -> and
1769.12 -> all right so i have
1771.44 -> a bunch of databases
1773.52 -> already i'm going to create a new one
1776.48 -> and we're going to call this tick
1779.36 -> talk
1780.159 -> clone
1781.6 -> um
1783.919 -> do i
1784.88 -> want
1787.12 -> we can choose classic for now
1789.2 -> because you know plastic is the simplest
1791.44 -> okay
1793.039 -> and so i've got that and then
1796.96 -> we've got
1798.08 -> all of this kind of
1800.24 -> database collections indexes so
1802.48 -> graphql is the thing that i gravitated
1804.24 -> toward because i saw that in the
1806.48 -> diagram
1807.76 -> what's my next step here
1809.76 -> yeah so next step okay so we're going to
1813.039 -> show you that how easy it is to get your
1816.159 -> back end up and running so all you have
1818.399 -> to do
1819.52 -> i'm going to go back to the code so
1821.76 -> let's create a
1824.36 -> schema.graphql file okay
1827.6 -> all right
1828.64 -> so
1829.84 -> am i not following you anymore
1833.919 -> yeah keep following you all right all
1836.159 -> right so let's create a type um so let's
1840.08 -> let's create a type called user
1843.12 -> and uh our users will have names
1845.84 -> obviously okay
1848.72 -> and
1850.559 -> also have emails
1852.32 -> so which is going to be a string
1855.039 -> actually let me just uh copy paste
1857.44 -> couple things so users will also have a
1860.24 -> password
1861.44 -> right
1862.88 -> so this is our user model and for every
1866.799 -> user
1867.679 -> we
1868.559 -> are going to have posts so users can
1872.559 -> post so let's also
1875.2 -> copy paste
1876.32 -> the post model and again uh fona yeah so
1880.96 -> fauna is a nosql database but
1884.159 -> it can be um you know structured as a
1887.2 -> sql database as well so here we have a
1889.919 -> has many relationship between user and
1894.32 -> posts
1895.36 -> and just to
1896.96 -> do it in graphql
1900 -> so user posts is an array of post type
1903.919 -> and the post
1905.76 -> has id well i don't think i need id here
1908.64 -> so the post has a title tags and
1912 -> it belongs to a user got it okay so this
1914.64 -> is our
1915.84 -> basic graphql
1918.08 -> schema
1919.12 -> now all we have to do
1920.96 -> is we're just going to
1923.2 -> upload this and fauna
1925.84 -> okay so just upload this straight up so
1927.679 -> i'm going to go over here import schema
1930 -> and then we'll go to github learn with
1932.08 -> json here's our tick tock starter we've
1934.159 -> got a schema.graphql so i'm going to
1936 -> open that
1937.84 -> and it goes and then if i look at the
1940.399 -> docs
1941.679 -> i can see that i have here's my here's
1944.72 -> my crud so i can create
1947.6 -> i can read which is the find
1950.08 -> i can update and i can delete and it
1952 -> looks like i can do that for both users
1953.919 -> and posts
1955.519 -> yep and it's
1957.679 -> and that's it like we we pretty much
1959.679 -> have a back end right now
1961.44 -> so we have a database we have we pretty
1964.159 -> much have
1965.6 -> a pseudo backend again um so just to
1969.279 -> clarify
1970.48 -> uh so fauna is at its core it is a
1973.44 -> database um so we're not like uh appsync
1977.12 -> or
1977.84 -> um
1978.64 -> uh hasura
1980.08 -> so they're they're more like application
1982.08 -> servers um that being said you can you
1984.96 -> can run apps in kasura and you can still
1987.039 -> use fauna as your database
1989.039 -> and you know combine them got it okay
1992.48 -> yeah so
1993.679 -> fauna at its core it's a very flexible
1996.559 -> database that just gives you graphical
1998.799 -> native apis
2000.32 -> okay so so at its core it's a database
2003.039 -> but you can use it as a back-end as well
2005.919 -> so i kind of
2007.44 -> yeah i kind of wanted to emphasize that
2009.76 -> all right so cool so now what we can do
2013.76 -> we can generate a security key so right
2016.64 -> now we can't really
2018.96 -> um yeah
2021.279 -> we can't really connect to the database
2023.279 -> so we can create a security key so let's
2025.919 -> yeah make it a server role
2027.919 -> and uh you can you can name it
2032.32 -> do i need to keep this off screen here
2036.08 -> yeah um
2038 -> yeah you can just uh hit save
2041.44 -> okay so this is a secret and now i don't
2044 -> want that secret to be visible to
2045.919 -> anybody right
2048.639 -> you don't uh however uh after this
2051.679 -> stream we can we're gonna do that
2054 -> okay so let's do that we'll just we'll
2055.679 -> roll the key over before we take this
2057.119 -> thing live but um so we've got uh a
2060.96 -> secret key here and then
2063.839 -> i need to get that into
2067.28 -> our environment
2068.56 -> and so we called that i can just do a
2071.04 -> netlify end
2072.72 -> set and then it was in apollo client
2076.24 -> we had next public found a secret so let
2078.56 -> me create that
2080.079 -> next public fauna
2083.44 -> secret
2084.879 -> um
2087.44 -> and so when i set this
2089.919 -> that will send it up to netlify
2093.04 -> and it says it now set that environment
2095.44 -> variable and if i go and look in here we
2098.16 -> can also see it like i'll go to my
2099.599 -> deploy or my settings
2101.68 -> and
2103.04 -> build and deploy and i look at my
2104.88 -> environment and now it exists right so
2107.68 -> that's a really really handy way like i
2110 -> the netify cli has gotten such a big
2111.839 -> power up in the last you know year or so
2114.24 -> it's uh it's really really nice to use
2116.24 -> now and that's one of the things i love
2118.079 -> about it
2119.04 -> so
2120.48 -> now i've got this secret set which means
2122.72 -> that i should theoretically be able to
2126 -> log in except
2128 -> i don't we don't have a user yet so do i
2130 -> need to create a user first
2132.48 -> um yeah so uh let's go ahead and uh
2136.079 -> create a
2137.76 -> env.logo as well and uh have that secret
2140.88 -> here so we can kind of debug it locally
2143.599 -> okay so
2144.8 -> you know so it'll also pick up when we
2146.56 -> if i run nullify dev now
2149.44 -> um it'll pull in
2152.079 -> that uh
2154.4 -> that fauna secret
2156.079 -> so it'll um
2157.68 -> it'll run for us which is really nice so
2159.76 -> now we have a local version of it
2161.28 -> running with the the environment
2162.8 -> variable from netlify so we don't have
2164.4 -> to manage like multiple environment
2166.4 -> files make makes my life a little bit
2168.64 -> easier
2171.599 -> oh that's that's really neat i i did not
2173.76 -> know that trick that's that's really
2176.16 -> neat
2177.44 -> and chat i see you all trying to use the
2179.2 -> commands today i have not had the chance
2181.2 -> to fix the overlay yet something is
2183.599 -> wrong um and i haven't had a chance to
2185.599 -> look at what it is yet so i will i will
2187.44 -> debug my overlays but they're not
2188.72 -> working today so sorry about that
2192.32 -> um okay so we have
2195.28 -> the environment variable set up which
2196.64 -> means that we can actually send
2197.76 -> authorization here we have so let's uh
2201.119 -> yeah
2202.079 -> so the cool thing about finance that it
2204.56 -> gives you a graph
2207.68 -> yes
2209.76 -> oh sorry i think uh i just cut
2212.16 -> off there for a bit sorry yeah
2215.119 -> so yeah so fauna gives us graphql and we
2218.079 -> can see that one sorry
2219.68 -> just go ahead
2220.96 -> sir can you can you hear me
2224.32 -> yeah i can hear you okay yeah so so
2227.44 -> fauna gives us graphql and i can see
2229.119 -> that here right
2231.359 -> um and it's the same for every account
2233.359 -> which is neat so i we've already got it
2235.52 -> here
2236.88 -> um
2238.24 -> what should i do
2240 -> next
2244.48 -> let's um
2246 -> yeah let's go to uh the font dashboard
2249.04 -> and here what we can do
2250.96 -> um
2252.32 -> oh not not here the fauna dashboard so
2255.359 -> uh yeah here okay so here what we can do
2258.4 -> we can create a new user uh so let's
2261.359 -> just create a new mutation oh
2263.68 -> mutation type information yeah
2267.28 -> uh i think you have to do yeah
2269.92 -> computation
2271.68 -> create user
2273.76 -> let's just
2274.72 -> create
2278.16 -> yeah okay
2279.359 -> so i'm just using uh control space
2281.68 -> autocompletes for me
2286.16 -> and
2287.599 -> i don't have any posts so i can leave
2289.04 -> that out
2293.2 -> and that will give me like an id and
2296.32 -> a name
2297.28 -> okay so if i run this
2300 -> it created my user
2302.48 -> and then i'm going to come back out and
2304 -> i can look at my collections and we get
2306.8 -> a user
2308.16 -> um
2309.2 -> and so one thing that we would want to
2311.2 -> do in a production database is make sure
2313.2 -> that we're not sharing the like this
2315.44 -> shouldn't be stored in plain text right
2316.88 -> we want to encrypt it yeah we don't have
2319.28 -> time to do that today but uh make sure
2321.2 -> that you are actually
2322.64 -> using encryption for passwords or you're
2324.24 -> gonna have a bad time
2329.2 -> yeah um
2330.64 -> well we we're gonna we're gonna take a
2332.56 -> look at it in a bit though like
2334.96 -> fauna does have a built-in uh support
2337.44 -> for that oh nice um so but we'll
2340.32 -> yeah we'll we'll take a look at it in a
2342.24 -> bit um i just wanted to
2344.24 -> i just wanted to you know show yeah okay
2347.359 -> running fast
2348.88 -> yeah
2350.079 -> um okay so let's create a couple posts
2353.28 -> okay so okay let's create um yeah
2357.44 -> do i need my user id or anything
2360.88 -> yeah so we do need uh that user we just
2364.24 -> create it so
2365.599 -> let's just uh yeah so you can you can
2368 -> click on the tab and it will open
2369.599 -> another tab
2370.72 -> on the top
2372.16 -> so
2374.4 -> i think i i jumped the gun on you but um
2377.04 -> so we've got a title
2379.599 -> and we'll we can do get out it stop stop
2383.359 -> it stop helping
2387.599 -> and then we can do uh let's get the tags
2390.56 -> and
2391.28 -> we'll just say like
2393.119 -> test and then for the author
2397.68 -> is is that just the id
2400.32 -> yeah that's just the id
2403.04 -> all right and then what we're gonna get
2404.319 -> back is the actual post so let's just
2407.44 -> pull back
2408.64 -> the uh the title and then i want to pull
2411.2 -> the author and this should give me
2413.44 -> the name
2415.839 -> expected post author relation
2418.16 -> oh i screwed something up
2420.48 -> uh okay so for author i think you have
2423.359 -> to do squiggy bracket
2425.599 -> and then uh
2428.48 -> like an id
2430.56 -> yeah
2431.359 -> so it's squiggly bracket and then
2435.119 -> um yeah so you get rid of that
2438.48 -> get rid of this
2440.24 -> yeah get yeah and then
2442.64 -> id
2444.319 -> and let me take a look at the
2445.52 -> documentation quick
2448.8 -> oh connect to a document of type user
2450.8 -> all right my autocomplete is working now
2455.359 -> well it was what just happened
2460.079 -> now is it this one let's try
2463.119 -> tada
2464.64 -> there you go okay so then if i go in
2467.04 -> here and i go query and i want to say
2469.04 -> find
2470.4 -> post
2473.04 -> oh wait
2474.48 -> i guess i can find the user by id and
2476.72 -> the id will be this one and then i can
2478.839 -> do name and posts and in posts i want
2482.96 -> the title
2484.24 -> and
2485.599 -> oh crap that didn't work
2491.28 -> what did i do wrong let's see here's my
2493.28 -> user here's my post
2496.24 -> author ref collection user
2498.96 -> and that ends in eight six four three so
2501.2 -> when i go here
2502.56 -> my user is eight six four three so why
2505.839 -> what have i done wrong here
2508.96 -> okay so let's take a look so
2512.079 -> um
2513.2 -> okay find user by id
2515.599 -> posts
2518.4 -> okay
2520.16 -> let's uh let's try to run it again um
2522.319 -> let's try to run it again um
2527.119 -> not sure it probably didn't connect did
2529.359 -> i screw this connect up here
2532.24 -> um
2533.839 -> no but it's it's showing your name um
2536.4 -> yeah
2537.68 -> yeah i'm not sure
2539.28 -> maybe we just have to like refresh uh
2541.839 -> with this query
2543.599 -> oh like refresh graphql entirely let me
2545.839 -> do that
2546.96 -> let's go in here
2549.359 -> no it doesn't like that let's see if we
2550.88 -> can get find
2552.8 -> post by id
2554.8 -> so i've got
2557.44 -> go to my collections we get a post i'll
2559.599 -> get
2562.319 -> copyref great and go back to graphql
2566.4 -> yep find post
2572.72 -> and then down here we should be able to
2574.16 -> get the title
2575.52 -> and then the author
2577.52 -> and the author should have a name
2579.44 -> okay so it works this way
2582.16 -> but it's not working this way
2586.079 -> interesting
2587.28 -> what did we do wrong
2590.48 -> do we need to uh like create a a two-way
2593.599 -> binding here or anything
2595.52 -> no no um this just should have uh this
2598.96 -> should just work i think um
2601.119 -> uh
2602 -> it's okay we can we can move uh move
2604.56 -> along i think it's just uh
2606.64 -> something something with the caching or
2608.319 -> something okay
2610.319 -> fine yeah
2611.52 -> just we just ignore it for now
2614.88 -> yeah just move move forward um all right
2617.92 -> cool so now what we can do is uh we we
2621.68 -> definitely so if you if you look at the
2623.839 -> the graphql stuff like we definitely
2626.88 -> need uh need a way to list all the posts
2630.079 -> right so right in order to do that yeah
2632.72 -> so in order to do that um
2635.2 -> we can create um
2637.599 -> a custom mutation uh sorry a custom
2640.16 -> query actually so right now there is no
2643.2 -> way to get all the posts um
2646 -> so like you can only get post by id
2648.24 -> right right so let's uh let's create a
2651.839 -> new query and
2653.839 -> that will give us
2655.599 -> a query that
2657.119 -> will give us all the posts okay um
2660.48 -> do you are you typing okay i've got you
2663.119 -> yeah so
2664.64 -> and again i'm i'm just gonna quickly um
2668.24 -> uh
2669.119 -> tell you like what's going on here so we
2672 -> created a new type query and we created
2674.96 -> a list post query
2677.599 -> and it returns an array of posts and
2680.56 -> here we say resolver right now
2684.16 -> in any graphql uh type of situation like
2687.359 -> any graphql
2690.4 -> any graphql server a resolver results to
2693.359 -> some sort of function in fauna
2695.599 -> it resolves to form a query language so
2698.4 -> that's like the underlying database
2702 -> language
2703.2 -> so um so yeah so
2706.8 -> we're we're going to take a look at it
2709.2 -> in a bit so let's go ahead and do
2712.24 -> uh you know save this and let's go back
2715.04 -> to our
2716.88 -> our fauna dashboard and graphql and uh
2720.8 -> let's replace the old
2722.96 -> schema uh we don't have to merge we can
2725.359 -> just replace it okay so the next one
2727.52 -> yeah
2728.319 -> and it will not delete any of your data
2731.04 -> so it's completely safe to do it so now
2734 -> we just upload it and now
2736.4 -> if you open up the doc again you'll see
2738.24 -> that a list post is available
2741.04 -> okay
2745.68 -> all right okay so we'll get the title
2747.28 -> we'll get the author and i want the name
2749.359 -> of the author
2752.319 -> c was not implemented yet okay so i need
2754.96 -> to implement a function it looks like
2758.079 -> yes okay and this is where yeah and this
2761.839 -> is where uh the fql comes in
2764.56 -> so let's go to the function um in
2768.8 -> uh yeah in
2770.88 -> there let's there's a there's a function
2773.04 -> all right so you'll see that that
2775.04 -> function is not implemented yet
2777.359 -> and again um
2779.44 -> so i i do have a pre-written function
2781.52 -> for this and do you want to just drop it
2783.52 -> at the bottom here and i can copy paste
2785.04 -> it out
2786.56 -> yeah absolutely so list
2789.04 -> post dot fql
2791.52 -> i'm just going to
2793.28 -> drop it here
2794.48 -> and uh you can paste it and i'll just uh
2797.68 -> i'll just go about
2800 -> explaining it but it's yeah so all right
2802.8 -> let me let me paste this in
2805.28 -> and that so we we start up here we've
2807.92 -> got
2808.72 -> it we can get the size after and before
2811.119 -> and then we have a let
2813.52 -> and it says
2814.8 -> match posts by
2816.96 -> ts for timestamp
2819.28 -> yes okay so
2821.359 -> yeah so
2822.48 -> um
2823.28 -> and again like this is uh this is all in
2825.92 -> our documentation site and uh i i kind
2828.48 -> of
2829.52 -> i found the most complicated example
2831.839 -> just to touch base on everything and but
2834.96 -> but yeah like yeah um you can look into
2838.48 -> you can look into the data
2840.24 -> into the documentation to see kind of
2842.079 -> what it means okay
2844.48 -> yeah
2845.359 -> all right so now when i run this it says
2847.599 -> i need an index of post by timestamp so
2851.119 -> i need i'm assuming i need to create an
2852.8 -> index in indexes
2855.28 -> yes so let's go ahead and create an
2858.24 -> index
2859.52 -> post and we wanted uh posts
2864 -> by
2864.96 -> ts
2870.839 -> okay do what do i do here
2874.4 -> like what's next
2876.8 -> okay um
2880.24 -> all right so
2881.76 -> actually
2882.96 -> let's
2884.319 -> um okay so actually let's not do the the
2887.76 -> uh post by time stamp um okay we're
2890.96 -> gonna get back to this okay um
2894.079 -> so let's let's go back to our graphql uh
2896.72 -> schema quickly
2898.559 -> the schema
2900.8 -> yeah yeah okay schema
2903.52 -> all right
2905.359 -> okay so here
2907.04 -> um
2908.559 -> let's uh so
2910.4 -> um so just because we have a paginated
2912.96 -> true we actually have to create a
2915.76 -> timestamp manually
2918.079 -> we might not have time to do that today
2920.4 -> but we'll we'll get back to this one
2922.48 -> later okay okay
2924.72 -> if that's
2925.92 -> that's cool
2927.68 -> let's let's go ahead and uh
2930.64 -> uh
2932.88 -> trying to get my
2935.04 -> things uh okay so let's go ahead and
2937.359 -> create a
2939.04 -> login function first okay so uh
2942.88 -> all right so let me retract a little bit
2945.44 -> okay um so
2947.119 -> i i kind of wanted to show the list post
2950.16 -> uh through resolvers
2952.079 -> uh but i i think i jumped the gun and
2954.24 -> got on it a little too quickly uh let's
2957.76 -> let's create
2958.88 -> um a user register function first and
2961.52 -> then we can we can get to this one in a
2964.319 -> bit okay okay so let's uh yeah
2967.839 -> all right so let's uh
2970.16 -> let's create
2971.359 -> these two mutations so
2973.599 -> like i said uh you know you don't wanna
2975.839 -> you don't wanna hash like you don't
2977.119 -> wanna
2978.16 -> create your uh save your password uh
2981.119 -> like that
2982.24 -> um you know exposed in the thing uh so
2985.119 -> what we're going to do is we're going to
2986.48 -> create two new mutations so one that
2989.68 -> registers a user okay and other one that
2994.64 -> log logs in a user okay
2997.52 -> and uh whenever a user is logged in it
3000.8 -> will return
3002 -> uh embedded token so let me just copy
3005.04 -> paste the
3007.28 -> token type here
3009.2 -> and
3010.48 -> and that's to be the embedded token okay
3014 -> okay
3014.96 -> all right so um so what we're going to
3017.28 -> do is we're going to create like a
3020.4 -> really uh
3021.839 -> short token um short lived like uh you
3025.2 -> know it has like a time to live
3027.28 -> uh ttl type of token yeah and whenever
3030.96 -> uh
3031.76 -> user logs in you get back a token and
3034.079 -> using that token you can uh you know
3036.88 -> query different resources in fauna so
3039.04 -> that's why we can't really list post
3041.44 -> right now because you know like i just
3043.839 -> realized
3044.88 -> we can't really do that because
3046.8 -> we don't really have a token right now
3048.88 -> like you know like gotcha we're gonna
3050.8 -> have a rules for that
3052.88 -> okay so um
3055.119 -> so yeah let's let's do the register user
3057.52 -> and uh login for function first
3060.24 -> okay so so i need to
3062.64 -> upload this schema so that it'll kind of
3065.2 -> register those functions for me is that
3066.64 -> right
3068.4 -> yeah
3069.44 -> but before we do that however
3071.92 -> okay we should also um
3075.04 -> you should also create a new index that
3077.2 -> will find user by email and for now
3080.96 -> let's just get rid of that okay okay so
3083.839 -> here what we did
3085.68 -> we created a new index where users like
3088.4 -> we can find users by email and then we
3091.28 -> created a mutation to register user okay
3094.8 -> and along the function and
3097.2 -> all these functions will
3098.96 -> get created and we're going to create
3100.48 -> these functions in a bit in fauna okay
3103.2 -> and now this find user by email the
3105.2 -> reason this is going to work is because
3106.88 -> the email
3108.48 -> matches a field name here and fauna is
3110.88 -> smart enough to know that like if i'm
3112.8 -> looking for a user
3114.319 -> by email and the field to filter is
3116.8 -> email if it can find a matching field it
3118.88 -> just uses that
3120.88 -> yes okay
3122.8 -> okay great let's uh let's get this thing
3125.359 -> uploaded
3127.2 -> here we go
3130.24 -> all right so this one this one's gone
3132.88 -> but let's get a find
3135.28 -> user by email
3137.04 -> okay and i'm gonna put in my email
3141.28 -> and we'll just get a name
3144.4 -> hey look at it go
3147.599 -> so that's great uh but we don't have our
3150.72 -> functions yet so we can see these are
3152.72 -> both not implemented yet
3154.8 -> uh so i would assume we probably want to
3156.64 -> start with registered user first
3159.599 -> yeah absolutely so let's uh let's go
3162.559 -> ahead and do the registered user okay
3164.72 -> okay and and again um
3167.04 -> yeah i should have probably done this
3168.559 -> one first just to
3170.88 -> you know that
3172 -> that function was kind of scary that the
3174.48 -> first one
3175.839 -> my bad
3177.04 -> oh
3178.079 -> okay so register
3180.32 -> [Music]
3181.839 -> is there fql okay so a register user fql
3185.839 -> is going to look something like this
3188.559 -> it's a really simple function
3190.88 -> yeah so now i can kind of kind of tell
3193.28 -> like you know kind of explain what uh
3195.2 -> this sql does okay um
3198.079 -> yeah so basically query and lambda is
3200.319 -> just two keyword that defines okay this
3202.96 -> is going to be a function uh in fauna
3207.04 -> and email
3208.48 -> password and name
3210.319 -> is uh you know these are in this order
3213.28 -> we just
3214.319 -> pass in
3215.92 -> those two variables pretty much and
3219.76 -> here
3220.839 -> um password parameter is a credential so
3224.4 -> we're telling fauna hey when you
3225.92 -> whenever you create this user register
3228.319 -> this user um
3230.16 -> make sure to hide the password
3232.88 -> variable
3234 -> that's what it does okay yeah so when i
3237.119 -> go out here then um
3240.079 -> let's
3241.68 -> create a user
3244.48 -> so i'm gonna go mutation and i want to
3247.2 -> register a user and it wants my name
3250.88 -> and so i'm going to put in
3252.8 -> json2
3254.72 -> email
3256.24 -> and we will go with
3260 -> one of those and then password
3262.88 -> i'm going to put in as
3264.88 -> super secret and then what i get back is
3268.319 -> let's look at name
3270.64 -> email
3272.48 -> password and
3274.8 -> theoretically speaking this password is
3276.4 -> not going to be what i put in right it's
3277.839 -> going to be like a hash or something
3280.64 -> um theoretically speaking you don't
3282.88 -> you're probably not going to get a
3284.24 -> password back um so you cannot return no
3288 -> for non-nullable type password okay
3290 -> let's get rid of password
3292.48 -> yeah
3293.359 -> okay
3294.799 -> what did i do
3297.359 -> set my name as super secret
3299.839 -> oh i i think um
3303.04 -> okay i think i know what happened there
3305.28 -> so if you go back to the function
3308.319 -> so
3310.24 -> in our schema
3315.119 -> yeah we have to follow the order in our
3317.839 -> register so we have a name email
3319.92 -> password
3321.44 -> um
3322.799 -> okay so
3324.4 -> that was
3326.16 -> no no um i think if you go to the
3328 -> function email password name
3331.92 -> okay so email password
3336.48 -> name
3337.76 -> so we have to do name email password uh
3340.88 -> let's do that
3344.48 -> uh in this function actually um
3348.079 -> to go to the function
3351.44 -> oh you want to change it around in the
3352.799 -> function itself
3354.24 -> yeah yeah got it
3356 -> yeah because you know because it's not
3357.76 -> safe to
3360.64 -> so let's just switch the order to
3363.68 -> name email and password
3366.4 -> oops
3367.599 -> okay
3368.48 -> so we'll say
3369.68 -> go back here
3371.28 -> uh undo what i did
3374.72 -> so we'll go name
3380.24 -> and then delete these
3383.44 -> all right so name email password
3386.72 -> run it again okay that looks more
3388.48 -> correct and i'm gonna go into
3389.68 -> collections here and take a look at my
3391.119 -> users
3392.319 -> and i have a json3
3395.44 -> good
3396.4 -> and we don't have a password listed
3398.96 -> anymore
3400.4 -> yep okay all right so it's just gone
3403.68 -> all together
3404.96 -> but it's not actually gone it's just
3406.72 -> hidden like it's not available in the
3408.559 -> database but it's like
3410.4 -> still present in terms of like we can
3412.799 -> have somebody log in with that password
3415.76 -> yep yep and uh yeah
3418.48 -> and that's that's that's that
3420.72 -> okay let's let's do the login
3423.2 -> yeah okay so
3424.96 -> yeah let's go ahead and do the login as
3427.04 -> well then um
3428.799 -> all right okay so that's gonna be a
3430.16 -> function
3431.28 -> login all right
3433.52 -> yeah and you'll see that the the login
3436.96 -> is unimplemented
3440.799 -> and
3441.839 -> i'm just going to
3444.4 -> create that function for you
3447.599 -> here
3449.839 -> fql
3454.4 -> and here
3456.72 -> paste that and again the query and the
3459.2 -> lambda just defines that this is a
3462.96 -> this is a lambda function
3465.119 -> and we pass in the email and the
3466.799 -> password
3468.16 -> and
3469.92 -> what we get
3471.2 -> back is a secret and the user's id and
3475.92 -> uh
3477.119 -> and yeah a couple couple information and
3479.119 -> again like this
3481.04 -> we could have just not have that in
3482.96 -> there
3483.92 -> it would just still work but uh
3486.319 -> but yeah i just
3487.68 -> put it in there
3489.119 -> um so yeah uh basically we're calling
3492.079 -> the login function which is built in and
3494.559 -> baked into fauna and we're giving it a
3497.119 -> time to live
3498.4 -> like the token is going to be valid for
3500.24 -> 1800 seconds
3501.76 -> and password is that password from there
3504.72 -> got it so so then when i go out here and
3507.599 -> i go to my user and i say i want to
3513.04 -> log in
3516.16 -> i'm gonna send in an email
3519.119 -> so we'll go
3522.64 -> that was the email that worked i think
3524.319 -> and then we're gonna send in a password
3525.92 -> and i'm gonna give it
3527.599 -> our super secret password and then what
3530.4 -> i should get back is a ttl
3533.04 -> a secret
3535.04 -> email
3536.48 -> and a user id anything else i missed
3538.319 -> here
3539.68 -> nope that's right
3543.04 -> okay
3544.96 -> value not found at path zero
3550.96 -> okay that's uh
3552.96 -> that's weird okay let me just double
3554.96 -> check that i got my credentials right
3556.64 -> here so it was jason plus three
3559.68 -> yep
3561.68 -> i did that right jason plus three good
3563.92 -> and then in our function
3565.92 -> we had it set up as let's see email
3568.48 -> password so in our function login
3571.28 -> email password
3573.359 -> okay
3576.559 -> okay um
3578.24 -> okay uh what we can do is uh we can get
3581.04 -> rid of that user id
3583.2 -> field so
3584.799 -> get rid of the line
3587.52 -> 15 to 18.
3589.44 -> okay
3590.48 -> we probably don't need that save that
3593.44 -> get rid of the user id
3597.44 -> and that that worked
3601.28 -> yeah
3603.28 -> good good good
3605.04 -> um all right cool
3608.48 -> all right awesome so uh we pretty much
3610.799 -> have like a login function right now
3614 -> we're pretty much
3615.28 -> able to create register new user log in
3617.839 -> the new user we're also able to create
3620.48 -> like posts and connect to the user
3623.2 -> uh
3624.079 -> all in the back end and
3626.4 -> through graphql so now what we can do is
3629.28 -> uh we can start um
3631.44 -> calling these mutations from our front
3633.119 -> end okay so
3635.76 -> all right so let me
3637.28 -> close
3638.559 -> this one let me close this one
3642.88 -> close this one and we get back to the
3645.52 -> schema which we don't need anymore so
3647.359 -> let's open up
3648.88 -> uh where where should i go next
3651.92 -> alright so let's
3654.4 -> go over to
3656.48 -> okay so
3658.88 -> uh all right so let's go over
3662.24 -> to our components
3664.559 -> so let's uh let's try to do the login
3667.2 -> function first okay
3669.28 -> let's go to the yeah
3671.28 -> so here um
3674.559 -> here if you go to the login component
3678.24 -> you see that on click uh this is
3681.68 -> just opening sign up but here's the
3683.52 -> login button right so on click we're
3686.16 -> just going to
3687.839 -> um
3688.64 -> ramp up the
3689.839 -> we're just going to call the login user
3691.839 -> function right okay
3693.52 -> so basically what we can do here
3697.359 -> we can
3698.1 -> [Music]
3699.28 -> let's implement this
3700.88 -> so we're gonna we're gonna call the
3703.359 -> login function right
3705.28 -> so
3706.4 -> let me go ahead
3708.48 -> and just copy paste the the entire thing
3712.319 -> over here
3713.839 -> so
3714.559 -> this is the same user login mutation
3717.2 -> you're sort of using and then i have to
3719.359 -> play around
3720.4 -> so i'm just going to copy paste that
3722.24 -> over here
3723.76 -> drop that user id because it's not going
3725.359 -> to work
3727.359 -> on 13.
3729.76 -> oh yeah right
3732 -> so let's do that
3734.4 -> and here i'm gonna
3736.319 -> bring in
3737.52 -> the used mutation
3739.44 -> from graphql okay
3741.599 -> so use rotation and gql from graphql and
3744.64 -> i'm also going to import the cookie
3746.48 -> because that's secret we want to save a
3748.88 -> secret
3749.92 -> all right
3751.119 -> okay so next what we do we create a
3755.68 -> function so let's go ahead and do that
3758.4 -> so
3759.599 -> right here i'm just going to copy paste
3761.839 -> it from the finished code
3764.16 -> this is because uh i think we're
3766.559 -> in a time crunch here yeah we're a
3768.16 -> little short on time for sure
3770.4 -> yeah uh
3772.16 -> all right um okay so
3776.16 -> and so what this is doing use mutation
3778 -> from apollo
3779.359 -> does the setup so that we get like the
3781.28 -> loading state data loading error and
3783.44 -> then gives us the login func
3785.68 -> so that we can
3787.119 -> execute the mutation like it doesn't
3788.64 -> call it right away because that would be
3790.72 -> uh chaos and we wouldn't be able to call
3792.559 -> it more than once so so this is
3794.72 -> giving us the ability to call that login
3796.4 -> function as many times as we need
3799.119 -> which is different than use query if
3800.64 -> you've used apollo's use query
3803.52 -> exactly
3804.96 -> and
3807.119 -> here we are handling the change uh so
3810.559 -> set state this is just a basic react um
3814.319 -> you know a state handler uh sorry chain
3816.319 -> change handler uh so we're just updating
3818.64 -> the state based on whatever user input
3821.039 -> where did that state
3822.48 -> function come from do we need to declare
3824.64 -> that
3825.599 -> oh yes so we need to have a user state
3828.72 -> okay so let me just do that right here
3831.92 -> so
3834.88 -> state
3836.24 -> set state
3850.64 -> okay then i can
3853.44 -> yeah bring in the user state and use
3856.4 -> yeah right there okay awesome
3859.28 -> all right so now um
3861.92 -> once we hit login we are going to call
3866.64 -> that uh login funk
3868.88 -> so basically
3870.559 -> um
3871.44 -> what we can do so if we go over here
3875.76 -> yeah so we prevent default form behavior
3878.48 -> and on login func
3880.559 -> uh we're just gonna pass in the state
3883.2 -> and
3884.24 -> yeah once it's logged in we're just
3887.839 -> yeah
3888.96 -> if if it goes like goes into error which
3891.44 -> is console log the error
3893.359 -> once it's locked yeah
3896.16 -> and once
3897.44 -> it's locked in we want to show some sort
3899.2 -> of alert or something so i'm just going
3901.28 -> to create like uh
3902.63 -> [Music]
3904.079 -> use effect so
3906.4 -> here we're listening on the data here
3909.28 -> so that data changes
3911.359 -> i'm just going to console.log that
3913.599 -> and we're going to use that cookie to
3916.4 -> set a new cookie in
3918.799 -> our browser
3920.24 -> and it will expire uh sometime um
3924 -> wherever the ttl comes back
3926.319 -> as and uh
3928.4 -> yeah and we're just gonna say okay user
3930.64 -> is logged in successfully
3932.559 -> all right and um
3934.72 -> and yeah that's so let's let's go ahead
3936.799 -> and
3938.799 -> do that
3940.4 -> yeah let's give it a whirl i think uh
3942.24 -> yep it's still running so i'm gonna just
3944.16 -> head back out to our
3946.319 -> dashboard here let's go to localhost i
3949.039 -> need to go to 888.
3953.359 -> cannot find client in the context or
3955.839 -> passed in as an option
3960.96 -> okay
3962.079 -> let's see what went wrong here um did we
3964.16 -> get in do we get a different error
3967.039 -> let's try that again
3969.92 -> oh that was the right one
3972.799 -> anything happen over here
3974.559 -> nope sorry here
3980.24 -> interesting we just get the could not
3982.64 -> find client so then
3985.359 -> looking here we've got our auth link
3987.68 -> we've got the client we export default
3989.76 -> client so then when we get to our app
3992.4 -> we import client at the top level
3996.4 -> which should exist so if we log
4000.4 -> our client let's see what happens
4005.359 -> one of one unhandled errors but here's
4008.079 -> the apollo client
4011.2 -> but it still says
4014.4 -> use apollo client
4017.92 -> what's going on here
4022.4 -> okay that's uh maybe we have to restart
4025.359 -> this everyone
4027.28 -> yeah we can give it a shot let's see
4031.2 -> let's see what's going on here could not
4032.88 -> find client in the context or passed in
4035.28 -> as an option
4036.799 -> um
4038 -> yeah let's restart it
4049.52 -> it still doesn't like it so what don't
4052.16 -> you like
4055.76 -> got apollo provider then we get into
4058 -> this index upload
4060.839 -> api components we've got this one shared
4063.92 -> here
4067.76 -> use mutation
4072.559 -> okay
4075.68 -> why wouldn't you work
4083.28 -> okay that's uh
4088.319 -> that's a tough one um
4090.559 -> chat you seeing the problem are we
4092.48 -> looking right at it
4100.08 -> so data comes in
4106.159 -> right and then we have our login funk do
4109.199 -> we get
4115.6 -> like do we get this
4122.08 -> no so it fails before that but if i go
4124.96 -> up here
4127.52 -> do we get this far
4129.839 -> this is uh this is what i would consider
4132.319 -> to be
4133.359 -> high level
4135.759 -> high level
4137.44 -> debugging um let's try dropping this out
4142.159 -> and
4146.48 -> drop this out
4149.279 -> and let's see if that brings us back
4153.359 -> so it doesn't like uncaught at login on
4156.159 -> 32.
4161.12 -> what are you trying to do
4164.719 -> whenever the data changes
4166.719 -> it's supposed to console log the data
4168.4 -> which it's not doing
4170.88 -> and then
4176.319 -> set state login func
4178.96 -> so we need this data
4182.96 -> okay
4185.199 -> but we're never getting to this point in
4187.279 -> the app so
4197.12 -> let's see do you want to try uh just
4199.76 -> copy pasting your working login
4202.239 -> component from the the final and let's
4204.08 -> see if we uh
4208.8 -> maybe we just type out something sure um
4214.96 -> let's let me do that
4220.4 -> okay so performance
4226.96 -> okay
4227.84 -> so the user id is not going to work
4230.8 -> um
4231.84 -> outside of the user id
4234.56 -> everything else looks the same here's
4236.32 -> our user login
4239.44 -> email password good
4241.84 -> that all is coming in
4248.239 -> yeah let's give it a shot and see what
4249.6 -> happens
4252.96 -> now it doesn't like
4256.48 -> does not like that client that client is
4259.199 -> just missing
4260.64 -> um let's try
4267.6 -> let's see
4268.8 -> client from apollo client
4271.52 -> and then when we look in here
4280.159 -> export default client there is nothing
4281.92 -> in here that says
4284.08 -> this shouldn't work
4296.48 -> hmm okay i'm stumped
4299.52 -> yeah
4300.48 -> um
4302.48 -> why don't we uh take a look at the the
4305.199 -> final code for this and run through it
4308.32 -> quickly because i'm
4310.8 -> not sure why
4313.6 -> okay do you have this deployed somewhere
4315.28 -> so that we can peek at it or do you want
4317.04 -> me to uh
4322.96 -> yeah
4323.76 -> um so
4326.08 -> i do have it deployed somewhere
4328.88 -> um
4330 -> just give me one second here um i'm just
4332.48 -> going to
4333.76 -> share
4336.32 -> the final code
4337.53 -> [Music]
4339.44 -> you can get right yeah here's the yeah
4342.159 -> you can just clone the repository and uh
4344.56 -> meanwhile
4347.52 -> okay let me go get
4349.679 -> this and then i'm gonna move out to
4353.199 -> here and we will uh make a directory
4357.679 -> called
4361.76 -> okay then we're gonna github repo clone
4367.04 -> let's move into it
4368.8 -> and i'm gonna npm install
4374.239 -> okay
4378.159 -> and then i can open this one up
4384.8 -> and i think i might need to give you
4389.6 -> get you a new live share here
4394.8 -> let's go to
4396.48 -> here
4401.6 -> and i'll let you set the uh
4407.6 -> the dot end on this
4412 -> because i assume you've got one running
4418.22 -> [Music]
4421.6 -> okay
4422.96 -> all right so
4426.64 -> so that's that's the final code right
4430 -> okay all right um
4432.88 -> all right so let me just get my dotting
4435.52 -> and keys
4441.04 -> and i won't follow you while you set
4442.4 -> those so that we don't give away the
4444.159 -> keys here
4447.6 -> yeah
4448.48 -> so um can i just drop it
4451.36 -> to
4452.4 -> your well
4454.56 -> a live share so that you can actually
4456 -> jump into
4457.12 -> the deployed code here
4458.57 -> [Music]
4463.52 -> oh okay all right
4466.64 -> let me just close that
4472.32 -> but yeah while you're doing that i'll
4474.48 -> set up a env.local
4476.54 -> [Music]
4481.36 -> and i'm gonna put some stuff into it
4484.88 -> okay so those are set i have a masking
4487.6 -> plug in here so that
4489.679 -> people can't see the
4491.28 -> values
4492.48 -> um and that
4495.52 -> should be enough for this to run so let
4497.6 -> me stop
4499.12 -> over here
4500.88 -> and we'll come over here and instead run
4504.64 -> npm run dev
4508.84 -> okay
4510.8 -> so that is
4513.679 -> running
4516.56 -> now when i go over to localhost 3000
4523.28 -> we've got
4524.48 -> code running here okay so um
4530.8 -> if i search for jellyfish
4537.679 -> it
4538.96 -> searched
4541.28 -> it looks like it didn't yeah so uh it's
4543.36 -> just
4547.92 -> um okay so the update is not implemented
4550.88 -> yet oh i guess but you can open up uh
4554.159 -> the console and you'll see that
4556.719 -> yeah yeah
4557.679 -> uh let's see that it's actually
4560 -> yeah it's a
4562.719 -> an implemented feature
4564.64 -> cool okay um so we've got we've got like
4567.92 -> a setup here where we're showing you
4569.84 -> know we've got the the search search
4572.4 -> goes through we get results back so here
4574.719 -> are hits from algolia good um so let's
4577.44 -> maybe just do a code walk through in the
4579.679 -> the last 10 minutes to to kind of get a
4581.679 -> sense of
4582.719 -> what changed here um
4585.92 -> so
4587.28 -> looking at
4588.96 -> the the pages here i'm going to go to
4590.96 -> the index uh that brings up
4593.52 -> a feed component so i'm going to go into
4595.52 -> this feed component and let's
4598.56 -> talk about
4602.239 -> what's happening here um are you in the
4604.239 -> live share by the way no okay um so
4609.76 -> so we set up
4612.32 -> uh
4614 -> a get post query so this is that list
4615.84 -> post
4616.96 -> and it has um i'm assuming you
4618.88 -> implemented the time stamp
4620.719 -> that we didn't have to implement
4623.12 -> and then in here
4627.04 -> we've got a uh apollo use query that
4630.4 -> uses get posts which is this one here
4633.04 -> and that brings us back our loading
4634.8 -> state datastate error state
4638 -> here's our search which we'll look at in
4639.44 -> a second
4641.04 -> and this is the
4643.52 -> columns so we've got a menu
4646.719 -> we've got the search
4649.28 -> okay so i'm going to collapse that
4652.96 -> and now we've got the the videos
4655.199 -> themselves
4656.64 -> and so the videos each one runs to a
4659.28 -> video card
4660.8 -> and the vid
4662.32 -> just comes right out of our schema
4665.199 -> so
4666.08 -> if i look at this schema let's see what
4667.84 -> changed
4671.44 -> not much right we've got uh we've got
4673.44 -> each post title tag author um where did
4676.159 -> the videos
4677.76 -> did the videos get attached to the id or
4679.76 -> how how were you uploading those
4685.52 -> yeah so every time you upload the video
4688.4 -> to cloud energy it gives you
4691.28 -> an id
4692.48 -> and
4693.36 -> that id becomes the post id and this is
4696.32 -> why our list post kind of didn't work
4698.96 -> because we didn't have the id or the
4701.12 -> time stamp
4702.4 -> got it okay
4704.32 -> yeah
4705.199 -> um
4706.719 -> so
4708.08 -> so yeah um so basically that id
4711.04 -> um
4712 -> from uh cloudanry becomes your id in
4715.92 -> fauna and uh we just upload that
4719.36 -> so okay so basically all the men yeah
4723.76 -> okay and um you can also take a
4726.96 -> look at the
4729.52 -> pages slash ap
4731.36 -> yeah
4732.239 -> pages slash api
4736.8 -> so we've got an
4738 -> index video
4742.32 -> and
4745.6 -> can you say more about what's happening
4746.88 -> in here
4748.4 -> yeah so every time basically what
4751.36 -> happens here
4752.56 -> every time you upload a video um
4755.52 -> you call this function and
4758.08 -> all the video metadata also goes to
4760.719 -> algolia search so
4763.199 -> that way like you're um
4765.92 -> you're saving all the data in fauna
4768.719 -> you're saving the blog
4770.4 -> blob and uh cloud in your uh quaternary
4773.76 -> but your
4774.88 -> the the stuff that you want to search by
4777.36 -> goes to algolia search so basically you
4780.159 -> index those data save that
4783.36 -> object to algolia for searching yeah
4786.159 -> gotcha
4787.52 -> cool
4788.32 -> yeah so we've got uh we've got
4791.12 -> the the
4792.4 -> videos being indexed
4794.48 -> and then this is
4796.08 -> now that they are indexed we can use
4798.32 -> algolia to search for them
4800.64 -> which uh this is what we saw in the
4802.4 -> console where we do
4805.679 -> we
4806.88 -> get the index the video index
4809.28 -> and then we search within that index
4812.159 -> for the search term
4814.56 -> and then it re it responds with that
4816.719 -> data
4819.12 -> yeah
4819.84 -> exactly
4821.6 -> yeah and uh
4823.52 -> yeah and and all these like once we
4826.48 -> deployed this to netlify um these
4829.28 -> becomes our back end uh sort of like
4833.12 -> functions serverless edge functions
4838.159 -> nice okay so
4840.32 -> then these so these will get deployed as
4842.56 -> netlify functions under the hood as far
4844.32 -> as as far as your development experience
4846.32 -> goes you just build them like you always
4848.32 -> would nellified does that stuff under
4849.76 -> the hood uh we've got an index page
4853.44 -> right and then we've got
4855.04 -> an upload page uh that upload page has
4858 -> an upload component
4859.84 -> looks like we've got a
4862.56 -> like a file uploader
4864.88 -> that will
4867.76 -> post the form data to cloudnary
4873.04 -> and then it creates a post that's in
4876.48 -> so okay all right so i understand what's
4878.159 -> happening so so we go
4880.639 -> to cloudanary and upload the video once
4883.12 -> we've uploaded the video we get the
4884.719 -> public id from the uploaded asset from
4887.92 -> cloudnary
4889.28 -> then
4890.32 -> we uh reset the file
4892.719 -> in local state
4894.719 -> get our user id out of the fauna session
4898.88 -> then if we don't have a public id we
4901.12 -> just bail otherwise we create a new post
4904.56 -> with an id being the the cloudinary
4906.96 -> public id
4908.159 -> we set a title to whatever the title is
4910.159 -> set to we set the user id to the current
4912.4 -> user's id and then we add tags if there
4915.12 -> are tags otherwise we upload an empty
4916.719 -> array
4919.679 -> and when we get data uploaded we we post
4922.8 -> an alert to show that
4925.44 -> and then we get
4927.6 -> we call this function uh to index the
4930.8 -> new video
4933.52 -> okay
4934.719 -> so
4936.96 -> and that's what's happening here we we
4938.719 -> let you know that it's uploaded and then
4939.92 -> we add it to the algolia index
4942.8 -> and then down here this is a form that
4945.12 -> gives us the
4946.56 -> it's a file input um that file input
4950.56 -> takes a video name it takes the tags and
4953.52 -> then when you when you click this button
4955.679 -> it calls that upload file function that
4957.04 -> we're just looking at okay so that all
4958.96 -> makes sense and then um
4961.52 -> this video card is what actually
4963.199 -> displays it
4964.639 -> it gets the video item that comes out of
4966.88 -> of uh
4968 -> fauna
4969.199 -> and what i'm curious about is how you
4971.6 -> did this part which is
4974.08 -> aha okay so you go to cloudnary
4977.04 -> and then you just grab it by its public
4979.04 -> id and append a dot mp4 which means the
4981.679 -> cloudnary will serve it as an mp4
4985.6 -> and then you're off to the races like we
4988.08 -> we can see
4989.36 -> here that it's working
4992.4 -> here's my 3000 and yeah we've got videos
4995.679 -> running from cloudnary so that we can
4998 -> see them uh right there in the in the
5000.159 -> browser
5001.12 -> so
5002.719 -> this you know there's a there's a lot of
5004.08 -> moving parts here and it looks like
5005.92 -> something we got something out of kilter
5008.56 -> uh probably just missed a piece of
5010.08 -> foundational stuff and that's why we're
5011.679 -> seeing those errors um but
5014.96 -> this is i mean this is powerful and
5016.56 -> again like this isn't a ton of code so
5018.88 -> you all can see this
5020.48 -> the the source code is up here at uh
5023.52 -> shady12 slash tiktokclone on github i'll
5027.199 -> drop this one more time
5029.199 -> so you can go and kind of dig into how
5031.92 -> like here all the the functions the fql
5034.8 -> functions that you'll need you've got
5036.639 -> the schema that you'll need
5038.4 -> and
5039.36 -> all of the rest of it just works you'd
5041.679 -> have to go to algolia get your your
5043.36 -> index keys go to uh go to fauna set up
5046.639 -> an account get a get a
5048.48 -> secret key
5049.92 -> and otherwise you're just you're off to
5052 -> you're ready to party
5055.679 -> yeah yeah
5057.679 -> cool cool
5058.88 -> well shady this i mean this is some this
5060.96 -> is some really cool stuff where would
5062.719 -> you recommend people go if they want to
5064.48 -> learn
5065.36 -> more about this like if they want to go
5067.36 -> deeper
5069.679 -> yeah uh absolutely so first of all um go
5073.199 -> for go look at the the next.js
5076 -> documentation um go look at
5079.199 -> fonda documentation
5080.96 -> and you can always um
5083.12 -> you can always follow me i'm actually
5085.52 -> doing a tutorial series uh where uh
5088.56 -> we're just gonna build a notion um
5092 -> from scratch and and
5094.4 -> and jam stack so netlify functions uh
5097.44 -> next jazz fauna and algolia and somebody
5101.6 -> go for that
5104 -> um so i have a
5106.88 -> substance and i also have my twitter so
5110 -> please follow me on twitter or it's it's
5112.639 -> most likely going to be on my twitter
5114.56 -> and my dev2 so you can also follow me on
5117.28 -> dev2 that's shitty12
5119.52 -> um
5121.199 -> so please uh
5123.199 -> please follow me and i'll let you know
5125.04 -> whenever this
5126.56 -> uh
5127.679 -> this tutorial series drops uh so it's
5129.84 -> gonna be
5130.96 -> uh yeah it's gonna be like a
5133.679 -> whole workshop type of thing where we
5136 -> just completely build notion from
5138 -> scratch using jam stack and fauna
5141.36 -> nice
5142.719 -> cool well uh so with that being said
5144.88 -> let's you know make sure you go follow
5146.239 -> studied on on twitter uh and you know
5149.52 -> get on dev2 get into those those fauna
5152.159 -> docs those next docs and get out there
5154.8 -> and deploy something because if and
5156.88 -> especially if you want to learn now
5158.88 -> we've got something called dusty domains
5160.56 -> going on at netlify which is a
5162.96 -> fundraiser
5164.4 -> take any unused domain that you have or
5167.36 -> i won't tell anybody if you don't but
5168.8 -> you can just ship anything
5170.4 -> you don't need a custom domain and ship
5172.719 -> it to netlify and submit it here and we
5175.12 -> will donate
5176.4 -> 500 for every site that you submit and
5178.8 -> there's no limit to how many sites you
5180.32 -> can submit we've got a bunch of great
5182.32 -> partners chipping in doing uh doing
5184.32 -> matches we're up to a hundred thousand
5186.08 -> dollars total donated to charity and
5188.08 -> we're sending these to great charities
5190.239 -> uh go check all these out and and you
5192.239 -> know maybe consider donating yourself as
5194.08 -> well but uh this is a really really easy
5196.159 -> way to learn something new to get
5197.679 -> something donated to charity and to have
5200.159 -> a little bit of fun with folks so so go
5201.84 -> give it a shot build something ship it
5203.6 -> let me know that you shipped it i'd love
5204.88 -> to see it uh and with that being said
5208.08 -> let's do another shout out to our
5210.239 -> captioning we've had rachel from white
5211.679 -> coat captioning here all day thank you
5213.199 -> so much rachel that is made possible
5215.12 -> through the support of our sponsors
5216.56 -> netlifyfana and auth0 and while you're
5219.199 -> checking out things on the site make
5220.32 -> sure you go look at the schedule we've
5221.44 -> got a lot of really good stuff coming up
5223.44 -> uh this i believe is our last stream of
5225.84 -> the year we're going to take the holiday
5228.159 -> break and we will be back on january 4th
5230.639 -> joel hooks is going to be here again and
5232.32 -> we're going to talk about marketing
5233.6 -> automation so if you've ever been
5235.04 -> curious about how all that stuff works
5236.88 -> you want to show people different
5238.4 -> pathways through a product as they like
5240.719 -> during their life cycle joel's doing
5242.48 -> some really cool stuff on that and i
5244.08 -> would highly encourage you to check that
5245.28 -> one out we're going to be learning trpc
5247.6 -> which i'm really excited about i don't
5249.84 -> know anything about it so i'm really
5251.84 -> excited for alex to show up here and and
5254.08 -> demystify it we're going to get into
5255.679 -> super bass we're going to get into naden
5257.76 -> so so so many good things so make sure
5260 -> you go check out that schedule uh you
5261.36 -> can hit this google calendar button or
5262.96 -> follow on twitch to get more more and
5265.04 -> more of our good stuff here um and as
5267.84 -> always you can go find all the episodes
5269.28 -> on youtube or under this episodes tab
5271.92 -> with that we are out of time should we
5273.28 -> eat any uh any parting words for
5274.88 -> everybody before we call this one done
5278.56 -> yeah um thanks for sticking around and
5281.04 -> uh thanks for having me jason uh really
5283.76 -> enjoyed it um
5285.36 -> yeah
5286.48 -> all right y'all this has been a lot of
5288 -> fun thank you so much sudeed uh we're
5290.08 -> gonna go find somebody to raid so stay
5291.84 -> tuned we will see you all
5294.639 -> next time
Source: https://www.youtube.com/watch?v=s0bLnYh0TH4