Technology Stack Overview Welcome to this module on Technology Stack Overview. As stated in the previous module, here in this module, we'll start out by looking at a roadmap of sorts, the architectural approach we will take for this project. At a high level, we will be separating the user interface components from our back-end services such as our RESTful API, which will be responsible solely for getting data from and sending data to the database and, of course, to our front-end components. With the UI layer, let's just say being dumb, this provides us with a good degree of separation of concerns. This is important and will make more sense at the end of the course when we explore some optional databases and frameworks. So we know we're going to separate out the user interface project from our back-end API and data access project. We'll call these Client and Server for now. On the Client project, we will set up routes and components and manage application state. As we move forward in the course, you'll see how we will eventually have these things set up in such a way that our state management services will be responsible for making API calls to the API server. Through our state management services, we will communicate to our Server layer, the API, to send and retrieve data. Now let's take a look at what libraries, frameworks, and tools we will use in each of these projects.
Setting Up the Demo Application Welcome to this module on setting up the demo application. This is where we get started laying the foundation for the demo application by installing the core libraries and frameworks mentioned in the previous module. We'll also explore the baseline architecture that we will use throughout the remainder of this course as we build our demo project together.
Designing the Data Layer with MongoDB and Mongoose Welcome to this module on Designing the Data Layer with MongoDB and Mongoose. So should we begin our project by developing most or all of the UI components first and develop the database to support that front end? Or should we develop the database and the data access layer first? let's be really clear here. The correct answer to these questions is very dependent upon your project and your situation. For the purposes of this course, let's follow these high-level principles. For our client, is there more of a concern to have a specific feature in the user interface? Will the data we need to obtain and store simply support the front end, or is the client more specific and concerned about the data that they need from the application? Will they be happy, generally speaking, with the design we come up with, so long as it meets the business data requirements and rules? I believe the case can be made here, for our demo project anyway, that we have more specifics about the data the client needs entered in and reported on, and that they will most likely be happy with the front-end user experience we provide them so long as we fulfill their business requirements. So with that in mind, for this course and for the demo project, we will be developing our database and the data access layer first. Then we will move into the UI layer and get our hands into some Vue. js code.
Developing the API with Node and Express Welcome to this module on Developing the API with Node. js and Express. js. As we mentioned in the previous module, we have decided to separate out the interface, our client project, from the API, or server project. That provides us with a good degree of separation of concerns. We'll be focusing on building out the API endpoints in this section of the course and build upon the foundation we laid out for the server project in the previous module when we developed the Mongoose schemas for users and transactions. Let's review those real quick. Our user schema has the fields first, last, email, and password, each of type String, and we've said that they are required. IsActive is of type Boolean, and we've set a default to true. The audit field of createdOn is of type Date with a default value of Date. now. And we build the user model from the userSchema and export that here. Next, we'll do a quick review of the transactionSchema. Besides all of the other fields here, make note of the userId field, which is of type mongoose. SchemaTypes. ObjectId. In the relational database world, you could think of this as a foreign key relationship here. We'll be storing the userId from the user model that we just looked at for each transaction document we send to MongoDB. And just like we did with the user model, we will pass in the transactionSchema here to build the Mongoose model transaction, which we then export.
Manage Application State with Vuex Welcome to this module on managing our application state with Vuex. Before we dive into a discussion of Vuex, let's rewind just a little here and talk about application state management in Vue. js in general. In the previous module, we built out the Login single-file component and reviewed Home, Transactions, and EditTransactions. Those components have three sections, template, script, and style. Let's focus on the script block right now. The script block contains a number of options; a lot of those are listed here, such as name, data, props and PropsData, computed property, methods, watchers, and lifecycle hooks. Since we're talking about application state in this module, we'll spend most of our time talking about the data function in this clip, but it's good to be aware of the other options available to us within the script block. Here is simple example of a data function within a Vue component. We saw this in the Login component in the previous module. Just keep in mind again that data is a function and returns an object. This object is our Vue model, where we currently keep track of information that we wish or need our user interface to react with. And here is the same example using an arrow function, which would look like this. It's really up to you how you go about this. The key thing to remember is that data must be a function, and we need that function to return our model, the data we're binding to and working with in our application. So the script block and in particular, options such as the data function and computed properties, are where we handle state at the local, or component, level.
Getting Data from the API Welcome to this module on Getting Data from the API. We have the data layer with MongoDB and Mongoose started, we've set up our API server using Node and Express, and we have laid out a decent foundation for the user interface side of things with Vue and Vuetify. We have been working with dummy data for the most part up until now, but it's time to start getting real, live data from the database. The promised-based HTTP client we'll be using to communicate with our API endpoints is axios. Information on axios can be found at the following URL. Let's go take a quick look at that right now. Here on the axios GitHub website, you'll find information on basic features, which browsers are known to be supported, and of course, installation instructions. Next, you'll see examples for performing a GET request, a POST request, as well as concurrent requests. The detailed part of the documentation that you may find the need to reference the most is here, the axios API docs. Let's go ahead and get axios installed now. Open a terminal, and in the client project folder, enter yarn add axios, or if you're using npm, then of course you can use npm install axios. After a minute or so, axios and the related dependencies should be installed. We can open up Visual Studio Code real quick to confirm, looking in the package. json file, and here we have axios. We should be ready to use axios to communicate with our API now.
Finalizing the Demo Application Welcome to this module on Finalizing our MVP Demo Application. Let's start by doing a review of the business requirements that we've gotten working so far. Users are required to log in, and we're now getting that information from the database. Once logged in, users need to view the current month's transactions, and we need to give them a way to navigate back to previous months, as well as return to the current month. We are calculating and showing a running balance. And we're able to search within our current month's transaction data. We have a few more development tasks that need to be done before we can present this MVP demo application to our fictitious client. First off, we currently are not able to enter in new transactions. The EditTransactions. vue component was added earlier, but now we need to finalize that, including wiring up to the Vuex store to make the necessary API calls. As part of that, we need to make sure we're also limiting the transaction types to the given selection list. Next, we need to give the user the ability to enter in longer notes for a given transaction record. A few development items that would be nice to have before we present are, give the user the ability to edit their user profile. A good place to put this would be in the application's header. As mentioned earlier in the course, we can do this in a HeaderActions. vue component. Also, earlier in the course, we used a predefined template when we added Vuetify to the project. That gave us a nice, collapsible left-navigation menu. Let's add some functionality to this as well.
Summary and Other Options Welcome to the summary module where we look at other options. Obviously in this course we utilized a stack of libraries and frameworks we've lovingly called the VENoM stack. Since the primary focus was on Vue. js and supporting libraries like Vuex, you probably do not have an issue with the top part of this stack, including Node and Express, but perhaps you need other options for your project with regards to the database or other supporting libraries. That's what we'll close out this course discussing.