title
GraphQL Crash Course With Full Stack MERN Project

description
⭐ Join Masterschool & pay nothing until you're hired! https://goto.masterschool.com/brad2022 In this video, we will build a full-stack project management system with GraphQL, Express, MongoDB, React, and Apollo. 💻 Code: https://github.com/bradtraversy/project-mgmt-graphql 💻 Query & Mutation Gist: https://gist.github.com/bradtraversy/fc527bc9a4659ab8de8e8066f3498723 💻 My Courses & More https://traversymedia.com 💖 Show Support Patreon: https://www.patreon.com/traversymedia PayPal: https://paypal.me/traversymedia 👇 Follow Me On Social Media: Twitter: https://twitter.com/traversymedia Instagram: https://www.instagram.com/traversymedia Linkedin: https://www.linkedin.com/in/bradtraversy Timestamps: 0:00 - Intro 1:47 - MasterSchool Sponsor 2:31 - GraphQL Crash Course Slides 12:08 - Create Express Server 17:52 - Start GraphQL 20:40 - Start Schema 23:04 - Client Type & Queries 28:02 - Making Queries With GraphiQL 32:33 - Project Type & Queries 35:27 - Project & Client Relationship 37:23 - Creating a MongoDB Database 41:36 - Database Connection 44:59 - Mongoose Models 48:50 - Fetch Data From MongoDB 53:02 - Client Mutations 1:02:50 - Project Mutations 1:17:30 - Start On The Client 1:25:30 - Setting Up Apollo 1:27:57 - Fetch & Display Clients 1:40:02 - Delete Client Mutation 1:45:04 - Apollo Cache 1:50:18 - Create Client Mutation 2:05:18 - Fetch & Display Projects 2:14:32 - React Router & Pages Setup 2:23:47 - Query Single Project 2:30:53 - Client Info Component 2:24:00 - Add Project Modal 2:42:00 - Get Clients For Select 2:48:50 - Add Project Mutation 2:54:52 - Delete Project 3:01:50 - Edit Project Form 3:07:29 - Update Project Mutation 3:10:50 - Cascade Project Delete 3:13:58 - Wrap Up

detail
{'title': 'GraphQL Crash Course With Full Stack MERN Project', 'heatmap': [{'end': 1053.305, 'start': 932.021, 'weight': 0.766}, {'end': 1759.727, 'start': 1631.328, 'weight': 1}, {'end': 3044.527, 'start': 2916.32, 'weight': 0.779}], 'summary': 'A comprehensive tutorial covering the creation of a full stack project using graphql, express, mongodb, react, and apollo, with a focus on graphql setup, schema, mongodb integration, client management, react and apollo client setup, routing, cache implementation, and project information handling, spanning over an estimated time of 3 hours.', 'chapters': [{'end': 142.718, 'segs': [{'end': 27.986, 'src': 'embed', 'start': 0.882, 'weight': 2, 'content': [{'end': 7.308, 'text': "Hey, what's going on, guys? So in this video, we're going to look at Graph QL and we're going to use a bunch of other technologies as well.", 'start': 0.882, 'duration': 6.426}, {'end': 12.292, 'text': "But Graph QL is what I really want to focus on because I don't have that many videos on it.", 'start': 7.428, 'duration': 4.864}, {'end': 13.213, 'text': "It's been a while.", 'start': 12.372, 'duration': 0.841}, {'end': 16.976, 'text': 'So I decided to do this full stack project.', 'start': 13.653, 'duration': 3.323}, {'end': 22.021, 'text': "We'll use Graph QL Express in the back end with a MongoDB database.", 'start': 17.096, 'duration': 4.925}, {'end': 27.986, 'text': "And then once we finish our API, we'll go ahead and do the front end with React and the Apollo client.", 'start': 22.421, 'duration': 5.565}], 'summary': 'Video focuses on graph ql, full stack project using graph ql express, mongodb, react, and apollo client.', 'duration': 27.104, 'max_score': 0.882, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw882.jpg'}, {'end': 87.8, 'src': 'embed', 'start': 63.829, 'weight': 1, 'content': [{'end': 71.933, 'text': 'including the client information, as well as an area to update the details, as well as a button to delete the project.', 'start': 63.829, 'duration': 8.104}, {'end': 75.754, 'text': "so we'll have full crud functionality and we'll be able to.", 'start': 71.933, 'duration': 3.821}, {'end': 83.358, 'text': "we're using bootstrap, so we'll be able to have some modals to add new clients and new projects, All right.", 'start': 75.754, 'duration': 7.604}, {'end': 86.059, 'text': "So all in all, it's going to take about three hours or so.", 'start': 83.418, 'duration': 2.641}, {'end': 87.8, 'text': 'I would suggest that you follow along.', 'start': 86.179, 'duration': 1.621}], 'summary': 'Developing full crud functionality with modals using bootstrap, taking around three hours to complete.', 'duration': 23.971, 'max_score': 63.829, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw63829.jpg'}, {'end': 134.095, 'src': 'embed', 'start': 107.657, 'weight': 0, 'content': [{'end': 116.465, 'text': "This video is sponsored by Master School and this is kind of a special sponsor because I've been working with them closely and we're going to be collaborating quite a bit in the near future.", 'start': 107.657, 'duration': 8.808}, {'end': 124.572, 'text': 'So Master School is a network of success based online schools, and they have programs for web development, data analytics, marketing and more.', 'start': 116.885, 'duration': 7.687}, {'end': 128.372, 'text': 'And you can go to their website and apply to one of their online programs.', 'start': 124.972, 'duration': 3.4}, {'end': 134.095, 'text': 'And that includes seven to 10 months of extensive training, followed by a three-month career accelerator.', 'start': 128.713, 'duration': 5.382}], 'summary': 'Master school offers success-based online programs in web development, data analytics, marketing, and more, with seven to 10 months of training and a three-month career accelerator.', 'duration': 26.438, 'max_score': 107.657, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw107657.jpg'}], 'start': 0.882, 'title': 'Graphql full stack project with react and apollo', 'summary': 'Covers building a full stack project using graphql, express, mongodb, react, and apollo to create a project management system with full crud functionality, expected to take about three hours.', 'chapters': [{'end': 142.718, 'start': 0.882, 'title': 'Graphql full stack project with react and apollo', 'summary': 'Covers building a full stack project using graphql, express, mongodb, react, and apollo, focusing on creating a simple project management system with full crud functionality, expected to take about three hours.', 'duration': 141.836, 'highlights': ['Building a full stack project using GraphQL, Express, MongoDB, React, and Apollo to create a project management system with full CRUD functionality. full CRUD functionality, expected to take about three hours', "Master School's programs for web development, data analytics, marketing, and more, offering seven to 10 months of training followed by a three-month career accelerator, with graduates working at Google, Shopify, Facebook, and other top companies. seven to 10 months of training, three-month career accelerator, graduates working at top companies", 'Sponsorship by Master School, a network of success-based online schools with programs in web development, data analytics, marketing, and more, providing extensive training and a career accelerator with payment only upon job placement. payment only upon job placement']}], 'duration': 141.836, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw882.jpg', 'highlights': ['Building a full stack project using GraphQL, Express, MongoDB, React, and Apollo to create a project management system with full CRUD functionality, expected to take about three hours', "Master School's programs offer seven to 10 months of training followed by a three-month career accelerator, with graduates working at Google, Shopify, Facebook, and other top companies", 'Sponsorship by Master School, a network of success-based online schools with programs in web development, data analytics, marketing, and more, providing extensive training and a career accelerator with payment only upon job placement']}, {'end': 1228.594, 'segs': [{'end': 520.211, 'src': 'embed', 'start': 492.46, 'weight': 0, 'content': [{'end': 499.027, 'text': "Now, when you're working in your back end, for instance, when you're building a REST API,", 'start': 492.46, 'duration': 6.567}, {'end': 506.815, 'text': "you usually use a tool like Postman at least that's what I use to make HTTP requests to your server while you don't have a front end.", 'start': 499.027, 'duration': 7.788}, {'end': 513.322, 'text': "So in this case with GraphQL, there's actually a tool that comes with your GraphQL server called Graphical.", 'start': 507.696, 'duration': 5.626}, {'end': 520.211, 'text': 'or graph iql, and it allows us to do just what i showed you, allows us to make queries.', 'start': 513.826, 'duration': 6.385}], 'summary': 'When working with a back end, use graphiql for making queries to your graphql server.', 'duration': 27.751, 'max_score': 492.46, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw492460.jpg'}, {'end': 749.227, 'src': 'embed', 'start': 721.309, 'weight': 1, 'content': [{'end': 725.172, 'text': 'Hopefully this at least gives you the gist of how GraphQL works.', 'start': 721.309, 'duration': 3.863}, {'end': 728.294, 'text': "So now we're gonna get into it and start on our project.", 'start': 725.592, 'duration': 2.702}, {'end': 729.775, 'text': 'All right guys.', 'start': 729.214, 'duration': 0.561}, {'end': 738.06, 'text': "so now that we talked a little bit about what GraphQL is and we looked at queries and mutations and so on, now we're gonna start coding.", 'start': 729.775, 'duration': 8.285}, {'end': 745.785, 'text': 'And this is a page from the documentation that basically shows us how to set up a GraphQL server with Express,', 'start': 738.42, 'duration': 7.365}, {'end': 749.227, 'text': 'which is a Node.js back end JavaScript framework.', 'start': 745.785, 'duration': 3.442}], 'summary': 'Introducing graphql and starting a project with express for a node.js backend.', 'duration': 27.918, 'max_score': 721.309, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw721309.jpg'}, {'end': 1053.305, 'src': 'heatmap', 'start': 932.021, 'weight': 0.766, 'content': [{'end': 935.685, 'text': "So let's actually create a port variable here.", 'start': 932.021, 'duration': 3.664}, {'end': 940.251, 'text': "And I'm going to actually change this to 5000.", 'start': 936.667, 'duration': 3.584}, {'end': 946.617, 'text': "So it's going to first look in our environment variables for a port variable, which we don't have just yet.", 'start': 940.251, 'duration': 6.366}, {'end': 948.538, 'text': "But I'll create that now.", 'start': 947.357, 'duration': 1.181}, {'end': 951.821, 'text': "So in the root, I'm going to create a dot ENV file.", 'start': 948.659, 'duration': 3.162}, {'end': 958.007, 'text': "And then in here, we're going to have a variable of port and we're going to set that to 5000.", 'start': 952.342, 'duration': 5.665}, {'end': 965.934, 'text': "OK, let's also add a node underscore ENV and set that to development.", 'start': 958.007, 'duration': 7.927}, {'end': 967.914, 'text': 'All right.', 'start': 967.634, 'duration': 0.28}, {'end': 973.195, 'text': 'And then in order for that to work, we do have to require the dot ENV extension.', 'start': 968.074, 'duration': 5.121}, {'end': 979.157, 'text': 'So we can simply do require and dot ENV and then just add dot config.', 'start': 973.296, 'duration': 5.861}, {'end': 980.898, 'text': 'So we call that config method.', 'start': 979.217, 'duration': 1.681}, {'end': 985.079, 'text': "And just to test it out, I'll actually put this to something different.", 'start': 981.558, 'duration': 3.521}, {'end': 987.745, 'text': "Let's do 8000.", 'start': 985.099, 'duration': 2.646}, {'end': 989.527, 'text': "all right and then we'll finish this up.", 'start': 987.745, 'duration': 1.782}, {'end': 991.129, 'text': 'so we want to listen,', 'start': 989.527, 'duration': 1.602}, {'end': 1011.449, 'text': "let's do app.listen on that port and then i'm going to do a console.log and let's just say we'll say server running on port and then we'll just put variable in here of port.", 'start': 991.129, 'duration': 20.32}, {'end': 1013.331, 'text': 'All right.', 'start': 1013.071, 'duration': 0.26}, {'end': 1018.555, 'text': "So now to actually run this we're going to create an NPM script.", 'start': 1013.691, 'duration': 4.864}, {'end': 1022.519, 'text': "So in our package dot Jason let's change that to start.", 'start': 1018.636, 'duration': 3.883}, {'end': 1030.396, 'text': "And then we're going to have that run node and then make sure we go into our server folder and then index.js.", 'start': 1024.255, 'duration': 6.141}, {'end': 1038.338, 'text': "And then to use node mon, we'll copy that down and we'll set this to node mon and we'll change the name of the script to dev.", 'start': 1030.977, 'duration': 7.361}, {'end': 1040.378, 'text': 'All right.', 'start': 1040.118, 'duration': 0.26}, {'end': 1042.059, 'text': "So let's go ahead and try this out.", 'start': 1040.419, 'duration': 1.64}, {'end': 1044.18, 'text': 'If we say NPM run dev.', 'start': 1042.079, 'duration': 2.101}, {'end': 1049.863, 'text': "OK, so now you'll see it says server running on port eight thousand.", 'start': 1046.28, 'duration': 3.583}, {'end': 1053.305, 'text': "So we know it's it's reading it from the environment variable.", 'start': 1049.903, 'duration': 3.402}], 'summary': 'Setting up server to run on port 5000 and using environment variables for configuration. testing with npm run dev shows server running on port 8000.', 'duration': 121.284, 'max_score': 932.021, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw932021.jpg'}], 'start': 143.078, 'title': 'Graphql and career guidance', 'summary': 'Covers career guidance for the next semester, a crash course on graph ql, and setting up graphql with express including its features, benefits over rest apis, query and mutation syntax, usage of graphiql, integration with mongodb, and creating a basic express server.', 'chapters': [{'end': 175.686, 'start': 143.078, 'title': 'Career guidance and graph ql crash course', 'summary': 'Discusses career guidance, emphasizing the application process for the next semester and a crash course on graph ql, highlighting the use of various technologies and prerequisites for javascript knowledge.', 'duration': 32.608, 'highlights': ['The chapter discusses career guidance, emphasizing the application process for the next semester.', 'A crash course on Graph QL is provided, outlining the use of various technologies and prerequisites for JavaScript knowledge.']}, {'end': 588.949, 'start': 175.766, 'title': 'Introduction to graphql and its features', 'summary': 'Introduces graphql as an open source data query language for apis, highlighting its benefits over rest apis, explaining its query and mutation syntax, and demonstrating the usage of graphiql for testing and working with graphql servers.', 'duration': 413.183, 'highlights': ['GraphQL is an open source data query and manipulation language for APIs, serving as an alternative to REST API with the ability to request exact data, making it more targeted than a REST API. GraphQL is an open source data query and manipulation language for APIs, providing the ability to request specific data, thereby making it more targeted than a REST API.', 'Comparison between REST API and GraphQL, where GraphQL is described as a cross between a REST API and SQL structured query language, offering control of request and response like SQL but with similar HTTP operations as a REST API. GraphQL is described as a cross between a REST API and SQL, offering control of request and response like SQL but with similar HTTP operations as a REST API.', "Explanation of GraphQL's query syntax, resembling JavaScript objects and being simpler for JavaScript developers to learn, with examples and emphasis on its targeted data retrieval. GraphQL's query syntax resembles JavaScript objects, making it simpler for JavaScript developers to learn, with an emphasis on targeted data retrieval.", 'Introduction to mutations in GraphQL, similar to queries but used for adding, updating, and deleting data, with a demonstration of a mutation example and the expected data response. Introduction to mutations in GraphQL, used for adding, updating, and deleting data, demonstrated with a mutation example and the expected data response.', 'Overview of GraphiQL, a tool for testing and working with GraphQL servers, allowing for making queries, mutations, and accessing query history, serving as a valuable tool in GraphQL development. GraphiQL is introduced as a tool for testing and working with GraphQL servers, enabling the making of queries, mutations, and accessing query history, serving as a valuable tool in GraphQL development.', 'Explanation of GraphQL schemas, strongly typed language, and the creation of object types and scalar types such as string, int, float, boolean, and ID, with a mention of other types like enum and lists. Explanation of GraphQL schemas, strongly typed language, creation of object types, scalar types, and other types like enum and lists.']}, {'end': 1228.594, 'start': 590.495, 'title': 'Setting up graphql with express', 'summary': 'Provides an overview of setting up graphql with express, including the use of packages like express graphql and apollo server, and the integration with mongodb using mongoose. it also covers the creation of a basic express server, installation of necessary dependencies, and setting up the graphql endpoint.', 'duration': 638.099, 'highlights': ['Overview of GraphQL setup and technologies The chapter discusses various technologies for setting up GraphQL, including packages like Express GraphQL, Apollo Server, and content management systems like GraphCMS, with the focus on creating a GraphQL API.', 'Integration with MongoDB using Mongoose The chapter outlines the integration of MongoDB using Mongoose, highlighting the use of MongoDB Atlas for cloud deployment and the creation of database models.', 'Creation of a basic Express server and installation of dependencies The chapter covers the creation of a basic Express server and the installation of dependencies such as Express, Express GraphQL, GraphQL, Mongoose, and other optional packages like CORS and colors.', 'Setting up the GraphQL endpoint The chapter explains the process of setting up the GraphQL endpoint using Express GraphQL, including the requirement of a schema, and the use of GraphiQL for development.']}], 'duration': 1085.516, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw143078.jpg', 'highlights': ['The chapter discusses career guidance, emphasizing the application process for the next semester.', 'A crash course on Graph QL is provided, outlining the use of various technologies and prerequisites for JavaScript knowledge.', 'GraphQL is an open source data query and manipulation language for APIs, serving as an alternative to REST API with the ability to request exact data, making it more targeted than a REST API.', 'Comparison between REST API and GraphQL, where GraphQL is described as a cross between a REST API and SQL structured query language, offering control of request and response like SQL but with similar HTTP operations as a REST API.', 'Introduction to mutations in GraphQL, similar to queries but used for adding, updating, and deleting data, with a demonstration of a mutation example and the expected data response.', 'Overview of GraphiQL, a tool for testing and working with GraphQL servers, allowing for making queries, mutations, and accessing query history, serving as a valuable tool in GraphQL development.', 'Overview of GraphQL setup and technologies The chapter discusses various technologies for setting up GraphQL, including packages like Express GraphQL, Apollo Server, and content management systems like GraphCMS, with the focus on creating a GraphQL API.', 'Integration with MongoDB using Mongoose The chapter outlines the integration of MongoDB using Mongoose, highlighting the use of MongoDB Atlas for cloud deployment and the creation of database models.', 'Creation of a basic Express server and installation of dependencies The chapter covers the creation of a basic Express server and the installation of dependencies such as Express, Express GraphQL, GraphQL, Mongoose, and other optional packages like CORS and colors.', 'Setting up the GraphQL endpoint The chapter explains the process of setting up the GraphQL endpoint using Express GraphQL, including the requirement of a schema, and the use of GraphiQL for development.']}, {'end': 1814.178, 'segs': [{'end': 1420.03, 'src': 'embed', 'start': 1390.124, 'weight': 2, 'content': [{'end': 1392.965, 'text': 'you want to create a type for all of those.', 'start': 1390.124, 'duration': 2.841}, {'end': 1395.347, 'text': "So let's start off with our client type.", 'start': 1393.406, 'duration': 1.941}, {'end': 1399.509, 'text': "So we'll say client type and we're going to call this.", 'start': 1395.747, 'duration': 3.762}, {'end': 1402.161, 'text': "No, we'll just use that.", 'start': 1401.161, 'duration': 1}, {'end': 1405.883, 'text': "Yeah So we're going to do client type as a variable.", 'start': 1402.702, 'duration': 3.181}, {'end': 1408.304, 'text': 'And the convention is to use uppercase.', 'start': 1406.063, 'duration': 2.241}, {'end': 1415.208, 'text': "And then we're going to set that to this new Graph QL object type that we brought in from Graph QL.", 'start': 1408.985, 'duration': 6.223}, {'end': 1420.03, 'text': 'And this is going to take in a couple different fields, a couple of different values.', 'start': 1415.608, 'duration': 4.422}], 'summary': 'Creating a client type as a variable using graphql object type.', 'duration': 29.906, 'max_score': 1390.124, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw1390124.jpg'}, {'end': 1491.967, 'src': 'embed', 'start': 1460.057, 'weight': 1, 'content': [{'end': 1462.201, 'text': 'An email and a phone.', 'start': 1460.057, 'duration': 2.144}, {'end': 1465.604, 'text': 'Now, to make a query.', 'start': 1463.103, 'duration': 2.501}, {'end': 1469.888, 'text': "So let's say we want to get you know get a client by the I.D.", 'start': 1465.844, 'duration': 4.044}, {'end': 1474.852, 'text': 'then we need to create down here our root query object.', 'start': 1470.528, 'duration': 4.324}, {'end': 1485.681, 'text': "So let's say const and say root query and set that to a graph QL object type just like we did above and the name for this.", 'start': 1475.112, 'duration': 10.569}, {'end': 1491.967, 'text': "We're going to set that to root query type and then this also is going to take in fields.", 'start': 1485.701, 'duration': 6.266}], 'summary': 'Creating a root query object to retrieve client data by i.d. in graphql.', 'duration': 31.91, 'max_score': 1460.057, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw1460057.jpg'}, {'end': 1759.727, 'src': 'heatmap', 'start': 1631.328, 'weight': 1, 'content': [{'end': 1643.513, 'text': "So new graph QL schema and that's going to take in an object with query and we want to set query to our root query which is this right here.", 'start': 1631.328, 'duration': 12.185}, {'end': 1648.753, 'text': 'okay, and then we got to make sure that we bring this in this graphql schema.', 'start': 1644.449, 'duration': 4.304}, {'end': 1656.079, 'text': "it looks like it was auto imported, all right, and this this list gets pretty long, especially if you're doing everything in a single file.", 'start': 1648.753, 'duration': 7.326}, {'end': 1659.002, 'text': "but um, it's, it's all stuff that we that we need.", 'start': 1656.079, 'duration': 2.923}, {'end': 1669.768, 'text': "so now that we've exported our schema and we're including it right here, we can now make a request to our graphql endpoint,", 'start': 1659.702, 'duration': 10.066}, {'end': 1672.55, 'text': 'and we can do that with this graphical tool.', 'start': 1669.768, 'duration': 2.782}, {'end': 1678.053, 'text': 'we do have it enabled because we are in development, so this is setting that to true.', 'start': 1672.55, 'duration': 5.503}, {'end': 1691.822, 'text': "so to access that, remember, we're running on port 5000, so what we can do is just do http, local host, colon five thousand, and then slash graph QL.", 'start': 1678.053, 'duration': 13.769}, {'end': 1698.544, 'text': 'OK, and then that gives me this graphical tool where we can basically test out our queries.', 'start': 1693.342, 'duration': 5.202}, {'end': 1704.346, 'text': "this is kind of like postman when you're working with a rest API, and I want to.", 'start': 1698.544, 'duration': 5.802}, {'end': 1707.901, 'text': 'Make this a little bigger so we can see it.', 'start': 1705.959, 'duration': 1.942}, {'end': 1709.222, 'text': 'And these are all just comments.', 'start': 1707.981, 'duration': 1.241}, {'end': 1710.122, 'text': 'We can get rid of this.', 'start': 1709.262, 'duration': 0.86}, {'end': 1714.506, 'text': "So let's make our query to get a single client.", 'start': 1710.863, 'duration': 3.643}, {'end': 1721.912, 'text': "So what I should be able to do here is say, if we're making a query, we need to just have these opening curly braces.", 'start': 1715.106, 'duration': 6.806}, {'end': 1729.996, 'text': "And as soon as I type a C in, you'll see I'll get this drop down because it knows what is available as far as our schema goes.", 'start': 1722.672, 'duration': 7.324}, {'end': 1732.218, 'text': 'And it knows we have a client query.', 'start': 1730.377, 'duration': 1.841}, {'end': 1733.939, 'text': "So I'm going to say client.", 'start': 1732.358, 'duration': 1.581}, {'end': 1739.982, 'text': 'And then remember, we have to reference an ID, meaning we have to pass in an ID argument.', 'start': 1734.599, 'duration': 5.383}, {'end': 1744.065, 'text': 'So here, as soon as I put an I, it shows us ID.', 'start': 1740.062, 'duration': 4.003}, {'end': 1748.447, 'text': "And let's say we want to get the ID of one.", 'start': 1744.965, 'duration': 3.482}, {'end': 1751.289, 'text': 'And if we look at our data.', 'start': 1749.488, 'duration': 1.801}, {'end': 1759.727, 'text': "So the data we're working with right now is just a sample data and we're working with clients and they all have an ID.", 'start': 1752.301, 'duration': 7.426}], 'summary': 'Developing and testing a graphql schema with a graphical tool.', 'duration': 128.399, 'max_score': 1631.328, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw1631328.jpg'}, {'end': 1827.075, 'src': 'embed', 'start': 1794.842, 'weight': 0, 'content': [{'end': 1795.942, 'text': "I don't need a bunch of crap.", 'start': 1794.842, 'duration': 1.1}, {'end': 1797.843, 'text': "You know, I don't get a bunch of crap that I don't need.", 'start': 1795.982, 'duration': 1.861}, {'end': 1806.909, 'text': 'If I do want to get the email, then I can do that and get the email and I can get the phone, run that.', 'start': 1798.304, 'duration': 8.605}, {'end': 1808.35, 'text': 'I can also get the ID.', 'start': 1806.969, 'duration': 1.381}, {'end': 1814.178, 'text': "So if I go up here, say id, run that and you'll see, now i get all the data.", 'start': 1808.51, 'duration': 5.668}, {'end': 1821.373, 'text': 'typically with a rest api, you would just get all the data, no matter what, And you would have all these different endpoints to hit.', 'start': 1814.178, 'duration': 7.195}, {'end': 1827.075, 'text': "In this case, we're always working with that one GraphQL endpoint.", 'start': 1821.513, 'duration': 5.562}], 'summary': 'Discussion on accessing data efficiently through graphql, minimizing unnecessary data retrieval.', 'duration': 32.233, 'max_score': 1794.842, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw1794842.jpg'}], 'start': 1228.614, 'title': 'Graphql schema setup', 'summary': 'Covers setting up data for a graphql schema, showcasing the flexibility to use data from different sources like javascript files, mongodb, and postgresql. it also discusses graphql schema, queries, and demonstrates the process with sample data, five projects, and clients.', 'chapters': [{'end': 1292.935, 'start': 1228.614, 'title': 'Setting up data for graphql schema', 'summary': 'Discusses setting up data for a graphql schema, emphasizing the flexibility to use data from various sources such as javascript files, mongodb, and postgresql databases.', 'duration': 64.321, 'highlights': ['The flexibility of using data from different sources like JavaScript files, MongoDB, and PostgreSQL databases is emphasized, providing a wide range of options for data storage.', 'The process of setting up the sample data in a JavaScript file named sampleData.js is explained, involving copying the content from a repository and pasting it into the server folder to create two arrays.']}, {'end': 1814.178, 'start': 1293.115, 'title': 'Graphql schema and queries', 'summary': 'Introduces the concept of graphql schema and queries, using sample data with five projects and clients, and demonstrates the process of setting up a graphql schema with object types, root query, and making queries using a graphical tool.', 'duration': 521.063, 'highlights': ["One is projects And you'll see the projects have an ID, a client ID, a name, a description, and a status. And I have five of them.", "we want to bring that data in, so i'm just going to destructure from that file. i want to get the projects array and the clients array.", "we can set this Graph QL variable to require and then anything that we want to bring in from it, we're going to destructure.", "we're going to bring in a couple different fields, a couple of different values. First is going to be the name, which I'm going to call client. Then we have fields, which is actually going to be a function that returns an object.", "when we make our query from graphical or from apollo within, react within our front end. later on we'll be passing in the id that we want for this client and then, where we have our return, whatever we want to respond with that's going to go in something called a resolver.", "we need to export this as a schema. so down here we're going to say module dot exports and we're going to set that to a new Graph QL schema."]}], 'duration': 585.564, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw1228614.jpg', 'highlights': ['The flexibility of using data from different sources like JavaScript files, MongoDB, and PostgreSQL databases is emphasized, providing a wide range of options for data storage.', 'The process of setting up the sample data in a JavaScript file named sampleData.js is explained, involving copying the content from a repository and pasting it into the server folder to create two arrays.', "We want to bring that data in, so I'm just going to destructure from that file. I want to get the projects array and the clients array.", "We can set this GraphQL variable to require and then anything that we want to bring in from it, we're going to destructure.", "When we make our query from GraphiQL or from Apollo within React within our frontend, later on we'll be passing in the id that we want for this client and then, where we have our return, whatever we want to respond with that's going to go in something called a resolver."]}, {'end': 3118.824, 'segs': [{'end': 2751.63, 'src': 'embed', 'start': 2697.387, 'weight': 1, 'content': [{'end': 2698.889, 'text': "So I know if we're connected or not.", 'start': 2697.387, 'duration': 1.502}, {'end': 2700.229, 'text': 'All right.', 'start': 2699.909, 'duration': 0.32}, {'end': 2701.81, 'text': "So now we're connected to our database.", 'start': 2700.249, 'duration': 1.561}, {'end': 2705.773, 'text': 'So the next step is to create our Mongoose models.', 'start': 2701.83, 'duration': 3.943}, {'end': 2711.277, 'text': "So we're going to create inside our server folder a new folder called models.", 'start': 2706.474, 'duration': 4.803}, {'end': 2713.619, 'text': "And in here let's create.", 'start': 2712.238, 'duration': 1.381}, {'end': 2720.364, 'text': "Let's create a new file in models called client.", 'start': 2714.56, 'duration': 5.804}, {'end': 2722.886, 'text': 'So uppercase C client dot J.S.', 'start': 2720.424, 'duration': 2.462}, {'end': 2726.409, 'text': 'And then in here we want to bring in Mongoose.', 'start': 2723.607, 'duration': 2.802}, {'end': 2733.342, 'text': 'And what we do here is create a Mongoose schema.', 'start': 2730.501, 'duration': 2.841}, {'end': 2741.966, 'text': "I'm sure that a lot of you guys have done this before, but for those of you that haven't, a Mongoose schema is not related to a GraphQL schema.", 'start': 2733.362, 'duration': 8.604}, {'end': 2743.067, 'text': 'So just keep that in mind.', 'start': 2742.006, 'duration': 1.061}, {'end': 2744.487, 'text': 'You can think of it like this.', 'start': 2743.447, 'duration': 1.04}, {'end': 2746.088, 'text': 'You have the database right?', 'start': 2744.507, 'duration': 1.581}, {'end': 2751.63, 'text': 'And then, on top of that, you have the Mongoose layer, the object data mapper layer,', 'start': 2746.168, 'duration': 5.462}], 'summary': 'Connecting to database, creating mongoose models in server folder.', 'duration': 54.243, 'max_score': 2697.387, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw2697387.jpg'}, {'end': 2848.68, 'src': 'embed', 'start': 2824.739, 'weight': 3, 'content': [{'end': 2834.966, 'text': "so the convention we should follow and then we're going to replace the three instances of client with project and then just add the the correct field,", 'start': 2824.739, 'duration': 10.227}, {'end': 2835.847, 'text': 'so a name.', 'start': 2834.966, 'duration': 0.881}, {'end': 2841.435, 'text': "then we'll have a description And we're going to have a status.", 'start': 2835.847, 'duration': 5.588}, {'end': 2845.558, 'text': 'Now, the status, I only want it to be able to have a couple of different values.', 'start': 2842.016, 'duration': 3.542}, {'end': 2848.68, 'text': "So we're going to call this we're going to give this an enum.", 'start': 2846.198, 'duration': 2.482}], 'summary': "Replace 'client' with 'project', add name, description, and status with limited values.", 'duration': 23.941, 'max_score': 2824.739, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw2824739.jpg'}, {'end': 2907.973, 'src': 'embed', 'start': 2881.791, 'weight': 0, 'content': [{'end': 2887.356, 'text': 'Now, the client ID is going to have a type of Mongo schema types object ID.', 'start': 2881.791, 'duration': 5.565}, {'end': 2893.661, 'text': "So basically, when you create a new record in a collection, it's always going to get assigned an ID.", 'start': 2887.876, 'duration': 5.785}, {'end': 2895.123, 'text': "It's actually an underscore ID.", 'start': 2893.701, 'duration': 1.422}, {'end': 2897.725, 'text': "and that's called an object id.", 'start': 2895.863, 'duration': 1.862}, {'end': 2899.206, 'text': "it's created automatically.", 'start': 2897.725, 'duration': 1.481}, {'end': 2900.807, 'text': "we don't define it here.", 'start': 2899.206, 'duration': 1.601}, {'end': 2907.973, 'text': "so what i'm saying here is i want this to be an object id, but i want it to relate to another model.", 'start': 2900.807, 'duration': 7.166}], 'summary': 'Client id will have a type of mongo schema types object id, automatically assigned when creating a new record.', 'duration': 26.182, 'max_score': 2881.791, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw2881791.jpg'}, {'end': 3044.527, 'src': 'heatmap', 'start': 2916.32, 'weight': 0.779, 'content': [{'end': 2922.325, 'text': 'so this client id should pertain to the id of the client model and that should do it.', 'start': 2916.32, 'duration': 6.005}, {'end': 2923.445, 'text': "so we'll save that.", 'start': 2922.325, 'duration': 1.12}, {'end': 2927.214, 'text': 'we can close both of those client and project files.', 'start': 2923.445, 'duration': 3.769}, {'end': 2932.216, 'text': 'And now in our schema JS, we can now bring in our MongoDB.', 'start': 2927.314, 'duration': 4.902}, {'end': 2935.077, 'text': 'I should say Mongoose models.', 'start': 2933.416, 'duration': 1.661}, {'end': 2939.078, 'text': "So let's go up here and let's see if GitHub copilot gets it right.", 'start': 2935.357, 'duration': 3.721}, {'end': 2940.778, 'text': "I'll say Mongoose models.", 'start': 2939.178, 'duration': 1.6}, {'end': 2945.26, 'text': 'Yep There we go.', 'start': 2942.499, 'duration': 2.761}, {'end': 2945.78, 'text': 'Pretty cool.', 'start': 2945.34, 'duration': 0.44}, {'end': 2954.707, 'text': "All right so we bring in the project and client models now we can use those to query the database so let's go down to our queries and.", 'start': 2947.113, 'duration': 7.594}, {'end': 2962.141, 'text': "The first one here, so for projects, we're just returning the projects array from the sample data.", 'start': 2956.28, 'duration': 5.861}, {'end': 2965.202, 'text': 'So instead of doing that, I want to access my database.', 'start': 2962.621, 'duration': 2.581}, {'end': 2970.483, 'text': "So I'm going to use the project model, which has a function or a method of find.", 'start': 2965.262, 'duration': 5.221}, {'end': 2978.824, 'text': 'And I could find by certain arguments, but I want to get just everything, all the projects.', 'start': 2971.143, 'duration': 7.681}, {'end': 2980.225, 'text': "So that's all I'm going to do here.", 'start': 2978.884, 'duration': 1.341}, {'end': 2981.665, 'text': 'Actually, we want to return this.', 'start': 2980.285, 'duration': 1.38}, {'end': 2984.754, 'text': "OK, and then let's come down here.", 'start': 2982.972, 'duration': 1.782}, {'end': 2987.797, 'text': 'So this one is getting it by the ID.', 'start': 2984.834, 'duration': 2.963}, {'end': 2990.96, 'text': "So I'm going to return using my project model.", 'start': 2987.857, 'duration': 3.103}, {'end': 2992.121, 'text': "I'm going to use find.", 'start': 2991, 'duration': 1.121}, {'end': 3000.628, 'text': "We're going to say find by ID and then I'm going to pass in the args dot ID, which comes from this right here.", 'start': 2992.141, 'duration': 8.487}, {'end': 3004.369, 'text': "OK, then down here, we're returning all the clients.", 'start': 3001.508, 'duration': 2.861}, {'end': 3006.85, 'text': "So let's say return client find.", 'start': 3004.669, 'duration': 2.181}, {'end': 3010.512, 'text': "And then here we're getting a client by ID.", 'start': 3007.571, 'duration': 2.941}, {'end': 3014.854, 'text': "So again, we're going to return client find by ID.", 'start': 3010.612, 'duration': 4.242}, {'end': 3022.818, 'text': 'And then up here, when we define the project type, we also said, well, the client is part, you know, is going to be a field in the project.', 'start': 3015.614, 'duration': 7.204}, {'end': 3032.462, 'text': "So here we're finding all the clients that have the client ID field that matches you know, the actual client ID.", 'start': 3023.418, 'duration': 9.044}, {'end': 3044.527, 'text': 'So we can do clients find by ID and then we have access to parent, which is talking about the project and the client ID field.', 'start': 3032.602, 'duration': 11.925}], 'summary': 'Setting up mongodb with mongoose models and querying the database for projects and clients.', 'duration': 128.207, 'max_score': 2916.32, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw2916320.jpg'}], 'start': 1814.178, 'title': 'Graphql, mongodb, and mongoose', 'summary': 'Covers working with graphql to simplify data retrieval, updating the graphql schema to include project details, setting up mongodb atlas, and establishing database connections with mongoose, emphasizing efficient data fetching and schema structuring.', 'chapters': [{'end': 1938.473, 'start': 1814.178, 'title': 'Working with graphql for rest api', 'summary': 'Introduces how to create a query to get all clients using graphql, simplifying data retrieval and eliminating the need for multiple endpoints, resulting in a single graphql endpoint and improved data fetching efficiency.', 'duration': 124.295, 'highlights': ['The chapter outlines the process of creating a query to retrieve all clients using GraphQL, consolidating data fetching through a single endpoint and enhancing efficiency.', 'GraphQL allows for the retrieval of all clients without the need for multiple endpoints, streamlining data access and improving performance.', 'The tutorial demonstrates the creation of a query to fetch all clients using GraphQL, simplifying data access and enhancing the efficiency of data retrieval.', 'The process involves setting up a query to obtain all clients through a single GraphQL endpoint, streamlining data retrieval and improving overall efficiency.', 'Using GraphQL, a query is created to retrieve all clients, eliminating the need for multiple endpoints and improving the efficiency of data fetching.']}, {'end': 2091.972, 'start': 1939.213, 'title': 'Graphql schema update for projects', 'summary': 'Discusses updating the graphql schema to include project types and fields such as id, name, description, and status, enabling retrieval of project details like name, status, and description.', 'duration': 152.759, 'highlights': ['Updating the GraphQL schema to include project types and fields such as ID, name, description, and status, enabling retrieval of project details like name, status, and description', 'Implementing the changes to the root query to enable retrieval of all projects and a single project by ID, utilizing the Projects.find method', 'Testing the changes in GraphiQL to ensure retrieval of project details like name, status, and description']}, {'end': 2453.161, 'start': 2092.312, 'title': 'Setting up mongodb atlas for project data', 'summary': 'Discusses setting up mongodb atlas to store project data, creating collections and users, and accessing the database via the compass tool.', 'duration': 360.849, 'highlights': ['The chapter explains adding relationships to different types and resources, allowing access to project and client data via GraphQL queries.', 'It details the process of creating a project in MongoDB Atlas, including creating a database, user authentication, and deploying changes.', 'The speaker recommends using the Compass tool for viewing and managing the MongoDB database, emphasizing its cross-platform compatibility and user-friendly GUI.']}, {'end': 2881.05, 'start': 2454.682, 'title': 'Setting up mongodb and mongoose for database connection', 'summary': 'Details the process of setting up a mongodb database, including connecting to the database, creating mongoose models, and defining fields for database collections, emphasizing the use of mongoose schemas and the structuring of models. it also covers the use of environment variables and the establishment of database connections, with a focus on using mongoose to connect and defining the database uri.', 'duration': 426.368, 'highlights': ['The process of setting up a MongoDB database, including connecting to the database, creating Mongoose models, and defining fields for database collections is detailed.', 'The use of Mongoose schemas and the structuring of models is emphasized.', 'The establishment of database connections, with a focus on using Mongoose to connect and defining the database URI, is covered.', 'The chapter also covers the use of environment variables and emphasizes the process of setting up a MongoDB database.']}, {'end': 3118.824, 'start': 2881.791, 'title': 'Mongodb schema and mongoose models', 'summary': 'Explains how to define a client id as a mongo schema type object id and relate it to another model using mongoose models for querying the database and handling mutations.', 'duration': 237.033, 'highlights': ['The client ID is defined as a Mongo schema type object ID and related to the client model using the ref, allowing for automatic assignment of ID and querying the database. The client ID is defined as a Mongo schema type object ID and related to the client model using the ref, allowing for automatic assignment of ID and querying the database.', 'Using Mongoose models, the project and client models are brought in to query the database for accessing and retrieving data. Using Mongoose models, the project and client models are brought in to query the database for accessing and retrieving data.', 'The chapter discusses handling mutations for adding, changing, or deleting data in the database using Mongoose models. The chapter discusses handling mutations for adding, changing, or deleting data in the database using Mongoose models.']}], 'duration': 1304.646, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw1814178.jpg', 'highlights': ['The chapter outlines the process of creating a query to retrieve all clients using GraphQL, consolidating data fetching through a single endpoint and enhancing efficiency.', 'Updating the GraphQL schema to include project types and fields such as ID, name, description, and status, enabling retrieval of project details like name, status, and description.', 'The chapter explains adding relationships to different types and resources, allowing access to project and client data via GraphQL queries.', 'The process of setting up a MongoDB database, including connecting to the database, creating Mongoose models, and defining fields for database collections is detailed.', 'The client ID is defined as a Mongo schema type object ID and related to the client model using the ref, allowing for automatic assignment of ID and querying the database.']}, {'end': 3745.713, 'segs': [{'end': 3186.739, 'src': 'embed', 'start': 3148.745, 'weight': 0, 'content': [{'end': 3150.905, 'text': "I think that's all we don't want, right? Yeah.", 'start': 3148.745, 'duration': 2.16}, {'end': 3153.546, 'text': 'Probably not the dot env either.', 'start': 3151.686, 'duration': 1.86}, {'end': 3157.186, 'text': "So we'll go ahead and add that as well.", 'start': 3155.365, 'duration': 1.821}, {'end': 3175.911, 'text': "And then let's do a git add all, and then git commit dash m, and I'm just gonna say project and client queries.", 'start': 3158.286, 'duration': 17.625}, {'end': 3181.393, 'text': 'Okay, so at least I have that in my repository.', 'start': 3178.252, 'duration': 3.141}, {'end': 3184.978, 'text': "So let's get back up here.", 'start': 3182.475, 'duration': 2.503}, {'end': 3186.739, 'text': 'And now for mutations.', 'start': 3185.318, 'duration': 1.421}], 'summary': 'Adding project and client queries to repository.', 'duration': 37.994, 'max_score': 3148.745, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw3148745.jpg'}, {'end': 3472.881, 'src': 'embed', 'start': 3446.139, 'weight': 4, 'content': [{'end': 3449.862, 'text': "So you could just copy that if you want, but I'm just going to type it out.", 'start': 3446.139, 'duration': 3.723}, {'end': 3457.147, 'text': "So we're going to do a mutation and we have a mutation called add client that should show up, I believe.", 'start': 3449.882, 'duration': 7.265}, {'end': 3461.97, 'text': 'Huh? Add client.', 'start': 3457.167, 'duration': 4.803}, {'end': 3464.273, 'text': "That's weird.", 'start': 3463.712, 'duration': 0.561}, {'end': 3466.074, 'text': 'I think I thought it was supposed to show up.', 'start': 3464.533, 'duration': 1.541}, {'end': 3469.017, 'text': "Well, anyways, let's pass in here.", 'start': 3466.915, 'duration': 2.102}, {'end': 3470.439, 'text': "Let's say name.", 'start': 3469.057, 'duration': 1.382}, {'end': 3472.881, 'text': "We'll do Tony Stark.", 'start': 3470.459, 'duration': 2.422}], 'summary': "Mutation 'add client' with parameter 'name' set to 'tony stark' encountered unexpected issue.", 'duration': 26.742, 'max_score': 3446.139, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw3446139.jpg'}, {'end': 3725.784, 'src': 'embed', 'start': 3690.745, 'weight': 1, 'content': [{'end': 3692.045, 'text': 'You can see it pops up here.', 'start': 3690.745, 'duration': 1.3}, {'end': 3698.107, 'text': "And then we're going to pass in the ID of the client I want to delete, which is going to be this.", 'start': 3692.646, 'duration': 5.461}, {'end': 3704.564, 'text': 'So that should be in quotes.', 'start': 3701.923, 'duration': 2.641}, {'end': 3710.307, 'text': "So that's the ID that I want to delete and then I'll return the name.", 'start': 3705.365, 'duration': 4.942}, {'end': 3717.53, 'text': 'So go ahead and now that should delete it and I see just test.', 'start': 3711.868, 'duration': 5.662}, {'end': 3718.851, 'text': 'Now I do want to be able to.', 'start': 3717.55, 'duration': 1.301}, {'end': 3725.784, 'text': "Let's see, let's actually fetch all of the clients now and make sure that this test is not there.", 'start': 3720.879, 'duration': 4.905}], 'summary': "Deleting client id 'test' and verifying deletion by fetching all clients.", 'duration': 35.039, 'max_score': 3690.745, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw3690745.jpg'}], 'start': 3118.844, 'title': 'Managing clients and mutations in graphql', 'summary': 'Covers setting up git and initializing a repository, and then delves into creating graphql mutations for adding a client with non-null fields such as name, email, and phone. it also discusses creating a new client and adding it to the database using graphql mutations, followed by the process of deleting a client and verifying its removal through graphql queries, demonstrating the ability to manage clients effectively.', 'chapters': [{'end': 3346.766, 'start': 3118.844, 'title': 'Setting up git and creating graphql mutations', 'summary': 'Covers setting up git and initializing a repository, and then delves into creating graphql mutations for adding a client with non-null fields such as name, email, and phone.', 'duration': 227.922, 'highlights': ['The chapter covers setting up Git and initializing a repository, including adding a .gitignore file to exclude node modules and .env files.', 'Detailed steps for creating GraphQL mutations for adding a client are provided, with a focus on defining non-null fields such as name, email, and phone, using GraphQL non-null wrappers.']}, {'end': 3745.713, 'start': 3346.866, 'title': 'Managing clients and mutations in graphql', 'summary': 'Discusses creating a new client and adding it to the database using graphql mutations, followed by the process of deleting a client and verifying its removal through graphql queries, demonstrating the ability to manage clients effectively.', 'duration': 398.847, 'highlights': ['Adding a new client using GraphQL mutation The speaker demonstrates adding a new client to the database using a GraphQL mutation, providing specific data such as name, email, and phone number, and successfully retrieving the ID, name, email, and phone of the added client.', 'Deleting a client using GraphQL mutation The process of deleting a client is shown using a GraphQL mutation, where the speaker inputs the ID of the client to delete, successfully removing the client from the database and confirming its absence through a GraphQL query for all clients.', 'Utilizing GraphQL queries to verify client data The speaker utilizes GraphQL queries to fetch and display all client names, ensuring the successful deletion of a client by confirming the absence of a specific client entry in the database.']}], 'duration': 626.869, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw3118844.jpg', 'highlights': ['Covers setting up Git and initializing a repository, including adding a .gitignore file to exclude node modules and .env files.', 'Detailed steps for creating GraphQL mutations for adding a client are provided, with a focus on defining non-null fields such as name, email, and phone, using GraphQL non-null wrappers.', 'Adding a new client to the database using a GraphQL mutation, providing specific data such as name, email, and phone number, and successfully retrieving the ID, name, email, and phone of the added client.', 'Deleting a client using a GraphQL mutation, successfully removing the client from the database and confirming its absence through a GraphQL query for all clients.', 'Utilizing GraphQL queries to verify client data by confirming the absence of a specific client entry in the database.']}, {'end': 4990.308, 'segs': [{'end': 3874.545, 'src': 'embed', 'start': 3845.61, 'weight': 2, 'content': [{'end': 3853.196, 'text': "And as far as the type goes, we're going to set it to we're actually going to set it to new graph QL enum type.", 'start': 3845.61, 'duration': 7.586}, {'end': 3861.436, 'text': "OK, and then that's going to take in some curly braces and we need to specify a name that needs to be unique.", 'start': 3854.232, 'duration': 7.204}, {'end': 3866.019, 'text': "So we're going to set that to project status and then we have our values.", 'start': 3861.597, 'duration': 4.422}, {'end': 3873.224, 'text': 'Right, so our values open.', 'start': 3867.98, 'duration': 5.244}, {'end': 3874.545, 'text': "No, I'm not going to do open.", 'start': 3873.244, 'duration': 1.301}], 'summary': 'Creating a new graphql enum type for project status.', 'duration': 28.935, 'max_score': 3845.61, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw3845610.jpg'}, {'end': 3937.439, 'src': 'embed', 'start': 3911.73, 'weight': 3, 'content': [{'end': 3916.153, 'text': "you could make it whatever you want, but let's go under.", 'start': 3911.73, 'duration': 4.423}, {'end': 3919.414, 'text': "let's see, this is where the the type ends right here.", 'start': 3916.153, 'duration': 3.261}, {'end': 3926.998, 'text': "so let's put a comma here and we're going to set a default value and let's set that to not started.", 'start': 3919.414, 'duration': 7.584}, {'end': 3933.838, 'text': 'OK, and then we also want to have a client ID field.', 'start': 3930.396, 'duration': 3.442}, {'end': 3937.439, 'text': "So let's go under the status field, which ends right here.", 'start': 3934.438, 'duration': 3.001}], 'summary': "Setting default value 'not started' for status and adding a client id field.", 'duration': 25.709, 'max_score': 3911.73, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw3911730.jpg'}, {'end': 4471.245, 'src': 'embed', 'start': 4438.733, 'weight': 0, 'content': [{'end': 4446.535, 'text': 'OK, and then another thing, this name right here, project status has to be unique.', 'start': 4438.733, 'duration': 7.802}, {'end': 4449.095, 'text': "And since we used it above, it's going to throw an error.", 'start': 4446.575, 'duration': 2.52}, {'end': 4452.136, 'text': "So I'm just going to change it to project status update.", 'start': 4449.195, 'duration': 2.941}, {'end': 4460.039, 'text': 'right and then what we can do is add our resolve, which goes under the args, so that ends right here.', 'start': 4454.036, 'duration': 6.003}, {'end': 4469.884, 'text': 'so actually we need a comma and then resolve and to update.', 'start': 4460.039, 'duration': 9.845}, {'end': 4471.245, 'text': 'see, that does look good.', 'start': 4469.884, 'duration': 1.361}], 'summary': "The name 'project status' needs to be changed to 'project status update' to avoid errors, and resolve and update need to be added.", 'duration': 32.512, 'max_score': 4438.733, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw4438733.jpg'}, {'end': 4728.365, 'src': 'embed', 'start': 4699.641, 'weight': 1, 'content': [{'end': 4702.442, 'text': "And then we're also going to install Graph QL on the front end.", 'start': 4699.641, 'duration': 2.801}, {'end': 4709.27, 'text': "And also we're going to have a separate page for projects.", 'start': 4703.585, 'duration': 5.685}, {'end': 4711.171, 'text': 'So we need the react router.', 'start': 4709.53, 'duration': 1.641}, {'end': 4713.753, 'text': "So it's going to be react router Dom.", 'start': 4711.612, 'duration': 2.141}, {'end': 4721.299, 'text': "And then I'm also going to use a package called react icons so that I can use some font awesome icons.", 'start': 4715.155, 'duration': 6.144}, {'end': 4725.923, 'text': 'And I think that should do it as far as front end dependencies.', 'start': 4722.36, 'duration': 3.563}, {'end': 4728.365, 'text': "Now, make sure you're in your client folder when you run this.", 'start': 4725.963, 'duration': 2.402}], 'summary': 'Install graph ql, create separate page for projects, use react router dom and react icons for front end dependencies.', 'duration': 28.724, 'max_score': 4699.641, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw4699641.jpg'}], 'start': 3745.893, 'title': 'Graphql, api, and react setup', 'summary': 'Covers adding a new project in graphql, specifying its type and arguments, including a non-null name, using an enum type for status with specific values like new, in progress, and completed, setting default values, creating and querying graphql projects, setting up api for e-commerce website with full crud functionality, and setting up the react client with bootstrap and custom css.', 'chapters': [{'end': 3911.73, 'start': 3745.893, 'title': 'Adding a project in graphql', 'summary': 'Covers adding a new project in graphql, specifying its type and arguments, including a non-null name, using an enum type for status with specific values like new, in progress, and completed, and setting a default value of not started.', 'duration': 165.837, 'highlights': ["Specifying the type and arguments for the 'add project' function, including a non-null name and a description, while using an enum type for the status with specific values like new, in progress, and completed.", 'Utilizing the GraphQL enum type to specify a certain range of values for the status of the project, including new, in progress, and completed, and setting the default value to not started.']}, {'end': 4254.977, 'start': 3911.73, 'title': 'Graphql project creation and query', 'summary': 'Covers the process of creating and querying graphql projects, including setting default values, resolving data, adding projects, and querying project and client information.', 'duration': 343.247, 'highlights': ['The process of creating a new project involves setting default values for status, adding a client ID field, and resolving data to create a new project using the project model.', 'A detailed example of adding a project involves specifying the project name, description, status, and client ID, followed by querying for all projects and their associated client information.', "The demonstration includes adding another project with a different name, description, and status, along with querying for the new project's client information."]}, {'end': 4725.923, 'start': 4254.977, 'title': 'Api functionality for e-commerce website', 'summary': 'Outlines the development of an api for an e-commerce website, including the creation, deletion, and updating of projects and clients, providing full crud functionality on projects, and prepares to set up the front end with react and dependencies.', 'duration': 470.946, 'highlights': ['Full CRUD functionality on projects, including the ability to add a new client, delete a client, add a new project, delete a project, and update a project. The API allows for full CRUD functionality on projects, enabling the addition, deletion, and updating of projects, as well as the addition and deletion of clients.', 'Preparation for setting up the front end with React, including the installation of Apollo client, GraphQL, React Router Dom, and the use of React icons for font awesome icons. The chapter prepares to set up the front end with React by installing necessary dependencies such as Apollo client, GraphQL, React Router Dom, and React icons for font awesome icons.', 'Ability to retrieve all projects, a single project, the client details associated with a project, the list of clients, and a single client by ID. The API allows for the retrieval of various project and client details, including all projects, a single project, client details associated with a project, the list of clients, and a single client by ID.']}, {'end': 4990.308, 'start': 4725.963, 'title': 'Setting up react client', 'summary': 'Covers setting up the react client, cleaning up unnecessary files, bringing in assets and custom css, integrating bootstrap, and creating the header component.', 'duration': 264.345, 'highlights': ["Setting up React client and cleaning up unnecessary files The speaker guides to run the front end react server from the client folder by using 'NPM start', then proceeds to clean up the source folder by deleting unnecessary files and modifying the app.js file.", 'Integrating Bootstrap and custom CSS The instructor explains the process of integrating Bootstrap using CDN and overwriting some styles in the index CSS file to customize the primary and secondary colors.', 'Creating the header component The chapter concludes with the plan to create a header component by generating a file called header.jsx in the components folder.']}], 'duration': 1244.415, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw3745893.jpg', 'highlights': ['Utilizing the GraphQL enum type to specify a certain range of values for the status of the project, including new, in progress, and completed, and setting the default value to not started.', 'Full CRUD functionality on projects, including the ability to add a new client, delete a client, add a new project, delete a project, and update a project.', 'Preparation for setting up the front end with React, including the installation of Apollo client, GraphQL, React Router Dom, and the use of React icons for font awesome icons.', "Setting up React client and cleaning up unnecessary files The speaker guides to run the front end react server from the client folder by using 'NPM start', then proceeds to clean up the source folder by deleting unnecessary files and modifying the app.js file."]}, {'end': 5584.173, 'segs': [{'end': 5182.931, 'src': 'embed', 'start': 5146.811, 'weight': 0, 'content': [{'end': 5158.275, 'text': 'what we want to do is bring in our Apollo provider and wrap it around everything so that any components or any routes we have in here will have access to the Apollo client.', 'start': 5146.811, 'duration': 11.464}, {'end': 5163.417, 'text': "OK, so let's let's bring some stuff in here.", 'start': 5159.135, 'duration': 4.282}, {'end': 5169.399, 'text': "Let's say import and we want the Apollo provider.", 'start': 5163.457, 'duration': 5.942}, {'end': 5179.766, 'text': 'We also want we want the Apollo client and we also want in memory cache.', 'start': 5171.092, 'duration': 8.674}, {'end': 5182.931, 'text': "OK, so we'll be working a little bit with cache.", 'start': 5179.786, 'duration': 3.145}], 'summary': 'Wrap apollo provider around components for access to apollo client and in-memory cache.', 'duration': 36.12, 'max_score': 5146.811, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw5146811.jpg'}, {'end': 5306.48, 'src': 'embed', 'start': 5271.048, 'weight': 1, 'content': [{'end': 5272.348, 'text': 'Did I spell it wrong? I did.', 'start': 5271.048, 'duration': 1.3}, {'end': 5276.669, 'text': "I don't know what's going on with my spelling today, but now we should have access to that.", 'start': 5272.368, 'duration': 4.301}, {'end': 5282.711, 'text': 'So the first thing I want to do that has to do with Graph QL is fetch our clients.', 'start': 5276.829, 'duration': 5.882}, {'end': 5287.032, 'text': "OK, so in components, let's create a new file.", 'start': 5283.411, 'duration': 3.621}, {'end': 5294.815, 'text': "We'll call it clients dot JSX and we'll just do RFC and we don't actually need that.", 'start': 5287.072, 'duration': 7.743}, {'end': 5298.837, 'text': "And just for now, let's save it and bring it into our app JS.", 'start': 5295.736, 'duration': 3.101}, {'end': 5306.48, 'text': "So import clients and we're going to put this in place of the hello world.", 'start': 5300.758, 'duration': 5.722}], 'summary': 'Creating a new file clients.jsx to fetch clients using graphql.', 'duration': 35.432, 'max_score': 5271.048, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw5271048.jpg'}], 'start': 4990.348, 'title': 'React app header update and setting up apollo client for graphql api', 'summary': 'Details the process of updating the header in a react app, including importing a logo, modifying the html structure, and importing the header component into app.js. it also covers setting up apollo client to work with a graphql api, creating the client, making graphql queries, handling loading and error states, and addressing cors issues.', 'chapters': [{'end': 5121.242, 'start': 4990.348, 'title': 'React app header update', 'summary': 'Details the process of updating the header in a react app, which includes importing a logo, modifying the html structure, and importing the header component into app.js.', 'duration': 130.894, 'highlights': ["The process involves importing a logo from the assets folder using the syntax 'import logo from ./assets/logo.png', and modifying the HTML structure to include a nav tag with specific classes and a container class for the link.", 'The chapter also mentions the use of React Router DOM for navigation and the necessity of wrapping all elements in a single tag, which is accomplished using a fragment.', 'The speaker discusses the addition of the header component to app.js and the use of a fragment to wrap all elements, ensuring proper structure and functionality.']}, {'end': 5584.173, 'start': 5121.282, 'title': 'Setting up apollo client for graphql api', 'summary': 'Covers setting up apollo client to work with a graphql api, including creating the client, making graphql queries, handling loading and error states, and addressing cors issues.', 'duration': 462.891, 'highlights': ['Setting up Apollo Client and wrapping it around components in app JS file The chapter demonstrates setting up Apollo Client by importing ApolloProvider and ApolloClient, creating a new Apollo client with a URI to the GraphQL project, and wrapping the provider around all components to grant access to the Apollo client.', 'Creating a GraphQL query to fetch clients and using the useQuery hook The transcript explains creating a GraphQL query to fetch clients, utilizing GQL and useQuery hook to handle loading and error states, and displaying appropriate messages based on the query result.', "Addressing CORS issue by adding middleware for cores in the server The chapter addresses a CORS issue by adding middleware for cores in the server's index.js file, resolving the access blocked error and allowing successful data retrieval from the GraphQL API."]}], 'duration': 593.825, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw4990348.jpg', 'highlights': ['The process involves importing a logo from the assets folder and modifying the HTML structure to include a nav tag and a container class for the link.', 'Setting up Apollo Client by creating a new Apollo client with a URI to the GraphQL project and wrapping the provider around all components to grant access to the Apollo client.', 'Creating a GraphQL query to fetch clients, utilizing GQL and useQuery hook to handle loading and error states, and displaying appropriate messages based on the query result.']}, {'end': 6568.526, 'segs': [{'end': 5617.109, 'src': 'embed', 'start': 5584.894, 'weight': 2, 'content': [{'end': 5588.218, 'text': "And then once it's loaded, it shows just this H1.", 'start': 5584.894, 'duration': 3.324}, {'end': 5595.105, 'text': "So we're going to actually use a table here to show our clients.", 'start': 5589.099, 'duration': 6.006}, {'end': 5598.469, 'text': "So I'm going to get rid of this H1 and let's replace that.", 'start': 5595.566, 'duration': 2.903}, {'end': 5601.604, 'text': "We'll put some parentheses in here.", 'start': 5600.083, 'duration': 1.521}, {'end': 5607.926, 'text': "We're going to replace that with a table and we're going to we're using bootstrap.", 'start': 5601.644, 'duration': 6.282}, {'end': 5610.187, 'text': "So for a class name, we're going to do table.", 'start': 5607.966, 'duration': 2.221}, {'end': 5617.109, 'text': "Let's do table dash hover and let's move it down a little.", 'start': 5611.067, 'duration': 6.042}], 'summary': 'Using a table in place of h1 to show clients, utilizing bootstrap for styling.', 'duration': 32.215, 'max_score': 5584.894, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw5584894.jpg'}, {'end': 5788.02, 'src': 'embed', 'start': 5757.361, 'weight': 3, 'content': [{'end': 5771.963, 'text': "so TD is going to be the client dot name and then we'll do the client email and the phone and then the last one is going to be a delete button.", 'start': 5757.361, 'duration': 14.602}, {'end': 5775.223, 'text': "so in here we'll say button btn.", 'start': 5771.963, 'duration': 3.26}, {'end': 5780.945, 'text': "we'll do btn dash danger, since it's a delete button, and also btn sm small.", 'start': 5775.223, 'duration': 5.722}, {'end': 5788.02, 'text': "and then in here i'm actually going to bring in the trash icon from react icons.", 'start': 5782.176, 'duration': 5.844}], 'summary': 'Creating a client interface with name, email, phone, and delete button.', 'duration': 30.659, 'max_score': 5757.361, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw5757361.jpg'}, {'end': 5935.935, 'src': 'embed', 'start': 5881.282, 'weight': 0, 'content': [{'end': 5886.145, 'text': "So we're going to use print curly braces here because we'll have more than one query.", 'start': 5881.282, 'duration': 4.863}, {'end': 5889.305, 'text': 'All right.', 'start': 5889.045, 'duration': 0.26}, {'end': 5890.386, 'text': 'So get clients.', 'start': 5889.405, 'duration': 0.981}, {'end': 5894.749, 'text': 'Now we can just bring that in to our clients component.', 'start': 5890.566, 'duration': 4.183}, {'end': 5897.15, 'text': "So right here, let's say import.", 'start': 5895.289, 'duration': 1.861}, {'end': 5906.497, 'text': 'Get clients from the client queries folder and we should get the same exact result.', 'start': 5899.472, 'duration': 7.025}, {'end': 5908.746, 'text': 'All right now that loading.', 'start': 5907.386, 'duration': 1.36}, {'end': 5914.448, 'text': "you can keep that if you want, but I'm just going to create a spinner component real quick, because Bootstrap does have a spinner,", 'start': 5908.746, 'duration': 5.702}, {'end': 5917.329, 'text': "so we don't even need like a gift or anything.", 'start': 5914.448, 'duration': 2.881}, {'end': 5924.611, 'text': "So I'm going to create a file called Spinner in the components and let's say RFC.", 'start': 5917.349, 'duration': 7.262}, {'end': 5929.753, 'text': "OK, and then what we're going to do is add.", 'start': 5924.631, 'duration': 5.122}, {'end': 5935.935, 'text': "Let's get rid of this and we're just going to add in here class name.", 'start': 5929.773, 'duration': 6.162}], 'summary': 'Using curly braces for multiple queries, importing clients component, creating spinner component using bootstrap.', 'duration': 54.653, 'max_score': 5881.282, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw5881282.jpg'}], 'start': 5584.894, 'title': 'Implementing table, client table, and delete mutation', 'summary': 'Details the process of creating a table using bootstrap, creating a client table component with the usage of gql from apollo and bootstrap spinner, and implementing a delete mutation in graphql, emphasizing the use of apollo as a state manager and cache updates.', 'chapters': [{'end': 5647.23, 'start': 5584.894, 'title': 'Creating table with bootstrap', 'summary': 'Details the process of creating a table using bootstrap, including the addition of specific classes and the structure of the table.', 'duration': 62.336, 'highlights': ["Using bootstrap for creating a table, with class name 'table-hover' and margin top three.", 'Replacing H1 with a table and adding table head with name, email, and phone headings.', 'Utilizing table row and TH elements to structure the table with a delete button.']}, {'end': 6003.577, 'start': 5648.47, 'title': 'Creating client table', 'summary': 'Details the process of creating a client table component, importing client data, and implementing a spinner component for loading, demonstrating the usage of gql from apollo and bootstrap spinner.', 'duration': 355.107, 'highlights': ['The chapter details the process of creating a client table component, importing client data, and implementing a spinner component for loading.', 'Demonstrates the usage of GQL from Apollo and Bootstrap spinner for UI improvement.', 'Implementation of GQL from Apollo and usage of Bootstrap spinner for UI enhancement.']}, {'end': 6568.526, 'start': 6003.677, 'title': 'Implementing delete mutation in graphql', 'summary': 'Focuses on implementing a delete mutation in graphql, including creating the mutation, using the usemutation hook, and updating the cache to reflect changes in the front end, highlighting the importance of apollo as a state manager and the two ways of handling cache updates.', 'duration': 564.849, 'highlights': ['Creating the delete client mutation and exporting it, demonstrating the process of defining the mutation and its variables, such as ID, and specifying the fields to be returned, including ID, name, email, and phone. Creation and export of the delete client mutation with defined variables and specified return fields.', 'Implementation of the useMutation hook to enable the passing of variables, like the client ID, and the usage of the hook in the function for deleting the client. Usage of the useMutation hook to handle the deletion of a client by passing variables and integrating it within the delete function.', 'Demonstration of two methods for reflecting changes in the front end after a mutation, including refetching queries and updating the cache, with a focus on the importance of considering the potential performance impact of each method. Illustration of two approaches to update the front end after a mutation, emphasizing the need to consider the performance impact of refetching queries and updating the cache.']}], 'duration': 983.632, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw5584894.jpg', 'highlights': ['Details the process of creating a client table component, importing client data, and implementing a spinner component for loading.', 'Demonstrates the usage of GQL from Apollo and Bootstrap spinner for UI improvement.', 'Demonstration of two methods for reflecting changes in the front end after a mutation, including refetching queries and updating the cache, with a focus on the importance of considering the potential performance impact of each method.', 'Creating the delete client mutation and exporting it, demonstrating the process of defining the mutation and its variables, such as ID, and specifying the fields to be returned, including ID, name, email, and phone.']}, {'end': 7441.654, 'segs': [{'end': 6630.18, 'src': 'embed', 'start': 6596.989, 'weight': 0, 'content': [{'end': 6599.831, 'text': 'Oh, you know what? All I did was create the variable.', 'start': 6596.989, 'duration': 2.842}, {'end': 6601.352, 'text': "I didn't actually implement it.", 'start': 6599.891, 'duration': 1.461}, {'end': 6606.475, 'text': "So down here, instead of new in memory cache, we're just going to use the cache variable.", 'start': 6601.412, 'duration': 5.063}, {'end': 6609.636, 'text': 'So that should work now.', 'start': 6608.216, 'duration': 1.42}, {'end': 6612.918, 'text': "Let's go ahead and add that.", 'start': 6609.697, 'duration': 3.221}, {'end': 6617.141, 'text': 'And then if we click delete, now that warning goes away.', 'start': 6613.739, 'duration': 3.402}, {'end': 6623.637, 'text': "OK, so we're able to fetch clients and we're able to delete them.", 'start': 6618.775, 'duration': 4.862}, {'end': 6630.18, 'text': 'So I think next, what we should do is add the form to create them, to create clients from our application,', 'start': 6624.217, 'duration': 5.963}], 'summary': 'Implemented variable to fetch and delete clients, next step is adding form to create clients.', 'duration': 33.191, 'max_score': 6596.989, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw6596989.jpg'}, {'end': 6930.937, 'src': 'embed', 'start': 6900.685, 'weight': 3, 'content': [{'end': 6902.166, 'text': "so let's take a look.", 'start': 6900.685, 'duration': 1.481}, {'end': 6904.548, 'text': 'okay, that looks pretty good.', 'start': 6902.166, 'duration': 2.382}, {'end': 6908.731, 'text': "now we'll come down to the modal and let's change some of this stuff, the title.", 'start': 6904.548, 'duration': 4.183}, {'end': 6917.643, 'text': "here we'll say add client, and then let's see we have the close button.", 'start': 6908.731, 'duration': 8.912}, {'end': 6919.827, 'text': "the body is where everything's going to go, the footer.", 'start': 6917.643, 'duration': 2.184}, {'end': 6921.029, 'text': "i'm actually going to get rid of it.", 'start': 6919.827, 'duration': 1.202}, {'end': 6930.937, 'text': "so the modal footer, get rid of that, and then in the body is where we're going to have our form, OK.", 'start': 6921.029, 'duration': 9.908}], 'summary': "Modifying a modal layout, removing footer, and adding a form for 'add client'.", 'duration': 30.252, 'max_score': 6900.685, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw6900685.jpg'}, {'end': 6983.833, 'src': 'embed', 'start': 6954.397, 'weight': 1, 'content': [{'end': 6958.918, 'text': "All right, so that and then we'll do the input and this is going to have a class of form.", 'start': 6954.397, 'duration': 4.521}, {'end': 6961.878, 'text': "Let's say form dash control.", 'start': 6959.918, 'duration': 1.96}, {'end': 6967.06, 'text': "These are just bootstrap classes and it's going to be type text.", 'start': 6961.898, 'duration': 5.162}, {'end': 6975.261, 'text': "So let's also give it an ID of name and let's give it a value.", 'start': 6968.64, 'duration': 6.621}, {'end': 6979.242, 'text': 'Actually, before we do the value, we want to add our state.', 'start': 6976.481, 'duration': 2.761}, {'end': 6983.833, 'text': "Right So I'll just save that as is and we should just see the field.", 'start': 6980.39, 'duration': 3.443}], 'summary': "Bootstrap class form-control added with id 'name' and type 'text'.", 'duration': 29.436, 'max_score': 6954.397, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw6954397.jpg'}, {'end': 7383.306, 'src': 'embed', 'start': 7315.319, 'weight': 5, 'content': [{'end': 7317.52, 'text': 'GQL is defined but never used.', 'start': 7315.319, 'duration': 2.201}, {'end': 7319.58, 'text': "I'm just going to get rid of that.", 'start': 7318.18, 'duration': 1.4}, {'end': 7323.102, 'text': "So right here, we don't need this in clients anymore.", 'start': 7319.68, 'duration': 3.422}, {'end': 7327.744, 'text': 'Use mutation.', 'start': 7326.843, 'duration': 0.901}, {'end': 7328.304, 'text': "That's fine.", 'start': 7327.784, 'duration': 0.52}, {'end': 7329.544, 'text': 'All right.', 'start': 7328.324, 'duration': 1.22}, {'end': 7335.107, 'text': "So now that we have add client, let's go to back to the modal here.", 'start': 7329.584, 'duration': 5.523}, {'end': 7340.226, 'text': "And we're going to want to bring that in.", 'start': 7336.167, 'duration': 4.059}, {'end': 7343.369, 'text': "So let's say import add client.", 'start': 7340.246, 'duration': 3.123}, {'end': 7353.939, 'text': "From client mutations and then we're going to need to update the cash as well.", 'start': 7347.753, 'duration': 6.186}, {'end': 7358.604, 'text': "So I'm also going to bring in the get clients as well, get clients query.", 'start': 7353.979, 'duration': 4.625}, {'end': 7367.213, 'text': "and then we're going to go down here and, just like we did with the delete, we're going to say const, add client.", 'start': 7360.067, 'duration': 7.146}, {'end': 7370.115, 'text': "let's just close that up, all right.", 'start': 7367.213, 'duration': 2.902}, {'end': 7383.306, 'text': "so we're setting it to use mutation passing an add client and then anything that we want to pass in as far as variables is going to go in this object in a variables object,", 'start': 7370.115, 'duration': 13.191}], 'summary': 'Unused gql removed, replaced with use mutation, updating cash and bringing in add client from client mutations.', 'duration': 67.987, 'max_score': 7315.319, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw7315319.jpg'}], 'start': 6569.266, 'title': 'Implementing cache and adding client modal', 'summary': 'Demonstrates implementing cache for projects to avoid warning messages, ensuring successful client fetching and deletion. it also outlines adding a client modal using react components and bootstrap modals, connecting form fields to component state, and implementing a mutation for adding clients with ui updates.', 'chapters': [{'end': 6623.637, 'start': 6569.266, 'title': 'Implementing cache for projects', 'summary': 'Demonstrates the process of implementing cache for projects to avoid warning messages, resulting in successful client fetching and deletion.', 'duration': 54.371, 'highlights': ['The process of implementing cache for projects to prevent warning messages', 'Successful client fetching and deletion']}, {'end': 7441.654, 'start': 6624.217, 'title': 'Adding client modal and mutation', 'summary': 'Outlines the process of adding a client modal to the application using react components and bootstrap modals, connecting form fields to component state using usestate, and implementing a mutation for adding clients with the ability to update the ui.', 'duration': 817.437, 'highlights': ['The chapter outlines the process of adding a client modal to the application using React components and Bootstrap modals, connecting form fields to component state using useState, and implementing a mutation for adding clients with the ability to update the UI.', "The modal creation involves creating a new file 'addClientModal.jsx' and importing useState, FA user icon, and a mutation.", 'The modal is implemented using a Bootstrap modal as a reference, and the modal button and content are added to the component.', 'Form fields for name, email, and phone are connected to component state using useState, and the values are updated using the set functions.', 'A mutation for adding clients is defined, and the process of updating the cache to reflect the newly added client in the UI is explained.']}], 'duration': 872.388, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw6569266.jpg', 'highlights': ['The process of implementing cache for projects to prevent warning messages', 'Successful client fetching and deletion', 'The chapter outlines the process of adding a client modal to the application using React components and Bootstrap modals, connecting form fields to component state using useState, and implementing a mutation for adding clients with the ability to update the UI', 'Form fields for name, email, and phone are connected to component state using useState, and the values are updated using the set functions', 'A mutation for adding clients is defined, and the process of updating the cache to reflect the newly added client in the UI is explained', "The modal creation involves creating a new file 'addClientModal.jsx' and importing useState, FA user icon, and a mutation", 'The modal is implemented using a Bootstrap modal as a reference, and the modal button and content are added to the component']}, {'end': 8072.813, 'segs': [{'end': 7554.686, 'src': 'embed', 'start': 7497.222, 'weight': 4, 'content': [{'end': 7501.385, 'text': "we'll do captain at gmail and then phone number.", 'start': 7497.222, 'duration': 4.163}, {'end': 7507.618, 'text': "we'll do that and submit.", 'start': 7501.385, 'duration': 6.233}, {'end': 7508.679, 'text': 'And there we go.', 'start': 7508.118, 'duration': 0.561}, {'end': 7512.359, 'text': 'So it gets added right away because we updated the cache.', 'start': 7508.739, 'duration': 3.62}, {'end': 7515, 'text': "If we didn't do that, we'd have to reload the page.", 'start': 7512.399, 'duration': 2.601}, {'end': 7523.042, 'text': "Cool So I think we're pretty much done with client functionality later on.", 'start': 7517.18, 'duration': 5.862}, {'end': 7528.643, 'text': 'I do want to add the functionality where if we delete a client, it also deletes their projects.', 'start': 7523.102, 'duration': 5.541}, {'end': 7531.023, 'text': "But we'll do that later.", 'start': 7529.283, 'duration': 1.74}, {'end': 7533.844, 'text': 'So now we want to start to deal with projects.', 'start': 7531.563, 'duration': 2.281}, {'end': 7538.115, 'text': 'And I think the first thing we should do with that is is just display them.', 'start': 7534.693, 'duration': 3.422}, {'end': 7542.858, 'text': 'Right I believe we have some in the database here.', 'start': 7538.796, 'duration': 4.062}, {'end': 7546.841, 'text': "If we look at let's see projects, we run that.", 'start': 7542.878, 'duration': 3.963}, {'end': 7551.624, 'text': 'Yeah So we have two projects, mobile application and e-commerce website right now.', 'start': 7546.901, 'duration': 4.723}, {'end': 7552.925, 'text': 'Or at least I do.', 'start': 7552.184, 'duration': 0.741}, {'end': 7554.686, 'text': 'I mean, you guys have whatever you added.', 'start': 7552.985, 'duration': 1.701}], 'summary': 'Developed client functionality, planning to display and manage projects.', 'duration': 57.464, 'max_score': 7497.222, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw7497222.jpg'}, {'end': 7617.827, 'src': 'embed', 'start': 7589.847, 'weight': 0, 'content': [{'end': 7593.05, 'text': 'Set that to GQL and some backticks.', 'start': 7589.847, 'duration': 3.203}, {'end': 7598.817, 'text': "And then inside the back text, we're going to do a query, get projects.", 'start': 7593.914, 'duration': 4.903}, {'end': 7611.224, 'text': "And let's say from projects we want to get as far as the fields, we want the ID, the name and status, because that's what I want.", 'start': 7600.498, 'duration': 10.726}, {'end': 7617.827, 'text': "That's what I want to show on the cards, because we're going to have some project cards at the top and then let's export it.", 'start': 7611.584, 'duration': 6.243}], 'summary': 'Using gql and backticks, query projects for id, name, and status fields.', 'duration': 27.98, 'max_score': 7589.847, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw7589847.jpg'}, {'end': 7684.617, 'src': 'embed', 'start': 7650.8, 'weight': 1, 'content': [{'end': 7653.24, 'text': 'We also want to bring in the use query hook.', 'start': 7650.8, 'duration': 2.44}, {'end': 7656.681, 'text': "So use query that's going to be from.", 'start': 7654.561, 'duration': 2.12}, {'end': 7660.202, 'text': 'Apollo client.', 'start': 7656.701, 'duration': 3.501}, {'end': 7667.719, 'text': "And then let's bring in the get projects that we just that we just created.", 'start': 7663.914, 'duration': 3.805}, {'end': 7668.861, 'text': "That's not the right path.", 'start': 7667.759, 'duration': 1.102}, {'end': 7669.602, 'text': 'We want to go.', 'start': 7668.921, 'duration': 0.681}, {'end': 7677.492, 'text': "Let's see where any components we want to go up one level into queries and then we want project queries.", 'start': 7669.622, 'duration': 7.87}, {'end': 7679.354, 'text': 'All right.', 'start': 7679.054, 'duration': 0.3}, {'end': 7684.617, 'text': "So to get the projects, let's go right above the return.", 'start': 7679.614, 'duration': 5.003}], 'summary': 'Integrating usequery hook from apollo client to fetch project data.', 'duration': 33.817, 'max_score': 7650.8, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw7650800.jpg'}, {'end': 7890.815, 'src': 'embed', 'start': 7853.385, 'weight': 3, 'content': [{'end': 7857.508, 'text': 'And this this wrapping div is going to have a class name.', 'start': 7853.385, 'duration': 4.123}, {'end': 7861.783, 'text': 'of call dash MD dash four.', 'start': 7859.122, 'duration': 2.661}, {'end': 7866.686, 'text': "And then we're going to have a class of card and margin bottom three.", 'start': 7862.604, 'duration': 4.082}, {'end': 7870.027, 'text': 'And then we have our card body class.', 'start': 7867.806, 'duration': 2.221}, {'end': 7880.012, 'text': "And then in here we're going to have a class display flex and let's say justify content between.", 'start': 7871.868, 'duration': 8.144}, {'end': 7884.314, 'text': "And let's also do a line.", 'start': 7880.032, 'duration': 4.282}, {'end': 7889.293, 'text': 'items to a line item center.', 'start': 7886.431, 'duration': 2.862}, {'end': 7890.815, 'text': 'All right.', 'start': 7889.313, 'duration': 1.502}], 'summary': 'Transcript covers css classes for a wrapping div, card, and card body.', 'duration': 37.43, 'max_score': 7853.385, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw7853385.jpg'}, {'end': 7960.779, 'src': 'embed', 'start': 7926.616, 'weight': 2, 'content': [{'end': 7929.937, 'text': "I do want to have some spacing here, so why don't we add.", 'start': 7926.616, 'duration': 3.321}, {'end': 7933.319, 'text': "Let's see.", 'start': 7929.957, 'duration': 3.362}, {'end': 7937.721, 'text': "Actually, on the row right here, let's say empty.", 'start': 7934.839, 'duration': 2.882}, {'end': 7942.803, 'text': "We'll try empty three, maybe empty five.", 'start': 7938.621, 'duration': 4.182}, {'end': 7947.607, 'text': 'or four.', 'start': 7946.125, 'duration': 1.482}, {'end': 7951.991, 'text': "whatever you think looks good doesn't really matter, okay?", 'start': 7947.607, 'duration': 4.384}, {'end': 7955.274, 'text': 'um so now we just have.', 'start': 7951.991, 'duration': 3.283}, {'end': 7957.416, 'text': 'we have the name here.', 'start': 7955.274, 'duration': 2.142}, {'end': 7959.758, 'text': "in addition to that, let's go into our project car.", 'start': 7957.416, 'duration': 2.342}, {'end': 7960.779, 'text': "we're going to have a link.", 'start': 7959.758, 'duration': 1.021}], 'summary': 'Discussion about adding spacing and a link to the project car.', 'duration': 34.163, 'max_score': 7926.616, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw7926616.jpg'}], 'start': 7441.654, 'title': 'Client form submission, data handling, project card display, and project queries', 'summary': 'Covers handling client form submissions with validation, updating cache for client addition, and planning for future additions. it also discusses displaying project cards, adding project queries, defining project card details, handling loading and error states, and setting up react router for navigation.', 'chapters': [{'end': 7528.643, 'start': 7441.654, 'title': 'Client form submission and data handling', 'summary': 'Covers handling client form submissions, including validation for name, email, and phone fields, and updating the cache to immediately display added clients, showcasing the completion of client functionality and a plan for future additions.', 'duration': 86.989, 'highlights': ['Client form submission includes validation for name, email, and phone fields, alerting the user to fill in all fields if something is missing.', 'Using spread operator for adding client data immediately updates the cache, allowing the addition of clients without needing to reload the page.', 'Future plan to add functionality for deleting a client and their projects.']}, {'end': 8072.813, 'start': 7529.283, 'title': 'Displaying project cards and adding project queries', 'summary': 'Discusses adding project queries, creating a projects component to display project cards, and defining a project card component with details like project name, status, and a view button. it also touches upon handling loading and error states and the use of the usequery hook. additionally, the chapter briefly mentions the need to set up the react router for navigation.', 'duration': 543.53, 'highlights': ['Creating a Projects component to display project cards The chapter discusses the creation of a Projects component to display project cards, which involves handling loading and error states, mapping through the projects, and conditional rendering based on the presence of projects in the data. This component aims to visually present the projects in a structured manner.', 'Defining a Project Card component with project details The chapter explains the creation of a Project Card component to display project details such as the project name, status, and a view button. It covers the use of flexbox design for layout and mentions the potential for adjusting the number of columns for responsive design.', "Adding project queries and utilizing the useQuery hook The chapter delves into the process of adding project queries by defining a query to retrieve project details and utilizing the useQuery hook to fetch data. It emphasizes the importance of handling loading and error states while fetching the projects' data.", 'Mentioning the need to set up the React Router for navigation The chapter briefly mentions the necessity of setting up the React Router for navigation, indicating the intention to establish routing functionality for navigating to specific project details. This suggests a future implementation for enabling seamless navigation within the application.']}], 'duration': 631.159, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw7441654.jpg', 'highlights': ['Future plan to add functionality for deleting a client and their projects.', 'Using spread operator for adding client data immediately updates the cache, allowing the addition of clients without needing to reload the page.', 'Client form submission includes validation for name, email, and phone fields, alerting the user to fill in all fields if something is missing.', 'Creating a Projects component to display project cards involving handling loading and error states, mapping through the projects, and conditional rendering based on the presence of projects in the data.', 'Defining a Project Card component with project details such as the project name, status, and a view button, covering the use of flexbox design for layout and mentioning the potential for adjusting the number of columns for responsive design.', "Adding project queries by defining a query to retrieve project details and utilizing the useQuery hook to fetch data, emphasizing the importance of handling loading and error states while fetching the projects' data.", 'Mentioning the need to set up the React Router for navigation, indicating the intention to establish routing functionality for navigating to specific project details, suggesting a future implementation for enabling seamless navigation within the application.']}, {'end': 9917.586, 'segs': [{'end': 8106.286, 'src': 'embed', 'start': 8072.813, 'weight': 5, 'content': [{'end': 8074.215, 'text': 'so next step,', 'start': 8072.813, 'duration': 1.402}, {'end': 8084.757, 'text': 'we have our project cards but want to be able to have a separate page where we can view the description and we can also have like an edit form,', 'start': 8074.215, 'duration': 10.542}, {'end': 8087.338, 'text': 'we can update it, delete it and so on.', 'start': 8084.757, 'duration': 2.581}, {'end': 8089.439, 'text': 'so i think now is the time we should.', 'start': 8087.338, 'duration': 2.101}, {'end': 8092.9, 'text': 'we should start to implement the the router all right.', 'start': 8089.439, 'duration': 3.461}, {'end': 8099.123, 'text': "at the moment we just have our app.js and we're just kind of piling components in here.", 'start': 8092.9, 'duration': 6.223}, {'end': 8106.286, 'text': "so i think that maybe we'll have a pages folder and this will be basically like our home page home page component.", 'start': 8099.123, 'duration': 7.163}], 'summary': 'Implement router to create separate page for project description and edit form.', 'duration': 33.473, 'max_score': 8072.813, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw8072813.jpg'}, {'end': 8215.116, 'src': 'embed', 'start': 8187.109, 'weight': 11, 'content': [{'end': 8195.314, 'text': "so let's create a file here called home.jsx, and then i'm also going to set up a not found page.", 'start': 8187.109, 'duration': 8.205}, {'end': 8204.299, 'text': "so let's say not found dot jsx and then let's also create a project dot jsx.", 'start': 8195.314, 'duration': 8.985}, {'end': 8206.722, 'text': 'so that will be like the single project page.', 'start': 8204.299, 'duration': 2.423}, {'end': 8215.116, 'text': "um, now for the home, this is going to be basically what we're we're looking at here.", 'start': 8207.891, 'duration': 7.225}], 'summary': 'Creating home.jsx, not found.jsx, and project.jsx for web development project.', 'duration': 28.007, 'max_score': 8187.109, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw8187109.jpg'}, {'end': 8359.05, 'src': 'embed', 'start': 8328.393, 'weight': 2, 'content': [{'end': 8333.674, 'text': "So let's say import home from it's not going to be in components.", 'start': 8328.393, 'duration': 5.281}, {'end': 8335.696, 'text': "It's going to be in pages.", 'start': 8333.754, 'duration': 1.942}, {'end': 8338.697, 'text': 'So pages slash home.', 'start': 8336.936, 'duration': 1.761}, {'end': 8340.576, 'text': "Let's see what we get here.", 'start': 8338.717, 'duration': 1.859}, {'end': 8342.817, 'text': 'So I did I not.', 'start': 8341.498, 'duration': 1.319}, {'end': 8346.927, 'text': 'We need to import that stuff.', 'start': 8345.546, 'duration': 1.381}, {'end': 8348.447, 'text': 'So let me just grab that.', 'start': 8347.087, 'duration': 1.36}, {'end': 8355.41, 'text': "OK, and then we're going to go to home and we need to import those components,", 'start': 8348.467, 'duration': 6.943}, {'end': 8359.05, 'text': "but they're going to be up up one level because we're in pages right now.", 'start': 8355.41, 'duration': 3.64}], 'summary': 'Transcript discusses importing components from different directories for a web project.', 'duration': 30.657, 'max_score': 8328.393, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw8328393.jpg'}, {'end': 8503.895, 'src': 'embed', 'start': 8473.644, 'weight': 13, 'content': [{'end': 8480.565, 'text': "And then inside here, we're going to have our exclamation triangle size.", 'start': 8473.644, 'duration': 6.921}, {'end': 8482.966, 'text': "We'll see what five M looks like.", 'start': 8481.146, 'duration': 1.82}, {'end': 8489.545, 'text': "And then underneath that, let's put an H1 and we'll just put a 404.", 'start': 8483.866, 'duration': 5.679}, {'end': 8501.113, 'text': "okay, and then we'll have a paragraph with the class of lead and we're going to say sorry, this page does not exist.", 'start': 8489.545, 'duration': 11.568}, {'end': 8503.895, 'text': "and then finally we'll have a link to go back home.", 'start': 8501.113, 'duration': 2.782}], 'summary': 'Creating a web page with an exclamation triangle, 404 message, and link to go back home.', 'duration': 30.251, 'max_score': 8473.644, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw8473644.jpg'}, {'end': 8695.201, 'src': 'embed', 'start': 8659.502, 'weight': 7, 'content': [{'end': 8663.225, 'text': 'pass in the id and the data from that that we want to bring.', 'start': 8659.502, 'duration': 3.723}, {'end': 8670.55, 'text': 'that we want to return is going to be basically everything the id, the, the name, the description,', 'start': 8663.225, 'duration': 7.325}, {'end': 8677.122, 'text': 'Anything we want to have on the page is status and then also the client data.', 'start': 8672.938, 'duration': 4.184}, {'end': 8681.707, 'text': 'So from the client, we want to have the ID.', 'start': 8677.222, 'duration': 4.485}, {'end': 8687.233, 'text': 'Oops ID name.', 'start': 8681.907, 'duration': 5.326}, {'end': 8691.377, 'text': 'What else? Email phone.', 'start': 8689.115, 'duration': 2.262}, {'end': 8692.898, 'text': 'All right.', 'start': 8692.638, 'duration': 0.26}, {'end': 8695.201, 'text': 'And then we just want to export that as well.', 'start': 8692.959, 'duration': 2.242}], 'summary': 'Summarize the transcript in one concise sentence, not exceeding 60 characters, including key points and quantifiable data.', 'duration': 35.699, 'max_score': 8659.502, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw8659502.jpg'}, {'end': 8761.974, 'src': 'embed', 'start': 8725.186, 'weight': 14, 'content': [{'end': 8728.128, 'text': 'And then we also want to bring in the spinner.', 'start': 8725.186, 'duration': 2.942}, {'end': 8734.593, 'text': 'And we want to bring in the use query hook.', 'start': 8728.148, 'duration': 6.445}, {'end': 8737.675, 'text': 'And we also want to bring in.', 'start': 8736.374, 'duration': 1.301}, {'end': 8743.139, 'text': 'The query we just created get project.', 'start': 8739.716, 'duration': 3.423}, {'end': 8746.201, 'text': 'And that should do it for now.', 'start': 8744.84, 'duration': 1.361}, {'end': 8750.624, 'text': "And then let's come up here and let's let's get the ID.", 'start': 8746.721, 'duration': 3.903}, {'end': 8752.185, 'text': 'We can destructure that.', 'start': 8750.664, 'duration': 1.521}, {'end': 8755.312, 'text': 'We can destructure that from use params.', 'start': 8753.131, 'duration': 2.181}, {'end': 8758.473, 'text': 'So we want to get the I.D.', 'start': 8755.992, 'duration': 2.481}, {'end': 8761.134, 'text': 'that will get get the I.D.', 'start': 8759.653, 'duration': 1.481}, {'end': 8761.974, 'text': 'from the URL.', 'start': 8761.194, 'duration': 0.78}], 'summary': 'Integrating spinner and query hook to retrieve project id from url.', 'duration': 36.788, 'max_score': 8725.186, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw8725186.jpg'}, {'end': 9438.05, 'src': 'embed', 'start': 9338.795, 'weight': 0, 'content': [{'end': 9342.197, 'text': "And that's going to come from queries and then project queries.", 'start': 9338.795, 'duration': 3.402}, {'end': 9350.622, 'text': "And then for this, this is going to be add project, but I'm just going to get rid of that for now.", 'start': 9345.239, 'duration': 5.383}, {'end': 9355.807, 'text': 'And then down here, as far as our fields, we do have a project name.', 'start': 9352.065, 'duration': 3.742}, {'end': 9358.368, 'text': 'And then we have a description.', 'start': 9356.227, 'duration': 2.141}, {'end': 9365.071, 'text': 'So this will be set description.', 'start': 9358.388, 'duration': 6.683}, {'end': 9368.412, 'text': 'uh, what else we have?', 'start': 9366.95, 'duration': 1.462}, {'end': 9370.814, 'text': 'uh, client id.', 'start': 9368.412, 'duration': 2.402}, {'end': 9375.738, 'text': "so let's change phone to client id.", 'start': 9370.814, 'duration': 4.924}, {'end': 9381.583, 'text': "that'll be set client id, and these are all just going to be empty strings.", 'start': 9375.738, 'duration': 5.845}, {'end': 9382.484, 'text': 'now the status.', 'start': 9381.583, 'duration': 0.901}, {'end': 9392.478, 'text': "let's copy this down because we do want to have status And by default we're going to set that to new.", 'start': 9382.484, 'duration': 9.994}, {'end': 9394.218, 'text': "And remember, that's an enum.", 'start': 9392.878, 'duration': 1.34}, {'end': 9396.579, 'text': "So we don't put the actual value.", 'start': 9394.699, 'duration': 1.88}, {'end': 9399.54, 'text': 'The value of new is is what not started.', 'start': 9396.979, 'duration': 2.561}, {'end': 9401.32, 'text': 'This is the key.', 'start': 9399.56, 'duration': 1.76}, {'end': 9405.542, 'text': 'Right And then you have what progress is the key for in progress.', 'start': 9401.781, 'duration': 3.761}, {'end': 9410.203, 'text': "And then we have completed is the key for I think it's still completed.", 'start': 9406.002, 'duration': 4.201}, {'end': 9412.32, 'text': 'then down here.', 'start': 9411.4, 'duration': 0.92}, {'end': 9424.825, 'text': "let's see, before we get into to this right here, let's um, let's come down here and let's go down to the actual component.", 'start': 9412.32, 'duration': 12.505}, {'end': 9427.646, 'text': 'so the button where it says add client modal.', 'start': 9424.825, 'duration': 2.821}, {'end': 9433.629, 'text': "let's take all that, all those whoops, not that one.", 'start': 9427.646, 'duration': 5.983}, {'end': 9438.05, 'text': 'we want this one, this one, this one and this one.', 'start': 9433.629, 'duration': 4.421}], 'summary': 'Setting up project fields with default values and a new status enum for project progress.', 'duration': 99.255, 'max_score': 9338.795, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw9338795.jpg'}, {'end': 9613.839, 'src': 'embed', 'start': 9581.597, 'weight': 9, 'content': [{'end': 9583.599, 'text': 'And then this needs an on change event.', 'start': 9581.597, 'duration': 2.002}, {'end': 9585.621, 'text': "So it's a on change.", 'start': 9584.139, 'duration': 1.482}, {'end': 9591.647, 'text': "We're going to set that to function just like the rest of the fields.", 'start': 9586.462, 'duration': 5.185}, {'end': 9593.448, 'text': "We're just going to now set status.", 'start': 9591.687, 'duration': 1.761}, {'end': 9596.687, 'text': 'and set it to whatever the value is.', 'start': 9594.585, 'duration': 2.102}, {'end': 9599.689, 'text': 'So he dot target dot value.', 'start': 9596.747, 'duration': 2.942}, {'end': 9602.431, 'text': 'All right.', 'start': 9599.709, 'duration': 2.722}, {'end': 9603.912, 'text': 'And then we need some options.', 'start': 9602.551, 'duration': 1.361}, {'end': 9607.354, 'text': "So within the select, let's add an option.", 'start': 9604.032, 'duration': 3.322}, {'end': 9611.057, 'text': "And for the value, we'll do new.", 'start': 9608.935, 'duration': 2.122}, {'end': 9613.839, 'text': "And for the text, we'll say not started.", 'start': 9611.657, 'duration': 2.182}], 'summary': "Adding an on change event to set status to the value, along with adding a new option for 'not started'.", 'duration': 32.242, 'max_score': 9581.597, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw9581597.jpg'}, {'end': 9682.497, 'src': 'embed', 'start': 9648.191, 'weight': 3, 'content': [{'end': 9654.236, 'text': "So I'll save it and let's try to just put it in the home page and bet it just like we have the ad client modal.", 'start': 9648.191, 'duration': 6.045}, {'end': 9657.418, 'text': 'Just going to change that to project.', 'start': 9654.256, 'duration': 3.162}, {'end': 9667.786, 'text': "Project and then we'll put it right right after the ad client modal.", 'start': 9662.442, 'duration': 5.344}, {'end': 9670.588, 'text': 'All right.', 'start': 9670.288, 'duration': 0.3}, {'end': 9675.856, 'text': "So it looks like we have a bunch of stuff that's not defined.", 'start': 9673.035, 'duration': 2.821}, {'end': 9677.916, 'text': "Let's see, email is not defined.", 'start': 9675.896, 'duration': 2.02}, {'end': 9682.497, 'text': 'Where is email? Oh, all this up here.', 'start': 9679.237, 'duration': 3.26}], 'summary': 'Discussing website modifications: adding project feature, encountering undefined email variable.', 'duration': 34.306, 'max_score': 9648.191, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw9648191.jpg'}, {'end': 9749.725, 'src': 'embed', 'start': 9716.481, 'weight': 10, 'content': [{'end': 9720.203, 'text': "so we're doing the same exact thing that we did with the add client modal.", 'start': 9716.481, 'duration': 3.722}, {'end': 9722.384, 'text': "it's just different fields.", 'start': 9720.203, 'duration': 2.181}, {'end': 9733.326, 'text': "status, and let's set, um, what set client id All right.", 'start': 9722.384, 'duration': 10.942}, {'end': 9737.931, 'text': "Actually, for the set status, let's set that to the new.", 'start': 9733.486, 'duration': 4.445}, {'end': 9742.356, 'text': 'Actually, we want quotes around it.', 'start': 9739.193, 'duration': 3.163}, {'end': 9742.877, 'text': 'There we go.', 'start': 9742.376, 'duration': 0.501}, {'end': 9743.898, 'text': 'All right.', 'start': 9743.638, 'duration': 0.26}, {'end': 9746.381, 'text': 'So at least now we can see new project.', 'start': 9743.938, 'duration': 2.443}, {'end': 9749.725, 'text': 'And if we click it, we now have this this form.', 'start': 9746.421, 'duration': 3.304}], 'summary': "Configuring new fields for the client modal, setting status to 'new'.", 'duration': 33.244, 'max_score': 9716.481, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw9716481.jpg'}], 'start': 8072.813, 'title': 'Implementing react router and page layout', 'summary': 'Discusses implementing react router for project pages, including creating separate pages for viewing and editing project descriptions, utilizing react router dom version 6.3, setting up a 404 page, and creating a project layout with elements like project name, description, status, and client information.', 'chapters': [{'end': 8157.965, 'start': 8072.813, 'title': 'Implementing router for project page', 'summary': 'Discusses implementing the router for project page, including creating a separate page for viewing and editing project descriptions, utilizing the react router dom version 6.3, and wrapping the app components with the router.', 'duration': 85.152, 'highlights': ['Creating a separate page for viewing and editing project descriptions', 'Utilizing react router Dom version 6.3', 'Wrapping the app components with the router']}, {'end': 8394.506, 'start': 8157.965, 'title': 'Creating react pages and routing', 'summary': "Discusses creating pages and setting up routing for a react application, including the structure and import of components, as well as the importance of a 'not found' page, emphasizing the need for a 404 page.", 'duration': 236.541, 'highlights': ['Importing and organizing components into pages The chapter emphasizes the process of creating pages and organizing components within a React application, such as setting up the home, project, and not found pages for proper navigation.', 'Setting up routing for home and not found pages The importance of setting up routing for the home and not found pages is highlighted, ensuring proper navigation and user experience within the React application.', "Importance of a 'not found' page The chapter stresses the importance of a 'not found' page to handle 404 errors, ensuring a better user experience when users visit non-existent routes within the application."]}, {'end': 8659.502, 'start': 8395.266, 'title': 'Creating 404 page and single project component', 'summary': 'Covers creating a 404 page with an exclamation triangle icon and a link to go back home, as well as setting up a route and component for a single project page, along with a query to fetch a single project.', 'duration': 264.236, 'highlights': ["Creating a 404 page with an exclamation triangle icon and a link to go back home Demonstrates creating a 404 page with an exclamation triangle icon, an H1 tag displaying '404', a paragraph apologizing for the non-existent page, and a link to go back home.", "Setting up a route and component for a single project page Explains the process of setting up a route for a single project page with a path of 'project/:id' and linking it to the project page component.", 'Writing a query to fetch a single project Describes the creation of a query to fetch a single project using GraphQL, specifying the id of the project and returning the project details.']}, {'end': 8881.607, 'start': 8659.502, 'title': 'Implementing data retrieval and display', 'summary': 'Covers implementing data retrieval and display using react router dom to extract the id from the url, utilizing use query hook and parameters, and creating a network request to fetch project data, including the id, name, description, and client details.', 'duration': 222.105, 'highlights': ['Implementing data retrieval and display using React Router DOM to extract the ID from the URL The chapter focuses on using React Router DOM to extract the ID from the URL for data retrieval and display.', 'Utilizing use query hook and parameters to fetch project data The use query hook and parameters are utilized to fetch project data, including the ID, name, description, and client details.', 'Creating a network request to fetch project data, including the ID, name, description, and client details A network request is created to fetch project data, which includes the ID, name, description, and client details.']}, {'end': 9405.542, 'start': 8882.728, 'title': 'Creating project page layout', 'summary': 'Covers creating a layout for the project page, including elements such as a back link, project name, description, status, and client information, while also preparing to add a project modal.', 'duration': 522.814, 'highlights': ['Creating layout for the project page with elements like a back link, project name, description, status, and client information.', 'Preparing to add a project modal with necessary state management and queries, such as use state, use mutation, and use query.']}, {'end': 9917.586, 'start': 9406.002, 'title': 'Updating add project modal', 'summary': "Involves updating the 'add project' modal by changing button text to 'new project', changing button color to 'button primary', and modifying form fields such as description, status, and client, with specifics on the type of input, class name, and values.", 'duration': 511.584, 'highlights': ["Changing the button text to 'New Project', the button color to 'button primary', and the icon to a list. The button text was updated to 'New Project', the button color was changed to 'button primary', and the icon was modified to a list.", "Modifying form fields such as description to a text area, status to a select list with options like 'not started', 'in progress', and 'completed'. The description field was changed to a text area, the status field was converted to a select list with options 'not started', 'in progress', and 'completed'.", 'Discussing the process of fetching clients to fill the select box and implementing conditional rendering based on loading and error states. The process of fetching clients to populate the select box was discussed, along with the implementation of conditional rendering based on loading and error states.']}], 'duration': 1844.773, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw8072813.jpg', 'highlights': ['Utilizing react router Dom version 6.3', 'Creating a separate page for viewing and editing project descriptions', 'Setting up a 404 page with an exclamation triangle icon and a link to go back home', 'Creating layout for the project page with elements like a back link, project name, description, status, and client information', 'Importing and organizing components into pages', 'Setting up routing for home and not found pages', 'Implementing data retrieval and display using React Router DOM to extract the ID from the URL', 'Creating a network request to fetch project data, including the ID, name, description, and client details', 'Preparing to add a project modal with necessary state management and queries, such as use state, use mutation, and use query', "Changing the button text to 'New Project', the button color to 'button primary', and the icon to a list", "Modifying form fields such as description to a text area, status to a select list with options like 'not started', 'in progress', and 'completed'", 'Discussing the process of fetching clients to fill the select box and implementing conditional rendering based on loading and error states', 'Setting up a route and component for a single project page', 'Writing a query to fetch a single project', 'Utilizing use query hook and parameters to fetch project data']}, {'end': 11677.633, 'segs': [{'end': 9955.254, 'src': 'embed', 'start': 9918.286, 'weight': 7, 'content': [{'end': 9922.409, 'text': "And I'm just going to put a fragment in here because it needs to wrap around everything.", 'start': 9918.286, 'duration': 4.123}, {'end': 9926.772, 'text': 'It can only have a single parent element.', 'start': 9922.429, 'duration': 4.343}, {'end': 9929.314, 'text': 'And here we have a button and the div.', 'start': 9927.392, 'duration': 1.922}, {'end': 9936.419, 'text': 'So we want to grab that button and div all this, cut it, and put it inside here.', 'start': 9929.354, 'duration': 7.065}, {'end': 9939.106, 'text': 'All right.', 'start': 9938.786, 'duration': 0.32}, {'end': 9948.231, 'text': "So now we're getting the clients right here as data.", 'start': 9942.488, 'duration': 5.743}, {'end': 9953.494, 'text': "So now let's go add another field to the form.", 'start': 9950.632, 'duration': 2.862}, {'end': 9955.254, 'text': 'So underneath.', 'start': 9954.394, 'duration': 0.86}], 'summary': 'Demonstrating how to wrap a fragment around a button and div, and adding a new field to the form.', 'duration': 36.968, 'max_score': 9918.286, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw9918286.jpg'}, {'end': 10111.014, 'src': 'embed', 'start': 10074.308, 'weight': 4, 'content': [{'end': 10078.01, 'text': "We're going to say for each client.", 'start': 10074.308, 'duration': 3.702}, {'end': 10081.412, 'text': 'Then we want to have an option.', 'start': 10079.511, 'duration': 1.901}, {'end': 10083.012, 'text': 'All right.', 'start': 10081.432, 'duration': 1.58}, {'end': 10084.133, 'text': "So we'll say option.", 'start': 10083.032, 'duration': 1.101}, {'end': 10088.335, 'text': "Oops, that didn't work there.", 'start': 10084.153, 'duration': 4.182}, {'end': 10089.315, 'text': 'Say option.', 'start': 10088.555, 'duration': 0.76}, {'end': 10094.358, 'text': "We'll close that.", 'start': 10089.335, 'duration': 5.023}, {'end': 10096.23, 'text': 'All right.', 'start': 10095.99, 'duration': 0.24}, {'end': 10102.232, 'text': 'So the option has a key of client ID and a value of of the ID of the client.', 'start': 10096.35, 'duration': 5.882}, {'end': 10104.712, 'text': 'But the text we want to show is going to be the name.', 'start': 10102.252, 'duration': 2.46}, {'end': 10107.633, 'text': "So here we'll say client dot name.", 'start': 10105.373, 'duration': 2.26}, {'end': 10111.014, 'text': "So let's save that and we'll give it a shot.", 'start': 10108.693, 'duration': 2.321}], 'summary': 'Creating options for clients using client id and name.', 'duration': 36.706, 'max_score': 10074.308, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw10074308.jpg'}, {'end': 10383.906, 'src': 'embed', 'start': 10320.187, 'weight': 0, 'content': [{'end': 10323.929, 'text': "OK, and then let's go back into the component here.", 'start': 10320.187, 'duration': 3.742}, {'end': 10327.937, 'text': "right below the state and let's say const.", 'start': 10325.276, 'duration': 2.661}, {'end': 10330.798, 'text': "We'll do that.", 'start': 10330.038, 'duration': 0.76}, {'end': 10341.322, 'text': "OK, so we're setting this ad project to use mutation and then passing in the ad project mutation.", 'start': 10330.818, 'duration': 10.504}, {'end': 10351.766, 'text': 'then we have to pass a second parameter here of an object with our variables, and the variables are going to be the name, description,', 'start': 10341.322, 'duration': 10.444}, {'end': 10353.687, 'text': 'client ID and status.', 'start': 10351.766, 'duration': 1.921}, {'end': 10356.159, 'text': 'so that will do it.', 'start': 10355.037, 'duration': 1.122}, {'end': 10360.686, 'text': 'that will add the project, but remember, we want to update our cache.', 'start': 10356.159, 'duration': 4.527}, {'end': 10369.117, 'text': "right when i, when i click add project and i submit this, I'm going to want it to show here without having to reload the page.", 'start': 10360.686, 'duration': 8.431}, {'end': 10374.58, 'text': 'And again, you could do refetch, but I would suggest doing just doing an update.', 'start': 10369.617, 'duration': 4.963}, {'end': 10376.762, 'text': "So let's say update.", 'start': 10374.68, 'duration': 2.082}, {'end': 10383.906, 'text': 'We want to pass in here cash and then this should be curly braces.', 'start': 10377.902, 'duration': 6.004}], 'summary': 'Setting up ad project mutation with variables for name, description, client id, and status, and updating cache for real-time display.', 'duration': 63.719, 'max_score': 10320.187, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw10320187.jpg'}, {'end': 10919.181, 'src': 'embed', 'start': 10893.976, 'weight': 9, 'content': [{'end': 10902.592, 'text': "All right, so the last thing to do is, We don't want to be able to update some of these values like the description and stuff like that.", 'start': 10893.976, 'duration': 8.616}, {'end': 10907.855, 'text': "So I'm going to embed a form and edit form into the page so we can close that up.", 'start': 10902.932, 'duration': 4.923}, {'end': 10919.181, 'text': "And let's see on the on this project page I'm going to have another component because I don't want to again I don't want to clutter this up too much.", 'start': 10908.935, 'duration': 10.246}], 'summary': 'Embedding a form and edit form to restrict updating values on the project page.', 'duration': 25.205, 'max_score': 10893.976, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw10893976.jpg'}, {'end': 11097.678, 'src': 'embed', 'start': 11066.814, 'weight': 2, 'content': [{'end': 11072.598, 'text': 'so we need to add the name, the description and status state.', 'start': 11066.814, 'duration': 5.784}, {'end': 11082.785, 'text': "so up here let's say const, name, set name, description and status.", 'start': 11072.598, 'duration': 10.187}, {'end': 11089.535, 'text': "now this is going to get passed in the entire project, OK, and we're going to pass in as the default.", 'start': 11082.785, 'duration': 6.75}, {'end': 11095.237, 'text': "for the name, let's say project dot name, and then we're going to do the same for description.", 'start': 11089.535, 'duration': 5.702}, {'end': 11097.678, 'text': "However, I'm not going to do it for a status.", 'start': 11095.637, 'duration': 2.041}], 'summary': 'Adding name, description, and status to the project with default values.', 'duration': 30.864, 'max_score': 11066.814, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw11066814.jpg'}, {'end': 11495.573, 'src': 'embed', 'start': 11461.201, 'weight': 8, 'content': [{'end': 11462.283, 'text': 'which is right here.', 'start': 11461.201, 'duration': 1.082}, {'end': 11467.511, 'text': "So right now we're just returning this client find by ID and remove and it just leads the client.", 'start': 11462.784, 'duration': 4.727}, {'end': 11475.543, 'text': "But let's go right above that and I'm going to use the project model and we're going to go ahead and find.", 'start': 11467.571, 'duration': 7.972}, {'end': 11482.607, 'text': 'so basically we need to find the project that has the that client associated with it.', 'start': 11476.664, 'duration': 5.943}, {'end': 11485.789, 'text': "so let's say find pass in an object.", 'start': 11482.607, 'duration': 3.182}, {'end': 11495.573, 'text': 'we want to find where the client id is equal to the args.id, which is the which is the client id, because this is the delete client.', 'start': 11485.789, 'duration': 9.784}], 'summary': 'Finding the project associated with a client by client id.', 'duration': 34.372, 'max_score': 11461.201, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw11461201.jpg'}], 'start': 9918.286, 'title': 'Updating project information', 'summary': 'Covers updating project information, adding a submit button, creating a mutation to update the project, implementing cascading deletion of associated projects, and testing the functionality by creating and deleting a test client and project.', 'chapters': [{'end': 10111.014, 'start': 9918.286, 'title': 'Adding client selection to form', 'summary': "Discusses adding a client selection field to the form, using react to map through the clients' data to dynamically generate options, and set the client id on change of the select box.", 'duration': 192.728, 'highlights': ["Using React to map through the clients' data to dynamically generate options based on the client's name and ID.", "Setting the client ID on change of the select box using a function to update the state with the selected client's ID.", 'Adding a new select box for client selection underneath the status field in the form.']}, {'end': 10478.844, 'start': 10111.094, 'title': 'Handling project submission and cache update', 'summary': "Covers handling the submission of a new project through mutation, updating the cache to display the new project without page reload, and implementing the 'add project' function to achieve this.", 'duration': 367.75, 'highlights': ["Implementing new mutation to add a project The chapter discusses the need for a new mutation to add a project, covering the implementation of the 'ad_project' mutation with parameters like name, description, client id, and status.", "Updating the cache to display the new project without page reload The process of updating the cache to show the new project without page reload is explained, including using the 'update' method and setting the data to the projects with the added project concatenated onto it.", "Calling the 'add project' function to submit the new project The steps for calling the 'add project' function to submit a new project are detailed, including passing the necessary fields like name, description, client id, and status."]}, {'end': 10794.493, 'start': 10478.844, 'title': 'Adding delete functionality to project page', 'summary': 'Discusses adding a delete button to the project page, setting up the mutation to delete a project, and incorporating the necessary components and queries, with a focus on modularity and functionality enhancement.', 'duration': 315.649, 'highlights': ['Setting up a delete button in a separate component to call a mutation for deleting a project. The chapter emphasizes creating a separate component for the delete button to maintain modularity and clarity in the project file, enhancing functionality.', 'Incorporating necessary components and queries such as useNavigate, trash icon, and getProjects query for updating the cache. The importance of incorporating useNavigate for redirection, trash icon from react icons, and getProjects query for cache update is highlighted, enhancing the overall functionality of the project.', 'Defining the mutation to delete a project by passing the project ID and returning the ID after deletion. The process of defining the delete project mutation and passing the project ID, followed by returning the ID after deletion, is detailed to ensure the successful implementation of the delete functionality.']}, {'end': 11173.827, 'start': 10794.513, 'title': 'Adding delete functionality and editing project details', 'summary': 'Covers adding a delete functionality allowing users to delete projects and redirecting to the home page upon completion, as well as embedding an edit form for updating project details with specific focus on pre-filling status field and its limitations.', 'duration': 379.314, 'highlights': ['Adding delete functionality and redirecting to home page The chapter covers the process of adding a delete functionality, which successfully allows users to delete projects and redirects to the home page upon completion.', 'Embedding an edit form for updating project details The chapter discusses embedding an edit form for updating project details, specifically focusing on pre-filling the status field with limitations due to the use of an enum type in the backend.']}, {'end': 11677.633, 'start': 11173.887, 'title': 'Updating project information and implementing cascading deletion', 'summary': 'Covers updating project information by adding a submit button, creating a mutation to update the project, implementing cascading deletion of associated projects when a client is deleted, and testing the functionality by creating and deleting a test client and project.', 'duration': 503.746, 'highlights': ['Implementing cascading deletion of associated projects when a client is deleted The speaker modifies the backend logic to delete associated projects when a client is deleted, using the project model to find and remove projects associated with the client ID.', 'Creating a mutation to update the project and adding a submit button to the form The speaker demonstrates creating a mutation to update project information and adds a submit button to the form for triggering the update process.', 'Testing the functionality by creating and deleting a test client and project The speaker tests the implemented functionality by creating a new client and project, then successfully deleting the test client and observing the cascading deletion of the associated project.']}], 'duration': 1759.347, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BcLNfwF04Kw/pics/BcLNfwF04Kw9918286.jpg', 'highlights': ['Implementing cascading deletion of associated projects when a client is deleted', 'Testing the functionality by creating and deleting a test client and project', 'Adding delete functionality and redirecting to home page', 'Updating the cache to display the new project without page reload', 'Creating a mutation to update the project and adding a submit button to the form', 'Setting up a delete button in a separate component to call a mutation for deleting a project', 'Adding a new select box for client selection underneath the status field in the form', "Setting the client ID on change of the select box using a function to update the state with the selected client's ID", 'Defining the mutation to delete a project by passing the project ID and returning the ID after deletion', 'Embedding an edit form for updating project details']}], 'highlights': ['Building a full stack project using GraphQL, Express, MongoDB, React, and Apollo to create a project management system with full CRUD functionality, expected to take about three hours', 'The chapter discusses career guidance, emphasizing the application process for the next semester', 'GraphQL is an open source data query and manipulation language for APIs, serving as an alternative to REST API with the ability to request exact data, making it more targeted than a REST API', 'The flexibility of using data from different sources like JavaScript files, MongoDB, and PostgreSQL databases is emphasized, providing a wide range of options for data storage', 'Covers setting up Git and initializing a repository, including adding a .gitignore file to exclude node modules and .env files', 'Utilizing the GraphQL enum type to specify a certain range of values for the status of the project, including new, in progress, and completed, and setting the default value to not started', 'The process involves importing a logo from the assets folder and modifying the HTML structure to include a nav tag and a container class for the link', 'Details the process of creating a client table component, importing client data, and implementing a spinner component for loading', 'The process of implementing cache for projects to prevent warning messages', 'Future plan to add functionality for deleting a client and their projects', 'Utilizing react router Dom version 6.3', 'Creating a separate page for viewing and editing project descriptions', 'Implementing cascading deletion of associated projects when a client is deleted', 'Testing the functionality by creating and deleting a test client and project']}