title
Node.js & Express API | Expense Tracker - Part 2 (MERN)

description
In this video we will take the react app from the last video and make it a full stack MERN app by adding a backend API with Express and MongoDB Original React Version: https://github.com/bradtraversy/expense-tracker-react MERN Version: https://github.com/bradtraversy/expense-tracker-mern 💖 Become a Patron: Show support & get perks! http://www.patreon.com/traversymedia Website & Udemy Course Links: https://www.traversymedia.com Follow Traversy Media: https://www.twitter.com/traversymedia https://www.instagram.com/traversymedia https://www.facebook.com/traversymedia

detail
{'title': 'Node.js & Express API | Expense Tracker - Part 2 (MERN)', 'heatmap': [{'end': 174.974, 'start': 127.27, 'weight': 0.912}, {'end': 701.293, 'start': 650.982, 'weight': 0.718}, {'end': 787.431, 'start': 736.601, 'weight': 0.849}, {'end': 1319.292, 'start': 1132.208, 'weight': 0.711}, {'end': 1571.393, 'start': 1483.797, 'weight': 0.885}, {'end': 1791.519, 'start': 1699.751, 'weight': 0.778}, {'end': 1971.845, 'start': 1830.626, 'weight': 0.732}, {'end': 2706.936, 'start': 2569.309, 'weight': 0.713}, {'end': 2843.135, 'start': 2742.162, 'weight': 0.893}, {'end': 3489.056, 'start': 3436.826, 'weight': 0.829}], 'summary': "Tutorial series 'node.js & express api | expense tracker - part 2 (mern)' covers integrating a backend api for an expense tracker, setting up server dependencies and basic express server, handling routes, controllers, and transactions, setting up mongodb, api controller setup and data requests handling, backend and react server integration, state updates and api request handling, implementing morgan for backend logging, integrating react app with the database, and creating a full stack app with database, preparing for production deployment.", 'chapters': [{'end': 214.956, 'segs': [{'end': 37.677, 'src': 'embed', 'start': 7.168, 'weight': 0, 'content': [{'end': 8.068, 'text': "Hey, what's going on, guys?", 'start': 7.168, 'duration': 0.9}, {'end': 16.77, 'text': 'So the other day we did a project where we took a vanilla JavaScript expense tracker and turned it into a react app that uses hooks and context.', 'start': 8.128, 'duration': 8.642}, {'end': 22.152, 'text': 'So in this video, what I want to do is take it a step further and add a back end API for it.', 'start': 17.27, 'duration': 4.882}, {'end': 27.013, 'text': 'So I would suggest watching that video first, or at least taking a look at the project,', 'start': 22.712, 'duration': 4.301}, {'end': 29.273, 'text': "because I'm not going to go over the code that we've already wrote.", 'start': 27.013, 'duration': 2.26}, {'end': 32.354, 'text': 'So basically we have I have the react app up and running.', 'start': 29.853, 'duration': 2.501}, {'end': 36.116, 'text': 'And we can add either income or expense.', 'start': 32.914, 'duration': 3.202}, {'end': 37.677, 'text': 'So we can add a transaction.', 'start': 36.356, 'duration': 1.321}], 'summary': 'Converted vanilla js expense tracker to react app using hooks and context, now adding a backend api for transactions.', 'duration': 30.509, 'max_score': 7.168, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT07168.jpg'}, {'end': 174.974, 'src': 'heatmap', 'start': 70.413, 'weight': 1, 'content': [{'end': 73.975, 'text': 'so that we can store the transactions and fetch them from our backend.', 'start': 70.413, 'duration': 3.562}, {'end': 80.841, 'text': "so this will be quite a long video, because we're going to build an entire api from scratch and then we of course have, to you know,", 'start': 74.475, 'duration': 6.366}, {'end': 84.104, 'text': 'hook it into the react application itself.', 'start': 80.841, 'duration': 3.263}, {'end': 93.853, 'text': 'um, and then this is the repository right here with the, the, the one we, the react application we built in the last video, expense tracker, react.', 'start': 84.104, 'duration': 9.749}, {'end': 99.277, 'text': "i will have the full stack version that we're going to build now, but it will be called expense tracker mern.", 'start': 93.853, 'duration': 5.424}, {'end': 100.898, 'text': 'i want to keep the two separate.', 'start': 99.277, 'duration': 1.621}, {'end': 107.063, 'text': "so if you didn't follow along with that project, you can just clone this and then we can get started.", 'start': 100.898, 'duration': 6.165}, {'end': 110.826, 'text': 'so i have it open here in vs code and you can see i have it running.', 'start': 107.063, 'duration': 3.763}, {'end': 119.046, 'text': "so i'm just going to stop it, and the first thing i want to do is take all of the React stuff and put it into a folder called client.", 'start': 110.826, 'duration': 8.22}, {'end': 125.489, 'text': "So I'm going to create a new folder called client, and I'm going to take everything here and put it in there.", 'start': 119.066, 'duration': 6.423}, {'end': 127.21, 'text': 'All right.', 'start': 125.509, 'duration': 1.701}, {'end': 134.074, 'text': 'And then our server stuff, all of our express controllers and models and stuff like that will go in the root here.', 'start': 127.27, 'duration': 6.804}, {'end': 138.577, 'text': "So first thing we'll do in the root is run NPM init.", 'start': 134.975, 'duration': 3.602}, {'end': 142.938, 'text': "and let's see description.", 'start': 141.577, 'duration': 1.361}, {'end': 151.405, 'text': "we'll say back end for expense tracker.", 'start': 142.938, 'duration': 8.467}, {'end': 161.754, 'text': "the entry point i'm going to call server.js and if you want, you can put your own name here and we'll say mit for the license.", 'start': 151.405, 'duration': 10.349}, {'end': 165.232, 'text': 'OK, so now we have a package.json in our server.', 'start': 162.631, 'duration': 2.601}, {'end': 169.132, 'text': 'not to be confused with the package.json in the react in the client.', 'start': 165.232, 'duration': 3.9}, {'end': 172.813, 'text': "And now we want to install our dependencies that we're going to be using.", 'start': 169.913, 'duration': 2.9}, {'end': 174.974, 'text': "So let's say NPM install.", 'start': 173.313, 'duration': 1.661}], 'summary': 'Building a full-stack expense tracker mern app with separate react and backend folders', 'duration': 98.719, 'max_score': 70.413, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT070413.jpg'}, {'end': 222.192, 'src': 'embed', 'start': 195.601, 'weight': 4, 'content': [{'end': 201.926, 'text': "So Mongoose is an object data map or basically it's a layer that we can use to interact with our database.", 'start': 195.601, 'duration': 6.325}, {'end': 207.37, 'text': 'We can create a model for our transactions and we can make queries to our database.', 'start': 202.266, 'duration': 5.104}, {'end': 209.792, 'text': "And we'll set up our database in a little bit.", 'start': 208.011, 'duration': 1.781}, {'end': 214.956, 'text': "We're going to be using MongoDB Atlas, which is basically a cloud version of MongoDB.", 'start': 209.832, 'duration': 5.124}, {'end': 222.192, 'text': "So we're also going to install colors, which is just a small module to have colored text in the console.", 'start': 215.97, 'duration': 6.222}], 'summary': 'Using mongoose to interact with database, setting up mongodb atlas, and installing colors module.', 'duration': 26.591, 'max_score': 195.601, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT0195601.jpg'}], 'start': 7.168, 'title': 'Integrating backend api for expense tracker', 'summary': "Covers integrating a backend api with node, express, and mongodb to store and manage transactions in a react expense tracker app using hooks and context. it also provides guidance on building an entire api from scratch to store and fetch transactions, integrating it into a react application, and naming the project 'expense tracker mern'. additionally, it includes setting up the backend for an expense tracker, organizing the react code, creating a package.json file with specified dependencies, and introducing mongoose as a tool for interacting with the database.", 'chapters': [{'end': 70.413, 'start': 7.168, 'title': 'Adding backend api to expense tracker', 'summary': 'Covers the process of integrating a backend api with node, express, and mongodb to store and manage transactions in a react expense tracker app that uses hooks and context.', 'duration': 63.245, 'highlights': ['The chapter demonstrates the transformation of a vanilla JavaScript expense tracker into a React app using hooks and context, before further enhancing it with a backend API using Node, Express, and MongoDB.', 'The backend API will enable the storage and management of transactions, allowing the addition of income or expenses, with the ability to view the calculated changes and persist data even after reloading.', 'The video recommends familiarity with the previous project or video to understand the existing code, as the focus is on integrating the backend API and not revisiting the previously written code.', 'The backend will be implemented using Node and Express, with MongoDB as the database for storing transaction data.']}, {'end': 110.826, 'start': 70.413, 'title': 'Building expense tracker mern api', 'summary': "Covers building an entire api from scratch to store and fetch transactions, integrating it into a react application, and naming the project 'expense tracker mern'. the video is a part of a series and provides guidance on cloning the repository to follow along with the project.", 'duration': 40.413, 'highlights': ['The video covers building an entire API from scratch to store and fetch transactions, and integrating it into a React application.', "The project is named 'Expense Tracker MERN' and is separate from the previous version.", 'Instructions are provided for cloning the repository to begin the project.']}, {'end': 214.956, 'start': 110.826, 'title': 'Setting up backend for expense tracker', 'summary': 'Covers setting up the backend for an expense tracker, including organizing the react code, creating a package.json file with specified dependencies, and introducing mongoose as a tool for interacting with the database, with a recommendation to watch the node.js and express crash courses.', 'duration': 104.13, 'highlights': ['Introducing Mongoose as an object data mapper for interacting with the database, enabling the creation of models for transactions and database queries. Mongoose is introduced as a tool for interacting with the database.', "Organizing the React code by creating a new folder called 'client' and placing all React-related files within it. The React code is organized by creating a new folder called 'client'.", "Creating a package.json file in the server root, specifying the description as 'back end for expense tracker', the entry point as 'server.js', and the license as 'mit'. A package.json file is created in the server root with specified details."]}], 'duration': 207.788, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT07168.jpg', 'highlights': ['The chapter demonstrates transforming a vanilla JavaScript expense tracker into a React app using hooks and context, and enhancing it with a backend API using Node, Express, and MongoDB.', 'The backend API enables storage and management of transactions, allowing addition of income or expenses, with the ability to view calculated changes and persist data even after reloading.', "The video covers building an entire API from scratch to store and fetch transactions, and integrating it into a React application, named 'Expense Tracker MERN'.", 'Instructions are provided for cloning the repository to begin the project.', 'Introducing Mongoose as an object data mapper for interacting with the database, enabling the creation of models for transactions and database queries.', "Organizing the React code by creating a new folder called 'client' and placing all React-related files within it.", "Creating a package.json file in the server root, specifying the description as 'back end for expense tracker', the entry point as 'server.js', and the license as 'mit'."]}, {'end': 588.493, 'segs': [{'end': 270.477, 'src': 'embed', 'start': 241.411, 'weight': 0, 'content': [{'end': 244.011, 'text': 'Now, we do have two dev dependencies to install.', 'start': 241.411, 'duration': 2.6}, {'end': 247.372, 'text': "So let's say NPM install dash uppercase D.", 'start': 244.071, 'duration': 3.301}, {'end': 252.033, 'text': 'We want node mon, which will allow us to constantly run our server without having to restart it.', 'start': 247.372, 'duration': 4.661}, {'end': 253.574, 'text': 'And then concurrently.', 'start': 252.474, 'duration': 1.1}, {'end': 261.555, 'text': 'And what concurrently will do is it will allow us to run our back end server on a port.', 'start': 253.594, 'duration': 7.961}, {'end': 265.557, 'text': "We're going to use 5000 and also our react dev server.", 'start': 261.796, 'duration': 3.761}, {'end': 270.477, 'text': 'on another port on 3000 at the same time with one single NPM script.', 'start': 266.092, 'duration': 4.385}], 'summary': 'Install two dev dependencies: node mon and concurrently to run servers on ports 5000 and 3000 simultaneously.', 'duration': 29.066, 'max_score': 241.411, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT0241411.jpg'}, {'end': 318.023, 'src': 'embed', 'start': 291.793, 'weight': 1, 'content': [{'end': 295.654, 'text': "And that's going to run node mon, which will just constantly watch it.", 'start': 291.793, 'duration': 3.861}, {'end': 297.175, 'text': 'So node mon server.', 'start': 295.774, 'duration': 1.401}, {'end': 302.577, 'text': "And the reason I'm putting server is because the name of the file, the entry point is going to be server.js.", 'start': 297.895, 'duration': 4.682}, {'end': 305.678, 'text': "So let's save this and we should be all set.", 'start': 303.377, 'duration': 2.301}, {'end': 309.94, 'text': "So we'll create our server.js.", 'start': 306.658, 'duration': 3.282}, {'end': 316.242, 'text': "And we'll start off just by creating just a regular express simple server.", 'start': 311.46, 'duration': 4.782}, {'end': 318.023, 'text': "So let's say const express.", 'start': 316.362, 'duration': 1.661}], 'summary': 'Setting up a server using node.js and express for constant monitoring', 'duration': 26.23, 'max_score': 291.793, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT0291793.jpg'}, {'end': 400.756, 'src': 'embed', 'start': 343.817, 'weight': 2, 'content': [{'end': 350.801, 'text': 'so dot env just allows us to create global variables for like our ports and the, the database, url stuff like that.', 'start': 343.817, 'duration': 6.984}, {'end': 353.823, 'text': "okay, so we'll bring that in.", 'start': 350.801, 'duration': 3.022}, {'end': 357.625, 'text': "and let's bring in colors, which will allow us to have colors in our console.", 'start': 353.823, 'duration': 3.802}, {'end': 359.005, 'text': "and this you obviously don't need.", 'start': 357.625, 'duration': 1.38}, {'end': 363.728, 'text': "this, it's just something i'm adding extra and morgan as well.", 'start': 359.005, 'duration': 4.723}, {'end': 365.229, 'text': 'we want to do our logging.', 'start': 363.728, 'duration': 1.501}, {'end': 371.987, 'text': 'okay, so we have our dependencies.', 'start': 369.306, 'duration': 2.681}, {'end': 377.489, 'text': 'we have to initialize our express app.', 'start': 371.987, 'duration': 5.502}, {'end': 384.452, 'text': "so we just want to set a variable of app to express and for now i'm just going to create a just a simple route right in the file.", 'start': 377.489, 'duration': 6.963}, {'end': 385.993, 'text': 'so say app.get.', 'start': 384.452, 'duration': 1.541}, {'end': 391.915, 'text': "so we'll handle a get request to slash and we'll have a callback here.", 'start': 385.993, 'duration': 5.922}, {'end': 400.756, 'text': "takes in request response and let's just do a res.send And we'll just send the text, hello.", 'start': 391.915, 'duration': 8.841}], 'summary': 'Using dotenv for global variables, adding colors and setting up basic route with express for handling get request.', 'duration': 56.939, 'max_score': 343.817, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT0343817.jpg'}, {'end': 456.327, 'src': 'embed', 'start': 427.59, 'weight': 4, 'content': [{'end': 429.131, 'text': "for now we're going to have two things.", 'start': 427.59, 'duration': 1.541}, {'end': 439.036, 'text': 'we want our node environment, which by default is going to be development, and before you deploy, you can change it to production,', 'start': 429.131, 'duration': 9.905}, {'end': 445.44, 'text': "and then let's put our port, which will be 5000 or whatever you want, for the port.", 'start': 439.036, 'duration': 6.404}, {'end': 456.327, 'text': "now, in order to access this, we're going to go back into our server js and we need to basically let dot ENV know where that file is.", 'start': 445.44, 'duration': 10.887}], 'summary': 'Set up node environment for development, switch to production before deployment, and define port for access.', 'duration': 28.737, 'max_score': 427.59, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT0427590.jpg'}, {'end': 588.493, 'src': 'embed', 'start': 535.348, 'weight': 5, 'content': [{'end': 537.008, 'text': 'And then just put the port number in here.', 'start': 535.348, 'duration': 1.66}, {'end': 541.278, 'text': 'And then what we can do is use the colors module.', 'start': 538.757, 'duration': 2.521}, {'end': 546.98, 'text': "So I'm going to make it yellow by just going right after this back tick and say dot yellow.", 'start': 541.818, 'duration': 5.162}, {'end': 549.521, 'text': 'And we can even do like bold dot bold.', 'start': 547.08, 'duration': 2.441}, {'end': 551.342, 'text': 'All right.', 'start': 551.022, 'duration': 0.32}, {'end': 552.322, 'text': "So we'll save that.", 'start': 551.402, 'duration': 0.92}, {'end': 554.723, 'text': 'And I believe this should run.', 'start': 552.822, 'duration': 1.901}, {'end': 555.783, 'text': "So let's try it out.", 'start': 554.863, 'duration': 0.92}, {'end': 557.684, 'text': 'NPM run server.', 'start': 555.943, 'duration': 1.741}, {'end': 560.245, 'text': 'And there we go.', 'start': 559.705, 'duration': 0.54}, {'end': 568.568, 'text': 'So we get server running in development mode on port five thousand and we should be able to make a request to slash to the root and just get hello.', 'start': 560.265, 'duration': 8.303}, {'end': 575.27, 'text': "So let's open up postman, make a get request to HDP local host.", 'start': 568.608, 'duration': 6.662}, {'end': 582.832, 'text': "five thousand send and we get back a two hundred response status, which means everything's OK and we get hello.", 'start': 575.27, 'duration': 7.562}, {'end': 588.493, 'text': 'right. so we have a very basic, basic server set up.', 'start': 584.631, 'duration': 3.862}], 'summary': "Setting up a basic server running in development mode on port 5000, able to make a successful request and receive 'hello'.", 'duration': 53.145, 'max_score': 535.348, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT0535348.jpg'}], 'start': 215.97, 'title': 'Setting up server dependencies and basic express server', 'summary': 'Discusses installing regular and dev dependencies, setting up scripts to run the server in production, using node mon and concurrently, creating routes, accessing environment variables, and running the server on a specified port, with a demonstration of making a successful request and receiving a response.', 'chapters': [{'end': 371.987, 'start': 215.97, 'title': 'Setting up server dependencies and scripts', 'summary': 'Discusses installing regular and dev dependencies, setting up scripts to run the server in production and using node mon and concurrently to simultaneously run the backend server and the react dev server.', 'duration': 156.017, 'highlights': ['Node mon and concurrently are installed as dev dependencies to run the server without restarting and to simultaneously run the backend and react dev server with a single NPM script.', "The script 'server' is created to run node mon which constantly watches the server, and the entry point is set as server.js.", "The module 'dot env' is brought in to create global variables for ports and database URLs, and the modules 'colors' and 'morgan' are added for colored text in the console and logging purposes."]}, {'end': 588.493, 'start': 371.987, 'title': 'Setting up basic express server', 'summary': 'Covers the process of setting up a basic express server, including creating routes, accessing environment variables, and running the server on a specified port, with a demonstration of making a successful request and receiving a response.', 'duration': 216.506, 'highlights': ["The chapter demonstrates setting up a basic Express server by creating a simple route for handling a get request and sending a response with the text 'hello', showcasing the fundamental structure of an Express application.", "It explains the process of accessing environment variables from a config file using the 'dotenv' package to set the node environment and port, providing flexibility for different deployment environments.", "The chapter illustrates the usage of the 'colors' module to enhance console logs by displaying the server mode and port in a stylized and colored format, improving the visibility and clarity of server status.", "The demonstration includes making a successful request to the root endpoint using Postman, receiving a 200 response status along with the expected 'hello' text, validating the functionality of the basic server setup."]}], 'duration': 372.523, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT0215970.jpg', 'highlights': ['Node mon and concurrently installed as dev dependencies for server auto-restart and simultaneous backend and react dev server', "Script 'server' created to run node mon, watching server constantly, with entry point set as server.js", "Module 'dot env' used to create global variables for ports and database URLs, 'colors' and 'morgan' added for console text and logging", "Demonstration of setting up basic Express server, creating route for handling get request and sending 'hello' response", "Explanation of accessing environment variables using 'dotenv' package for setting node environment and port", "Illustration of using 'colors' module to enhance console logs with stylized and colored server mode and port", "Demonstration of making successful request to root endpoint using Postman, receiving 200 response status and 'hello' text"]}, {'end': 1142.957, 'segs': [{'end': 701.293, 'src': 'heatmap', 'start': 613.976, 'weight': 0, 'content': [{'end': 619.142, 'text': "even though it's a small application, you should still you'd still write it in a clean way.", 'start': 613.976, 'duration': 5.166}, {'end': 622.345, 'text': "that's scalable in case you want to add more routes and stuff like that.", 'start': 619.142, 'duration': 3.203}, {'end': 628.011, 'text': "So let's create a file called Transactions.js in our routes folder.", 'start': 622.445, 'duration': 5.566}, {'end': 635.351, 'text': 'And from here, we need to use the router.', 'start': 630.087, 'duration': 5.264}, {'end': 636.792, 'text': "So we're going to bring in express.", 'start': 635.411, 'duration': 1.381}, {'end': 650.462, 'text': "And then let's say const router and set that to express dot capital R router parentheses.", 'start': 642.556, 'duration': 7.906}, {'end': 655.205, 'text': 'So now we can just say router dot and then whatever method like router dot get.', 'start': 650.982, 'duration': 4.223}, {'end': 668.374, 'text': "say slash and request response and we'll just do a res dot send and again just say hello.", 'start': 656.303, 'duration': 12.071}, {'end': 670.776, 'text': 'now we have to export the router in order to use this.', 'start': 668.374, 'duration': 2.402}, {'end': 672.277, 'text': "so let's say export.", 'start': 670.776, 'duration': 1.501}, {'end': 678.683, 'text': "i'm sorry, module dot exports router.", 'start': 672.277, 'duration': 6.406}, {'end': 687.809, 'text': 'Now, in order for this to work in our server JS, we have to basically bring, bring that in, bring that file in and mount that router.', 'start': 680.427, 'duration': 7.382}, {'end': 690.89, 'text': "So let's bring the file in.", 'start': 688.949, 'duration': 1.941}, {'end': 695.171, 'text': "We'll go right here and let's say const.", 'start': 691.89, 'duration': 3.281}, {'end': 701.293, 'text': "Transactions and we're going to set this to require.", 'start': 697.692, 'duration': 3.601}], 'summary': 'Create a clean, scalable router file transactions.js with router methods for the small application.', 'duration': 64.707, 'max_score': 613.976, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT0613976.jpg'}, {'end': 787.431, 'src': 'heatmap', 'start': 736.601, 'weight': 0.849, 'content': [{'end': 742.163, 'text': 'And we want to connect that to that transactions file, which I have in that in this variable.', 'start': 736.601, 'duration': 5.562}, {'end': 749.132, 'text': 'OK, so now whenever we make a request to this, it should then route to this file.', 'start': 743.45, 'duration': 5.682}, {'end': 750.233, 'text': 'All right.', 'start': 749.152, 'duration': 1.081}, {'end': 754.134, 'text': 'So here, even though we just have slash, this is going to pertain to this route.', 'start': 750.373, 'duration': 3.761}, {'end': 761.977, 'text': "So let's go back to postman and let's say slash API slash version one slash transactions.", 'start': 754.574, 'duration': 7.403}, {'end': 765.459, 'text': 'Send that and we still get hello, we get a 200 response.', 'start': 763.358, 'duration': 2.101}, {'end': 769.439, 'text': 'Now as far as our file structure.', 'start': 766.897, 'duration': 2.542}, {'end': 779.085, 'text': 'we could just put our router dot whatever here, whatever method, and bring our model in when we create it and do our database calls from here.', 'start': 769.439, 'duration': 9.646}, {'end': 787.431, 'text': 'But I want to clean it up a little and have a controllers folder and have methods in our controller that do that stuff and just connect them to the routes.', 'start': 779.165, 'duration': 8.266}], 'summary': 'Connecting transactions file to route for api v1, achieving 200 response.', 'duration': 50.83, 'max_score': 736.601, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT0736601.jpg'}, {'end': 815.05, 'src': 'embed', 'start': 787.891, 'weight': 1, 'content': [{'end': 799.427, 'text': "So let's create a folder in the root called controllers and we're going to create a file called transactions.js, or transaction controller,", 'start': 787.891, 'duration': 11.536}, {'end': 808.989, 'text': "whatever you want to call it, and here is where we're going to have all of our methods that will use the model to interact with our database,", 'start': 799.427, 'duration': 9.562}, {'end': 811.389, 'text': "and we haven't created the model or anything yet.", 'start': 808.989, 'duration': 2.4}, {'end': 815.05, 'text': 'my goal is just to get these methods and get our routes set up.', 'start': 811.389, 'duration': 3.661}], 'summary': "Creating a 'transactions.js' file in the 'controllers' folder to set up methods and routes.", 'duration': 27.159, 'max_score': 787.891, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT0787891.jpg'}], 'start': 588.493, 'title': 'Setting up routes, controllers, and transactions', 'summary': 'Covers setting up routes using express.js, organizing routes in a clean manner, and connecting them to a transactions file. it also demonstrates creating controllers and methods for handling get, post, and delete requests, with example url endpoints used.', 'chapters': [{'end': 769.439, 'start': 588.493, 'title': 'Creating routes and controllers', 'summary': 'Covers setting up routes using express.js, organizing routes in a clean and scalable manner, and mounting the router in the main server file, aiming to connect to a specific transactions file, with a demonstration of a sample get request.', 'duration': 180.946, 'highlights': ['The importance of organizing routes in a clean and scalable manner is emphasized even for small applications, promoting maintainability and ease of adding more routes.', "Demonstration of setting up a router using Express.js and defining a sample GET request with a response of 'hello', providing a practical illustration of routing setup.", 'Explanation of the process of mounting the router in the main server file to connect to a specific transactions file, facilitating the routing of requests to the designated file.', 'Emphasis on the need to create a separate file for routes and controllers, promoting better organization and maintainability of the codebase.']}, {'end': 1142.957, 'start': 769.439, 'title': 'Setting up controller and routes for transactions', 'summary': 'Demonstrates setting up a controllers folder and creating methods in the controller to connect them to the routes for handling get, post, and delete requests, with the example url endpoints and request methods used.', 'duration': 373.518, 'highlights': ['The chapter discusses setting up a controllers folder and creating methods in the controller to connect them to the routes for handling get, post, and delete requests, with the example URL endpoints and request methods used.', 'The process involves creating a file called transactions.js in the controllers folder, and defining methods that will use the model to interact with the database, with the example of exporting functions like get transactions and setting up the route for connecting to the controller.', 'Methods like get transactions, add transaction, and delete transaction are defined in the controller, and the routes file is modified to bring in these functions and set up the appropriate request methods for each of the defined endpoints.']}], 'duration': 554.464, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT0588493.jpg', 'highlights': ['The importance of organizing routes in a clean and scalable manner is emphasized even for small applications, promoting maintainability and ease of adding more routes.', 'The chapter discusses setting up a controllers folder and creating methods in the controller to connect them to the routes for handling get, post, and delete requests, with the example URL endpoints and request methods used.', "Demonstration of setting up a router using Express.js and defining a sample GET request with a response of 'hello', providing a practical illustration of routing setup.", 'The process involves creating a file called transactions.js in the controllers folder, and defining methods that will use the model to interact with the database, with the example of exporting functions like get transactions and setting up the route for connecting to the controller.']}, {'end': 1689.94, 'segs': [{'end': 1170.843, 'src': 'embed', 'start': 1143.057, 'weight': 0, 'content': [{'end': 1146.167, 'text': 'We just need to bring in our model and then interact with the database.', 'start': 1143.057, 'duration': 3.11}, {'end': 1151.806, 'text': "Now, before we do any of that, let's actually create our database because we don't have one yet.", 'start': 1147.202, 'duration': 4.604}, {'end': 1155.51, 'text': "So I'm going to go to mongodb.com.", 'start': 1151.926, 'duration': 3.584}, {'end': 1159.313, 'text': "And you just want to create an account if you don't have one,", 'start': 1156.891, 'duration': 2.422}, {'end': 1165.358, 'text': 'log in and we can create a cluster where we can create a database and we can have collections.', 'start': 1159.313, 'duration': 6.045}, {'end': 1170.843, 'text': "And it's just like running a MongoDB database on your local system.", 'start': 1165.479, 'duration': 5.364}], 'summary': 'Set up a mongodb database on mongodb.com to interact with the model.', 'duration': 27.786, 'max_score': 1143.057, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT01143057.jpg'}, {'end': 1215.341, 'src': 'embed', 'start': 1187.98, 'weight': 1, 'content': [{'end': 1191.561, 'text': 'And this usually takes one says one to three minutes.', 'start': 1187.98, 'duration': 3.581}, {'end': 1195.062, 'text': "So I'm just going to pause the video and then when it's done, I'll come back.", 'start': 1191.841, 'duration': 3.221}, {'end': 1198.21, 'text': 'OK, so our cluster is set up.', 'start': 1196.109, 'duration': 2.101}, {'end': 1201.332, 'text': "And what I'm going to do now is click on this Collections button.", 'start': 1198.611, 'duration': 2.721}, {'end': 1205.555, 'text': 'And here is where you would see your data if we had any.', 'start': 1202.673, 'duration': 2.882}, {'end': 1209.898, 'text': "But I'm going to click on Add My Own Data just to create a database name.", 'start': 1206.015, 'duration': 3.883}, {'end': 1211.479, 'text': "And you don't have to do this.", 'start': 1210.098, 'duration': 1.381}, {'end': 1215.341, 'text': 'It will do it automatically through the application.', 'start': 1211.799, 'duration': 3.542}], 'summary': 'Setting up a cluster takes 1-3 minutes, then adding data to the database can be done manually or automatically.', 'duration': 27.361, 'max_score': 1187.98, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT01187980.jpg'}, {'end': 1354.091, 'src': 'embed', 'start': 1297.554, 'weight': 2, 'content': [{'end': 1300.535, 'text': "So this is the file we're going to use to connect to our database.", 'start': 1297.554, 'duration': 2.981}, {'end': 1301.896, 'text': 'So we need to use Mongoose.', 'start': 1300.595, 'duration': 1.301}, {'end': 1307.559, 'text': "So let's say const mongoose equals require.", 'start': 1301.956, 'duration': 5.603}, {'end': 1319.292, 'text': 'Mongoose and then then this is again, this will look familiar if you took my my react or my Node.js API course.', 'start': 1310.327, 'duration': 8.965}, {'end': 1325.536, 'text': "If you're really interested in diving deep into APIs and creating like error handlers and stuff like that,", 'start': 1319.953, 'duration': 5.583}, {'end': 1328.238, 'text': 'you can check my Node.js API course on Udemy.', 'start': 1325.536, 'duration': 2.702}, {'end': 1330.799, 'text': "If I remember, I'll put the link in the description.", 'start': 1329.018, 'duration': 1.781}, {'end': 1337.083, 'text': "So we're going to create a function here, an arrow function called Connect DB and.", 'start': 1330.819, 'duration': 6.264}, {'end': 1349.888, 'text': 'Basically, whenever we make any calls with Mongoose to connect or to find from our database or create or whatever, they return a promise.', 'start': 1339.261, 'duration': 10.627}, {'end': 1354.091, 'text': "So we're going to use a sync await instead of using the dot then syntax.", 'start': 1350.188, 'duration': 3.903}], 'summary': 'Using mongoose to connect to database, creating async await functions for handling promises.', 'duration': 56.537, 'max_score': 1297.554, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT01297554.jpg'}, {'end': 1458.023, 'src': 'embed', 'start': 1425.552, 'weight': 4, 'content': [{'end': 1429.557, 'text': "okay, now let's see, what do we want to do next?", 'start': 1425.552, 'duration': 4.005}, {'end': 1433.901, 'text': 'once we connect, we want to just output to the console.', 'start': 1429.557, 'duration': 4.344}, {'end': 1439.568, 'text': "so i'm going to put in some back ticks and we're going to say mongo,", 'start': 1433.901, 'duration': 5.667}, {'end': 1449.959, 'text': "db connected and I'm going to put the host here and we can access that with that connection variable.", 'start': 1439.568, 'duration': 10.391}, {'end': 1458.023, 'text': "We have dot connection dot host available to us and I'm just going to give it a color using colors.", 'start': 1450.439, 'duration': 7.584}], 'summary': 'Connect to mongodb and output host to console.', 'duration': 32.471, 'max_score': 1425.552, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT01425552.jpg'}, {'end': 1571.393, 'src': 'heatmap', 'start': 1483.797, 'weight': 0.885, 'content': [{'end': 1487.139, 'text': 'And then we should be able to access the error dot message.', 'start': 1483.797, 'duration': 3.342}, {'end': 1489.862, 'text': "And we'll just make that red.", 'start': 1488.08, 'duration': 1.782}, {'end': 1491.243, 'text': "So we'll say dot red.", 'start': 1489.922, 'duration': 1.321}, {'end': 1495.607, 'text': 'And then after we log it, we want to exit with failure.', 'start': 1492.905, 'duration': 2.702}, {'end': 1497.829, 'text': "So we'll use process dot exit here.", 'start': 1495.667, 'duration': 2.162}, {'end': 1502.098, 'text': 'And then we pass in a one if we want to exit with failure.', 'start': 1498.877, 'duration': 3.221}, {'end': 1504.599, 'text': 'Basically, we want the application to shut down.', 'start': 1502.138, 'duration': 2.461}, {'end': 1507.26, 'text': "So let's go ahead and save that.", 'start': 1505.68, 'duration': 1.58}, {'end': 1508.101, 'text': 'Actually, one more thing.', 'start': 1507.34, 'duration': 0.761}, {'end': 1510.442, 'text': 'We need to export it if we want to be able to use it.', 'start': 1508.121, 'duration': 2.321}, {'end': 1516.544, 'text': 'So module dot exports equals the connect DB function.', 'start': 1510.622, 'duration': 5.922}, {'end': 1522.166, 'text': 'So now in server JS, this is where we want to bring it into.', 'start': 1518.305, 'duration': 3.861}, {'end': 1528.509, 'text': "So up here, let's say cons connect DB and let's set that to require.", 'start': 1522.346, 'duration': 6.163}, {'end': 1535.441, 'text': "And that's going to be from our config slash DB file.", 'start': 1530.253, 'duration': 5.188}, {'end': 1538.205, 'text': 'And then we just need to simply call the function.', 'start': 1535.921, 'duration': 2.284}, {'end': 1539.427, 'text': "So we'll do that right here.", 'start': 1538.265, 'duration': 1.162}, {'end': 1544.012, 'text': 'All right.', 'start': 1543.612, 'duration': 0.4}, {'end': 1544.993, 'text': "So let's save that.", 'start': 1544.072, 'duration': 0.921}, {'end': 1550.038, 'text': 'And now down in the console, you can see MongoDB connected and then it gives us the host.', 'start': 1545.434, 'duration': 4.604}, {'end': 1553.201, 'text': 'OK, so everything is working correctly.', 'start': 1551.159, 'duration': 2.042}, {'end': 1555.683, 'text': 'So now we need to create a model.', 'start': 1553.601, 'duration': 2.082}, {'end': 1560.428, 'text': 'So in the root, we want to create a folder called Models.', 'start': 1556.384, 'duration': 4.044}, {'end': 1568.812, 'text': "And in models, we're going to create a file called transaction.js, uppercase T, singular.", 'start': 1562.309, 'duration': 6.503}, {'end': 1571.393, 'text': "That's basically the convention for models.", 'start': 1568.872, 'duration': 2.521}], 'summary': 'Code to connect mongodb, create model for transactions', 'duration': 87.596, 'max_score': 1483.797, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT01483797.jpg'}, {'end': 1610.287, 'src': 'embed', 'start': 1579.81, 'weight': 3, 'content': [{'end': 1582.753, 'text': 'we need to create a schema for our models.', 'start': 1579.81, 'duration': 2.943}, {'end': 1597.245, 'text': "so let's say const transaction schema and set that to a new mongoose dot schema which is going to take in an object,", 'start': 1582.753, 'duration': 14.492}, {'end': 1605.203, 'text': 'and this is where we have the fields that we want now remember our And in our application, our transactions have an ID which will get.', 'start': 1597.245, 'duration': 7.958}, {'end': 1608.246, 'text': 'that will actually get created automatically with MongoDB.', 'start': 1605.203, 'duration': 3.043}, {'end': 1610.287, 'text': "It'll create a field called underscore ID.", 'start': 1608.286, 'duration': 2.001}], 'summary': 'Create a mongoose schema for a transaction model with automatic id creation.', 'duration': 30.477, 'max_score': 1579.81, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT01579810.jpg'}], 'start': 1143.057, 'title': 'Setting up mongodb for node.js project', 'summary': 'Covers creating a mongodb database using atlas, setting up a cluster, connecting to it in a node.js project, using mongoose for asynchronous connection and error handling, and defining a schema with fields like text, amount, and created at.', 'chapters': [{'end': 1425.552, 'start': 1143.057, 'title': 'Setting up mongodb database', 'summary': 'Covers the process of creating a mongodb database using atlas, including setting up a cluster, creating a database, and connecting to it in a node.js project, with emphasis on using mongoose for asynchronous connection and error handling.', 'duration': 282.495, 'highlights': ['The process involves creating a MongoDB database using Atlas, setting up a cluster, and creating a database with collections.', 'The cluster setup usually takes one to three minutes, after which the user can access and add their own data.', 'Connecting to the MongoDB database in a Node.js project involves setting up the connection string in the config ENV file and using Mongoose for asynchronous connection and error handling.', 'The code demonstrates the usage of async/await and try/catch block for handling promises when connecting to the database using Mongoose in a Node.js project.']}, {'end': 1689.94, 'start': 1425.552, 'title': 'Setting up mongodb connection and creating a model', 'summary': 'Covers setting up a mongodb connection, including logging connection status and handling errors, then proceeds with creating a model using mongoose and defining a schema with fields like text, amount, and created at.', 'duration': 264.388, 'highlights': ['Creating a schema for the model using Mongoose, including fields like text, amount, and created at. Fields like text, amount, and created at are defined in the schema for the model.', 'Logging the MongoDB connection status and handling errors, including using colors for console output and exiting the application with failure if needed. The connection status to MongoDB is logged with host information, errors are logged in red, and the application can exit with failure if necessary.', 'Setting up the MongoDB connection and exporting the connection function for use in server.js. The MongoDB connection function is defined and exported for use in server.js.']}], 'duration': 546.883, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT01143057.jpg', 'highlights': ['The process involves creating a MongoDB database using Atlas, setting up a cluster, and creating a database with collections.', 'The cluster setup usually takes one to three minutes, after which the user can access and add their own data.', 'Connecting to the MongoDB database in a Node.js project involves setting up the connection string in the config ENV file and using Mongoose for asynchronous connection and error handling.', 'Creating a schema for the model using Mongoose, including fields like text, amount, and created at.', 'Logging the MongoDB connection status and handling errors, including using colors for console output and exiting the application with failure if needed.', 'The code demonstrates the usage of async/await and try/catch block for handling promises when connecting to the database using Mongoose in a Node.js project.']}, {'end': 2546.177, 'segs': [{'end': 1791.519, 'src': 'heatmap', 'start': 1690.541, 'weight': 0, 'content': [{'end': 1695.586, 'text': 'And then we just need to export this so we can bring it into our controller.', 'start': 1690.541, 'duration': 5.045}, {'end': 1701.793, 'text': 'So Mongoose model transaction.', 'start': 1699.751, 'duration': 2.042}, {'end': 1707.872, 'text': 'And as a second parameter, we need the schema, which is transaction schema.', 'start': 1703.11, 'duration': 4.762}, {'end': 1710.153, 'text': 'OK, so that should be it for our model.', 'start': 1707.892, 'duration': 2.261}, {'end': 1716.496, 'text': "So when we make a request and we send data, it's only going to accept, you know, text and amount.", 'start': 1710.733, 'duration': 5.763}, {'end': 1718.157, 'text': "We're not going to be able to send anything else.", 'start': 1716.556, 'duration': 1.601}, {'end': 1727.021, 'text': "So let's close that up and let's go into our controller where we have our functions here, but they're not doing very much.", 'start': 1719.237, 'duration': 7.784}, {'end': 1729.882, 'text': 'So we should be able to bring our model in now.', 'start': 1727.621, 'duration': 2.261}, {'end': 1736.469, 'text': 'Transactions singular.', 'start': 1735.251, 'duration': 1.218}, {'end': 1740.491, 'text': 'And then we want to require that from the model file.', 'start': 1737.81, 'duration': 2.681}, {'end': 1744.753, 'text': 'So up one level models and transaction.', 'start': 1740.571, 'duration': 4.182}, {'end': 1751.976, 'text': 'So now we can use Mongoose methods on this, like find, create, remove all that stuff we should be able to use.', 'start': 1745.253, 'duration': 6.723}, {'end': 1756.237, 'text': "So the first thing we'll do is get our transactions from our database.", 'start': 1753.056, 'duration': 3.181}, {'end': 1761.539, 'text': 'Now, as I said earlier, when we use a Mongoose method, it returns a promise.', 'start': 1756.877, 'duration': 4.662}, {'end': 1763.34, 'text': "So we're going to be using a sink away.", 'start': 1761.599, 'duration': 1.741}, {'end': 1765.321, 'text': 'So we might as well just add a sink.', 'start': 1763.68, 'duration': 1.641}, {'end': 1768.583, 'text': 'to all of these.', 'start': 1767.602, 'duration': 0.981}, {'end': 1774.927, 'text': "And then in here, let's get rid of this.", 'start': 1772.846, 'duration': 2.081}, {'end': 1777.529, 'text': "And we're going to have a try catch.", 'start': 1775.648, 'duration': 1.881}, {'end': 1783.173, 'text': "And let's create a variable called transactions.", 'start': 1779.771, 'duration': 3.402}, {'end': 1791.519, 'text': 'And we want to use our model and then the find method to basically get all of the transactions.', 'start': 1784.154, 'duration': 7.365}], 'summary': 'Configuring mongoose model and implementing mongoose methods for transactions in a controller.', 'duration': 27.616, 'max_score': 1690.541, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT01690541.jpg'}, {'end': 1774.927, 'src': 'embed', 'start': 1745.253, 'weight': 1, 'content': [{'end': 1751.976, 'text': 'So now we can use Mongoose methods on this, like find, create, remove all that stuff we should be able to use.', 'start': 1745.253, 'duration': 6.723}, {'end': 1756.237, 'text': "So the first thing we'll do is get our transactions from our database.", 'start': 1753.056, 'duration': 3.181}, {'end': 1761.539, 'text': 'Now, as I said earlier, when we use a Mongoose method, it returns a promise.', 'start': 1756.877, 'duration': 4.662}, {'end': 1763.34, 'text': "So we're going to be using a sink away.", 'start': 1761.599, 'duration': 1.741}, {'end': 1765.321, 'text': 'So we might as well just add a sink.', 'start': 1763.68, 'duration': 1.641}, {'end': 1768.583, 'text': 'to all of these.', 'start': 1767.602, 'duration': 0.981}, {'end': 1774.927, 'text': "And then in here, let's get rid of this.", 'start': 1772.846, 'duration': 2.081}], 'summary': 'Using mongoose methods for transactions; returning promises and adding sinks.', 'duration': 29.674, 'max_score': 1745.253, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT01745253.jpg'}, {'end': 1856.038, 'src': 'embed', 'start': 1830.626, 'weight': 3, 'content': [{'end': 1836.389, 'text': "And then, of course, the actual data, which I'll just put in a data property, which is going to be our transactions.", 'start': 1830.626, 'duration': 5.763}, {'end': 1843.052, 'text': 'You could call this transactions, but I like to keep it consistent across, you know, if we had multiple resources.', 'start': 1836.929, 'duration': 6.123}, {'end': 1850.996, 'text': "And then down in the error here, I'm going to return res dot send.", 'start': 1845.173, 'duration': 5.823}, {'end': 1856.038, 'text': "And I'm just going to do a standard 500, which is a server error if something goes wrong here.", 'start': 1851.356, 'duration': 4.682}], 'summary': 'Setting up data property for transactions and handling server errors with standard 500 response.', 'duration': 25.412, 'max_score': 1830.626, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT01830626.jpg'}, {'end': 1971.845, 'src': 'heatmap', 'start': 1830.626, 'weight': 0.732, 'content': [{'end': 1836.389, 'text': "And then, of course, the actual data, which I'll just put in a data property, which is going to be our transactions.", 'start': 1830.626, 'duration': 5.763}, {'end': 1843.052, 'text': 'You could call this transactions, but I like to keep it consistent across, you know, if we had multiple resources.', 'start': 1836.929, 'duration': 6.123}, {'end': 1850.996, 'text': "And then down in the error here, I'm going to return res dot send.", 'start': 1845.173, 'duration': 5.823}, {'end': 1856.038, 'text': "And I'm just going to do a standard 500, which is a server error if something goes wrong here.", 'start': 1851.356, 'duration': 4.682}, {'end': 1861.052, 'text': 'And then just attach a Jason object with success.', 'start': 1856.889, 'duration': 4.163}, {'end': 1863.834, 'text': 'And obviously this would be false because this is an error.', 'start': 1861.132, 'duration': 2.702}, {'end': 1868.557, 'text': 'And then some error message in this case will just do a generic server error.', 'start': 1864.754, 'duration': 3.803}, {'end': 1875.275, 'text': "All right, so let's save that and now let's try to make a request to a get request.", 'start': 1870.151, 'duration': 5.124}, {'end': 1876.936, 'text': 'So we already have this tab open.', 'start': 1875.295, 'duration': 1.641}, {'end': 1880.679, 'text': "Let's send it and we get back an object with success.", 'start': 1877.116, 'duration': 3.563}, {'end': 1884.381, 'text': 'True count zero in an empty array, which is what we want.', 'start': 1880.799, 'duration': 3.582}, {'end': 1891.867, 'text': "OK, there's no data, but it's still a successful it should be a successful response because nothing went wrong.", 'start': 1884.401, 'duration': 7.466}, {'end': 1893.468, 'text': "There's just nothing in the database.", 'start': 1891.887, 'duration': 1.581}, {'end': 1900.33, 'text': "So now let's work on the ad transaction so that we can actually send data and create a transaction.", 'start': 1894.248, 'duration': 6.082}, {'end': 1902.39, 'text': "So we're going to go here.", 'start': 1901.15, 'duration': 1.24}, {'end': 1914.373, 'text': "So when we send data from a client, it's going to come in request dot body dot whatever, like text or amount and so on.", 'start': 1903.33, 'duration': 11.043}, {'end': 1920.615, 'text': 'But in order for us to use request dot body, we need to add the the body parser middleware to our server.', 'start': 1914.693, 'duration': 5.922}, {'end': 1929.528, 'text': "So we're just going to go to server.js and let's go right under where we created this app variable and say app.use.", 'start': 1921.795, 'duration': 7.733}, {'end': 1932.433, 'text': 'And we want to use express.json.', 'start': 1930.891, 'duration': 1.542}, {'end': 1937.557, 'text': 'So that will allow us to use the body parser.', 'start': 1935.635, 'duration': 1.922}, {'end': 1939.719, 'text': 'Close that up.', 'start': 1939.058, 'duration': 0.661}, {'end': 1946.685, 'text': "So back in our controller here, we'll get that request dot body dot and then whatever data we send.", 'start': 1940.239, 'duration': 6.446}, {'end': 1954.311, 'text': "So I'm going to use destructuring here and I'm going to pull out text and amount from request dot body.", 'start': 1947.245, 'duration': 7.066}, {'end': 1960.477, 'text': "OK, so that'll be the data that's sent to create a transaction.", 'start': 1955.953, 'duration': 4.524}, {'end': 1971.845, 'text': "now, after we get the data, we want to create a variable called transaction and we're going to set this.", 'start': 1962.58, 'duration': 9.265}], 'summary': 'The transcript discusses handling data and creating transactions in a server, including error handling and request processing.', 'duration': 141.219, 'max_score': 1830.626, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT01830626.jpg'}, {'end': 1932.433, 'src': 'embed', 'start': 1903.33, 'weight': 2, 'content': [{'end': 1914.373, 'text': "So when we send data from a client, it's going to come in request dot body dot whatever, like text or amount and so on.", 'start': 1903.33, 'duration': 11.043}, {'end': 1920.615, 'text': 'But in order for us to use request dot body, we need to add the the body parser middleware to our server.', 'start': 1914.693, 'duration': 5.922}, {'end': 1929.528, 'text': "So we're just going to go to server.js and let's go right under where we created this app variable and say app.use.", 'start': 1921.795, 'duration': 7.733}, {'end': 1932.433, 'text': 'And we want to use express.json.', 'start': 1930.891, 'duration': 1.542}], 'summary': 'To handle client data, add express.json middleware to server.js.', 'duration': 29.103, 'max_score': 1903.33, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT01903330.jpg'}, {'end': 2048.121, 'src': 'embed', 'start': 2018.52, 'weight': 4, 'content': [{'end': 2023.462, 'text': "And when you create something and it's successful, it's usually a 201 HTTP status.", 'start': 2018.52, 'duration': 4.942}, {'end': 2029.624, 'text': "And then in JSON, we're going to say success is true.", 'start': 2025.242, 'duration': 4.382}, {'end': 2034.425, 'text': 'And the data will be the transaction that we just created.', 'start': 2031.064, 'duration': 3.361}, {'end': 2038.377, 'text': 'Now I forgot our try catch.', 'start': 2035.956, 'duration': 2.421}, {'end': 2045.179, 'text': "So we actually want to put this in a try catch and let's just grab what we just did here.", 'start': 2038.697, 'duration': 6.482}, {'end': 2048.121, 'text': 'Cut that and put that in our try.', 'start': 2046, 'duration': 2.121}], 'summary': "Successful creation results in a 201 http status, with 'success' as true and the created transaction as the data.", 'duration': 29.601, 'max_score': 2018.52, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT02018520.jpg'}, {'end': 2308.042, 'src': 'embed', 'start': 2276.875, 'weight': 5, 'content': [{'end': 2278.276, 'text': "And then let's do an else.", 'start': 2276.875, 'duration': 1.401}, {'end': 2281.919, 'text': "And in the else, I'm going to put this generic 500.", 'start': 2278.817, 'duration': 3.102}, {'end': 2286.263, 'text': 'But in here, in this validation error, I need to pull out those messages.', 'start': 2281.919, 'duration': 4.344}, {'end': 2293.689, 'text': "So the way we can do that, let's say const message or messages, because it's going to be an array.", 'start': 2286.683, 'duration': 7.006}, {'end': 2296.892, 'text': 'And we can use object.values.', 'start': 2294.35, 'duration': 2.542}, {'end': 2301.977, 'text': 'And remember that error.errors object.', 'start': 2298.213, 'duration': 3.764}, {'end': 2305.381, 'text': 'We want to basically map through that.', 'start': 2303.12, 'duration': 2.261}, {'end': 2308.042, 'text': 'So say dot map and just get the message.', 'start': 2305.521, 'duration': 2.521}], 'summary': 'Utilize object.values to extract messages from error.errors object and map through to retrieve the messages.', 'duration': 31.167, 'max_score': 2276.875, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT02276875.jpg'}, {'end': 2511.964, 'src': 'embed', 'start': 2470.844, 'weight': 6, 'content': [{'end': 2477.627, 'text': "So we'll say request dot params dot ID, which allows us to access whatever is passed in as this ID.", 'start': 2470.844, 'duration': 6.783}, {'end': 2481.548, 'text': "OK, and then we're just going to do an if here.", 'start': 2477.647, 'duration': 3.901}, {'end': 2487.331, 'text': "So we'll say if not transactions.", 'start': 2483.989, 'duration': 3.342}, {'end': 2496.936, 'text': "So if not transaction, if there isn't one found, then let's return res dot status.", 'start': 2490.393, 'duration': 6.543}, {'end': 2502.92, 'text': "And this is going to be a 404 because it's not found dot Jason.", 'start': 2499.458, 'duration': 3.462}, {'end': 2511.964, 'text': 'Success is false in the error.', 'start': 2505.261, 'duration': 6.703}], 'summary': 'Using request params id to access data. if no transaction found, return 404 error.', 'duration': 41.12, 'max_score': 2470.844, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT02470844.jpg'}], 'start': 1690.541, 'title': 'Api controller setup and handling data requests', 'summary': 'Discusses setting up the api controller and model to handle requests, using mongoose methods, a try-catch block for error handling, and constructing a successful response. it also covers handling data requests and responses, including data processing, creating and deleting transactions, ensuring proper data management and error handling.', 'chapters': [{'end': 1902.39, 'start': 1690.541, 'title': 'Api controller setup', 'summary': 'Discusses setting up the api controller and model to handle requests, using mongoose methods to interact with the database, including a try-catch block for error handling, and constructing a successful response with a count of transactions and a data property.', 'duration': 211.849, 'highlights': ['The chapter discusses setting up the API controller and model to handle requests, using Mongoose methods to interact with the database.', 'Includes a try-catch block for error handling when using Mongoose methods, such as find, create, and remove.', 'Constructing a successful response with a count of transactions and a data property, returning a status of 200 for a successful request, and a 500 status for a server error.']}, {'end': 2546.177, 'start': 1903.33, 'title': 'Handling data requests and responses', 'summary': 'Covers handling data requests and responses, including using body parser middleware to process client data, creating transactions, handling validation errors, and deleting transactions, ultimately ensuring proper data management and error handling.', 'duration': 642.847, 'highlights': ['The chapter covers handling data requests and responses, including using body parser middleware to process client data, creating transactions, handling validation errors, and deleting transactions, ultimately ensuring proper data management and error handling. It explains the usage of body parser middleware, the process of creating transactions, handling validation errors, and deleting transactions to ensure proper data management and error handling.', 'The response for a successful data creation is a 201 HTTP status code, along with the transaction data in JSON format. Successful data creation results in a 201 HTTP status code and the return of transaction data in JSON format.', 'Handling validation errors involves extracting specific error messages from the validation error object and returning them as part of the response. Validation errors are handled by extracting specific error messages from the validation error object and returning them as part of the response.', 'A 404 status code is returned if no transaction is found during the deletion process. If no transaction is found during the deletion process, a 404 status code is returned.']}], 'duration': 855.636, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT01690541.jpg', 'highlights': ['The chapter discusses setting up the API controller and model to handle requests, using Mongoose methods to interact with the database.', 'Includes a try-catch block for error handling when using Mongoose methods, such as find, create, and remove.', 'The chapter covers handling data requests and responses, including using body parser middleware to process client data, creating transactions, handling validation errors, and deleting transactions, ultimately ensuring proper data management and error handling.', 'Constructing a successful response with a count of transactions and a data property, returning a status of 200 for a successful request, and a 500 status for a server error.', 'The response for a successful data creation is a 201 HTTP status code, along with the transaction data in JSON format. Successful data creation results in a 201 HTTP status code and the return of transaction data in JSON format.', 'Handling validation errors involves extracting specific error messages from the validation error object and returning them as part of the response.', 'A 404 status code is returned if no transaction is found during the deletion process.']}, {'end': 3000.278, 'segs': [{'end': 2706.936, 'src': 'heatmap', 'start': 2547.598, 'weight': 0, 'content': [{'end': 2549.379, 'text': "And then once that's removed, we need to.", 'start': 2547.598, 'duration': 1.781}, {'end': 2562.507, 'text': "res dot status and let's send uh we'll just do a 200.", 'start': 2552.003, 'duration': 10.504}, {'end': 2569.309, 'text': 'so success is going to be true, because it was successfully removed.', 'start': 2562.507, 'duration': 6.802}, {'end': 2573.071, 'text': "for data, i'm just going to send an empty object again.", 'start': 2569.309, 'duration': 3.762}, {'end': 2575.232, 'text': "you can handle your apis, however you'd like.", 'start': 2573.071, 'duration': 2.161}, {'end': 2576.252, 'text': "that's just what i'm going to do.", 'start': 2575.232, 'duration': 1.02}, {'end': 2583.114, 'text': "and then in the catch, i'm just going to put the this standard 500 server error if something goes wrong.", 'start': 2576.252, 'duration': 6.862}, {'end': 2585.815, 'text': 'All right.', 'start': 2585.515, 'duration': 0.3}, {'end': 2588.677, 'text': "So let's save that.", 'start': 2587.256, 'duration': 1.421}, {'end': 2591.879, 'text': 'And we should be able to now delete.', 'start': 2589.898, 'duration': 1.981}, {'end': 2594.22, 'text': "So let's take one of these.", 'start': 2592.639, 'duration': 1.581}, {'end': 2595.301, 'text': "We'll take the camera.", 'start': 2594.26, 'duration': 1.041}, {'end': 2596.642, 'text': 'Take the ID.', 'start': 2596.041, 'duration': 0.601}, {'end': 2604.083, 'text': "and go to our delete and let's put that right in here and send.", 'start': 2599, 'duration': 5.083}, {'end': 2606.145, 'text': 'so we get success.', 'start': 2604.083, 'duration': 2.062}, {'end': 2613.569, 'text': "true, 200 response, and if we go back to this tab and resend now, you can see that that's been deleted.", 'start': 2606.145, 'duration': 7.424}, {'end': 2617.852, 'text': "so we're able to add to get our transactions, add them and delete them.", 'start': 2613.569, 'duration': 4.283}, {'end': 2621.632, 'text': 'So our back end is pretty much done.', 'start': 2619.571, 'duration': 2.061}, {'end': 2625.813, 'text': "We're able to do all that stuff through Postman.", 'start': 2622.652, 'duration': 3.161}, {'end': 2629.835, 'text': 'However, of course, we want to be able to do it through react through our client side.', 'start': 2625.853, 'duration': 3.982}, {'end': 2637.858, 'text': 'Now, I want to set it up so we can run the react server and the back end at the same time using concurrently.', 'start': 2630.615, 'duration': 7.243}, {'end': 2640.439, 'text': "The first thing I'm going to do is go to our client.", 'start': 2638.418, 'duration': 2.021}, {'end': 2643.24, 'text': 'So remember, the client is our react app.', 'start': 2640.579, 'duration': 2.661}, {'end': 2651.649, 'text': "And we're going to go to that package.json and add a proxy, because when we make a request with whatever, I'm going to use Axios,", 'start': 2643.905, 'duration': 7.744}, {'end': 2653.23, 'text': 'but you can also use the fetch API.', 'start': 2651.649, 'duration': 1.581}, {'end': 2659.694, 'text': "I don't want to have to do HTTP local host 5000 slash API slash version one.", 'start': 2653.891, 'duration': 5.803}, {'end': 2662.656, 'text': 'I just want to be able to do the slash API version one.', 'start': 2659.714, 'duration': 2.942}, {'end': 2669.34, 'text': "So we're going to add a proxy under the last object here, which is this browser list.", 'start': 2662.676, 'duration': 6.664}, {'end': 2671.581, 'text': "So we'll put a comma and then we'll say.", 'start': 2669.92, 'duration': 1.661}, {'end': 2679.906, 'text': "proxy and we're going to set that to HTTP local host port 5000.", 'start': 2673.24, 'duration': 6.666}, {'end': 2680.106, 'text': 'OK, so.', 'start': 2679.906, 'duration': 0.2}, {'end': 2689.98, 'text': "Now that we've done that, let's close that up and let's go.", 'start': 2686.997, 'duration': 2.983}, {'end': 2697.607, 'text': "Let's just minimize client and go into our servers package dot Jason, because we have a couple of scripts we need to add here.", 'start': 2690, 'duration': 7.607}, {'end': 2701.951, 'text': 'So the first script is going to be to run the client right now.', 'start': 2698.648, 'duration': 3.303}, {'end': 2706.936, 'text': 'We can only run the server side, right? The localhost 5000 localhost 3000 is our react server.', 'start': 2702.011, 'duration': 4.925}], 'summary': 'Backend setup completed, now configuring react server and proxy for api requests', 'duration': 28.654, 'max_score': 2547.598, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT02547598.jpg'}, {'end': 2659.694, 'src': 'embed', 'start': 2630.615, 'weight': 4, 'content': [{'end': 2637.858, 'text': 'Now, I want to set it up so we can run the react server and the back end at the same time using concurrently.', 'start': 2630.615, 'duration': 7.243}, {'end': 2640.439, 'text': "The first thing I'm going to do is go to our client.", 'start': 2638.418, 'duration': 2.021}, {'end': 2643.24, 'text': 'So remember, the client is our react app.', 'start': 2640.579, 'duration': 2.661}, {'end': 2651.649, 'text': "And we're going to go to that package.json and add a proxy, because when we make a request with whatever, I'm going to use Axios,", 'start': 2643.905, 'duration': 7.744}, {'end': 2653.23, 'text': 'but you can also use the fetch API.', 'start': 2651.649, 'duration': 1.581}, {'end': 2659.694, 'text': "I don't want to have to do HTTP local host 5000 slash API slash version one.", 'start': 2653.891, 'duration': 5.803}], 'summary': 'Setting up concurrent running of react server and backend using proxy in package.json.', 'duration': 29.079, 'max_score': 2630.615, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT02630615.jpg'}, {'end': 2843.135, 'src': 'heatmap', 'start': 2742.162, 'weight': 0.893, 'content': [{'end': 2750.288, 'text': 'so we have to do backslash double quote npm run server backslash double quote space.', 'start': 2742.162, 'duration': 8.126}, {'end': 2754.231, 'text': 'backslash double quote npm run client.', 'start': 2750.288, 'duration': 3.943}, {'end': 2756.052, 'text': 'backslash double quote.', 'start': 2754.231, 'duration': 1.821}, {'end': 2766.46, 'text': "OK, so what this will do is it's going to run this, which is what we're doing now, from running on 5000, and this, which will run the react app.", 'start': 2757.898, 'duration': 8.562}, {'end': 2768.04, 'text': "It'll run both at the same time.", 'start': 2766.58, 'duration': 1.46}, {'end': 2770.881, 'text': "So let's save this and let's go down here.", 'start': 2768.06, 'duration': 2.821}, {'end': 2776.182, 'text': 'Stop this control C and run NPM run dev.', 'start': 2771.441, 'duration': 4.741}, {'end': 2785.026, 'text': "So it's starting our server, but it's also going to open up the react app on 3000.", 'start': 2778.402, 'duration': 6.624}, {'end': 2786.547, 'text': 'OK And this is just for development.', 'start': 2785.026, 'duration': 1.521}, {'end': 2792.81, 'text': "Once you're ready for production, you build out your react app and then you just point to the static index HTML.", 'start': 2786.667, 'duration': 6.143}, {'end': 2795.751, 'text': 'But this allows us to run both servers.', 'start': 2793.33, 'duration': 2.421}, {'end': 2800.933, 'text': 'So if I make a request to postman on five thousand, it still works.', 'start': 2796.271, 'duration': 4.662}, {'end': 2804.715, 'text': 'OK So the back end is up and running as well as the front.', 'start': 2801.554, 'duration': 3.161}, {'end': 2808.856, 'text': 'Now we need to integrate our back end with our front end.', 'start': 2805.774, 'duration': 3.082}, {'end': 2814.82, 'text': "So to make requests, we could use the Fetch API, but I'm actually going to use Axios.", 'start': 2809.857, 'duration': 4.963}, {'end': 2822.365, 'text': "So I'm just going to stop this for a second and cd into client, which is our React app in npm install Axios.", 'start': 2814.86, 'duration': 7.505}, {'end': 2829.689, 'text': "Okay, make sure you're in your client because that's where we're going to make the request to our back end using Axios.", 'start': 2822.385, 'duration': 7.304}, {'end': 2843.135, 'text': "And then, once that's installed, make sure that you cd dot dot back into the server and then once again we'll run npm, run dev, alright,", 'start': 2832.011, 'duration': 11.124}], 'summary': 'Running both server and react app simultaneously for development using npm run dev.', 'duration': 100.973, 'max_score': 2742.162, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT02742162.jpg'}, {'end': 2829.689, 'src': 'embed', 'start': 2801.554, 'weight': 3, 'content': [{'end': 2804.715, 'text': 'OK So the back end is up and running as well as the front.', 'start': 2801.554, 'duration': 3.161}, {'end': 2808.856, 'text': 'Now we need to integrate our back end with our front end.', 'start': 2805.774, 'duration': 3.082}, {'end': 2814.82, 'text': "So to make requests, we could use the Fetch API, but I'm actually going to use Axios.", 'start': 2809.857, 'duration': 4.963}, {'end': 2822.365, 'text': "So I'm just going to stop this for a second and cd into client, which is our React app in npm install Axios.", 'start': 2814.86, 'duration': 7.505}, {'end': 2829.689, 'text': "Okay, make sure you're in your client because that's where we're going to make the request to our back end using Axios.", 'start': 2822.385, 'duration': 7.304}], 'summary': 'Integrating the back end with the front end using axios for making requests.', 'duration': 28.135, 'max_score': 2801.554, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT02801554.jpg'}], 'start': 2547.598, 'title': 'Handling deletion in api and setting up react server and backend integration', 'summary': "Discusses handling deletion in api, using 200 status code for successful removal and 500 server error for unsuccessful attempts. it also covers setting up the react server and backend integration, including adding a proxy to the client's package.json, running the react server and backend concurrently using 'concurrently', and integrating the backend with the front end using axios for making requests.", 'chapters': [{'end': 2606.145, 'start': 2547.598, 'title': 'Handling deletion in api', 'summary': 'Discusses handling the deletion of data in an api, using a 200 status code for successful removal and a 500 server error for unsuccessful attempts, with an empty object being sent for successful removal.', 'duration': 58.547, 'highlights': ['Using a 200 status code for successful removal and a 500 server error for unsuccessful attempts, with an empty object being sent for successful removal', 'Handling the deletion of data in an API', 'Sending a 200 status code for successful removal and a 500 server error in case of failure']}, {'end': 3000.278, 'start': 2606.145, 'title': 'Setting up react server and backend integration', 'summary': "Covers setting up the react server and backend integration, including adding a proxy to the client's package.json, running the react server and backend concurrently using 'concurrently', and integrating the backend with the front end using axios for making requests.", 'duration': 394.133, 'highlights': ['Integrating the backend with the front end using Axios for making requests The chapter explains the process of integrating the backend with the front end using Axios for making requests, including creating a new action to fetch data from the backend and using asynchronous functions to handle Axios promises.', "Running the react server and backend concurrently using 'concurrently' The process of running the react server and backend concurrently using 'concurrently' is detailed, which involves adding a proxy to the client's package.json, creating scripts to run both the backend and front end, and using 'concurrently' to run both servers at the same time.", "Adding a proxy to the client's package.json for making requests to the backend The chapter explains the addition of a proxy to the client's package.json, enabling requests to be made to the backend without specifying the full URL, and ensuring that the react server and backend can be run simultaneously."]}], 'duration': 452.68, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT02547598.jpg', 'highlights': ['Using a 200 status code for successful removal and a 500 server error for unsuccessful attempts, with an empty object being sent for successful removal', 'Handling the deletion of data in an API', 'Sending a 200 status code for successful removal and a 500 server error in case of failure', 'Integrating the backend with the front end using Axios for making requests', "Running the react server and backend concurrently using 'concurrently'", "Adding a proxy to the client's package.json for making requests to the backend"]}, {'end': 3403.104, 'segs': [{'end': 3080.023, 'src': 'embed', 'start': 3024.555, 'weight': 0, 'content': [{'end': 3044.272, 'text': "so we need to dispatch an object with a type and we'll call this get transactions and then the payload is going to be what I just showed you res.data.data.", 'start': 3024.555, 'duration': 19.717}, {'end': 3046.693, 'text': "That'll be the transactions from the back end.", 'start': 3044.352, 'duration': 2.341}, {'end': 3052.155, 'text': "Now, I'm going to add a couple things to our state right here.", 'start': 3047.653, 'duration': 4.502}, {'end': 3057.277, 'text': "Since we're dealing with asynchronous calls to our back end, one is going to be error.", 'start': 3052.635, 'duration': 4.642}, {'end': 3059.998, 'text': 'So if we get any errors,', 'start': 3058.717, 'duration': 1.281}, {'end': 3065.58, 'text': 'I just want to be able to put them in our state in case you want to use them in an alert or something like that within your app.', 'start': 3059.998, 'duration': 5.582}, {'end': 3070.881, 'text': "I'm not going to do that, but I just at least want to put it in state and then also loading.", 'start': 3066.605, 'duration': 4.276}, {'end': 3073.539, 'text': 'because I want to be able to have a spinner.', 'start': 3071.738, 'duration': 1.801}, {'end': 3076.641, 'text': "If it's if it's still loading, we'll show the spinner.", 'start': 3074.059, 'duration': 2.582}, {'end': 3080.023, 'text': "And the way I'm going to do this is just initially set it to true.", 'start': 3077.001, 'duration': 3.022}], 'summary': "Dispatch 'get transactions' object, update state with error and loading for asynchronous calls.", 'duration': 55.468, 'max_score': 3024.555, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT03024555.jpg'}, {'end': 3221.479, 'src': 'embed', 'start': 3173.905, 'weight': 4, 'content': [{'end': 3177.649, 'text': 'we now want to fill it with our action dot payload.', 'start': 3173.905, 'duration': 3.744}, {'end': 3188.321, 'text': 'OK, because the payload is going to be the data that we get from this response.', 'start': 3182.836, 'duration': 5.485}, {'end': 3193.966, 'text': 'So we also want the transaction error case.', 'start': 3190.182, 'duration': 3.784}, {'end': 3198.81, 'text': 'Transaction error.', 'start': 3197.268, 'duration': 1.542}, {'end': 3201.852, 'text': "So for this, let's return.", 'start': 3200.671, 'duration': 1.181}, {'end': 3214.539, 'text': "And I'm just going to fill error with the payload because that's what we sent.", 'start': 3208.772, 'duration': 5.767}, {'end': 3221.479, 'text': "all right, and then you'll be able to access that within components.", 'start': 3217.796, 'duration': 3.683}], 'summary': 'Filling action dot payload with response data and handling transaction error.', 'duration': 47.574, 'max_score': 3173.905, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT03173905.jpg'}, {'end': 3296.482, 'src': 'embed', 'start': 3265.444, 'weight': 2, 'content': [{'end': 3267.366, 'text': 'OK, and then we should be all set with our reducer.', 'start': 3265.444, 'duration': 1.922}, {'end': 3274.052, 'text': "Now we have this get transactions action or function, but we're not using it anywhere.", 'start': 3267.446, 'duration': 6.606}, {'end': 3278.535, 'text': 'So we want to go down to our provider and we want to pass some stuff down here.', 'start': 3274.652, 'duration': 3.883}, {'end': 3281.998, 'text': 'We want to pass the get transactions so we can call it.', 'start': 3279.016, 'duration': 2.982}, {'end': 3286.763, 'text': 'And then also the rest of our state, like the error and the loading.', 'start': 3282.439, 'duration': 4.324}, {'end': 3288.264, 'text': 'I want to pass those as well.', 'start': 3286.783, 'duration': 1.481}, {'end': 3296.482, 'text': 'So error will say state dot error and loading state dot loading.', 'start': 3289.167, 'duration': 7.315}], 'summary': 'Setting up reducer and passing get transactions function and state data to provider.', 'duration': 31.038, 'max_score': 3265.444, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT03265444.jpg'}, {'end': 3350.177, 'src': 'embed', 'start': 3320.64, 'weight': 3, 'content': [{'end': 3323.841, 'text': 'we already have our context already brought in the context.', 'start': 3320.64, 'duration': 3.201}, {'end': 3328.062, 'text': "we're pulling out the transactions from the state, but I'm also going to pull out yet.", 'start': 3323.841, 'duration': 4.221}, {'end': 3337.629, 'text': 'transactions and where we want to call this since this is an asynchronous call, we want to call this in the use effect hook.', 'start': 3330.245, 'duration': 7.384}, {'end': 3345.254, 'text': 'OK, so if you make any kind of like HTTP request from a component, you want to do that in use effect.', 'start': 3338.67, 'duration': 6.584}, {'end': 3350.177, 'text': "So we're going to go down here and say use effect.", 'start': 3346.014, 'duration': 4.163}], 'summary': 'Using the use effect hook to handle asynchronous http requests.', 'duration': 29.537, 'max_score': 3320.64, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT03320640.jpg'}], 'start': 3000.838, 'title': 'Updating state and api request handling', 'summary': "Discusses updating state with transaction data and managing api requests and errors. it includes dispatching 'get transactions' type and payload, adding error and loading states, and utilizing useeffect hook for data manipulation, emphasizing the importance of handling asynchronous calls. it also covers managing transaction errors in a reducer.", 'chapters': [{'end': 3080.023, 'start': 3000.838, 'title': 'Updating state with transactions', 'summary': "Discusses updating the state with transaction data fetched from the backend, including dispatching an object with a 'get transactions' type and payload, and adding error and loading states for handling asynchronous calls.", 'duration': 79.185, 'highlights': ["Dispatching an object with a 'get transactions' type and the payload 'res.data.data' to update the state with transactions from the backend, ensuring efficient data management.", 'Adding error and loading states to handle asynchronous calls to the backend, enhancing error handling and providing a loading spinner for better user experience.']}, {'end': 3403.104, 'start': 3080.804, 'title': 'Managing api request and error handling', 'summary': 'Covers handling api requests in a reducer, managing transaction errors, and using useeffect hook to fetch transactions, emphasizing the importance of handling asynchronous calls and data manipulation.', 'duration': 322.3, 'highlights': ['The chapter covers handling API requests in a reducer, emphasizing the importance of handling asynchronous calls and data manipulation. handling API requests, asynchronous calls, data manipulation', 'The importance of handling transaction errors is highlighted, focusing on accessing and utilizing error responses within components. handling transaction errors, accessing error responses in components', 'The usage of useEffect hook to fetch transactions is explained, emphasizing the need to handle asynchronous calls within components. usage of useEffect hook, handling asynchronous calls in components']}], 'duration': 402.266, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT03000838.jpg', 'highlights': ["Dispatching an object with a 'get transactions' type and the payload 'res.data.data' to update the state with transactions from the backend, ensuring efficient data management.", 'Adding error and loading states to handle asynchronous calls to the backend, enhancing error handling and providing a loading spinner for better user experience.', 'The chapter covers handling API requests in a reducer, emphasizing the importance of handling asynchronous calls and data manipulation.', 'The usage of useEffect hook to fetch transactions is explained, emphasizing the need to handle asynchronous calls within components.', 'The importance of handling transaction errors is highlighted, focusing on accessing and utilizing error responses within components.']}, {'end': 3811.619, 'segs': [{'end': 3489.056, 'src': 'heatmap', 'start': 3428.574, 'weight': 3, 'content': [{'end': 3435.096, 'text': "So what I'm going to do is just go right under the body parser middleware and just do an if.", 'start': 3428.574, 'duration': 6.522}, {'end': 3452.035, 'text': "And say if we're in development mode, so if process.env.node environment is equal to development, then we're going to app.use Morgan.", 'start': 3436.826, 'duration': 15.209}, {'end': 3454.537, 'text': "And there's different parameters you can pass in.", 'start': 3452.555, 'duration': 1.982}, {'end': 3459.32, 'text': "We're going to use dev, which will just give us the method and stuff like that.", 'start': 3454.557, 'duration': 4.763}, {'end': 3461.901, 'text': "So let's see.", 'start': 3460.78, 'duration': 1.121}, {'end': 3463.202, 'text': 'It should be calling it.', 'start': 3462.061, 'duration': 1.141}, {'end': 3464.603, 'text': "Let's actually restart this.", 'start': 3463.242, 'duration': 1.361}, {'end': 3470.488, 'text': 'All right.', 'start': 3470.168, 'duration': 0.32}, {'end': 3475.47, 'text': 'So we see payment and book, which is coming from our back end.', 'start': 3471.529, 'duration': 3.941}, {'end': 3477.431, 'text': "If I reload, it's it's still there.", 'start': 3475.55, 'duration': 1.881}, {'end': 3480.932, 'text': 'Remember before it was just coming from state.', 'start': 3477.451, 'duration': 3.481}, {'end': 3486.975, 'text': 'Now, if we look in the console, you can see these requests 304 just means not modified.', 'start': 3481.793, 'duration': 5.182}, {'end': 3489.056, 'text': 'But this is this is Morgan.', 'start': 3487.515, 'duration': 1.541}], 'summary': 'Configured app to use morgan middleware in development mode for logging requests.', 'duration': 34.628, 'max_score': 3428.574, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT03428574.jpg'}, {'end': 3525.401, 'src': 'embed', 'start': 3491.416, 'weight': 0, 'content': [{'end': 3497.459, 'text': "I actually wanted to show you this earlier, but we'll see the method, the URL, the status and the time it takes.", 'start': 3491.416, 'duration': 6.043}, {'end': 3506.851, 'text': "OK, so we're now able to see the transactions from our database in the react application.", 'start': 3498.908, 'duration': 7.943}, {'end': 3511.873, 'text': "And I'll just go over that go over this real quick again.", 'start': 3509.011, 'duration': 2.862}, {'end': 3525.401, 'text': "So we have our initial state transactions is empty and then we have this action get transactions which we're calling right here from the transaction lists.", 'start': 3512.593, 'duration': 12.808}], 'summary': 'React application displays database transactions with initial empty state.', 'duration': 33.985, 'max_score': 3491.416, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT03491416.jpg'}, {'end': 3712.278, 'src': 'embed', 'start': 3659.055, 'weight': 1, 'content': [{'end': 3661.796, 'text': "So we'll say a wait Axios dot delete.", 'start': 3659.055, 'duration': 2.741}, {'end': 3673.158, 'text': "And in here we want to use back ticks and we're going to do slash API version one transactions.", 'start': 3664.716, 'duration': 8.442}, {'end': 3677.219, 'text': 'And remember, we need the ID, which is coming in right here as a param.', 'start': 3673.218, 'duration': 4.001}, {'end': 3680.32, 'text': 'So we can just go ahead and add that here.', 'start': 3677.959, 'duration': 2.361}, {'end': 3685.124, 'text': 'right and then we want to do this dispatch.', 'start': 3681.081, 'duration': 4.043}, {'end': 3693.969, 'text': "so we're essentially doing the same thing with this dispatch, except we're also deleting from the server first and then for the catch,", 'start': 3685.124, 'duration': 8.845}, {'end': 3701.935, 'text': "we'll just go ahead and grab this transaction error and that'll just put any error into the that piece of state.", 'start': 3693.969, 'duration': 7.966}, {'end': 3703.706, 'text': "So let's save that.", 'start': 3702.765, 'duration': 0.941}, {'end': 3705.549, 'text': 'And now this should work.', 'start': 3703.867, 'duration': 1.682}, {'end': 3708.012, 'text': "So let's go back here.", 'start': 3706.63, 'duration': 1.382}, {'end': 3712.278, 'text': 'And if I click Delete on Book, it deletes from the UI.', 'start': 3709.014, 'duration': 3.264}], 'summary': 'Using axios to delete transactions from api v1, id passed as param.', 'duration': 53.223, 'max_score': 3659.055, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT03659055.jpg'}], 'start': 3403.104, 'title': 'Implementing morgan in backend and react application database integration', 'summary': "Discusses implementing morgan in the backend for logging requests in development mode using the 'dev' parameter. it also demonstrates integrating a react application with a database, showcasing fetching, deleting, and adding transactions, challenges of using mongodb's id structure, using axios for api calls, and dispatching data to the application.", 'chapters': [{'end': 3463.202, 'start': 3403.104, 'title': 'Implementing morgan in backend', 'summary': "Discusses implementing morgan in the backend for logging requests in development mode, using the 'dev' parameter.", 'duration': 60.098, 'highlights': ["Implementing Morgan for logging requests in development mode by using the 'dev' parameter.", 'Checking the environment to ensure Morgan is used only in development mode.']}, {'end': 3811.619, 'start': 3463.242, 'title': 'React application database integration', 'summary': "Demonstrates integrating a react application with a database, showcasing the process of fetching, deleting, and adding transactions, along with the challenges of using mongodb's id structure, using axios for api calls and dispatching data to the application.", 'duration': 348.377, 'highlights': ['The chapter demonstrates integrating a React application with a database The transcript provides a detailed walkthrough of integrating a React application with a database, showcasing the process of fetching, deleting, and adding transactions.', 'Showcases the process of fetching, deleting, and adding transactions The transcript details the process of fetching transactions from the back end, handling deletions from the UI, and adding new transactions to the database in a React application.', "Challenges of using MongoDB's ID structure and the use of Axios for API calls The chapter addresses the challenge of utilizing MongoDB's ID structure, showcasing the need to match underscore ID for deletions and the use of Axios for making API calls to the backend.", 'Dispatching data to the application and handling errors with try-catch blocks The transcript explains the process of dispatching data to the application, handling errors using try-catch blocks, and ensuring the deletion and addition of transactions are reflected in the database.']}], 'duration': 408.515, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT03403104.jpg', 'highlights': ['Integrating a React application with a database, showcasing fetching, deleting, and adding transactions', 'Dispatching data to the application and handling errors with try-catch blocks', "Challenges of using MongoDB's ID structure and the use of Axios for API calls", "Implementing Morgan for logging requests in development mode by using the 'dev' parameter", 'Checking the environment to ensure Morgan is used only in development mode']}, {'end': 4357.659, 'segs': [{'end': 3845.045, 'src': 'embed', 'start': 3812.079, 'weight': 0, 'content': [{'end': 3816.961, 'text': "And then in the catch, once again, we'll just put this in here.", 'start': 3812.079, 'duration': 4.882}, {'end': 3822.084, 'text': "Okay, so let's try that out.", 'start': 3820.323, 'duration': 1.761}, {'end': 3825.813, 'text': 'So now we should be able to add something here.', 'start': 3823.752, 'duration': 2.061}, {'end': 3827.234, 'text': "Let's say camera.", 'start': 3825.853, 'duration': 1.381}, {'end': 3832.217, 'text': "That's going to be an expense of 100 and add transaction.", 'start': 3828.315, 'duration': 3.902}, {'end': 3834.058, 'text': 'So it gets added to the UI.', 'start': 3832.597, 'duration': 1.461}, {'end': 3836.24, 'text': "If I reload, it's still there.", 'start': 3834.138, 'duration': 2.102}, {'end': 3838.241, 'text': 'All right.', 'start': 3836.26, 'duration': 1.981}, {'end': 3843.644, 'text': 'So we now have a full stack application where we have a database with our transactions.', 'start': 3838.301, 'duration': 5.343}, {'end': 3845.045, 'text': 'We can get them.', 'start': 3843.704, 'duration': 1.341}], 'summary': 'Developed full stack application with database for transactions, including adding an expense of 100 and verifying its presence in the ui.', 'duration': 32.966, 'max_score': 3812.079, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT03812079.jpg'}, {'end': 3963.846, 'src': 'embed', 'start': 3897.257, 'weight': 2, 'content': [{'end': 3904.92, 'text': "And what I'll usually do with something like this is create a new folder in our source called Utils.", 'start': 3897.257, 'duration': 7.663}, {'end': 3908.802, 'text': "And then let's just create a file called.", 'start': 3906.561, 'duration': 2.241}, {'end': 3911.012, 'text': 'Format J.S.', 'start': 3909.892, 'duration': 1.12}, {'end': 3913.993, 'text': 'and then any kind of formatting functions you can put in here.', 'start': 3911.052, 'duration': 2.941}, {'end': 3916.034, 'text': 'So we just need to export this.', 'start': 3914.053, 'duration': 1.981}, {'end': 3922.736, 'text': 'So we have this number with commas and now we can bring that in anywhere where we want to use it.', 'start': 3917.794, 'duration': 4.942}, {'end': 3936.64, 'text': "So let's go in components balance and from here let's import numbers or what is it number with commas.", 'start': 3922.756, 'duration': 13.884}, {'end': 3950.923, 'text': "from and we're going to go up into utils into format and then down here in the total we'll just wrap this with number with commas.", 'start': 3938.641, 'duration': 12.282}, {'end': 3955.784, 'text': 'And now if we go back to our app.', 'start': 3953.884, 'duration': 1.9}, {'end': 3958.605, 'text': 'Now we have a comma.', 'start': 3957.265, 'duration': 1.34}, {'end': 3961.626, 'text': "Now we don't have it here in the income expense.", 'start': 3958.965, 'duration': 2.661}, {'end': 3963.846, 'text': "We also don't have it down here.", 'start': 3961.646, 'duration': 2.2}], 'summary': "Creating a 'utils' folder with a 'format.js' file to add commas to numbers for better readability.", 'duration': 66.589, 'max_score': 3897.257, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT03897257.jpg'}, {'end': 4074.96, 'src': 'embed', 'start': 4042.24, 'weight': 5, 'content': [{'end': 4046.001, 'text': "Well, actually that's not it, because I want to show you how we would prepare for production,", 'start': 4042.24, 'duration': 3.761}, {'end': 4049.302, 'text': "because right now we're just we're still running the react dev server.", 'start': 4046.001, 'duration': 3.301}, {'end': 4053.263, 'text': 'So we want to be able to build out our static assets.', 'start': 4049.782, 'duration': 3.481}, {'end': 4066.274, 'text': "So I'm going to go ahead and stop that and let's cd into our client and run npm, run build and if you have any experience with react,", 'start': 4053.563, 'duration': 12.711}, {'end': 4074.96, 'text': "you know that that's going to go ahead and create a build folder with our static assets, that we would deploy, our index.html, static folder,", 'start': 4066.274, 'duration': 8.686}], 'summary': 'Preparing for production by building static assets with npm run build', 'duration': 32.72, 'max_score': 4042.24, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT04042240.jpg'}, {'end': 4182.765, 'src': 'embed', 'start': 4124.895, 'weight': 1, 'content': [{'end': 4130.401, 'text': 'You want to go below your API routes and we want to check for production.', 'start': 4124.895, 'duration': 5.506}, {'end': 4138.108, 'text': "And I'm actually going to set this to production by going to config and setting the node environment to production.", 'start': 4130.782, 'duration': 7.326}, {'end': 4154.676, 'text': "And then in here we'll say if process dot, ENV, dot node, ENV is equal to production, then we want to set a static folder.", 'start': 4140.63, 'duration': 14.046}, {'end': 4163.823, 'text': 'so app dot use and we say express dot static and the static folder is going to be the build folder.', 'start': 4154.676, 'duration': 9.147}, {'end': 4165.926, 'text': "so it's in client and then build.", 'start': 4163.823, 'duration': 2.103}, {'end': 4172.497, 'text': 'And then we want to have a route basically for anything aside from our API routes.', 'start': 4166.912, 'duration': 5.585}, {'end': 4177.941, 'text': "If we hit, then we want to load the index HTML that's in that build folder, this file right here.", 'start': 4172.676, 'duration': 5.265}, {'end': 4182.765, 'text': "OK, that's the entry point to our our react app in production.", 'start': 4177.961, 'duration': 4.804}], 'summary': 'Setting production environment with static folder for api routes and entry point for react app.', 'duration': 57.87, 'max_score': 4124.895, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT04124895.jpg'}, {'end': 4356.937, 'src': 'embed', 'start': 4327.47, 'weight': 6, 'content': [{'end': 4328.97, 'text': 'you could build a much larger one.', 'start': 4327.47, 'duration': 1.5}, {'end': 4334.013, 'text': 'OK, and I do have a Myrn stack course on Udemy where we build a social network.', 'start': 4328.99, 'duration': 5.023}, {'end': 4344.837, 'text': 'I have a Node.js API masterclass course on Udemy where we really get into the back end building a boot camp directory API.', 'start': 4334.893, 'duration': 9.944}, {'end': 4350.303, 'text': 'And I also have a React course on Udemy as well with three medium sized projects.', 'start': 4345.612, 'duration': 4.691}, {'end': 4351.846, 'text': "But that's it, guys.", 'start': 4350.904, 'duration': 0.942}, {'end': 4352.848, 'text': 'Hopefully you enjoyed this.', 'start': 4351.906, 'duration': 0.942}, {'end': 4355.915, 'text': "I will have the code in the description if you're interested.", 'start': 4352.928, 'duration': 2.987}, {'end': 4356.937, 'text': "And that's it.", 'start': 4356.456, 'duration': 0.481}], 'summary': 'Offers courses on udemy: myrn stack, node.js api, and react with multiple projects.', 'duration': 29.467, 'max_score': 4327.47, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT04327470.jpg'}], 'start': 3812.079, 'title': 'Creating full stack app with database and preparing for production deployment', 'summary': 'Covers creating a full stack application with a database, adding, formatting, and displaying transactions with specific functionalities, along with preparing a react application for production deployment by building static assets, setting up the server, enabling production mode, and running the server on port 5000.', 'chapters': [{'end': 4042.22, 'start': 3812.079, 'title': 'Creating full stack app with database', 'summary': 'Demonstrates the process of creating a full stack application with a database, including adding, formatting, and displaying transactions with specific functionalities.', 'duration': 230.141, 'highlights': ['The chapter details the process of adding transactions to the UI and ensures they persist even after reloading the page.', 'The explanation covers the implementation of a formatting function to add commas and dollar signs to transaction amounts, enhancing the user interface.', 'The speaker emphasizes the use of resources like Stack Overflow and Google for addressing coding challenges, showcasing a practical learning approach.', 'The demonstration showcases the process of creating a new folder for utilities and a formatting file to house relevant functions for future use.']}, {'end': 4357.659, 'start': 4042.24, 'title': 'Preparing for production deployment', 'summary': 'Explains how to prepare a react application for production deployment by building static assets and setting up the server to serve the index.html file, enabling production mode, and running the server on port 5000.', 'duration': 315.419, 'highlights': ['Setting up the server to serve the index.html file for the React app in production. Static folder set to the build folder; server running on port 5000.', 'Enabling production mode by setting the node environment to production. Configuring the server to check for the production environment.', 'Building static assets by running npm build for the React app. Creation of a build folder with static assets for deployment.']}], 'duration': 545.58, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KyWaXA_NvT0/pics/KyWaXA_NvT03812079.jpg', 'highlights': ['The chapter details the process of adding transactions to the UI and ensures they persist even after reloading the page.', 'Setting up the server to serve the index.html file for the React app in production. Static folder set to the build folder; server running on port 5000.', 'The explanation covers the implementation of a formatting function to add commas and dollar signs to transaction amounts, enhancing the user interface.', 'Enabling production mode by setting the node environment to production. Configuring the server to check for the production environment.', 'The demonstration showcases the process of creating a new folder for utilities and a formatting file to house relevant functions for future use.', 'Building static assets by running npm build for the React app. Creation of a build folder with static assets for deployment.', 'The speaker emphasizes the use of resources like Stack Overflow and Google for addressing coding challenges, showcasing a practical learning approach.']}], 'highlights': ["The chapter covers building an entire API from scratch to store and fetch transactions, and integrating it into a React application, named 'Expense Tracker MERN'.", 'The backend API enables storage and management of transactions, allowing addition of income or expenses, with the ability to view calculated changes and persist data even after reloading.', 'The chapter details the process of adding transactions to the UI and ensures they persist even after reloading the page.', 'The chapter discusses setting up the API controller and model to handle requests, using Mongoose methods to interact with the database.', 'The chapter discusses setting up a controllers folder and creating methods in the controller to connect them to the routes for handling get, post, and delete requests, with the example URL endpoints and request methods used.', 'The chapter details the process of adding transactions to the UI and ensures they persist even after reloading the page.', 'The chapter emphasizes the importance of organizing routes in a clean and scalable manner, promoting maintainability and ease of adding more routes.', 'The chapter covers handling API requests in a reducer, emphasizing the importance of handling asynchronous calls and data manipulation.', 'The chapter discusses setting up the API controller and model to handle requests, using Mongoose methods to interact with the database.', 'The chapter details the process of adding transactions to the UI and ensures they persist even after reloading the page.']}