title
Full Stack Web App using Vue.js & Express.js: Part 1 - Intro

description
Welcome to part 1 of a new series where I will create a full stack web application using Vue.js and Express.js 🎥Video created by Cody Seibert. Check out his channel: https://www.youtube.com/channel/UCsrVDPJBYeXItETFHG0qzyw 00:00 Project description 6:35 Git Setup 17:47 Backend setup 36:40 Register page setup GitHub repo: https://github.com/codyseibert/tab-tracker Follow Cody on Twitter: https://twitter.com/CodyLSeibert Learn to code for free and get a developer job: https://www.freecodecamp.com Read hundreds of articles on programming: https://medium.freecodecamp.com

detail
{'title': 'Full Stack Web App using Vue.js & Express.js: Part 1 - Intro', 'heatmap': [{'end': 1243.391, 'start': 1174.299, 'weight': 0.767}, {'end': 3255.443, 'start': 3218.43, 'weight': 0.727}], 'summary': 'This tutorial series covers building a full stack web app using vue.js, express/node.js, and mysql, emphasizing vue.js potential and simplicity of express.js for beginners, setting up npm dependencies for front-end projects, creating a restful api with express for the tab tracker web app, including setting up a vue.js web application, using git for small and frequent commits, and setting up an express application on port 8081 with axios requests and two-way binding in vue.js.', 'chapters': [{'end': 144.547, 'segs': [{'end': 105.381, 'src': 'embed', 'start': 78.31, 'weight': 0, 'content': [{'end': 83.451, 'text': 'I do think Vue.js has the most potential, just because the way they have it set up and their docs,', 'start': 78.31, 'duration': 5.141}, {'end': 87.152, 'text': "and it's very easy to pick up and hit the ground running with Vue.js.", 'start': 83.451, 'duration': 3.701}, {'end': 91.194, 'text': 'So if you like React, stick with React, but I hope you take some..', 'start': 87.212, 'duration': 3.982}, {'end': 100.899, 'text': 'some key components away from this tutorial because Vue.js kind of mixes both the best practices from Angular 2 and React.', 'start': 92.534, 'duration': 8.365}, {'end': 105.381, 'text': "So you'll see a lot of the same paradigms in Vue.js, which I think is good for a beginner,", 'start': 100.919, 'duration': 4.462}], 'summary': 'Vue.js has potential, easy to pick up, mixes best practices from angular 2 and react.', 'duration': 27.071, 'max_score': 78.31, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Fa4cRMaTDUI/pics/Fa4cRMaTDUI78310.jpg'}], 'start': 2.113, 'title': 'Building full stack web app', 'summary': 'Provides an intermediate to advanced level tutorial on building a web application using vue.js for the front end, express/node.js for the back end, and mysql for the database, emphasizing vue.js potential and the simplicity of express.js for beginners.', 'chapters': [{'end': 144.547, 'start': 2.113, 'title': 'Full stack web app tutorial with vue.js, express and mysql', 'summary': 'Provides an intermediate to advanced level tutorial on building a web application using vue.js for the front end, express/node.js for the back end, and mysql for the database, emphasizing the potential of vue.js and the simplicity of express.js for beginners.', 'duration': 142.434, 'highlights': ['Vue.js is a front end library used for building single page applications, with well-documented features. Vue.js is described as a front end library for single page applications with well-documented features, making it easy to pick up and hit the ground running. It is compared to Angular 1, Angular 2, and React, with the speaker expressing preference for Vue.js due to its potential and ease of use.', 'Vue.js combines best practices from Angular 2 and React, allowing for an easy transition to other frameworks in the future. Vue.js is stated to combine best practices from Angular 2 and React, making it beneficial for beginners as it allows for an easy transition to other frameworks in the future.', 'Express.js is a very bare bones framework that can be used for building RESTful APIs and is recommended for beginners learning about web applications and REST API. Express.js is recommended for beginners as it is described as a very bare bones framework for building RESTful APIs, making it suitable for those starting to learn about web applications and REST API.']}], 'duration': 142.434, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Fa4cRMaTDUI/pics/Fa4cRMaTDUI2113.jpg', 'highlights': ['Vue.js is a front end library for single page applications with well-documented features, making it easy to pick up and hit the ground running.', 'Vue.js combines best practices from Angular 2 and React, allowing for an easy transition to other frameworks in the future.', 'Express.js is recommended for beginners as it is described as a very bare bones framework for building RESTful APIs, making it suitable for those starting to learn about web applications and REST API.']}, {'end': 631.213, 'segs': [{'end': 311.191, 'src': 'embed', 'start': 272.137, 'weight': 3, 'content': [{'end': 276.562, 'text': 'Now if I were to log in, go here, log in, has my password and information saved.', 'start': 272.137, 'duration': 4.425}, {'end': 279.393, 'text': 'we get a little bit more functionality.', 'start': 277.452, 'duration': 1.941}, {'end': 281.014, 'text': 'So on the left, we have our recently viewed.', 'start': 279.413, 'duration': 1.601}, {'end': 285.557, 'text': "So anytime you click view into one of these, we're going to keep track of what you viewed before.", 'start': 281.114, 'duration': 4.443}, {'end': 288.338, 'text': 'So you can easily just go to songs that you viewed in the past.', 'start': 285.737, 'duration': 2.601}, {'end': 292.42, 'text': 'And then also we have a section down here called bookmark song.', 'start': 289.419, 'duration': 3.001}, {'end': 298.924, 'text': "So if I were to go into, let's say getting into you and say bookmark, it'll bookmark this song for my user accounts.", 'start': 292.48, 'duration': 6.444}, {'end': 303.166, 'text': 'Now, if I were to go back to the browse tab, I have that song bookmarked over here.', 'start': 298.984, 'duration': 4.182}, {'end': 305.087, 'text': 'And again, I can go back and view that.', 'start': 303.246, 'duration': 1.841}, {'end': 311.191, 'text': 'Um, We can also, since I am the owner or the one who posted this song, I can go in and edit this song.', 'start': 306.048, 'duration': 5.143}], 'summary': 'Improved functionality includes recent views, bookmarking, and user account features.', 'duration': 39.054, 'max_score': 272.137, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Fa4cRMaTDUI/pics/Fa4cRMaTDUI272137.jpg'}, {'end': 640.181, 'src': 'embed', 'start': 613.27, 'weight': 0, 'content': [{'end': 617.391, 'text': 'We see we have a client folder here and if I were to go into the client folder and list out,', 'start': 613.27, 'duration': 4.121}, {'end': 622.892, 'text': 'we have now a bunch of different files which are kind of used for running our Vue application.', 'start': 617.391, 'duration': 5.501}, {'end': 624.172, 'text': 'And then a better way to visualize this.', 'start': 622.912, 'duration': 1.26}, {'end': 631.213, 'text': 'if I were going to my tab tracker and go to the client folder again, we have a bunch of files that are built up from the Vue init command.', 'start': 624.172, 'duration': 7.041}, {'end': 640.181, 'text': "And a lot of these you don't have to worry about, like this is just pre-baked boilerplate project set up which you don't need to worry about.", 'start': 631.233, 'duration': 8.948}], 'summary': 'The client folder contains various files for running the vue application, built up from the vue init command.', 'duration': 26.911, 'max_score': 613.27, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Fa4cRMaTDUI/pics/Fa4cRMaTDUI613270.jpg'}], 'start': 144.767, 'title': 'Building restful api and vue.js web app', 'summary': 'Covers building a restful api with express for a web application called tab tracker, and details the process of setting up a vue.js web application, emphasizing vue-cli and webpack template initialization.', 'chapters': [{'end': 371.931, 'start': 144.767, 'title': 'Building a restful api with express', 'summary': 'Covers building a restful api with express to create a simple web application called tab tracker for tracking guitar tabs, including features like browsing and searching songs, viewing details, logging in, bookmarking songs, editing and adding new songs.', 'duration': 227.164, 'highlights': ['The chapter covers creating a restful API with Express to build a simple web application called Tab Tracker for tracking guitar tabs, including features like browsing and searching songs, viewing details, logging in, bookmarking songs, editing and adding new songs.', 'The app called Tab Tracker allows users to browse and search for songs, view song details, including YouTube links, tabs, and lyrics, and log in to access additional features like bookmarking, editing, and adding new songs.', 'The application provides functionality for users to search through songs by artist, genre, and name, view song details including YouTube links, tabs, and lyrics, and log in to access additional features like bookmarking, editing, and adding new songs.', 'The application includes features like browsing and searching songs, viewing song details, logging in to access additional features like bookmarking, editing, and adding new songs, and requires users to fill in required fields when adding new songs.']}, {'end': 631.213, 'start': 371.931, 'title': 'Building vue.js web app', 'summary': 'Details the process of setting up a vue.js web application, starting with creating a git repository, initializing vue-cli, and configuring a vue project, with an emphasis on creating a vue.js application using vue-cli and initializing the project with webpack template.', 'duration': 259.282, 'highlights': ['The chapter details the process of setting up a Vue.js web application. The tutorial focuses on guiding intermediate developers through creating a Vue.js web application and transitioning from a beginner level.', "Starting with creating a Git repository and initializing Vue-CLI. The tutorial begins by creating a Git repository named 'TabTracker' and initializing Vue-CLI, emphasizing the use of npm to install Vue-CLI globally.", "Emphasis on creating a Vue.js application using Vue-CLI and initializing the project with webpack template. The chapter emphasizes the use of Vue-CLI to initialize a Vue.js application with the webpack template, showcasing the process of answering setup questions and creating the 'client' folder for the Vue project."]}], 'duration': 486.446, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Fa4cRMaTDUI/pics/Fa4cRMaTDUI144767.jpg', 'highlights': ['The chapter covers creating a restful API with Express for a web application called Tab Tracker, including features like browsing and searching songs, viewing details, logging in, bookmarking, editing, and adding new songs.', 'The app called Tab Tracker allows users to browse and search for songs, view song details, including YouTube links, tabs, and lyrics, and log in to access additional features like bookmarking, editing, and adding new songs.', 'The application provides functionality for users to search through songs by artist, genre, and name, view song details including YouTube links, tabs, and lyrics, and log in to access additional features like bookmarking, editing, and adding new songs.', 'The application includes features like browsing and searching songs, viewing song details, logging in to access additional features like bookmarking, editing, and adding new songs, and requires users to fill in required fields when adding new songs.', 'The chapter details the process of setting up a Vue.js web application, emphasizing vue-cli and webpack template initialization.', "Starting with creating a Git repository and initializing Vue-CLI, the tutorial begins by creating a Git repository named 'TabTracker' and initializing Vue-CLI, emphasizing the use of npm to install Vue-CLI globally.", "Emphasis on creating a Vue.js application using Vue-CLI and initializing the project with webpack template, showcasing the process of answering setup questions and creating the 'client' folder for the Vue project.", 'The tutorial focuses on guiding intermediate developers through creating a Vue.js web application and transitioning from a beginner level.']}, {'end': 911.501, 'segs': [{'end': 899.094, 'src': 'embed', 'start': 868.111, 'weight': 0, 'content': [{'end': 873.334, 'text': 'we cloned a github repo locally to our machine.', 'start': 868.111, 'duration': 5.223}, {'end': 881.057, 'text': 'we use view cli to kind of build up a boilerplate project which can be used to create a vue js front-end application.', 'start': 873.334, 'duration': 7.723}, {'end': 886.048, 'text': 'and then finally, we did an npm install to make sure we have all the dependencies.', 'start': 881.057, 'duration': 4.991}, {'end': 891.911, 'text': 'we did npm run dev, which went ahead and started our web server in our view js application,', 'start': 886.048, 'duration': 5.863}, {'end': 899.094, 'text': 'and now we have a tab which is ready to go to see the view js application running.', 'start': 891.911, 'duration': 7.183}], 'summary': 'Cloned github repo, created vue.js project, installed dependencies, and started web server.', 'duration': 30.983, 'max_score': 868.111, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Fa4cRMaTDUI/pics/Fa4cRMaTDUI868111.jpg'}], 'start': 631.233, 'title': 'Setting up npm dependencies and vue.js front-end', 'summary': 'Covers setting up npm dependencies for a front-end project using package.json and outlines the process of setting up a vue.js front-end application, including recommended node version, dependency installation with npm, and starting the front-end server with npm run dev.', 'chapters': [{'end': 729.734, 'start': 631.233, 'title': 'Setting up npm dependencies for a front-end project', 'summary': 'Covers setting up npm dependencies for a front-end project using package.json, explaining the process of installing dependencies and their local storage, with future plans to add more dependencies as the project becomes more complicated.', 'duration': 98.501, 'highlights': ['Explaining the purpose of package.json and its role in managing project dependencies, including both regular and development dependencies.', "Detailing the process of installing NPM dependencies using the 'npm install' command and the local storage of these dependencies in a node_modules folder.", 'Emphasizing the future addition of more dependencies as the project complexity increases, indicating the need for advanced setup and build configurations.', "Highlighting the usage of package.json to declare project dependencies and the retrieval of these dependencies from the npm repository using 'npm install'."]}, {'end': 911.501, 'start': 729.734, 'title': 'Setting up vue.js front-end application', 'summary': 'Outlines the process of setting up a vue.js front-end application, including recommendation to use node version 8 or later, installation of dependencies with npm, and starting the front-end server with npm run dev.', 'duration': 181.767, 'highlights': ["It is recommended to use Node version 8 or later to avoid issues, as the project's dependencies are based on the Node version. Using at least Node version 8 is recommended to prevent issues with dependencies, as they are dependent on the Node version.", "The chapter demonstrates the process of installing dependencies using npm install, resulting in the creation of a node_modules folder containing all the project's dependencies and their sub-dependencies. The npm install process creates a node_modules folder containing all the project's dependencies and their sub-dependencies, which can be visualized in the VS Code editor.", "The script section in the package.json file allows execution of commands such as npm run dev, which starts the Vue.js front-end server by building up the source code and loading it in a web browser. The package.json file's script section enables the execution of commands like npm run dev, which starts the front-end server by building and loading the source code in a web browser.", 'The process involves cloning a GitHub repo, using Vue CLI to build a boilerplate project for a Vue.js front-end application, and running npm install followed by npm run dev to start the web server. The process includes cloning a GitHub repo, creating a Vue.js project using Vue CLI, installing dependencies with npm install, and starting the web server with npm run dev.', 'The setup process is a one-time task, requiring npm run dev to start the server for subsequent sessions. The setup process is a one-time task, with the only subsequent requirement being to run npm run dev to start the server for future sessions.']}], 'duration': 280.268, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Fa4cRMaTDUI/pics/Fa4cRMaTDUI631233.jpg', 'highlights': ['Emphasizing the future addition of more dependencies as the project complexity increases, indicating the need for advanced setup and build configurations.', 'The process includes cloning a GitHub repo, creating a Vue.js project using Vue CLI, installing dependencies with npm install, and starting the web server with npm run dev.', 'The script section in the package.json file allows execution of commands such as npm run dev, which starts the Vue.js front-end server by building up the source code and loading it in a web browser.', "It is recommended to use Node version 8 or later to avoid issues, as the project's dependencies are based on the Node version."]}, {'end': 2056.226, 'segs': [{'end': 944.24, 'src': 'embed', 'start': 913.191, 'weight': 7, 'content': [{'end': 915.874, 'text': "So now, at this point, we've done a lot of work.", 'start': 913.191, 'duration': 2.683}, {'end': 924.243, 'text': "So it's very good to make sure you always commit your changes, like as small changes as you can make, and very often commit them to your GitHub repo.", 'start': 917.095, 'duration': 7.148}, {'end': 928.547, 'text': 'So in this case, if I were to do a git status, we see that we have a bunch of changes.', 'start': 924.283, 'duration': 4.264}, {'end': 931.41, 'text': 'Well, in this case, a subfolder, because we just added something.', 'start': 928.727, 'duration': 2.683}, {'end': 931.971, 'text': "So I'll go back.", 'start': 931.43, 'duration': 0.541}, {'end': 934.874, 'text': 'It says that we have a client folder added.', 'start': 931.991, 'duration': 2.883}, {'end': 939.857, 'text': "And what we want to do is we actually want to add all the changes that we've done.", 'start': 936.294, 'duration': 3.563}, {'end': 944.24, 'text': 'We want to go ahead and make a commit and give it some initial message.', 'start': 939.897, 'duration': 4.343}], 'summary': 'Frequent commits to github for small changes ensure progress tracking and version control.', 'duration': 31.049, 'max_score': 913.191, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Fa4cRMaTDUI/pics/Fa4cRMaTDUI913191.jpg'}, {'end': 1033.499, 'src': 'embed', 'start': 986.328, 'weight': 4, 'content': [{'end': 990.69, 'text': 'so now, if i were to go back to my project on github, Refresh the page.', 'start': 986.328, 'duration': 4.362}, {'end': 992.511, 'text': 'We see that client is now there.', 'start': 991.03, 'duration': 1.481}, {'end': 997.095, 'text': 'We have all those files inside of our client folder of the branch master.', 'start': 993.072, 'duration': 4.023}, {'end': 1001.078, 'text': 'And then if I were to go to our recent commits here, we have two commits.', 'start': 997.715, 'duration': 3.363}, {'end': 1010.266, 'text': 'And the last commit we did, init the Vue.js application using Vue CLI, which if you remember is the exact same message that we put up here.', 'start': 1001.739, 'duration': 8.527}, {'end': 1016.871, 'text': 'And now if I were to click into this, I can see all the different changes that happened with this commit.', 'start': 1010.286, 'duration': 6.585}, {'end': 1022.652, 'text': "right a ton of stuff not really useful because there's just so many files.", 'start': 1019.73, 'duration': 2.922}, {'end': 1026.314, 'text': 'make sure your commits are small and make sure you do them often.', 'start': 1022.652, 'duration': 3.662}, {'end': 1033.499, 'text': 'so again, that was a kind of quick overview of how to use git make sure you commit often and make sure your commits are pretty small.', 'start': 1026.314, 'duration': 7.185}], 'summary': 'Using git, commit often with small changes to track progress effectively.', 'duration': 47.171, 'max_score': 986.328, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Fa4cRMaTDUI/pics/Fa4cRMaTDUI986328.jpg'}, {'end': 1243.391, 'src': 'heatmap', 'start': 1174.299, 'weight': 0.767, 'content': [{'end': 1174.899, 'text': 'No big deal.', 'start': 1174.299, 'duration': 0.6}, {'end': 1175.78, 'text': "We're familiar with this.", 'start': 1174.979, 'duration': 0.801}, {'end': 1177.341, 'text': 'We have the scripts and it has a test.', 'start': 1175.8, 'duration': 1.541}, {'end': 1189.881, 'text': "And what we want to do is, first of all, we're going to install something called nodemon,", 'start': 1179.682, 'duration': 10.199}, {'end': 1193.504, 'text': 'which is something very useful for continuously restarting your server.', 'start': 1189.881, 'duration': 3.623}, {'end': 1198.069, 'text': "So I'll do npm install hyphen hyphen save nodemon.", 'start': 1194.365, 'duration': 3.704}, {'end': 1204.615, 'text': "We also want to install, let's go set eslint.", 'start': 1198.529, 'duration': 6.086}, {'end': 1214.1, 'text': 'so, now that those two packages are done installing, what we can do is go back to that servers package.json file.', 'start': 1208.496, 'duration': 5.604}, {'end': 1217.162, 'text': "i'm going to go ahead and just delete that test and put in two lines.", 'start': 1214.1, 'duration': 3.062}, {'end': 1219.324, 'text': "i'm going to do a start command.", 'start': 1217.162, 'duration': 2.162}, {'end': 1225.529, 'text': 'close this we have a start script which pretty much is going to run nodeman over some file.', 'start': 1219.324, 'duration': 6.205}, {'end': 1227.851, 'text': "so right now we don't have an app.js created,", 'start': 1225.529, 'duration': 2.322}, {'end': 1233.458, 'text': "but we'll do so in a second and it's going to run a linter over our code and then it's going to run our server.", 'start': 1227.851, 'duration': 5.607}, {'end': 1234.46, 'text': "now this don't.", 'start': 1233.458, 'duration': 1.002}, {'end': 1235.921, 'text': "i would say, don't really worry about this.", 'start': 1234.46, 'duration': 1.461}, {'end': 1243.391, 'text': "this is kind of getting into the weeds of like your setup, but just know that we're just going to add these.", 'start': 1235.921, 'duration': 7.47}], 'summary': 'Installing nodemon and eslint for server setup and testing.', 'duration': 69.092, 'max_score': 1174.299, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Fa4cRMaTDUI/pics/Fa4cRMaTDUI1174299.jpg'}, {'end': 1385.393, 'src': 'embed', 'start': 1359.241, 'weight': 0, 'content': [{'end': 1364.782, 'text': 'so now i basically just want to run the eslint script so that it creates a configuration file for us to use.', 'start': 1359.241, 'duration': 5.541}, {'end': 1376.59, 'text': "so i'll do node, i'll pass it a file that i want to run and then i'll pass a flag called init, And when we do this, it's going to give us a prompt.", 'start': 1364.782, 'duration': 11.808}, {'end': 1380.891, 'text': "And I'm just going to say use a popular style guide.", 'start': 1378.45, 'duration': 2.441}, {'end': 1382.912, 'text': "I'm going to say use a standard style guide.", 'start': 1380.911, 'duration': 2.001}, {'end': 1385.393, 'text': 'Which format? JavaScript.', 'start': 1383.493, 'duration': 1.9}], 'summary': 'Running eslint script to generate configuration file for javascript with standard style guide.', 'duration': 26.152, 'max_score': 1359.241, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Fa4cRMaTDUI/pics/Fa4cRMaTDUI1359241.jpg'}, {'end': 1959.952, 'src': 'embed', 'start': 1888.148, 'weight': 1, 'content': [{'end': 1897.374, 'text': 'So we have an app running on port 8081, right? So we should just be able to go into Chrome, go to 8081, and do slash status.', 'start': 1888.148, 'duration': 9.226}, {'end': 1900.781, 'text': 'we see here, we get message hello world back.', 'start': 1898.8, 'duration': 1.981}, {'end': 1907.986, 'text': 'so this shows or demonstrates that we have a server actually running on port 8081.', 'start': 1900.781, 'duration': 7.205}, {'end': 1910.927, 'text': "it's handling an endpoint called slash status.", 'start': 1907.986, 'duration': 2.941}, {'end': 1912.028, 'text': 'when it gets a request,', 'start': 1910.927, 'duration': 1.101}, {'end': 1918.852, 'text': "it's going to go ahead and send back a json object which has an attribute message and then the string hello world exclamation mark.", 'start': 1912.028, 'duration': 6.824}, {'end': 1926.13, 'text': 'if we go here, we just saw that it gets returned to our browser when we hit this git endpoint And by default,', 'start': 1918.852, 'duration': 7.278}, {'end': 1931.052, 'text': "when you do a request in your Chrome browser, it's going to do the default of a git request.", 'start': 1926.13, 'duration': 4.922}, {'end': 1938.855, 'text': 'So let me demonstrate another application we can use to test out our back end.', 'start': 1932.893, 'duration': 5.962}, {'end': 1946.957, 'text': "So I'm going to go ahead and load up an app called Postman, which you can download from, I think, the Chrome App Store.", 'start': 1941.115, 'duration': 5.842}, {'end': 1950.979, 'text': 'Give me one second.', 'start': 1950.158, 'duration': 0.821}, {'end': 1951.839, 'text': "It's loading up right now.", 'start': 1951.019, 'duration': 0.82}, {'end': 1958.712, 'text': "Actually, I just saw a little bug, so it's putting out combined here.", 'start': 1955.771, 'duration': 2.941}, {'end': 1959.952, 'text': "It's supposed to be combined.", 'start': 1958.732, 'duration': 1.22}], 'summary': 'An app running on port 8081 demonstrates a server handling an endpoint, returning a json object with a message.', 'duration': 71.804, 'max_score': 1888.148, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Fa4cRMaTDUI/pics/Fa4cRMaTDUI1888148.jpg'}], 'start': 913.191, 'title': 'Using git, setting up server project, and basic express server', 'summary': 'Covers using git for small and frequent commits, setting up a server project using npm, installing nodemon and eslint, creating a basic express server, running npm scripts, installing npm packages, and testing backend api using tools like postman and rest client.', 'chapters': [{'end': 1246.173, 'start': 913.191, 'title': 'Using git and setting up server project', 'summary': 'Covers the process of using git to make small and frequent commits to a github repository, with demonstrated steps on adding, committing, and pushing changes. it also details the initial setup of a server project using npm and installing nodemon and eslint.', 'duration': 332.982, 'highlights': ['The process of using Git to make small and frequent commits to a GitHub repository The tutorial emphasizes the importance of making small and frequent commits, as demonstrated in the steps of adding, committing, and pushing changes to a GitHub repository.', 'Demonstrated steps on adding, committing, and pushing changes using Git The transcript provides a detailed demonstration of the steps involved in adding, committing, and pushing changes to a GitHub repository, emphasizing the importance of making small and frequent commits.', 'Initial setup of a server project using NPM, installing nodemon and eslint The transcript details the initial setup of a server project using NPM, including the installation of nodemon and eslint for continuously restarting the server and linting the code.']}, {'end': 2056.226, 'start': 1246.233, 'title': 'Setting up a basic express server', 'summary': 'Covers setting up a basic express server, creating and running npm scripts, installing and using npm packages, and testing the backend api using tools like postman and rest client.', 'duration': 809.993, 'highlights': ["Created a new folder called source and a new file app.js inside it to define a web application. The chapter begins with creating a new folder 'source' and a file 'app.js' to define a web application.", 'Installed nodemon and eslint as dependencies using npm. The dependencies nodemon and eslint were installed using npm.', 'Defined start and lint scripts in package.json to run nodemon and eslint over the app.js file. Start and lint scripts were defined in package.json to run nodemon and eslint over the app.js file.', 'Installed express, body-parser, cors, and morgan as dependencies for creating an Express application. The dependencies express, body-parser, cors, and morgan were installed for creating an Express application.', 'Created a basic Express server with defined middleware for logging, processing JSON data, and enabling cross-origin requests. A basic Express server was created with defined middleware for logging, processing JSON data, and enabling cross-origin requests.', "Created a simple endpoint '/status' in the Express server to return a 'hello world' message. A simple endpoint '/status' was created in the Express server to return a 'hello world' message.", 'Demonstrated testing the backend API using tools like Postman and Rest Client to send requests and receive responses. The process of testing the backend API using tools like Postman and Rest Client was demonstrated.']}], 'duration': 1143.035, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Fa4cRMaTDUI/pics/Fa4cRMaTDUI913191.jpg', 'highlights': ['Demonstrated testing the backend API using tools like Postman and Rest Client to send requests and receive responses.', "Created a simple endpoint '/status' in the Express server to return a 'hello world' message.", 'Created a basic Express server with defined middleware for logging, processing JSON data, and enabling cross-origin requests.', 'Installed express, body-parser, cors, and morgan as dependencies for creating an Express application.', 'Defined start and lint scripts in package.json to run nodemon and eslint over the app.js file.', 'Installed nodemon and eslint as dependencies using npm.', 'Created a new folder called source and a new file app.js inside it to define a web application.', 'Initial setup of a server project using NPM, installing nodemon and eslint.', 'Demonstrated steps on adding, committing, and pushing changes using Git.', 'The process of using Git to make small and frequent commits to a GitHub repository.']}, {'end': 2649.507, 'segs': [{'end': 2121.066, 'src': 'embed', 'start': 2094.571, 'weight': 0, 'content': [{'end': 2098.252, 'text': 'And both of these are going to get a little bit more complicated down the road.', 'start': 2094.571, 'duration': 3.681}, {'end': 2102.314, 'text': "We're going to add a lot more logic, a lot more endpoints, a lot more files.", 'start': 2098.272, 'duration': 4.042}, {'end': 2106.716, 'text': "But it's good to know that it's very easy to set up using generators.", 'start': 2103.014, 'duration': 3.702}, {'end': 2111.257, 'text': "And it's also good to know how to set up a project yourself using just NPM install.", 'start': 2106.736, 'duration': 4.521}, {'end': 2114.359, 'text': 'Look through NPM and find what packages you want and install them.', 'start': 2111.758, 'duration': 2.601}, {'end': 2121.066, 'text': "And again, now we just did a bunch of work on the server side, so let's go ahead and go back and we can add those.", 'start': 2115.421, 'duration': 5.645}], 'summary': 'Setting up projects using generators or npm for easy configuration and expansion.', 'duration': 26.495, 'max_score': 2094.571, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Fa4cRMaTDUI/pics/Fa4cRMaTDUI2094571.jpg'}, {'end': 2173.042, 'src': 'embed', 'start': 2146.801, 'weight': 1, 'content': [{'end': 2151.946, 'text': "I'll do a git commit and say setup of the ExpressJS server.", 'start': 2146.801, 'duration': 5.145}, {'end': 2157.731, 'text': "And then I'll go ahead and push that to our backend or push that to GitHub.", 'start': 2153.667, 'duration': 4.064}, {'end': 2161.974, 'text': 'And again, if I were to go to GitHub here, refresh the project.', 'start': 2158.932, 'duration': 3.042}, {'end': 2168.2, 'text': "we now have a server folder at this location with that same app.js that we've built up.", 'start': 2161.974, 'duration': 6.226}, {'end': 2173.042, 'text': "so i mean hopefully this wasn't too complicated.", 'start': 2168.999, 'duration': 4.043}], 'summary': 'Performed git commit and pushed expressjs server setup to github, resulting in a server folder with app.js in place.', 'duration': 26.241, 'max_score': 2146.801, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Fa4cRMaTDUI/pics/Fa4cRMaTDUI2146801.jpg'}, {'end': 2607.633, 'src': 'embed', 'start': 2580.172, 'weight': 5, 'content': [{'end': 2583.935, 'text': 'And then once we get the UI, we can start hitting those endpoints and see how it actually works.', 'start': 2580.172, 'duration': 3.763}, {'end': 2590.178, 'text': 'All right, so again, a little recap.', 'start': 2588.557, 'duration': 1.621}, {'end': 2599.529, 'text': 'On our backend, we have a register endpoint, which takes a post request and it will return a message with the email that we provided in the payload.', 'start': 2591.585, 'duration': 7.944}, {'end': 2607.633, 'text': 'And then a little information, you can access the payload using rec.body.email on your express server.', 'start': 2600.649, 'duration': 6.984}], 'summary': 'Backend has a register endpoint returning email from post request.', 'duration': 27.461, 'max_score': 2580.172, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Fa4cRMaTDUI/pics/Fa4cRMaTDUI2580172.jpg'}], 'start': 2056.226, 'title': 'Setting up express application and vue.js client', 'summary': 'Covers setting up an express application on port 8081, creating a status endpoint, and setting up a client using vue.js. it also includes creating axios requests on the client side and implementing a register endpoint in expressjs.', 'chapters': [{'end': 2094.17, 'start': 2056.226, 'title': 'Setting up express application and vue.js client', 'summary': 'Covers setting up an express application running on port 8081 and creating a status endpoint, which sends back a specific response. it also briefly mentions the possibility of overwriting the port using environment variables and setting up a client using vue.js.', 'duration': 37.944, 'highlights': ['We created an express application running on port 8081, with the ability to overwrite the port using environment variables.', 'A status endpoint was set up to send a specific response when hit.', 'The chapter briefly mentions setting up a client using Vue.js.']}, {'end': 2649.507, 'start': 2094.571, 'title': 'Setting up expressjs and axios for http requests', 'summary': 'Covers setting up an expressjs server, creating axios requests on the client side, and implementing a register endpoint, with practical examples and explanations.', 'duration': 554.936, 'highlights': ['Created an Axios object pointing to the backend URL with a base URL of 8081 for making HTTP requests. The Axios object was created to handle HTTP requests, with the base URL set to the backend API at port 8081.', 'Implemented a register endpoint on the backend that returns a message upon receiving a post request. A register endpoint was implemented on the backend to handle post requests and return a specific message upon receiving a request.', 'Developed an authentication service with a register method for posting credentials to the register endpoint. An authentication service was developed with a register method, enabling the posting of credentials to the register endpoint for user registration.']}], 'duration': 593.281, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Fa4cRMaTDUI/pics/Fa4cRMaTDUI2056226.jpg', 'highlights': ['Created an Axios object pointing to the backend URL with a base URL of 8081 for making HTTP requests.', 'Implemented a register endpoint on the backend that returns a message upon receiving a post request.', 'Developed an authentication service with a register method for posting credentials to the register endpoint.', 'We created an express application running on port 8081, with the ability to overwrite the port using environment variables.', 'A status endpoint was set up to send a specific response when hit.', 'The chapter briefly mentions setting up a client using Vue.js.']}, {'end': 3351.243, 'segs': [{'end': 3053.522, 'src': 'embed', 'start': 3019.3, 'weight': 0, 'content': [{'end': 3021.802, 'text': "So I'm just going to go ahead and put ABC one, two, three.", 'start': 3019.3, 'duration': 2.502}, {'end': 3025.365, 'text': 'So if I save that, we see that those are put into an input box.', 'start': 3022.342, 'duration': 3.023}, {'end': 3028.848, 'text': "Cause what's happening behind the scenes as V model is a two way binding.", 'start': 3025.865, 'duration': 2.983}, {'end': 3033.552, 'text': "So it's saying, set this input value to whatever this is and vice versa.", 'start': 3028.988, 'duration': 4.564}, {'end': 3036.835, 'text': 'If I were to type into this input, go ahead and update this down here.', 'start': 3033.572, 'duration': 3.263}, {'end': 3043.341, 'text': "So what I can do to kind of demonstrate that is I'm going to go ahead and say, watch email.", 'start': 3036.875, 'duration': 6.466}, {'end': 3053.522, 'text': "And whenever the value of email changes, so I'll say console.log email has changed value.", 'start': 3045.037, 'duration': 8.485}], 'summary': 'Demonstrating two-way binding using v model and console.log for email changes.', 'duration': 34.222, 'max_score': 3019.3, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Fa4cRMaTDUI/pics/Fa4cRMaTDUI3019300.jpg'}, {'end': 3255.443, 'src': 'heatmap', 'start': 3218.43, 'weight': 0.727, 'content': [{'end': 3225.095, 'text': "And then I'm going to use a weight in async here because I think it's much better than using promises these days.", 'start': 3218.43, 'duration': 6.665}, {'end': 3227.977, 'text': 'And I could say response is equal to that.', 'start': 3225.615, 'duration': 2.362}, {'end': 3230.018, 'text': "So basically what we're going to do is call that endpoint.", 'start': 3228.057, 'duration': 1.961}, {'end': 3232.2, 'text': "Remember there's a register endpoint on our node service.", 'start': 3230.038, 'duration': 2.162}, {'end': 3237.003, 'text': "We're going to pass it email and password, and then we're going to wait until we get a response back.", 'start': 3233.08, 'duration': 3.923}, {'end': 3240.986, 'text': 'And once we get that response, we can just go ahead and print out response dot data.', 'start': 3237.143, 'duration': 3.843}, {'end': 3243.413, 'text': 'Save this file.', 'start': 3242.532, 'duration': 0.881}, {'end': 3244.874, 'text': 'This should refresh.', 'start': 3244.053, 'duration': 0.821}, {'end': 3246.536, 'text': 'And then we click Register with that.', 'start': 3245.054, 'duration': 1.482}, {'end': 3247.657, 'text': 'And we get back a message.', 'start': 3246.616, 'duration': 1.041}, {'end': 3250.059, 'text': 'Hello, ccyber at gmail.com.', 'start': 3247.717, 'duration': 2.342}, {'end': 3251.52, 'text': 'Your user was registered.', 'start': 3250.119, 'duration': 1.401}, {'end': 3251.94, 'text': 'Have fun.', 'start': 3251.58, 'duration': 0.36}, {'end': 3255.443, 'text': 'And again, we can go to our endpoint here, Node.', 'start': 3253.121, 'duration': 2.322}], 'summary': 'Using async weight to call register endpoint on node service and print response data.', 'duration': 37.013, 'max_score': 3218.43, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Fa4cRMaTDUI/pics/Fa4cRMaTDUI3218430.jpg'}, {'end': 3260.728, 'src': 'embed', 'start': 3230.038, 'weight': 2, 'content': [{'end': 3232.2, 'text': "Remember there's a register endpoint on our node service.", 'start': 3230.038, 'duration': 2.162}, {'end': 3237.003, 'text': "We're going to pass it email and password, and then we're going to wait until we get a response back.", 'start': 3233.08, 'duration': 3.923}, {'end': 3240.986, 'text': 'And once we get that response, we can just go ahead and print out response dot data.', 'start': 3237.143, 'duration': 3.843}, {'end': 3243.413, 'text': 'Save this file.', 'start': 3242.532, 'duration': 0.881}, {'end': 3244.874, 'text': 'This should refresh.', 'start': 3244.053, 'duration': 0.821}, {'end': 3246.536, 'text': 'And then we click Register with that.', 'start': 3245.054, 'duration': 1.482}, {'end': 3247.657, 'text': 'And we get back a message.', 'start': 3246.616, 'duration': 1.041}, {'end': 3250.059, 'text': 'Hello, ccyber at gmail.com.', 'start': 3247.717, 'duration': 2.342}, {'end': 3251.52, 'text': 'Your user was registered.', 'start': 3250.119, 'duration': 1.401}, {'end': 3251.94, 'text': 'Have fun.', 'start': 3251.58, 'duration': 0.36}, {'end': 3255.443, 'text': 'And again, we can go to our endpoint here, Node.', 'start': 3253.121, 'duration': 2.322}, {'end': 3260.728, 'text': "And we see that every time we click that Register button, it's hitting our Node server.", 'start': 3255.663, 'duration': 5.065}], 'summary': 'The node service register endpoint processes email and password, successfully registering users.', 'duration': 30.69, 'max_score': 3230.038, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Fa4cRMaTDUI/pics/Fa4cRMaTDUI3230038.jpg'}], 'start': 2649.547, 'title': 'Building register endpoint and two-way binding in vue.js', 'summary': 'Covers the implementation of a register endpoint and component in vue.js, emphasizing frontend development, vue.js functionality, two-way binding with v model, and successful user registration with data transmission to the node server.', 'chapters': [{'end': 2959.639, 'start': 2649.547, 'title': 'Building register endpoint and component', 'summary': 'Discusses building a register endpoint and component, integrating it into the vue.js app to enable user registration, with a focus on frontend development and vue.js functionality.', 'duration': 310.092, 'highlights': ['The chapter discusses building a register endpoint and component, integrating it into the Vue.js app. Focus on integrating a register endpoint and component into the Vue.js app, enabling user registration.', 'The development approach involves working with the frontend and backend, exposing the full stack development process. Exposure to full stack development process, emphasizing backend and frontend integration.', 'Demonstrates creating a basic register component in Vue.js, including HTML input fields and a register button. Creation of a basic register component in Vue.js featuring input fields for email and password, and a register button.', 'Explains the process of binding HTML to the controller in Vue.js, allowing the integration of frontend and backend functionalities. Explanation of binding HTML to the controller in Vue.js for integrating frontend and backend functionalities.']}, {'end': 3351.243, 'start': 2960.86, 'title': 'Vue.js two-way binding and registration endpoint', 'summary': 'Discusses the implementation of two-way binding using v model in vue.js, demonstrating reactivity and the creation of a registration endpoint in an expressjs backend, resulting in successful user registration and data transmission to the node server.', 'duration': 390.383, 'highlights': ['Demonstration of Two-way Binding using V model The instructor demonstrates the two-way binding using V model in Vue.js, showcasing how changes in the input box update the data model and vice versa, along with the use of watch and mounted methods for demonstration.', 'Creation of Registration Endpoint in ExpressJS The process of creating a registration endpoint in an ExpressJS backend is explained, including the import of an authentication service, calling the register method with email and password, and handling the response from the server.', 'Successful User Registration and Data Transmission Upon clicking the register button, the registration method is called, resulting in the successful registration of a user with the provided email and password, and the transmission of data to the Node server, confirmed by receiving a response from the server.']}], 'duration': 701.696, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Fa4cRMaTDUI/pics/Fa4cRMaTDUI2649547.jpg', 'highlights': ['Successful User Registration and Data Transmission Upon clicking the register button, the registration method is called, resulting in the successful registration of a user with the provided email and password, and the transmission of data to the Node server, confirmed by receiving a response from the server.', 'Demonstration of Two-way Binding using V model The instructor demonstrates the two-way binding using V model in Vue.js, showcasing how changes in the input box update the data model and vice versa, along with the use of watch and mounted methods for demonstration.', 'Creation of Registration Endpoint in ExpressJS The process of creating a registration endpoint in an ExpressJS backend is explained, including the import of an authentication service, calling the register method with email and password, and handling the response from the server.', 'The chapter discusses building a register endpoint and component, integrating it into the Vue.js app. Focus on integrating a register endpoint and component into the Vue.js app, enabling user registration.']}], 'highlights': ['Vue.js combines best practices from Angular 2 and React, allowing for an easy transition to other frameworks in the future.', 'Vue.js is a front end library for single page applications with well-documented features, making it easy to pick up and hit the ground running.', 'Express.js is recommended for beginners as it is described as a very bare bones framework for building RESTful APIs, making it suitable for those starting to learn about web applications and REST API.', 'The chapter covers creating a restful API with Express for a web application called Tab Tracker, including features like browsing and searching songs, viewing details, logging in, bookmarking, editing, and adding new songs.', 'The application provides functionality for users to search through songs by artist, genre, and name, view song details including YouTube links, tabs, and lyrics, and log in to access additional features like bookmarking, editing, and adding new songs.', 'The process includes cloning a GitHub repo, creating a Vue.js project using Vue CLI, installing dependencies with npm install, and starting the web server with npm run dev.', 'Demonstrated testing the backend API using tools like Postman and Rest Client to send requests and receive responses.', "Created a simple endpoint '/status' in the Express server to return a 'hello world' message.", 'Created a basic Express server with defined middleware for logging, processing JSON data, and enabling cross-origin requests.', 'Implemented a register endpoint on the backend that returns a message upon receiving a post request.', 'Developed an authentication service with a register method for posting credentials to the register endpoint.', 'Created an Axios object pointing to the backend URL with a base URL of 8081 for making HTTP requests.', 'Successful User Registration and Data Transmission Upon clicking the register button, the registration method is called, resulting in the successful registration of a user with the provided email and password, and the transmission of data to the Node server, confirmed by receiving a response from the server.', 'Demonstration of Two-way Binding using V model The instructor demonstrates the two-way binding using V model in Vue.js, showcasing how changes in the input box update the data model and vice versa, along with the use of watch and mounted methods for demonstration.', 'Creation of Registration Endpoint in ExpressJS The process of creating a registration endpoint in an ExpressJS backend is explained, including the import of an authentication service, calling the register method with email and password, and handling the response from the server.']}