Svelte tutorial : Full stack svelte [1/2] Mongo, express and node js

welcome to the fullest Tigers well course we're going to be learning how to develop and deploy a full stack application with no GS Express MongoDB and as well we will be starting from the beginning so don't worry if you don't have any other previous with Nokia's or as well as well is a really cool front-end framework and according to the 2018 state of jes survey is the living framework in the interested people are having for it my name is Steven and I'm really glad that you are taking this step to become a great swell developer now let's take a look at what we are going to be building today so we are going to be building this Express tracking application and we can have either expenses or income so we have Eaton's for every transaction and here we can have some summary so we have all the income that we have all the expenses and the balance that we have in general so I can have another transaction in this case is going to be an expense and this gets added to the dome and also is in the in the backend so we are making API calls to Express then we can also remove items and they like the summary is changing every time we change and delete a new item and we have a different balance so that's the application and as you can see this is life in the internet we are using Heroku and I am going to be teaching you how to deploy this if my bill varies it might be look very simple in the surface but there's a lot of stuff going on here to make this work what are the tools that we are going to be using to this we are going to be using MongoDB for the database we are going to be using Express is a really popular framework for the backend in we also be using as well yes of course and notice as the Wacken so this is the stack that we are going to be using and what you are going to be learning today you're going to be learning how to create an express REST API how to configure in the cloud how to set up a swell project hello and also all the features others will has like reactivity event binding a logic blocks and so much more also how to make calls to the express bucket back in with this press with as well and we are going to be using a proxy to have the same era also have to use this wealth store so we are going to have some state management and finally we are going to deploy the Express application to Heroku along with as well so if you're not here please subscribe to the channel so we can have more content like this I am I am also planning and releasing another part when we also have authentication so please stay tuned and now let's start with a configuration okay so now let's get it started with MongoDB we are going to be using MongoDB Atlas is a service that we can stir or MongoDB in the cloud you could also use any other platform or if you prefer you can set up a local MongoDB database but this is what we are going to be using in this tutorial so we have a free plan that we can sign up so is a sandbox that we have access to most of the features that MongoDB has so just create a new account I already already created the account so I'm going to close this and this is what you will get when you first start the account I'm going to choose the free cluster so this is the one that we are going to be using and then we can set up some configurations here so we can select off all or cloud provider I'm going to be using AWS and then we are going to be using a region probably you want to choose the region that's closer to your location I'm going to go with with this one then we can have a closer name and some additional settings that we are not going to use right now so let's create the cluster okay now the cluster has been created and we have to wait some minutes so this is activated I'm going to pass the video and we will be back ok now that we have for cluster created we are going to set up the connection so we can connect our application with cluster for doing that we are going to click here and here we have to add some initial set settings so the first setting is that we need to add an IP address so this in a production application will be the IP address of your server you could also use your current API address the one that your computer is using but the problem with that is that that IP address will probably change in the future so we don't want to change that all the time so what we are going to add is the public IP address that that means that everyone is allowed to enter the send the server so this is the one that we are going to be using this means that everyone can access this cluster and probably if you are going to make a production application you don't want to have this setting but for the purpose of this video work this is what we are going to be using and this is going to be a public access okay we have added the IP address now we need to create a user to access the the cluster so for this I'm going to be using admin create the admin user name and I'm going to use this strong password so we can have that password first for this instance so make sure that your password is strong and make sure that you save this information because this is what we are going to be using in the future to connect to MongoDB let's create the user and now let's go to the next step so we have settled that up now we the way we are connecting to the database is through all our application so we are going to click here and this is the configuration that we need to enter the say cluster so I will just copy this and make sure that you save these cut this and you have to replace this with your password and then you can access the closer so that's pretty much it on how we create the cluster now let's move on how to configure this in our application okay now that we have installed we have clear created our MongoDB cluster now let's make sure that you have installed no J's in your computer so this is what would you need to run the JavaScript in the backend so you will need no GS and also make sure that you have installed insomnia so you can also use another tools like postman but in this course we are going to be using insomnia so we can test our API endpoints with that now let's open the terminal and create a new folder this folder is going to be called expenses tracker I'm going to CD into that folder and now let's initialize a new NPM package JSON so for doing that that I'm going to call NPN in it and I'm going to pass the just flag so we have everything quickly and let's open this folder with PS code okay so we have our package station and we don't have any dependencies by default so let's add out all the dependencies that we need so I'm going to npm install and the first one is going to be expressed so this is the framework that we are using for the next let's just add mongoose mongoose is a tool that allows you to create schemas and connect to also two MongoDB another thing that I want here a sanguine course so course will allow allow us to connect from the front end to the back end without any problem another one is for the parser so what the parser will parse all the info that the data that you've read we received to the application so we can have Jason and the last one is going to be Morgan Morgan is a logger that we that can control of all the HTTP requests that we have so we have some logging of what's going on so um that's the safe play and this is going to install all of these dependencies in our project now that we have that our I forget we also need this call come who currently so this will allow us to run the frohnen and the backend at the same time in development so I'm going also to have this library concurrently and this one is just for development and the other one that I need for development is not normal so no moon can help you to run every time you save a new file you can run you can read the application will react to that change and will be restarted so that's that note moon and I'm going to save this in the development packages and we pretty much have all the dependencies that we need for the vacuum so now that I have that I'm going to create a new file called server that yes so this is the entry point for the server let me change this and what we want here is we are going to test if - no - check if Express is working so I'm going to import this press and I also going to create a new app so we're creating this press up and I'm going to declare a new board we are going to be running this application and now let's start declaring the basic road so for doing that I'm going to grab up that gate and for the route and going to have a callback that has the request and the response and and I'm just going to say raise that sense hello war war so this is going to be your hello war for now and then I can listen this app in the port that we have and when this is completed we are going to cancel that law X Perez is run at birth and here we can have the part that we are listen okay we have our hello war now let's test this out so I'm going to open up the terminal and I'm going for the first time I'm going to use no and I'm going to type the name of the file and there we have it Express is running at Port Express is running at port 3000 so I'm going to test this with an insomnia and let me check if this is correct and there we have it we have our hello world so we we set up the server and now let's configure the client so I'm going to stop this for now and I'm going to start with a client so for the client I'm going to use a template so we can have some boilerplate for as well in this case and for having this template I'm going to use n PX digit and I can access this template called spell yes and this template is for webpack so we are going to be using webpack for this configuration you could also use roll-up but for this example we are going to use webpack and we are having a name for this so the name for this is going to be client so this is the folder that we are going to create and is going to be here so let me run this and it's cloning the template and there we have our client now let's go to the client and I'm just going to create a new one and I'm going to it to the client and I'm going to install all the dependencies that we have in the client so let's take a look of what we have here so these are all the dependencies that we need to install to run our as well application so it's just some with back tools and this welcome compiler so as you know as well it's a compiler we don't have any direct dependencies here all only are the dev dependencies so I'm going to install everything this is going to take a little bit and let me just move to the package.json so as you can see we have 2pi castigation Jason we have one for the server and one for the client so the one for the server is the main one that we are going to be using in production and this is for now this will also help us to develop our application and has all the information that we need so let's move to the package agent of the server and I want to add some scripts here so we don't have to run this every single time I'm going to add some scripts for doing that so the first script is the one for running the server so it's going to be server in and what I'm going to run here is I'm going to run no more so this is the tool that allows you to refresh our application every time we save and I can target this to the server that jeaious this is the file that we need to listen to and I'm going to use the ignore flag and what we are going to ignore is the is the client folder because we don't want to restart the server every time we save the client so that's what I need this ignore flag so we have our server or server script so let me test it I I am in the root of the folder so I can run NPM wrong server and you can see that this is working so every time we save the changes to 4000 the application will be restored and we have the latest changes so we have our server script now that's odd in the package.json of the server let's let's add another scripts for the client because we are going to be running this from here so if I want to run the client I'm going to have this script that says it's going to have and VM run def but this dev script is going to be called in them in the package session of the client as you can see we have a script that's going to run the development server so what we are going to do here I am going to add a prefix flag and with this we can access the client and this mean does this comment will be run in the client so is it this is what it's going to be run so we can save that and let's test this script we can say and we am wrong so now the project is is being is hosted in localhost:8080 so let me test that and there we have it we have all our s bad application so we have the we have this decline and we have the server and what I want to have now is I want to have a way to have this in at the same time to be run and at the same time so I don't have to have two different consoles for doing this so what I'm going to do here is I'm going to have a they have script and this dev script what it's going to do is going to use it it's going to use the concurrently so this is the tool that we installed before concurrently and this allows us to run two scripts or more scripts at the same time so for doing this I actually need to have this inbox like slices and I'm going through and being run server I can close this and the other comment that we need is this one that's going to be NPM run client so these are the two comments that we need and I need to close this so this will have the client and the server are at the same time so let me just test this out and I can run NPM around there and what this is going to do is going to run the client and the server so we have the client and the server and now let's death this is that is work so I can go here and I can see that the client is running I can go here and I can check that the server is not running so let's see what's what will run and being run server and BM room Lyons so I have a power 3000 concurrently and the end run server oh I am in the client folder so you don't want to have this mistake we want to so I just run the Deaf script for the package.json of that client so make sure that you are in the root of them and of the project and now we can run the code recurrent script so I can run this one again and this should be running both so we can see that it has the two outputs the one from the server and the one from the client so let's test that out and we have a client and we shall also have the server yeah so we have both okay so we have configured our scripts let me pause this and now I will try to connect to MongoDB okay for doing that I'm going to close the client for now and I'm going to add a new file on called can see that yes so this is the place that we are going to have our configuration for the server so what I'm going to do here is I'm going to say module that exports so we can export and what we are going to sport is a listen and objet and I'm going to have for now I'm going to have two variables here the one one is going to be the port so this is the part of the application will be run and we need we want to have the default value is going to be an environment variable in environment variable so we can use for example if we are in production we can use the one does that we have in the server and if we don't have this we can fall back to the port 3000 so we the port and I also want the URI so this is the variable that we are going to be using to connect to so this one is the one that we have here as you you remember we need a user and we need our password so let me add that here and I can have this connected to my own body ok so here we have one problem that I don't like is that we have this in your code and we don't have to check this because this is a secret and we don't want to anything anyone to know that we we have this server that I can access with these credentials so what I can do is I'm going to declare and variable in variable environment variable so let me clear this and I can say export and I'm going to declare this as back slash URI equals and between quotes I'm going to paste the value that I'm so this is this is this is another way to declare this variable you could also move a new if you are going to have it this way you should have this in your path profile otherwise this this will be clean it up every time you close this that this terminal so maybe you want to have this in your bash profile so you don't have to enter this if you are going to use in variable the variable like this so I have that and I can now access that variable from here so I can say process that EMB Yuri and this is going to access this variable you could have yukl he'll like this is more secure but you could also have the string here just make sure that you don't check this file to do it so this is not compromised so we have our configuration and now we want to use that configuration here so let me close this and I can start I'm going to import this information so I mean I can say I'm going to destructive destructive variables and I'm going to say require and this is coming from the config file and what we have what we need to use here is the port so we don't need this variable anymore and we also want to import the mongol URL so this is the Hmong URL that we are going to be using and now let's connect the server to MongoDB for doing that I'm going to use Mongoose so I can say comes moon goose equals require and we are going to import Mongoose so we have Mongoose and we can say we are going to connect here and we can say Mongoose that connect and this has has mainly three three parameters the first one is going to read a URL so we have that you go URI and the next one is some confusion so I'm going to say use new path true use create index so this is the configuration that we are passing to connect to and I can say use unified the apology and this also learned to be true so here we are connecting to mu2 MongoDB and because this is a promise this is not going to happen right away I can then use them the net then the then and this has a callback that's going to be called when this is successful so if this connection is successful we are going to just say console that's log and we can say Mangal will be direct base is connected so we have we were checking if this is this happened and I can also catch the error because we could also meet passing some bad information so we are going to have an error here and I'm going to consult that log that error so we know what happened so we have our configuration now let's test is test if this is working so we should be able to connect to the database in this case I'm going just to run the server because I don't want to have all that web back of output so I can say npm run server and this is going to call our server and we can say that this is successful so we are now connected to MongoDB so this is the initial configuration we are going to first start working in the in the backend creating our roads and then we will be moving to the front end to to interact with that API so this is this is the configuration so far and let's move on okay now the first thing that I want to do here is I'm going to create a new folder called modules and I'm going to create a new model for MongoDB so this model is going to be called transaction this is this is the model that I want to create and this this will be for every single attempt that we have in our expenses tracker so it it could be a econ or or output so this will be called a transaction and I'm going to declare how this transaction should look like for doing that I'm going to require Mongoose and for Mongoose I'm going to use the schema and also to use module so these are some mature utilities that we can use to declare declare in this so I'm going to say cons transaction schema equals and this will be a new instance of scheme so we are creating a new instance of schema and this is going to have this is where we are going to have the schema definition so this is this is going to be an object and it's going to have two properties the first property is going to be the value so this is this will be the money that the user is entering is going to be type of number so it's going to be a number and it's also required required so if we don't pass this this will draw an arrow and we can say true so we have the value and another property that I want is to have the date so we know when this happens and I can say that that date is going to be type number and I can add some default so I wanted to be a number because it's easier to handle time stamps so a time stamp is a representation in number of in numbers of a date so forgetting a time stamp I can say I'm going to have this now variable and it's going to have new date we are using the JavaScript 8 object and we can from that we can have the time and this is going to give me gets the time value in milliseconds so we have the time stamp and this is what we are going to store and if they use and doesn't pass anything we are going to use the default that's going to be the current value so this is our schema now we need to declare the module so for doing that I can say transaction equals and we can use the model function and we need to pass the name of the module that's going to be transaction and we need to pass the schema so we are ready to edit the scheme and there we have it we have the model and I'm going to export this so it can be more so it can be used from outside so model that exports equals transaction transaction okay we have the claret or our model is mon module it's a really simple one we only have two properties but this is good enough for this project so now that I have my module I want to create a several folder called roads and this is where we are going to have all all all of our APL roads so I'm going to create the one for the transactions so I'm just called calling these transactions that is and this is where all the logic for the API am pons is going to be so for doing that I'm going to in sport it import so I can say I'm going to require and where I'm going to request from Express is an I want to use the router so we can have a new router and I'm also going to use the model and that we created so it's going to be transaction and we are going to require this from the other fall that we click created and there we have we have we have that we have or what we need and I'm going to create a new router so for doing that I can say router equals router so this will create a new router and we can define all of the endpoints that we need for this router so the first end point is going to be the route route one that we can retrieve all or all of our transactions so I'm going to say router that this should be lower case I'm going to say router depth gate and the first thing that we need to pass here is we need to pass what's what is the path that we are going to use in this case is going to be the root and and then we can call a we can we have a call back when this is invoked and for the callback we have the request and the response and this is just an arrow function that we are going to using and this is where all the logic is going to be so this is what we it the function that will be invoked when the user enters this this will try to access this path so we are going to use I think I think is another who is a wrapper for promises so we can have a synchronous code here and we are going to use a try-catch block so because this could either oh you have a good status or or a bad-ass tattoos if something wrong happens so I'm going to say combs transactions equals and we are going to await and because we declare transaction as a model so this is going to find all the values in the India database so this is this is going to make a call to our database and is going to find and because we didn't pass anything here is going to file find all the collections that we have for this model that is going this this also has all of our transactions so if we don't have any any transactions we are going to throw an error because this means that something is not correct and we can say throw new error it is going to be no transactions otherwise if everything is good we are going to sense to the user rest that sin and we can pass the first would want to pass the status declare a clear the status so this is going to be 200 it means that everything went correct and we are going to send some JSON to the client and the JSON is going to be the transactions so this is scaring the transactions for the database is checking even if there is no one is going to throw an error otherwise we have a 200 response with the transactions and for the error I'm going to say raise that status and this is going to have a 400 because it didn't want went well and we are going to send a message so the client notes what when we run and we are going to use the error that message so we are going to send this this message that we declare here if anything wrong get well run here so we have our gate endpoint now let's create the one that we are going to use to create new transactions so I can say router that post and I'm going to use the root of this folder again and because this is a post request I can use the root in the root path and again I also have this kind of callback that I can use and I also will be using an async function that has an arrow function so what's what's going to happen here so the things here are a little bit different we need to first we need to access them divide the body the body of the request so hopefully the users send us the right information and we say correct that body so this is going to read the body from the user and because we use it you use the the body parser this is already JSON that we can use and from here we want to access the properties that we define out here the value and the date so we can say value and they were just distracting the properties from the body so we have that and we can say comes new transaction so this is the new object that we are going to put in post into the database it's going to be new transaction and we are using the module and we can say and this is the JSON data object there that we are going to store so this is going to have the value and date so we have that and now let's try to save this to the database so for doing that I am also going to use a try-catch block here and I can say that way transaction equals and wait new transaction so this is the instance that we created and this has a property that is safe so this is going in this isn't a synchronous call and will be awaited and this would save the value to retirees if we don't have a transaction means that and because we are using the model and the schema this will be validated so if if the user passes any one data it will not be saved so we can save if there is no transaction it means that something something went wrong and we come for another error so we can I'm going to copy this and I can say there was an arrow saving - otherwise if everything was good we can say raise that status and this is going to have a status of 200 and we can just pass the Jason and the Jason is going to be the transaction so what the user saved so they know which what's the ID and all of that and if anything went wrong we can say status of 500 you means that it's a server error and we can say we can send the Jason and the Jason is going to have missed a message property that will have or error that message so we have our post endpoint an or gate endpoint so now that we declared that let's test this out to see if everything is working for doing that I'm going to start only the server for now oh there's there's another step that we are missing we declare or router but we are not using the router in the server so for doing that I'm going to first I'm going to export the every module that it's the program that expose equals router so we are exporting this router and I can use it here so for doing that I can say transactions transactions roads equals require and I'm going to require that file from the roads folder and I have the file here and what I want to do is after we connect to the database I'm going to up that use and I can what I'm going to do here is I'm going to declare a route path so because we have our paths here our route but we don't have that to be route in the general application I can say API transactions so this is the route path for that router and I can use the transactions roles here so I added that and we have the transactions that we will we will be calling in this URL so there's a couple of things that I want to add here that I didn't add before I want to use some meat missile words that we installed the first one that I want to use is course so I can say course includes require so this will allow me to access the API from the browser and I'm going to use course we have course the other one I want to use body parser so this will transfer any data to JSON that's coming so I can say in the body of course body parser equals require and this equals array parser and the last one is Morgan so I'm not sure if I am in Oregon and we have Morgan so this is going to check for every HTTP request and is going to log that to the user to do our application sorry so we can say Morgan and I'm going to use this middle words for doing the icons to say app that use and it's going to use course we have course the other middle word is going to be ad that use we are going to use body parser and the parser is going to be JSON and the other musical is going to be Morgan in for Morgan I'm going to pass a configuration that's going to be tiny so this is the log that we are going to be is not going to be that large so we have everything here and I think we're ready to start the server again so let me open open terminal and we can run the server okay the server is running MongoDB is connected so let's try this here so we have our hello world now we are going to try to access the transactions and we have an empty array because we didn't add any transactions here I'm using a get endpoint and we don't have any transaction so let me just post a new transaction so I have the same and I need to have the body here so the body is going to be a JSON of course and we need the value so the value is going to be it's a number it's going to be 12 and and they I also need a day oh I can pass it with Adam a date because we have a default value I can pass it without a day so let me check if this is working as you can see we have the date that is can generate advice server and we have our ID and we have our value and if we go back here we can see that we have an array with one single value so we have our API but we also need another another post endpoint we need to be able to delete a transaction so let's let's add that to the server so I'm going to and there we have our dogs we are logging everything and I'm going to close this and I'm going to my roads and I need another road here that's going to be router that delete so this the lid is going to have a param so we we need to use a parameter here that's going to be about a parameter that's going to be in the URL and it's going to be ID so this allows Express to identify that this is a parameter is a dynamic value and I can also use a synth and a sync function that has a request and also has a response and we are declaring the function and we can say try and also we can catch that if we have any error so the first thing that I want to do is I want to access the ID from the param from the parent so I can say cons ID and I'm structuring the structure on the right that params so we have this object that has all the params that the user is hab is passing and then we can access the IV and we can say now that we because this is going to be a synchronous we can say cons transaction equals transaction find by ID so we need we first need to access find that transaction to to see if the transaction actually exists in the database because they can say anything here so we are checking the transaction actually is in a database and if it's not we can say if it didn't found found any transaction we can just throw an error here that would say no transaction was fun so we are just throwing an error and if everything went well we can see where the status is going to have a status of 2,200 and we can say let's let's send the ID to the user so they know what they deleted and we are sending the ad otherwise we can catch the error and we can say status so this is going to have a 4 or 4 status because we didn't found anything and we can just send the JSON that's coming from the message that we have let's change this to error and that message okay we have we have our endpoint and because we are running we are running node motive was actually which was the application restarted and let's try this out so we can take this ID this is a baby that we have from the gate endpoint and I can use it this to pass it here and hopefully this will delete the transaction as as you can see this was successful and we have back or de ID that will of what we deleted if I go here and I try to access all the transactions what happened here so we have a vault here let me try that again we are deleting oh I know what's happening here so we are just fine in the then but we are not removing the transaction from the data from the database so this is just finding the individual transaction so for for removing we actually need to say remove equals oh wait and we are going to away the transaction that removes and this will remove the transaction because this is decent this is means this is using the muscle we can have this this method that will allow you to remove the value and if it's if we don't have any response here we can throw another error and this can say the there was a problem there was a problem until the earring a transaction okay now we are actually removing the value front from the database and this restart correctly are now let's try try this again and this should now works okay we have a problem here for a move transaction that for a move oh I can see now why because we are checking if this exists we want to check if it this does not exist that's when we are going to throw this error I will think that this was actually removed if we query they get the endpoint we should have an empty array as you can see and now let's test everything so this will have I don't know honey we have that and we can remove this from the database and now we have the ID and we have 200 and we shall have an empty array okay so we have our server ready is ready to be connected to as well so let's check that out next okay now let's move on to the client so I'm going to access the client folder and the first thing that I want to do here I'm going to make some change make some changes to the web by configuration so what I want to add here as I want to configure something for the dev server so this is the configuration that we have for the development server and I want to add a proxy a proxy here so what this proxy will do is every time this development server is going to add the API path so this is what our API is living we are actually going to pass this this request to a target that is going to be or where we have our or API so in this case is going to be HTTP slash slash local host in the port 3000 so this is this is where we are going to redirect all the calls that we have in our server when we use the API but because the server is running in the port 8080 we need to proxy that to this port so we have added that configuration and what I want to do now is I want to do some cleanup that we have here because we have an app by default and I'm just one want to delete this and because we don't need this so this is the or main we don't need this property and let's take a look what is happening here we are just importing or off component and we are time targeting that to the body so this is how in as well we do that in the main J's file we just import the file and we target that to the body and we are exporting that so it can be compiled we also have the public folder here and this is the index.html where the bundle is loaded and what I want to do here I'm going to change this to expenses tracker is the title I also want to remove the the favicon and I also want to remove this global CSS because we are not going to be using the CSS the a global CSS we are going to be using CSS framework for this so this this framework is a really nice one I really like it it's called bulma it's nice because we don't have any JavaScript here we only have CSS so this does not include any jQuery or anything like that function and for importing this we can use them this CDN so this is the link to the CDN and this is what we are going to be using today so we have some nice styles that we don't have to write and I'm also going to remove the lid this because we don't use it anymore okay we have to clean it up and we have a hello hello message here and let's now I'm right now I'm just running the server and I'm going to pass that in stop that and I want to run the server and the front end and at the same time so we are going to use or and around and this is going to execute but the front end and the back end are at the same time so as you can see this is running and we are serving the port 8080 so let me check that here and if we refer to that we have we have our hello message that will change it okay so this is going to be our main component for now and what I'm going to do now is i'm i also need another library so let me I am in the root of the project I'm going to see the into the client and I'm going to install Axios axel access will allows allow us to access the API really easy you could also use fetch for doing this but I'd like access because he has a very API so NPM install noxious death safe and make sure that you are in the client so you install this in the client not in the server so I'm installing Axios I'm going to restart the server because probably it needs to run again to have access and we have compiled everything so I have everything what I need and now let's move on to the component so instead components have three main parts so we have the script so this is or all of her JavaScript will be where we are going to write all of our JavaScript we also have the style tag and before this after this we can write any HTML markup we don't need to use any any special thought we can just write HTML here and it will be rendered so in the script part I'm going the first thing that I want is I want the input so the user can enter any transactions to the dome so for doing that I'm going to use up all my CSS all my CSS classes so let me go back here and if I go back to documentation I can see that we have some forms and the form that I want is one that has a select box in a bottom so let me go back here and this is the kind of kind of form that I want so I will just be copying this and use it in your template so let me go here and this is the part where I can paste this and I don't need and this is this is where we can write HTML if we go back to our application we can see that we have or what we what we wanted but this is looking to be so I'm going to add another HTML class that's going to be up and this is going to have all of application and I can also add the CSS balm a class called container and this would make sure that we are we are not that this is not to be actually this is still to wife so I'm going to add some custom styles and by default the Styles in this world are scoped so everything that I write here will only be applied to this component I can say that this is the CSS selector and I'm going to say I'm going to first earth as emerging so I can say for e pixels at the top in the bottom and the size will have an outer margin and I can say max width and the max width is going to be five thousand pixels because we don't want to do these to be that that that bigger now let's check how this looks a lot a lot better so let's change some things here so we are going to change the bottom so I don't want this to be an attack I can just use a baton baton tag both on tag and this is not going to be a transfer this is going to be a safe bottom in Bhutan and here we don't want these options we want to have a plus and a minus so this is how we want to how we want that these two look so if we go back this is this is looking nice and we have our HTML for that now I want to be able to add these transactions so let's let's start by having a variable I can close this for now so we want to find the value or this of this input this by the way it needs to be a number is going to be a number so this is where the user is going to enter the amount of money that they want to save and we for binding inputs in in Indians wealth we first need to declare a new variable so this is where the input the value of the input is going to be so we are declaring a value and in instead we only use we only use variables we don't have to use any use State or anything like that we'll just declare variables and what we need to do here is I'm going to reduce the vines keyword and what we are going to vine is the value so this is HTML property of this tag the value and what this is going to equal we need to you curly braces here so that this means that this content is dynamic and I'm going just to pass the input so this is telling as well that every time this input value changes this is going to be updated and for testing we can another to hear that and for binding Muriel's to the template I can only use I can use curly braces again and I can I'm going to display the input so this social change every time we change the value of the input so we have zero at the star and if I change this to twelve you can see that this is changing every time the value changes so that's how we are binding the value so we are winding the value but we also need to find and they transact they this the select input so for doing that I'm going to declare another variable and by the way we need to use let because this change are these variables I are going to change we cannot use cones so I'm going to say type of transaction and the first value is going to be the default and it's going to have a plus so it can be a plus or a minus if it's a plus it means that this income and if this a - it means that is that is an expense so I can have that and what I'm I want to do here is I want to bind this this variable to the Select so I can say fine it's the same so the value we value is a Dom property that this tag has and we can bind the type of transaction so every time this changes this value will be updated but we actually need to declare the value here so for doing that I'm going to say value and the value equals what the values that we are binding and this is plus and this is going to be minus for for testing this I'm going to do the same thing but now I'm going to buy the type of transaction here so every time we have we changed this this also changes and this is also work so we are binding the values of the input and this is pretty much what we need so far okay so the nest the Nets nothing next thing is going to be how we can load our transactions to the Dom how we can display the transactions in the Dom so the transactions are coming from the API and for for making calls to the API we are first we are going to import and what we need to import here is Axios because this is the tool that we are going to use to make API calls so we important actions and we also need another life cycle so a life cycle a function from as well so every one we want to call to the API once every everything on here has rendered so for doing that we can import from as well and what we want to import is the owned so we have two here with two life cycle values functions the one is destroy and another one is mount so the story will be called every time this component disappears from the DOM and unmount it will be every time everything renders to the screen so what we are going to do is when everything mounts mounts to the we are going to call another function that is a callback and we want to be this a synchronous so we can use a sink they think keyboard and what I'm going to do is I'm going to say cons data it comes equals so we are going to await and here is one where we use Axios before you can use also fetch so to make get get calls we can use access that ket and this is going this is where we are going to be using and what we want to call this API so this is the endpoint that we declare in our packing and be an API transactions transactions so this is how we can access this from the from the from the server and what access returns is an object that has the data so we're calling the data and we are destruction destruction dur from frontier response we also have another things here like status and another things but we are going only to use the the data and we need to assign this data to a variable to some kind of state so for doing that I'm going to say late transactions and at the beginning is going to be an empty array but after we call to the API we are going to replace that with our data from the server let's save that and for testing this I'm just going to have another property here that is going to be json dot stringify and we are going to stringify the transactions to see if this is working so I'm going to pass the transaction so we can render that to the Dom to see if this is working correctly so you can see that we have an empty array so this is because we deleted all of our transactions so let's add a new transaction with insomnia I'm going to add this transaction and I'm going to send we have the transaction if we refresh this we can see that now we have that we are we successfully called the API and are retrieving the transactions okay so we're having the transactions but we also need we might need to display this to the user in a different way because we don't want to pass some JSON here I'm going to delete these tags because we don't longer need this anymore and I'm going to have use a spell feature that's called we have logic blocks so a logic locks is a way to interact with data in the template and the block that we are going to use is the each block so this will interact with any array or object so what we want to interact with is the transactions array so we can say transactions for each transaction what we are going to do for is us we are going to declare a new a variable so we can access the transaction is easily so the transaction the name that we are going to give it is going to be transaction just like that and we need to code to close this so for closing we use this syntax and this means that this is closed so for each transaction we are going to use another ball Macias is component or CSS class so the class that we are going to use is called notification and this we for now we only have the and this is how we can bind here as which you see before transaction that value so for each transaction we are rendering this kind of leaf and we are displaying the value to the user so if we go back here we can see that this is currently working so we can have another one let's say theory and let's add one with this kind of and if we refresh this we have three of them because this is looping through that array and is creating I'm going just two other H are here so we have some division and the other thing that we need to do now is to be able to add new transactions through this input so for doing that I'm going to listen to the click event here in the Save button and for doing nothing as well we can say own click equals and here we are going to pass the function so the function is called is going to be called this function currently does not exist so we need to create that function and for doing that we'll just save function transaction and here's where we are going to have all the logic for doing that so for doing that we are just going to first declare a new variable and this is going to be the object that we are we need to pass to the server so as you know the this object has a date so we're going to pass the data from here and we are going to say the same as before new date get time and we are also going to pass the value and the value is going to be the input but we have a problem here because if we are having we are using we are declaring two types of transactions income and expenses so what happens if this this value now this type of transaction is an expense so what we are going to do is we are going to check for the type of transaction and we are going to say if this is equals to plus we are going to use a ternary operator so it is like saying if this is a plus we are going to use the input as it is but if it's not a plus it is a minus we are going to multiply the input by minus 1 so this will transfer this to negative and we know that this is an expense so we are declaring the transaction now we need to send this to the server so we can say Khan's response equals we are going to this this needs to be an a synchronous function and we are going to outweigh to access again access and for doing this we can use the post so we have the post method for access and what we are going to post these two the same to the same URL as before appiy transactions in but we need to send a body and for doing that we just pass this as a second parameter in access and what we need to pass is the transaction so this is what we are sending today to the vac once everything this is done we can change our current our current array because this is just pushing us left to the back end but we actually need to update this array so for doing that we can say transactions equal so with what another thing that we have to keep in mind with the spell is that we cannot use the push methods for example transactions that push because as well what it takes for changing values in the DOM is the equal operator so every time we want to change something we used we need to use the equal operator so we can say transactions equals and what we are going to do is we are going to have a new array that has the response that data so this is coming from the response is the same what we are passing but this now has the ID and I'm going to use the spray operator so this is going to spread all the previous transactions that we have in this array so this is just like just combining the response with a current erase and I also want to reset that to zero because we are just changing the value of the of the input so this is how we can add transactions now let's test it out test this out here so I'm just going to add a new transaction and let's check the developer console to see if we are making the API call so let me just add 12 and you can see that there we have it we have 12 and this was using the API call if i refresh this I shall have this machine is in the bottom but we are going to fix that soon for free now is in the world I also want to test if this is going to generate an expense so this should be - and we should have a - let's say - four so we have an expense and if I say I can say I can see that this is this is passing the - okay now that's working but we also need another thing so we need a way to delete every transaction in for doing that I'm going to use another function but we need we need to have some kind of bottom for doing that and I'm going to add this to the markup so we have the value but I also want to have a bottom and this bottom is going to have the glass deleted so this class comes from Bullman CSS and as you can see we have the econ by the folder and what we want to do here is add another another listener that's going to listen to the click event and when this is this is involved we're going to cut them call another function that this one's going to call remove transaction but we actually need to pass the value of which transaction we are going to remove so I'm going to declare this as a call but here know what is that's this all the time and I'm going to pass what I'm going to pass here is the transaction so this function knows which transaction we need to remove so we are listen to that but we have in the clarity's function yet so let's declare it now and it's going to be kind of similar we are going to have an Essene function function that's called remove transaction what we have here is a transaction and what we are going to do here is going we are going to make an API call to our backing so we're going to say cons response equals weight we are going to await to access that the lid and we need to pass so I'm going to use this kind of syntax that allows me to have variables key or I can just use suit like this and I can say API transactions and we are going to concatenate that with transaction that IV so this is coming from here and we are awaiting to that and as you remember we have a response as a B so we can say response data and what the server is sending is the ID of what remove it and we can say if if the ID of the response equals the trans the ID of the transaction so it means that this this what success we are going to remove that from the array and for doing that as you remember we are going to replace the value of the transactions array of this array we ever first replace that with a new value that's going to be like this so we are reading the transactions the transactions array and we are going to filter what we are going to filter is for every transaction we have a callback and what we want to filter is a right turn side shown highly okay okay I remember that is backslash IV so we are going to have it like this a transaction ID and this should be should be different of what of the transaction that we are passing so this is Kenny Ganic getting kind of ugly I'm going to use just the IV here because I don't like how this is looking so I can just use the IV here and what I'm going to do so I'm assigning that value but I also need to change the here distance and directly the IV so every time the users clicks I'm going to send the ID to the function that's going to read ID it's going to send the request with a V and if everything was on well I'm going to remove that from the array of the dome so let's now test this out so let's open this again and we should be making API calls to remove these values and we are removing the value but we are actually done removing this front from the down if we refresh this we can see that we have less values so let's see what's going on here oh I see that is data data that ID equals saving we are going to remove that from the server so this should be working now and you can see that we are removing so there's a way weird behavior here is that if we remove this from here is not sometimes it is not looking correctly is because we need to declare a key for each value so this will tell as well which position it should be removed so for doing that I'm going this is the way we can tell that to as well I'm going to read the transaction and I'm going to pass the IV so this is how we tell as well that this is going to be the key that's going to be used to identify every down value here so we have that and but there's a problem here that I don't like is that for every type we for every type of transaction we are having the same color and as you see so in the example we have different colors and I can do the following so in Wolman we have some some CSS classes as you can see that we can display so where we can dynamically change these classes so for example I can say so this means that I'm going to write JavaScript here and I can say transaction that value is greater and greater than zero if this is true it is me it means that this is an income so if this is true I'm going to have the his success class and if it's not true I'm going to have the is venture so because if it's not true it means that is it is expense and let's see if this is working so as you can see this is working correctly and I can say if this there's another problem here is that I have in this serial zero value that I don't want to have so for fixing that I can disable this Save button dynamically and now we are going to be using another is well feature that's called reactive assignments so I'm going to declare this value of all this going and I'm going to use this syntax disabled so leave out the variable and for the Claire in this variable I'm going to say if transactions that know if input equals zero so every time the input changes this value will be updated depending of the input so we want this valley's to be true every every time the input is equals zero and we are going to bind this property to our bottom so for doing that I can say disabled so this is a another dumb property and I'm going to pass a dynamic value and this is going to be the same as disabled so if this is true this is will also be true and as you can see this this is a shorthand that we have for saying the same thing if I save I shall have a disabled value because this is zero but if we have one this was enabled and I can test it again and we can see we also don't have don't want on the findeth so right now this is on the Fineman so I can use some JavaScript magic so I can just say input if there's not input so this will check as you know this could be a feature or convey a work but this will check if this is zero and also check if this is null or undefined because this is how JavaScript works so this is working and if we delete this also disabled body if we have other number this is enabled and now this is work okay so I don't really like how these notification Irish are showing and I'm going to use is light this is another polemic class and this is going to change a little bit this so it looks loose more clear so this is what we have so far okay what I want here is I want to have some kind of computer property that is computing the balance of of the in the income and the expenses and I'm going to use another reactivity statement so this one is going to call be called balance in what this balance is going to be is just the sum of all the values that we have for a for each transaction so for adding these values I can use the transactions I'm going I'm going to use if this met of this error method called reduce so what reduce does is takes every for every every every part of an array is going to have an accumulator that we can be using every interaction iteration of this loop so the first parameter is going to be the callback that we are receiving in the first the first the first parameter of this callback is the accumulator and the second one is going to be or array so in this in this case the transaction and the second parameter of the reduce function is the initial value so because we are computing this the initial value will be zero and then we can start adding through this through this value and this is what I'm going to do here so I can say accumulator so this is what will happen every interaction is going to return the accumulator and we are going to pass the transaction that value so this is the value that every transactions has and what we are doing here we are just compute this so we know which what what is the balance for display in these in the in the wealth inside I'm going to have another after this I'm going to have another notification not notification this is going to ask this yes as class and I'm going to have I'm going to use this value this valence value so I can just use it here and we shall have now other balance and you can see that this is adding and then subtracting this value so for example if I am going to add and I'm going to to have an an expense of the 32 this should be zero and there we have it we have zero and now if I remove any value from here it should compute that again so let me remove this and you can see that is is working let me just add another class here so it looks better I want to use a seam for class so it has it has a color in iOS items I am also going to use this is life class another class that I want is I want to Center it like what is inside so I'm going to let me save this and it not it was not safe and we have a blue and I'm going to use the Volm a CSS class here call has the X centered so this will Center or text okay so we just have the value but let me have some label so I would have something like balance and column and we have it like that and let me make this strong use the strong so we have this this stands out from the rest okay we have the balance now we need another way to compute the total the amount of income income that we have and also the amount of expenses so I'm going for doing that we are also going to be using another another reactivity si assignment so I'm just going to say income and this is going to do the same but in this case before before reducing I'm going to apply a filter to this array so I'm going to filter and what I'm going to filter it here I also have here the transaction and a code for each transaction and I want to filter because this is the income I want to filter the ones that I grow are greater than zero and this is going to give me that so I only have the income and for doing the expenses so I can say expenses and I can do the same thing here but in this case I'm going to have the ones that are are than zero so this one these ones are the expenses and because these ones have a negative value because plus against minus equals minus this will still work and I can I can use the plus operator so let me make use of that that means let me have some spaces here and what I'm going to do as a is I'm going to have this would my CSS class called colons and I can have two columns so I can have two columns I have two columns and what I want to add here is I want to add another another another card that has the values so this is going to be income and we are going to find they you come here and this is going to be the expenses and I'm going to find the expenses here let me save and now let's check and there we have it we have we don't there is something not working correctly here so let's check that out so we are filtering the ones there are great and greater greater than zero oh I see what's the issue here so we are comparing the entire object so that's why it is filtering everything we need to access the value of each transaction so I'm going to access the value and this now should work yep we have we are comparing the income and expenses and for this one I'm going to use the different classes of course so we can use in this one because it's the income I can use is success and here I'm going to use the ease danger so we have different colors there okay that's that looks better and this is main I think this is most that the most stuff I want to have for now for this way we can we can add more more values and this still works but I don't really like how we extract structure everything in here because we have everything in one big component maybe I want to have some component components so everything is more organized so I am going to do that now I'm going to create create a new folder called components and I'm going I'm going to have I think I'm going to have a component for its each transaction and I'm going to also have another component for each summary that we have here so we don't have to have all of these repeated so I'm going to create that the first component is going to be called transaction and we need to use this wealth extension and what I need here is I need is information so I'm just going to copy this and there we have it and that compiler is complaining because we don't have these values declared so I'm going to start adding that okay for doing that I can clear the script and I'm going to declare those variables transaction and I also need the remove transaction but I don't want this to be local from this component because this means that this can I will have to declare these variables here I actually want this to come from the outside as properties and for doing that as well as its syntax that we can use the export keyword so the sport keyword will tell as well that these properties are coming from the outside so we are going to pass these are as properties so now that this is not complaining anymore and what I want to do here is I'm going to import this component so I'm going to import transaction with uppercase T and I'm going to import this from components this is the folder that where we have our components and this is called transaction that is wealth so we now have the component imported for now we need to use it so we can use the component here so this is what we are replacing and we can say transaction and this component needs needs some properties so as you remember if we go back here we need the transaction and we need this phone so we are going to pass that so for doing that I'm going to say transaction this is the property equals transaction that's coming from here and I can just add that and we have this shorthand so every time I I saved actually this is converted to the to the shorthand that's why we are having that behavior and this is the same thing as as what I had before so the next thing that I want to pass is they remove transaction so this is the function the function that we declared here I'm going to this to pass this to the child so it can be used there and I can remove this and this should be working yeah it keeps working so another component that I want is I want to have generic component that can handles the violence that also can handles the income income and expenses this summary of this so I'm going to call these components summary summary card it's going to have the svelt extension and we can use this like this you this is this is what we need so we have the syntax but we are we need we need the value and we may also need to know which type of CSS class this is going to have so for doing that I'm going to say well I'm going to add my script tag and I'm going to declare so this would no longer be called balance this is going to be called now X because this is a property this is going to be called export get value equals so this is going to be called value and the initial value will be zero so we have a default property and I'm going to use this here so this is how we tells wealth that this is the solve the default value that we can have and I also want to have this more variable so this will be which type of card of summary card we are using so this can be balanced this can also be income or expenses the default one is going to be balanced okay we have that but we don't want to have this here hard-coded because this could be used in different ways so I can use another activity statement and say that the label is going what that label is going to look like is going to it's going to take the mouth and it's going to transfer this to uppercase because the mouth is in lowercase we want to transform this to uppercase and we can now display this to the user so we are going to pass a level here so we have the level but we also need the CSS class so for doing this we can have a function that's going to compute the CSS class and we can say function get CS CSS class and it's going to have the mode as a parameter and we can have a switch case statement so the key is going to be the mouth so we are testing the mouth in case if the case is balanced so we are going to return and the CSS class that we have for balances is uniform so we have that for balance but we also need this one for let's say income so for income we are going to have his tux success and there is one more that we are missing that is going to be expenses so if the kill if the mouth is expenses the CSS class is going to be is vanjor so we have our CSS classes we've with our function so now let's use this with a reactivity as statement we can say CSS class equals get CSS class and we are passing the mouth so we are passing this variable and this will be computed every time and we have the correct a correct class so now let me use that here so we don't Unger this meet this hard-coded and we can use the CSS class reactivity property so we have ready we have our component ready to be used so let me go back here and we can start using it so I'm going to import summary card from and we have this in components so meri carrot that svelt so this is a component and we can start using the component so the first place is going to be here and I can say summary card and we are using the component but remember that we have to pass some values we have to pass the value and we also have to pass the move and because this is the first one the mode is going to be we can pass this as the string is going to be balanced and we need to pass the value so the value is going to be the violence so we are passing the value and this should be working as you can see this is working so we can see that we there's something missing here we need to have this here so we can we finish there differentiate okay so let me just copy this and this is another component that we are going through to use here another instance of the component but this time this time is not going to be balanced it's going to be it's going to be the income and the value is going to be or income property and here we are going to use the expenses most and what we are going to pass here is the expenses property that we already computed so let me use that here expenses expenses so there is something wrong here okay now it crashes crashes before so we have our our balance or income or in our expenses and we are using just one component to make this happen so let me see if this keeps computed the value and it's working right now okay another nice feature that we can have with as well is that is that we have transitions by default so we don't have to use any kind of third-party library for doing transitions so let let's use that here so this this this component with and will enter and leave the zone because we are using the each clause so I'm going to import from spell slash transition and what I want to import is a transition called slide so this is the transition that I'm going to use in this transition we can for using this we can use a direct directive that as well has asked all transition transition so we can add this to any Dom element and we use column and then we can pass the transition here so this is the what we import and this is what we are using here so this this transition effect will be used every time this component leaves or enter the Dom so and as you can see it's really really simple to use and if we check back if we have another eat then we can see that this is sliding to the Dom so there we have it so we can also pass some properties here so let's say I want and if this has to be an object and can also be a function to have more configuration but let's use the object node so we can change the duration and we can say the duration of this animation is going to be a little bit slower it's going to last two seconds to 2,000 milliseconds that's 2 seconds so as you can see this is really really his low and we my don't don't want that so let me change that so 5 500 and that looks better okay so there's a couple of more things that I want to add to this to this application the first one is that if we don't have any transaction here I would like to display a message to the user and the other one is the item I am NOT sorting this and I'm not not on displaying any kind of information about the date because if I save this and I keep adding this if i refresh you can see that this is not showing up correctly this is because we are not sorting this information so again I'm going to use another weld reactivity statement and this is going going to be called swords transactions transactions equals and we are going to use the transactions of jet that we have here and what I'm going to do I am going to use the sword arrey arrey method and here we have two values the first and the second value and where I'm going to do here is I'm going to because as you remember the dates are numbers we can use this number so I'm going to subtract the be date for from the a that date so this is going to to show the the latest ones first and this is sort now let's use this in our template so we are right now where we are using the transactions object directly but we can actually use this variable so this is coin is now going to be using that variable that is sorting every transaction so we have there we have as you can see we have the correct order now so if we add that and we refresh with the show in this in the correct order so another thing that we have we might want to displace display fees today to the user the date so let's let me note that so I'm going to add this here and this is going to have an span property and a span tag and I can say new date and what we want to display here is the date that we have in the transaction so here we have the date in number and we are passing this to the constructor so we can we don't want to show to the user a number we can actually use this method call to look at a string and this is going to show the date in in a better way as you can see we have in a proper format and we have this for every element in our DOM and I don't like how this is looking so I'm going to add some classes this is going to be is size 7 so this is another CSS class by Bulmer and has I'm going to change the color for doing that I can use hash tags gray him I am also going to use a local class that I can use here so it's going to I'm going to use this tile back and I can say date so this is what I used here this has to start with about and I'm going to float this to the right so this should be looking better we have our date and is correctly showing in the right so let me have another thing here so what I will as I mentioned before what I want to do here is if the user does not have any transaction I want to show any kind of message so they can know because they are they don't have any balance or income or expenses so what I'm going to use now is another as well future earth is well we already use logic blocks but we are going to use now is call if if if blocks so I'm going to save if so this is how I declare a new if block if transactions I'm going to change for the length length is greater than 0 I'm going to display all of this and I can close this here and as you can see we are not showing anything but I want to you to show a message to the user so what I'm going to have here is I'm going to use the else so this is like an if else if this is not this is not true this is what is going to be rendered to the screen and I'm going to just have a notification class that's going to say add your first transaction so you can see that we now have this message so if we don't have any transaction we have that and now when I said this is gone and I now have this UI okay so the last thing here is that we are when we load it is for the first time we have an empty state and what I'm going to control that and I add some progress bar so you know that the user knows that that this is loading so for doing that I'm going just to have a loading flag that's going to be false and at the beginning when this is loading I'm going to say loading equals true so this will be true in one once this is fulfilled we are going to restore this variable to a false estate so we are controlling that and now I'm going to show in a progress bar so I'm going to create a new component called law loading and what this is going to have is going to it's just going to be up progress it's going to be a pro various dumb tag so this this tag is from the Dom but we can have some class so for example and it is in this class is coming from Bulmer so progress this is the class that we want to use is is a smile so it's not so much big and I'm also going to use the East info so it has some color in the max value is going to be 100 and this is going to be animated a when we use it so I'm going to again import this component and this component is called progress from progress and let me put it here so just to see how this is looking so I can I can I'm just going to use the component now this is not called progress this is called loading holding okay and you can see that we have this but we are going only going to show this to the user when this is loading so for doing that I'm going to this is a component and this is also going to be an if block if loading and we are closing if loading is true we are going to display this to the user so as you can see it's because our server is really fast this is not taking any time and that's why we don't see it but that should be shown if the user if the backend is loading and we also need to either add another property here so I don't want to show this every time because the as you can see this is also be shown every time we refresh we are seeing that and that's because we are just using an else statement here so we can use an else if and it's not floating and now this should not be shown as you can see we only have the progress bar and then we have the message there the last and final thing that I'm going to add to this application is that I want to have some kind of store management so this is actually Reina right now this is a really simple application but we can add a store statement a store management really state management global State management really simple with as well so let's see how we can do that so this storm stage store management means that we don't we maybe don't want to be passing this these variables for example this transaction this is this kind of or properties we don't want to pass these two to the components we are going to be reading this value from a centralized place and for doing that the only thing that we can do here is we can add an stores file and this is where all our stores are going to be so I can say import from this wealth / store so we have a special we have the store in this wealth library and what I'm going to use is the right oh right yeah well a store so this will means that the store is can be right it's going to be writable so what I want to save in the store is the transactions so we don't have to pass this to pay other components so I can say export and this is going this is because we are going to be using this from the outside export cons transactions equals writable and what we pass here is the initial value so the initial value as you remember is an empty array so now instead of breathing from this local variable I am going to use the store and for doing that I can just import from the stores and what I'm going to import is the transactions so we have that but in with on longer need this here so if we over here we have an error and that's what and this is because we the transactions is actually another object and the way we can use this is accidents accessing the of the properties of this data object for example we have this kind of properties that said subscribe and update so set allows us to write a new value subscribe was allowed due to reset the values subscribe is for listening to reading the value and update and we could be using this but actually as well has a really nice way of using this store resisters is by using dollar sign in in front of every variable that we are reading for third from the store so what this is telling us is the spell compiler is going to generate that subscribe method and after that we can read directly from this variable so in that way we can easily read that value so I'm going to change all the reference of transactions here we have another reference of transactions and here we are assigning a new value to to the store here we have another we are we are pushing left of the transactions array so this is all the places that I need to change to update the value make sure that you have all the transactions reference I am missing one here this you know this one should not be like that because it's coming from here and let me see if we have another one seems that we have covered everything so we we don't want to change this one of course okay we also need to add this here and that should be it so now we are reading this from the store and if I reload this this should be working as before yeah and this is work and we can relay it with cannot we can reef from the store okay so we are having this here but we can actually have these property values in another place in a centralized place so we don't have to declare this here we can also declare these variables here so I'm just going to copy this is all of this computer with a with the exception of the disable this one we want to give locally and when I'm going to do here is I'm going to export Const okay let me let me clear this and what we are going to use let me just remove all of this this is co gaussian confusion so what I'm going to use here is the very life store so this can be derive from another store and what I want to derive here is then solve the transactions is going to have the derived we're going to use the derive we first need to pass the store so the store is transactions and then we have a callback with a current value so I can say value and this is where I can use what I have here so value that sort and we are going to sort through that value okay we have that now we need to add another one for the balance explore accounts balance equals derived and what we are going to pass here again the transactions and we can use the value okay with even use that correctly here so we need to have the value as a function and this is what we are going to be returning at the same here I need to have this as a function and I can use the value here the the same method we had here so this is what I'm going to it on I'm going to reduce the value okay so we are reducing the value and we are computing the balance here let's copy this and I add two more to once more so this one is going to be called income and this one is going to be called expenses and what we need here as you remember we need to filter we need to further fare first and for each transaction we are going to filter the ones that the ones that are greater than zero and what we want to filter here is here is the one third less than zero so we have the same as before but now we are using this store and instead of having all of this here I'm going to be using the value from the store so the first place that I want to use is sorted let me see if I sorted transaction so we can sort of transactions and we can use that here we the dollar sign okay and I I am going to also import the income and expenses and the violence from there and I'm going to use that here with the dollar sign so we have centralized everything order in from all of our stores in one place now if I go back you can see that this work works as before the only thing that has changed is that now we have our information we have in these stores and we can use everything from there with this dollar sign so this is how we can implement stores in into as well is really really simple we don't we only need to use these in tax and we can also write this this in tax and we can write and read through the stores okay now it's time to deploy the application to the Internet so we are going to do a couple of things before deploying to Heroku so the first thing that I'm going to do is I'm going back to the service yes file and what I want what I want to do here is that I don't I want to serve static files every time the user enters or URL because right now we are only serving the APA API endpoints so we want to serve or as well application and for doing that I'm going to use a meat meter work by Express that first I'm going to check if we are in production so I can check that checking the env variable called node EMB and if this variable equals production that means that we are in production we are going to be serving the static files so for doing that I'm going to use a mutual work of express that static and we need to have the root of the root that we want to serve so as we as you remember we have everything here in the public folder in the client so this is where uptick or application is going to be so we can say client that is large public so this is what we want to have a static files and when the user is trying to access any or of or any Ain and any any route we are going to save our quest response and we are going - response that that send sorry we don't have we have just read that send fire so we are going to be serving the index.html so for resolving that file I'm going to use path from the node library so but and this is going to have the correct path and I'm going to say but that resolved and it's going to have the your name the current folder name and then we are going to have the client and then we are going to have public and the file that we want to send is the index dot HTML so this is this is going to be to be called in when the user tries to enter any any path in in your application make sure that you deleted the previous hello world end point that we have with on longer need that we are going to be using this instead and of course we still need or API endpoints and routes so that's what we need here so now we also need to have some scripts so hero who needs some scripts scripts to run so the first script that Hiroko needs is the start script and this is going to only use note for running and what we are going to be running is the server that js5 so this is going to be invoke when our application run for run in the server and we need another another script that's going to be called build so this script is going to be called when we are deploying or application to Heroku and this script what is going to do is going to build the client so for doing that if we go back to here to the packaging of the client we can see that we have a bill a bill the script that's going to to build our applications so we can say npm run so the first thing that we want to do is install because it will this will not be installed because it's by default so we need to install the client libraries and i'm going to use the prefix so it knows that this needs to be run in the client and when this is installed we're going to run NPM round build and again we need to run this in the client this is really important so we are building our application in now now now let's test if this is working so make sure that you are not in the client folder we I'm going to go back and now I am in the root of the project and I'm going to run NPM build in the in the package.json of the server and this should be doing installing our dependencies and then building our application so you can see that it worked correctly so now that we have set up everything let's jump into here ok ok so I am in the Kuroko landing page and what I want to do here what you need to do here is sign up for a new account if you haven't already so you will need to follow all of these steps I'm not going to do that because I already created an account but you should be able to do it okay once you have created your account you will have this scan of the screen so we are going to add a new application makes make sure that you pick the correct the correct language that's in your case nodejs when you sign up and this is going to create a new application for nodejs so the app name is going to be spelt expenses through TRICARE and this is going to to check if this over is available you might need to use a different URL and where the region is going to be United States for now and let's create this application so here we have let me make this bigger we have some instructions for deploying our application so the first thing that you will need is you will need a hero Kushi Ally so this open this and you can see that we have some installers or you can also use real or in Windows the installers I am going to do I'm not going to do this because I already read it install it this and the next thing that you want to do is logging into your account so let's go back here I'm going to clear this and make it bigger so let's first that we have karoku in our system so we can say hero clue bit version and we have Heroku so I'm going to log out of my account because I am logging in a different account and I'm I'm now going to login so I'm going to just copy this and I'm going to logging so press any key to open a browser and this will open a browser for you where you can log in logging into your account you can close the space and return to your CLI issue Alvin you shall be now logged in and you can see that we are now logged in our account once we have that let's see we also need to City into the project we have to get in it create make sure that you have git installed in your computer before doing this and then we can add karach so this is very important make sure that you are in the root of the project not in the client so now we can initialize initialize a new git repository before doing that I'm going to add a new file called git ignore get ignore and we can see that we already have that but if you don't have it please create create this file and what we want to have here is the node modules folder because we don't have we don't want to check the node modules to get because it's really big and there's a lot of files that there that doesn't belong to get so make sure that you have that and what once you have that file in in the server the client already have it because it came it came out with a boilerplate so we can say git init so we we have initialized orchid repository and the next thing that I want to do is I'm going to at the remote you just will have a different command here depending on the name that you gave it so I'm going to run this command here aku get remote spelled and this is going to set the remote now we need to push to to this remote so first I'm going to add all of my stages file staged files so I can stage my files and now I can make a commit Keith commit slash a.m. for message and we can save first comment and we can close this okay we have a claim 3 a clean tree now now before trying to push this we actually need one more step let me clear this out as you remember we are using this URI in the locally so what we need to do here is to push this and bury this variable to Heroku and for doing that we can say hero comfy said y equals and I'm going to paste the value that I have here so make sure that you have your own URI that you created before so this is only if you don't have the value here if you have the value in an environment variable and this what is going to do is going to create this variable in here okay I think we have to use quotes here okay you need to use be careful that you need to use quotes for this variable and you can see that it was created with this value so we have our URL in in the server and other the other thing that we want to have is we want to have another variable to be able to install like the client in the server so if if we go back here to the client to the package station you can see that we have a lot of depth dependencies that we need to build our application and if we don't if we don't specify this variable your application will not be served we will not be built so this variable is going to be the same we need their help cook config set it's going to be NPM production and p.m. graphic production equals false so this this is going to to add this variable and this is important because if we don't at least your dev dependencies will not be installed in the server so we need to use two what does that and you can see that now we have that in in the moment we can check that here so if we go back if we go here we can see that we have the variables set okay now is the moment to push or changes so we already committed so we now need to push this to the server so for doing that we are going to use give Porsche Heroku and this is the name of the origin and this what we want to push is master so this is going to push all of our changes to Europe okay so now is installing all the dependencies in the server so now is building is building the application it first install it the dependencies and now is building so not takes too much time now it builds application the application is built and we can see that it seems that everything went well and there is we have released the application load application so let's check if this is working let's open a new URL and you will have our application so there we have it we have a replication in the Internet and you can change this to any domain that you want but we are going to be using this one and you can see that this is working we can add a new value and is this is pushing to our API and if we refresh this we can see that this is this is still there and we can also delete everything you so much for following these course hope you find hopefully you find it find it useful and if you like this content please make sure to subscribe to the channel so we can have more content like this and I will see you in the next time

Channel: Esteban Codes

Views: 22,247

Keywords:

Id: X6J41F2DadQ

Length: 163min 5sec (9785 seconds)

Published: Sat May 23 2020