Full Stack AI Web App Tutorial (TypeScript/React/AI/LLMs)
in this video I'll be showing you how to build an entire AI application including a front end backend and then various Integrations we'll be using react for the front end and then typescript within react as well as for some of the backend components this is a great video because not only will it show you how to integrate AI into your applications but how you can actually present this to a user and build it into a full-fledged application that includes a front end which many other videos on YouTube don't actually have so with that said let me give you a quick demo of the application this is meant to act as a base and something you can extend and add upon and is really just teaching you the core features you need to know so you can build your own applications so right here what I have is a trip planner now any of you that follow me or maybe follow my second Channel life with Tim know that I've been traveling around the world recently and it can be difficult to keep track of the different trips that I have so what I wanted to do is build something relatable to myself and probably to some of you so the kind of idea here is that you can keep track of different trips that you have and when you're going on them and then you can add some notes related to those trips so for example in Canada I can say I am going to visit the CN tower okay so just add a note on something that I want to do and I can add maybe flight plans accommodation whatever I want and just have a really quick way to kind of view all of my trip details now I can add another trip here from this form where we have all of these different countries with start date and an end date but the coolest part is the AI component of this application so I have a box which is ask a question and I can ask this any question about the various trips that I have and it's able to actually give me a response by using my data so I can say something like hey what am I planning to do in if we spell this correctly Albania and when I ask this question it will take a second and then it's going to give me a response that will utilize the data I have in this application so you can see here it gave me a response and it says in Albania you have the following planned and it's taking this directly from my notes and the information that we have in this application so that's really the cool part here this AI that I'm going to show you can actually interact with the data that you have in the app and that means it can give you reasonable responses it can summarize different things that you're doing and you can add so many cool features to this as you're going to see in this video so with that said and the demo complete let's talk about how we're going to build this application now in order to build this project out we're going to be using something known as squid AI otherwise known as squid now they are the sponsor of this video but their platform is free you do not need to pay to use it and this acts as a backend as a service that lets you connect and secure any database or API in minutes so it doesn't matter if it's no SQL SQL graphql HTTP squid allows you to integrate with your data through streamlined sdks and it makes it really easy to build out the type of application that you saw where if we were doing this completely from scratch it could take us weeks and in this video you'll see it's not going to take us that long to build out this entire app it also allows us us to add AI directly into our application with different Integrations you're going to see it in this video but even though it is the sponsor it's a very cool platform and I think it's really going to help a lot of you building up these type of apps anyways to get started what we're going to need to do here is create a new account with Squid again this is free I'll link it in the description go ahead and do that and then I'm going to walk you through the next steps of creating our squid application and then we'll get right into the code so once you've created your squid account you should be brought to a page that looks something like this if you're not on this page you can just go through the simple onboarding and then you should see some page that looks like this and what we're going to do is go over to onboarding now from onboarding we have a few different options where there's some sample applications that we can start with but what I want to do is just start with an empty application so I'm going to click I want to start with an empty starter app from here we're going to give this a name I'm just going to call this trip planner tutorial because I'm doing this for the video and you can choose your different region and provider but I'm just going to go with AWS Okay so now what it's going to do is give us a command that we can copy into our terminal and this will kind of initialize our project and connect to the various squid services that when we eventually deploy this application everything's just set up and ready to go so I'm going to copy this command and head over to visual studio code notice that I've already opened up a folder and what I'm going to do is just paste this command here where I want to create this project and it's going to create a directory for me that contains all of the code that we need now we do need to install this package here so let's go ahead and click on yes or type yes and it should install everything for us create this directory and then we can start writing some code so now that we've initialized the application I just want to discuss some of the different components that we have access to here and why we're using squid AI now we have a backend a front end and then various different Integrations now the back end allows us to do things like create an API interact with our data securely we can have web hooks Chron jobs Etc there's a lot of stuff we can do here and we can actually interact with some of the AI integration for our application now during development this back end is going to run locally on our computer and then when we're finished we can actually deploy this out and then connect to that from any of our frontend clients now the back end is using something known as the squid backend SDK you don't need to worry too much about that but that's what allows us to write a lot of these um kind of features very easily and you'll see that in a second next we have the front end now the front end is our client this will interact with the squid backend which is running locally and that's what will allow it to actually Access Data sources uh again access the AI and just do all of the things that a client would do so the client is going to be our forward-facing kind of user interface the website that you saw it's going to integrate or interact with that squid backend to access the various features and data that it needs now the front end is going to use the squid client SDK which is wrapped by either the react SDK or the angular SDK now I don't want to confuse you but the point is that we have these really nice libraries or sdks provided by squid that have all of these features built in that make it really easy for us to actually integrate with our data sources and utilize AI features and that's why we're using squid so with that in mind let's just run this application to make sure that it's working and you can see kind of what it looks like and how it works and then we're going to start inter integrating this array with our own data and you'll see how we build that application I showed you before from scratch so what I'm going to do is CD into this directory so CD into trip planner tutorial and then I'm just going to do the npm run start command now this is going to spin up both the front end and the back end for me locally and then it should automatically open this in a browser window so let me just go back here and bring down my browser okay so this is what the starter application looks like you can see we have a little bit of a front end here and I can click on this button and increment the count this count is stored in the back end and we're incrementing this using something known as a web hook you don't really have to worry too much about that but this is just what the sample application is so you can see here we're running the front end and the back end and I'm integrating or sorry interacting with the back end and incrementing this count every single time I press this button that's kind of how this sample application is set up now we're going to kind of tear down or remove a lot of the code for this sample app and work on our own app uh but this is running you know a squid application so if we want to quit this we can just go ahead and hit on control C and then we can clear the console here and what I'm going to do now is go over to my squid console so I'm going to click on done because I've gone through these steps and I want to show you how we kind of create our own data source or schema here and we can start actually adding data to the database and start interacting with it so in order to do that we're going to click on Integrations here and you'll see that there's some Integrations that are built in by default for example we have a built-in database which is what we're going to use but we could integrate this with any database that we want maybe we have some other data we want to bring in from another application we have a queue we have storage and then we can also add things like an API an AI chap on and all these other Integrations that squid will allow us to work with really easily so what we want to do is click on the three dots here for our database and we're going to start defining the schema that we want to use for the different data that we have now you can see for the sample app it just has this count collection um now we're not going to work with this count collection but it's just here because that's what was in the sample application but what I want to do is I want to create a trips collection now for this application we're going to be storing storing various trips sorry so we need to figure out the fields that we want to have for our trips and the type of information that we want to store now in my case I'm going to keep it really simple and I'm going to go with the country of the trip that we're going on or where we're going the start date the end date and then we're going to have some kind of notes associated with the trip so let's go ahead and add those fields here the first field I'm going to go with is the start date this is going to be a date object so let's change the type here we can give that a default value if we want we're going to say that yes this is required and we're just going to give this a small description the reason we'll give this a description is so that the AI that will interact with our data and give us those summaries you saw before knows what this field means we're going to say start date of the trip this one's pretty straightforward we'll just give it a short description now we're going to add another field here and after the start date of course we're going to want to have the end date so let's spell the end date correctly let's make this a date as well we're going to make this required we're going to say end date of the trip okay now we're going to add the country so let's go country we'll make this a string this will be required as well if we wanted a minimum or maximum length we could do that we'll say country the trip is in okay and now let's add another field and this one is going to be notes now these will just be some notes associated with the trip so that's going to be an array uh this will be required as well we'll say notes related to if we could type this correctly to the trip okay so we're going to add that field and then lastly we're also just going to add an ID so we're going to say ID we'll actually make this a string and then we'll say that this is required and this is going to be the primary key and we'll say unique ID of the trip okay so we have the five fields that we need for this data source I'm going to go ahead and click on Save schema now at this point if we wanted to we could go to query with AI and if we had any information inside of this database we could ask questions about it and it would actually give us some response this is what we're going to be building into our AI application and using from the front end but here you can see you can test with it and also it's worth noting this concrate graphs charts Etc uh it's pretty cool so we'll look at that later when we have some data but for now we have a collection ID country end date notes and the start date and obviously if you had more data you could add it here or if you wanted to integrate with another database you could do that in our case this is totally fine so let's go back to our application now that we have the schema defined and what we want to do is start setting this app so that we actually have um what is it the code that we need for our application now remember that we need the ability to add a trip we need to add notes to a trip we need to be able to remove a trip and then we need the ability to query about our database so I think logically the first thing that makes sense is to actually add a trip so let's go in here and let's start setting up our app so that we can add a trip from the front end and then we can start adding some backend components AI Etc so let's go into our app. TSX I'm going to zoom out a little bit so that we can read this and we're just going to start cleaning this up a bit because we really don't need a lot of the code this here for example I don't need that squid logo I don't need whatever I had up here and we can pretty much delete everything that we have inside of this component and what we're going to do instead is we're just going to return an empty component and we can even remove these hooks right here from the squid Cloud react SDK so now we just have a blank app that's good let's go into index.css we can pretty much remove everything here as well I'll just keep the roots styling uh so that we keep uh some of these main features we can go to app.css we can get rid of
this as well and now we kind of have a clean slate and we can start writing the different code that we need so as I said the first thing that we want to do is probably create a form that allows us to add a new trip so to do that I'm going to make a new component so I'm going to say components and make a folder here and inside of the components folder I'm going to make a new file and we're going to call this the add trip form so let's do that dot and then this is going to be TSX now as well as that I'm going to add some CSS for this so I'm going to say add trip form. CSS and inside of here I'm actually just going to copy and paste a bunch of CSS later on now for this project I'm not going to be writing all of the CSS from scratch because that's going to take a really long time and you guys probably don't want to just watch me uh write CSS so I have all of the code available from the link in the description if you're getting lost or you just want to reference something thing or copy and paste it you can go there and just check out all of the code and for the CSS specifically I'm just going to get you to copy and paste that into your application so that we don't spend a ton of time styling the app which again you're not going to get a ton of value from anyways let's start out with our ad trip form so what we're going to do is we're going to import react we're going to import a few other things that we need like the use State and the use effect and that's going to be from the react package okay now we might as well import that CSS while we have it so we're going to say from and then or import sorry add trip form. CSS and then we can go here and make our component so we're going to say function add trip and inside of add trip we're going to create a form and the form is to make the trip so we're going to need a country a start date and end date um and then anything else for the trip I guess some notes but we're going to add those later on so let's start defining some state that we're going to use for our form so we're going to say const country and then set country is equal to use State and for now that's going to be an empty string we're going to say const start date and then set start date is equal to use State this will be an empty string as well we're going to do the same thing if I fix my semicolon here with the end date so we're going to say end date and then set end date is equal to use State and that's going to be a string and then we're also going to have a piece of State that's going to store all of the different countries that we have available to us the reason for this is that we're going to actually use an API to grab all of the different countries that exist so that we can populate kind of that selection box that we had because we don't want to just manually type out all of the different countries we're going to grab those from an API just to save us some time so I'm going to say const and we're going to go with countries and then set countries is equal to use State and this is going to be a list actually of all the different countries and then we're actually just going to grab all of these countries using a use effect hook so let's explain this but we're going to say use effect we're going to have a function here the dependency array will just be empty and inside of here we're going to make an API call to an API that I found that just gives us a list of all of the different countries so that we can populate those and allow them just to select a country from the list so we're going to fetch and the URL that we're going to fetch is the following I'm just going to copy it in so that I don't mess it up and then you guys can copy it as well so let's go here this is the rest countries. comom v3.1 all this is free you don't need any API token or anything so it's really easy to call we're going to say do then we're going to take in some response and let's just save this and we're going to say if the response. okay then we are going to return the response. Json and I just need to put
this inside of a set of curly braces so that I don't get yelled at let's format this so that you guys can actually read it okay so we're saying dot then we get a response if the response is okay we'll return the Json from the response we're then going to need another dot then we're going to take in the data from that Json and what we're going to do is we're going to map this data so we're going to say const and this is going to be the country names is equal to data do map we're going to take in a country and then we are going to do country .name name. common because this has a bunch of information not just the name of the country so we're going to get the name and then the common name because there's abbreviations and all kinds of other data that exists from this result so I'm just going to mark this as an any type so the typescript doesn't get mad at us and then I'm going to set countries so we're going to say set countries and we're going to set it as our country names okay so now we're uh retrieving the data from the API let's just add one more Clause here in case an error so we're going to have a catch we're going to have an error and then we're just going to say console do error like that and we'll just log whatever the error is so we can see what that issue is okay so at this point uh once we render this component what it's going to do immediately is go and fetch all of the countries set that in the country State and then we can use that in our form so let's start making the form now which is just going to be a little bit of HTML so we're going to say return we're going to return a div now it's important that you specify the class class names properly here so that they match up with the CSS that I have so for the class name of this div I'm going to call this a country or sorry a trip container and let's save that inside of this div I'm just going to add an H3 tag as a header we're going to say that this is ADD trip with no class then we're going to create the form so we're going to say div class name is equal to the trip- form okay now inside of here we're going to add our different form elements so the first uh element we're going to have is a select field this is to select the country so we're going to say the value is equal to our country state which we have defined up here and then we need to specify an onchange so we're going to say onchange and this needs to be a function so we're going to specify an arrow function that takes an e and says set country and when we set the country this going to be e. target. value okay let's save that now inside of the select here we're going to spe ify all of the different options that we have so the first option like this is going to be the following we're going to say option value is equal to empty we're going to say this is disabled and this is just going to say select country so this is what you'll see in the Picker but you can't actually select this and then we're going to map all of the different countries that we have as various options inside of the select so we're going to say countries do map okay and we're going to take in the country and what we're going to return from the country is an option the option is going to have a key the key will just be equal to the country the text itself will be the country and the value will be equal to the country as well so let's save so that we can see this so now you can see that we have various different options for all our different countries with the key and the value and the name okay so those are all of the values inside of the select next we need some date Pickers so we're going to have an input for the input we're going to say the type is equal to date now the value of course is going to be equal to the start date because that's what we will have first and then we're going to say on change okay and this needs to be a function we're going to take in E and we're going to say set the start date and then this is going to be e. target. value okay now we can just copy the same thing let me just make this a bit bigger so that you guys can see it and I'm not sure why it did that so let's copy this line and paste this down here and just change this from start date to end date and rather than set the start date this will be set the end date okay now lastly we're going to make a button this button is going to say add trip okay and we're going to have an onclick which is equal to and we're going to call a function called add trip which we're going to Define in just one second okay so this is the form I know that was just a lot of typing there but it's actually not too complex we just have a selector for the country some inputs for the start date and for the end date and then a button for the add trip now we just need to handle actually adding the trip so we're going to make a function called add trip okay we can just make this an arrow function here when we press this we want to create a new trip in our database so how do we do that well to do that we're going to use the squid client SDK or the react SDK so what I'm going to do up at the top here is I'm going to say import and I'm going to import use collection from and this is going to be at squid so let's put that in a string at squid cloud/ react okay so this is a hook that we can use to get access to a specific collection so now what I can do is I can say const trips collection is equal to and then use collection and then what we're going to specify is actually the schema of the collection which I'll do in a second and then the name in our database which is trips now what we want to put here since we're using typescript is actually the type or what a trip looks like so that we're able to get that autocomplete from typescript so in order to do that we need to make a new type so what we're going to do is say uh type and then this is going to be trip and that's going to look like this so for the type trip we're going to have a start date which is a date we're going to have an end date which is a date we're going to have a country which is a string we're going to have some notes which is going to be a string array and then we're going to have an ID which is also going to be a string okay so that's the type for our trip and then what I can do is specify that Here and Now what I'm doing is saying okay I want to use this collection from squid so what we defined there in our squid cloud or squid console the name within the database is trips but each trip looks like this type so this way when I start interacting with the collection and I have the auto completion and I actually know what this looks like okay so now that I have the trips collection here it's actually really easy to add a new element to do that all we need to do is say trips collection. document okay we're going to
create a new document and then we can say insert and we're just going to insert the data that we want that's literally it if you've worked with no SQL databases before you've probably seen something like this but here this is giving a giving us a reference to that trips collection and then we can just add a new element to it now the first thing we'll do before we add the element is just Define an ID for this trip so we're going to say const trip ID is equal to and then we're going to use the crypto package which is built in here and then random uu ID this is going to give us a random value for the ID to identify this trip for the document we're just going to specify that the we want the ID to be trip ID and then we can start writing all of our Fields so we're going to say the ID we want is the trip ID we're going to say that we want to have the country then we also want to have the start date and this is going to be a new date and we're just going to wrap the start date string here so we convert that to a date object we're going to say end date and this is going to be new date and then the end date and then we're going to have notes and this will be an empty array now notice once I fill in all of those fields then the red Squigly line goes away because now we have fulfilled the schema or the type that we specified here which is kind of the nice benefit of using typescript now that actually completes our ad trip form lastly we need to export this component and then just render it from our main component that we can use it and try it out so I'm going to say export default and then this is going to be add trip like this okay so that is now this component exported and what we're going to do just to clean up the code a little bit is we're going to take this type and we're just going to put it in a types file so I'm going to go to Source going to make a new file called types. TS I'm going to put this in here with an export before it and now what I'm going to do is remove this type and just import it from that file that we created so that this way we um don't actually need to define the type in one file because we might use it in multiple places so now you can see that I'm importing trip from dot do/ types that's where we have it defined and now if we use it somewhere else we don't need to redefine it okay so that is our ad trip component uh the last thing to do is add the CSS for this so again what I'm going to do is just copy this in if you want all of the CSS it's available from the link in the description and it's just in the file add trip form. CSS you can view it directly from GitHub so I'm going to copy all of that in again this just kind of makes it look a little bit nicer it's not worth us writing all of it out together uh in this video okay so now we need to render this component so we can test it and actually view it so I'm going to go to app. TSX inside of my fragment here I am going to render that component which is the add trip okay and that's it so you can see that this automatically gets imported here from components. add trip form if it's not then you can just type the import we will format our code and now what we can do is run it and make sure the component renders so we're inside of that directory trip planner and I can type npm Run start when I do that it's just going to take a second here and then we can see that we have our ad trip form now obviously all of the stylings not finished yet because we have um some more CSS that we'll add later on you can see that I can select a country so it has my whole list here of all of the different countries they're not necessarily in alphabetical order but if we wanted them to be we could map them in that way I'll select B let's go with something like we going to start on the 24th and then go to the 31st now let's just open up the console here to see if this is going to work I'm going to click on ADD trip now at this point we don't actually know if it's working or not because there's no way to view all the different trips in our UI but what we can do is we can check our back end we don't see any errors here so hopefully that means that it's working and we can go to our squid console and we can actually query with AI and see if we have a trip to bise so let's go query with AI let's say hey what trips do I have if it says I have some trips that means that this was probably successful if it says that I don't have any trips and I guess it means that didn't work and I'm going to show you how we can kind of allow access to that database so you can see here after asking this it gave us a result it says you have the following trip trips plan sorry country is Bel start date end date and there are no notes for this trip it shows us the query that it actually used uh to find this information and then gave us a walk through step by step of what it did in order to format this response now this can also generate charts and graphs if you add some data that makes sense for that uh but this is pretty cool and that's exactly why I want to add this to our application so that we can use this directly from the UI anyways you can see that trip was now added so let's move on to the next steps here where we start actually viewing the different trips that we have and then we can integrate or add that add AI form so let's go to components here and we're going to make two no components one for rendering an individual trip and then one for rendering the list of trips so we're going to go new component and we're going to say trip. TSX this will kind of be the individual trip and then we're going to have the trip list. TSX and
while we're at it we're going to add the CSS file so we're going to say trip. CSS and then we will have the tripl list. CSS okay so let's start by rendering one individual trip and then we can render the list of all the trips that we have all right so for one trip we're going to say import format we're going to use this in a second for the date from and this is a built-in package called Date FNS we're then going to say import and this is going to be trip from dot dot SL types because we want that trip uh type and then we're going to have some states we're going to say import use state from and this is going to be react okay now what we're going to do here is we are going to write the different props that we're going to have for this component we're going to start rendering it uh and yeah you'll see how it works so we're going to say type props is equal to and first thing we're going to need to render a trip well we need to know what the trip is that we're rendering so let's specify that now we're also going to have some functions we're not going to write these functions or Implement them yet but we know that we're going to need them so for example we need the ability to delete a trip so we're going to say on delete we're going to pass some ID this will be the ID of the trip we want to delete and this function will return void we're only going to have add on note or on add note and this is going to be the trip ID so the trip ID we want to add the note for as well as the note itself that we want to add and this again we'll return void we're then going to have the on delete note because within each trip we have notes and we need to potentially delete them same thing we're going to have the trip ID and we're going to have the index of the note that we want to delete which is a number and then this is going to return void next we're just going to have some index and this will specify what Index this specific trip is okay so now let's write our component we're going to say function and this is going to be trip card now for the props we're just going to strip them out so we're going to say trip on delete on add note on delete notes and index and this is coming from our props type just kind of good practice here with typescript uh now what is the issue it's saying here all these structured elements are unused okay that's fine we'll use them in a second let's format this go down and start writing our component okay so inside of here we're going to say const new note and and then set new note this is going to be the field that will store the um kind of input for adding a new note because we need the ability to add a note to our individual trips okay now we're going to write the actual HTML that we want to render here so we're going to say return we're going to have a div we're going to say the class name here is equal to the trip- card and we're going to give this a key which is equal to the index just so we don't get those key errors coming from react now inside of here what we want to display is the name of the trip the start date the end date and then there's a bunch of different functionality we need like we need to view all of the different notes we need the ability to add a note to delete a note and then also to delete the trip itself because that's something we might potentially want to do so we're going to start with an H4 tag which is going to show kind of the header component so like the country name and the um start date and the end date we're going to have a span here and inside span what we're going to do is we're going to format and this is going to be the trip. start date we're going to format this as PPP which is going to give us a nicely formatted date then we're going to put a dash not a minus sign but uh a dash here so let's go outside of this curly brace we're going to have another curly brace and we're going to do format and then this is going to be trip. end dat and then same thing format it with PPP just so that it looks nice and it just gives us the uh month date and year okay so that's the first thing we're going to display now after that we're going to have a button and for the button we're going to say the class name is equal to Country button just in case we eventually want to add some functionality on click here although we're not going to do that right now and we're going to render the trip. country name then beside all of that we're going to have another button the class name of this is going to be the delete dash button and for the delete button we're of course going to call it delete and we're going to have an onclick event the onclick event is going to call the on delete because this is to delete the trip and what we're going to do is just pass to this function the trip. if you
look at our props the on delete function takes the ID of the trip that wants to be deleted so we're just going to pass that trip. ID and then we will actually delete this trip okay so all of that's in the header so that's going to appear in kind of the first row and now we're going to render the different notes that we have so we're going to use UL for the unordered list and then we're going to map all of our notes so we're going to say trips or sorry trip. notes. map okay for this we are going to take in the note as well as the note index okay and then we are going to return a component that we want to render so we're going to render uh render a list item sorry the key of this is going to be the note index and then we're going to have a class name and this will be equal to note now inside of the LI we're just going to render the note itself and we're just going to put a space at the end and then we're going to have a button okay and the button here is just simply going to be an X and we're going to have class name equal to delete dash button and then we're going to have the on click equal to and this is going to be an arrow function that's going to call our on delete note to delete a note we need the ID of the trip so we're going to say trip. ID and we need the
index of the note we want to delete so let's just save that so we can read it and you can see here that we're rendering the note we have our x button to delete the note which is going to appear at the edge of it or the far right Edge based on the CSS we have an onclick and what we're doing is just passing to the function the ID of the trip and the note specifically that we want to delete delete okay so that's it for rendering the different notes now the last thing we need is the ability to add a note so we're going to make a div we're going to say the class name is equal to the note- form and then inside of here we're going to have an input field because we need the user to be able to write the new note for the input this is going to be type is equal to text we're then going to have the class name which is equal to the note- input and then we're going to have the value which is equal to the new note and then we're going to have the onchange which is equal to e and then this is going to be the set new note and this will be e. target. value okay again let's save that and then lastly we can add a placeholder here to our input so let's do that placeholder and this will be equal to add a note okay lastly we need a button to submit this so we're going to say button add note let's give this a class name for our styling so we'll say class name is equal to add note dash button and then we're going to say onclick is equal to and this is going to be the following the handle add note which is a function we're going to Define in one second so don't worry about that for this we're going to pass the trip. ID and the new note okay let's save this and there we go we have finished the form okay let's quickly run through this we have a div which represents one individual trip we display the main information about the trip which is the country the start date to the end date and then the ability to delete it we then render all of the different notes associated with an individual trip and then we have a div here for adding the note so we have the actual input for the note and then we have a button that allows us to add it and then we just have a function we need to Define which allows us to add the new note so what I'm going to do is say const and this is handle add note now recall that what this is going to take is the trip ID so we're going to say trip ID this is going to be a string and we also need the note that we want to add which is also a string the reason why I'm writing this function is I just want to trim the note uh to make sure we don't include any trailing spaces and then I'm going to pass it to that function so I'm going to say if note. trim does not equal an empty space so as long as you give us some real content then I'm going to say on add note and I'm just going to pass to this the trip ID and then the note. trim so I'm just trimming that and then I'm going to say set new note and this is going to be an empty string okay so when I add a new note well I'm going to pass it to that function which will add the new note for me and then I'm just going to set the internal State here to be empty so that I can add another note without having to delete that content so this uh is pretty much all that we need here for this I'm realizing the date FNS uh is not actually a built-in package so I believe we are going to need to install that uh so we can do that right now let's go up here let's close this let's clear and let's type npmi and then date- FNS uh just so we have access to that format package okay so now we should be good here once this refreshes so let's refresh here the Explorer and now notice that we are all good we can rerun our application with npm Run start and now we need to actually render these trip cards if we want to see them so let's go down here and let's go export default trip card okay let's add the CSS for the trip card and then let's do the list which is going to be quite simple all right so I have the trip CSS I'm just going to paste all of it in here okay so you guys will be able to find that again from the link in the description let's remove that because that's actually the wrong header and then we can format this so that it's nice and pretty okay so now we have the trip component done we have the CSS and now we need to do the trip list okay so for our trip list this is going to be quite simple we're just going to render all of the trip cards so to do this we're going to say import react from react we're then going to say import trip this is the type from do/ types we're then going to import the trip card from do SLP okay and then we're going to Define our props so for this we're going to say type props let's zoom in it a little bit and we're going to take all of our different trips so we're going to say trip and this will be an array we're going to say on delete because we need the same functions here that we're going to pass to our trip so we're going to say this is ID string and then this will be void and actually we can make this a little bit faster by just copying these three functions cuz we're going to have the exact same so let's just paste these here on delete on ad note on delete note because these are going to come from our main app component and now we can make this component so we're going to say function trip list same thing we're going to destructure these so we're going to say trips on delete on add note and then on delete note like that this is coming from our props okay then here we're going to return a div inside of the div we're going to say the class name is equal to the trip list container and then inside of the div we are going to show all of our trips so we're going to say trips and and trips. map we're going to take in the
trip and the index and we're going to render a trip card okay so let's save this and format it and now start writing all of the props now the reason I'm doing this is to make sure I do actually have some trips if you did pass me some trips then I will start mapping them out okay so for our trip card first thing we need is the key the key is going to be the index here we're then going to pass the actual trip itself which will just be the trip from this map then we are going to have the key the key here is going to be the index as well and sorry this is not called key we're actually going to call it index because that's something that we passed as a prop there we're then going to say on delete is equal to you guessed it on delete we're going to say on add note is equal to you guessed it on add note and then lastly on delete note is of course going to be on delete note uh this is known as prop Drilling and you're not typically supposed to do this but in our case this is kind of a simple project uh so it's fine here we're just passing these different functions twice so to this component and then to the internal component we're not passing them through too many layers so even though it's slightly bad practice uh it's fine for this specific project anyways now we're going to render this out so we're going to say or export this sorry export default trip list okay uh and you can see now that we have the trip list where all we're doing is just inside of a container just rendering all of these different trip card components and passing the various props that we need now I actually realized that I combined all of the CSS for tripl list CSS inside of trip. CSS so there's no need for us to um what do you call it here actually write any CSS inside of this file so all I'm going to do is go to tripl list. CSS and simply delete that file because we don't actually need that and now we can render the tripl list component from our main component and pass to it these various functions and trips so let's go to app. TSX we are going to import the trip list and now underneath the add trip we will simply render the trip list here but we need to pass it a few different things in order for it to actually work so we need to pass to it for example all of the different trips and we need to pass to it those functions so on delete on add note and on delete note so in order to get all of the trips we can do a similar thing to what we did when we were adding a trip so we're going to say import and this is going to say use collection and we're also going to import the use Query hook which is something that we can do to grab a specific uh trip in this case from the squid react SDK and we're going to start by grabbing our collection so we're going to say const collection is equal to use collection this is going to be using the trip type which should be automatically imported there and then we are going to specify that we want to grab the trips okay now what we want to do is we want to get all of these trips so in order to do that we can say con trips is equal to and then we can say use Query and we can just pass the collection here do query now what this will do is simply query all of the different trips for us using this hook and just give us a nice list of all of the trips that we have so this gives us a reference to the collection but if we want all of the trips this is the way that we grab them so now we can pass those to our trips list so we can say trips is equal to and then we're going to pass the following we're going to say trips. dat do map and then we are going to take our trip and we're going to render all of the data from that trip this is just kind of how squid Cloud gives us the data it gives us trips.
data and then we need to grab all of the individual elements inside of that array which is what we're doing and then get all of their data because we have document references and if we want the data inside of the document reference well then we need to just use thist data field okay so we're just kind of mapping out so we get all of the data in a way that we can work with it now there is some functions that we need to add here so let's stub them for now and then we can Implement them so we're going to say const delete is equal to this is going to take in an ID string and then do something next one is going to be on ad note okay what is this one going to be uh let me just write this properly this is going to be the trip ID which is a string actually and then it's going to be the note which is also a string and then we're going to have the const on delete note guess we need to spell const correctly and this is going to be similar it's going to be trip ID string and then note index which is a number okay I'm just stubbing these uh and we'll write the implementation in a second for now I just want to pass them so we're going to say on delete is equal to on delete let's format that we're going to say onad note is equal to on add note and we're going to say on delete note is equal to on delete note okay so now we have all of the functions and our trip list is rendering we are running our code okay and you can see it's automatically updating whenever we do a save here and when I come back you can see that one of our trips is rendered now this trip doesn't look great uh I'm not sure why the CSS is not updating I believe what we might need to do here is go to our trip list uh and just import the trip CSS so let's go ah it's because we haven't imported the trip CSS that's why so from our trip list we're going to say import trip. CSS okay and now when I come back here uh it says trip. CSS does not exist uh I believe that does exist um okay let's see what the issue is here and of course we need to do do slash so that it knows the reference reference there and now you can see that we get our nicely formatted trip okay great now these functions currently aren't doing anything because I haven't uh actually implemented them you can see that we have our B Trip showing up and if we try to add another trip here maybe to the Barbados let's do another date range here like the 8th of August to maybe the 10th we can add it and you see that it shows up okay great so now that we're doing that let's Implement these functions so that these buttons actually work and then we can get into the AI implementation so let's go back here to app. TSX and let's write these functions now the first thing that we're going to do is actually write a helper function that will help us find a trip so that we can modify it and either add or delete note so we're going to say const find trip and we're going to take in an ID okay and what we're going to do here is the following we're going to say return and this is going to be trips.
data doind and we're going to look for a trip and this is going to be the trip. data. ID is equal to the ID that we're looking for what this is going to do is just grab the individual trip where the ID matches the ID that we're looking for so then we can actually modify this trip okay first thing we should do probably is learn how to add a note so let's uh Implement actually the add note function first okay so for add note we're going to do the following we're going to say con trip is equal to find trip and we're going to pass the trip ID now we're going to make sure the trip exists so we're going to say if not trip then return because if there's no trip well there's nothing we can do here we're then going to say con notes are equal to and we're going to grab the current notes that we have so we're going to say trip. dat. notes okay now what we want to do is add a new note into this so we're going to say notes do push and we're going to push our new note and then we need to update this trip now to update this trip we're going to say trip. update and then we're simply just
going to pass an object with the fields we want to update so very simple we're going to say notes are now equal to the new notes that's it that allows us to add a new note so we just grab the trip find the current notes add a new note into it and then make sure we trigger this update operation update here is actually going to go to the database and perform that update perfect so that is adding a note now let's do deleting the trip itself so we're going to say con trip is equal to F trip we'll pass the ID and then we'll say if the trip exists then guess what it's as simple as saying trip. delete okay that's just going to delete it from our database now we're going to do the on delete note now for on delete note we're going to do the same thing here so we're going to find the trip so let's grab that and make sure that it exists if it doesn't exist we can return we also want to grab the notes so we're going to say Cod notes are equal to trip do dat. notes but this time we just want to filter it so that we have only the notes that don't match this note index because this is the one that we're removing so we're going to say trip. update and inside of here
we're going to pass our new notes so we're going to say notes are equal to and then this is going to be notes. filter and when we filter this we're going to take in an underscore which would be the note itself but in this case I don't care about it so I'm just using an underscore and then index and then it's going to be index does not equal the note index and we got to spell filter correctly so that this works so what the filter is doing here is just returning all of the different objects that do not match this index which means we'll have all of them except the one that we want to remove and that's how we will update our note okay so that's pretty much it here in terms of deleting and adding the notes I guess the only way to know if this is working is to go to the code and test it so let's go here we can refresh you can see it takes a second they pop up here and let's try to add a note so let's do something simple like hello world and we can click on ADD and you can see the note gets added and then I can delete it let's try to delete a trip and you can see that it gets deleted great there you go I refresh it's still here and go hello world add a note say testing add a note and say new note add that in here and you can see all these notes get added and everything is working properly perfect so now that we have the trip list and we have have the ability to add a trip we want to add in this AI component that allows us to ask questions about our various trips now let's go back here and let's just do a few small things to make this look a little bit better first of all so what I'm going to do is just bring in a little bit of styling here uh for for my app so I'm going to go to app.css and I'm just going to copy in the CSS that I have from the GitHub you could probably just pause this and write it out as well if you want to and then I'm going to go to my app. TSX and I'm just going to make this a div and say class name is equal to card just so that we get a bit better styling here okay so I'm just adding a card and I've added that card styling and when I come back here you can see all of this now kind of gets wrapped in a card which looks quite a bit better okay now let's add that ask AI type feature so what we're going to do is go to component we're going to do ask AI dot uh and actually this will be all capitals do TSX We'll add styling as well so add or ask AI do CSS okay and let's start writing this okay so we're going to say import UST state from react we're going to say import and this is actually going to be use squid now a hook that's coming again from the react SDK and then we're going to import our stylesheet so ask ai. CSS and let's make sure we have the do slash this time now let's stub the components we're going to say function ask Ai and this can return a fragment currently and then what I'm going to do is say export default ask AI okay so I just want to get this kind of stubbed so we can start writing it in one second let's go to app. TSX and let's just render it above
all of this so that it's already there when we want to start testing it okay so now we have ask AI here as one of the components we're rendering in app. TSX however before we can start using aski we need to actually build in this AI integration that allows us to interact with our database now this is where we're actually going to go to the back end and we're going to write a squid service so when I go to backend here I'm going to go to Source I'm going to go to service and you see that we have this example service.ts what we're going to do here is remove this web hook service because we don't need this because this was resetting the counter beforehand and we're going to add in a new service which allows us to actually utilize an AI feature that queries our database so inside of here we're going to remove this import because we don't need that we're going to get rid of the web hook and we're going to replace that with executable now what we can do is we can use a decorator to Mark a function that we Define inside of this class as executable which means we can use it from the front end and execute some kind of operation in this case it's going to be interacting with an AI so we're going to say at execute utable and then w
2024-08-09 12:49
