title
Next.js React Framework Course – Build and Deploy a Full Stack App From scratch

description
In this Next.js course for beginners, you will learn how to build a full-stack App from scratch. We'll also learn how to deploy the App using Vercel and to sync up GitHub with Vercel so we deploy the app automatically. Next is the React Framework for production. It makes building Apps, small or large, a lot easier. It has many features out of the box that you can use that will save loads of time. 📝 Database: https://github.com/timeToCode-ali/nextjs-tutorial/blob/main/data/data.json 💻 Source Code: https://github.com/timeToCode-ali/nextjs-tutorial Course from Alicia Rodriguez . Check out her channel: @timetocode_with_ali ⭐️ Contents ⭐️ ⌨️ (0:00:00) Intro: Showcase App ⌨️ (0:02:07) Summary of the content of the video ⌨️ (0:02:40) Prerequisites for this video. ⌨️ (0:03:18) What is Next.js ⌨️ (0:04:38) Main Feature: Server-Side Rendering ⌨️ (0:09:03) Create a new Next.js Project ⌨️ (0:17:56) Analyse the Final App we are going to build ⌨️ (0:20:30) Next.js Files Structure ⌨️ (0:23:53) Next.js Pages & Build the pages ⌨️ (0:41:50) Data Fetching ⌨️ (2:02:15) Build the Components - UI (user Interface) ⌨️ (2:24:03) Add CSS - Styles ⌨️ (3:21:27) API Routing in Next.js ⌨️ (4:29:00) Deploy the APP in Vercel ⌨️ (4:43:06) Suggestions to improve the App Attributions/credits Server icons created by srip - Flaticon - https://www.flaticon.com/free-icons/server Js icons created by Freepik - Flaticon - https://www.flaticon.com/free-icons/js Html icons created by catkuro - Flaticon - https://www.flaticon.com/free-icons/html Load icons created by Freepik - Flaticon - https://www.flaticon.com/free-icons/load Sound effects: https://mixkit.co/free-sound-effects/ Sound music: https://mixkit.co/free-stock-music/ambient/ 🎉 Thanks to our Champion and Sponsor supporters: 👾 Nattira Maneerat 👾 Heather Wcislo 👾 Serhiy Kalinets 👾 Erdeniz Unvan 👾 Justin Hual 👾 Agustín Kussrow 👾 Otis Morgan -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://freecodecamp.org/news

detail
{'title': 'Next.js React Framework Course – Build and Deploy a Full Stack App From scratch', 'heatmap': [{'end': 2074.531, 'start': 683.992, 'weight': 0.805}, {'end': 2764.061, 'start': 2416.549, 'weight': 0.859}, {'end': 3625.824, 'start': 3449.347, 'weight': 0.922}, {'end': 4161.372, 'start': 3795.882, 'weight': 0.771}, {'end': 5006.672, 'start': 4832.935, 'weight': 0.784}, {'end': 8629.036, 'start': 8456.614, 'weight': 0.951}], 'summary': 'The course covers building a full-stack react application with next.js and nestjs, including server-side rendering, pre-rendering, dynamic routing, api creation, deploying, and optimizing code efficiency and user experience, along with web design, css styling, ui component organization, form development, data processing, code debugging, email optimization, deployment, and managing node.js apps.', 'chapters': [{'end': 1020.597, 'segs': [{'end': 55.752, 'src': 'embed', 'start': 20.985, 'weight': 0, 'content': [{'end': 25.249, 'text': "In today's video, we are going to build a Next.js application from scratch.", 'start': 20.985, 'duration': 4.264}, {'end': 41.424, 'text': 'a full-stack React app that has the whole frontend and backend combined into one project.', 'start': 35.342, 'duration': 6.082}, {'end': 43.763, 'text': 'Next.js is in high demand.', 'start': 42.122, 'duration': 1.641}, {'end': 46.686, 'text': "It's a trendy JavaScript React framework.", 'start': 44.184, 'duration': 2.502}, {'end': 55.752, 'text': 'It makes building apps small and large a lot easier because it has a lot of features out of the box that you can use that will save lots of time.', 'start': 47.046, 'duration': 8.706}], 'summary': 'Building a next.js app, in high demand, saves time', 'duration': 34.767, 'max_score': 20.985, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw20985.jpg'}, {'end': 154.194, 'src': 'embed', 'start': 128.139, 'weight': 2, 'content': [{'end': 132.682, 'text': "We'll build all the UI components and we'll make them pretty by using CSS.", 'start': 128.139, 'duration': 4.543}, {'end': 137.124, 'text': 'And we will create an API, again, within our project.', 'start': 133.282, 'duration': 3.842}, {'end': 144.569, 'text': 'I know it sounds crazy, but we can do this with API Roots because it lets us create an API endpoint as a node.', 'start': 137.625, 'duration': 6.944}, {'end': 148.212, 'text': 'By the end of the video, we will have a full stack React app.', 'start': 145.01, 'duration': 3.202}, {'end': 154.194, 'text': 'Just by using NestJS, all the front and back will live within the same repository.', 'start': 148.812, 'duration': 5.382}], 'summary': 'Build ui components, create api using nestjs, achieve full stack react app within one repository.', 'duration': 26.055, 'max_score': 128.139, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw128139.jpg'}, {'end': 296.018, 'src': 'embed', 'start': 269.6, 'weight': 1, 'content': [{'end': 277.645, 'text': 'but it is still a React framework, so we still build React components, and the underlying React principles remain the same.', 'start': 269.6, 'duration': 8.045}, {'end': 283.129, 'text': 'One of the most important benefits of using NestJS is the built-in server-side rendering.', 'start': 278.326, 'duration': 4.803}, {'end': 288.192, 'text': 'If you have experience working with React, you probably know that React renders the page in the client.', 'start': 283.709, 'duration': 4.483}, {'end': 296.018, 'text': 'With React 18, they have introduced a bunch of new functionality to allow us to render pages on the server-side,', 'start': 288.613, 'duration': 7.405}], 'summary': 'Nestjs offers built-in server-side rendering, enhancing react functionality.', 'duration': 26.418, 'max_score': 269.6, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw269600.jpg'}, {'end': 672.445, 'src': 'embed', 'start': 647.779, 'weight': 3, 'content': [{'end': 655.124, 'text': "And so also, you can do MDM help, and it's going to tell you all the commands that you can run and so on.", 'start': 647.779, 'duration': 7.345}, {'end': 662.428, 'text': "So if you don't have Node installed, you need this one, because the built-in server-side rendering uses Node.js under the hood.", 'start': 655.164, 'duration': 7.264}, {'end': 664.029, 'text': 'so we need Node installed.', 'start': 662.428, 'duration': 1.601}, {'end': 672.445, 'text': "Okay, so I hope you're all good and you have MPM and Node installed in your little computer.", 'start': 665.02, 'duration': 7.425}], 'summary': 'Node.js and mpm installation required for server-side rendering and mdm help commands.', 'duration': 24.666, 'max_score': 647.779, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw647779.jpg'}, {'end': 861.691, 'src': 'embed', 'start': 831.585, 'weight': 4, 'content': [{'end': 837.629, 'text': "There is a command that is really handy, that if you don't have it installed, I recommend you to install it,", 'start': 831.585, 'duration': 6.044}, {'end': 842.552, 'text': 'because it allows you to open your project directly from your terminal.', 'start': 837.629, 'duration': 4.923}, {'end': 845.454, 'text': 'So you need to install it.', 'start': 842.712, 'duration': 2.742}, {'end': 850.817, 'text': 'You need to be in VS Code and you need to do Command Shift P.', 'start': 845.674, 'duration': 5.143}, {'end': 857.605, 'text': 'and it will open the command palette and type here a shell command.', 'start': 852.097, 'duration': 5.508}, {'end': 858.366, 'text': 'Here it is.', 'start': 857.805, 'duration': 0.561}, {'end': 860.269, 'text': 'Install code command in path.', 'start': 858.566, 'duration': 1.703}, {'end': 861.691, 'text': 'Press enter.', 'start': 860.97, 'duration': 0.721}], 'summary': "Install 'code' command in path to open project from terminal in vs code.", 'duration': 30.106, 'max_score': 831.585, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw831585.jpg'}], 'start': 0.069, 'title': 'Building next.js and nestjs applications', 'summary': 'Covers building a full-stack react application using next.js, with built-in server-side rendering and page pre-rendering, and the process of building a full stack react app using nestjs, including creating apis, deploying the website, and the benefits of server-side rendering for seo, along with setting up a nestjs project, including checking and installing node and npm, creating a new project directory, and utilizing vs code.', 'chapters': [{'end': 80.05, 'start': 0.069, 'title': 'Building next.js application', 'summary': 'Covers building a full-stack react application using next.js, a trendy javascript react framework, with built-in server-side rendering and page pre-rendering, ideal for a great user experience and good seo.', 'duration': 79.981, 'highlights': ['Next.js is a trendy JavaScript React framework, in high demand, making building small and large apps a lot easier with lots of out-of-the-box features.', 'Next.js allows building React apps with built-in server-side rendering and page pre-rendering, ideal for a great user experience and good SEO.', 'Alicia Rodriguez, a senior software developer in London, teaches a complete course on using Next.js to build an application from scratch.']}, {'end': 573.512, 'start': 80.71, 'title': 'Nestjs for react: full stack project tutorial', 'summary': 'Covers the process of building a full stack react app using nestjs, including building ui components, creating apis, deploying the website, and the benefits of server-side rendering for seo, with a focus on the prerequisites, features, and differences between server-side and client-side rendering.', 'duration': 492.802, 'highlights': ['NestJS offers advantages like rendering pages on the server to improve SEO and cache, making it ready for production and fully extendable. NestJS provides advantages such as rendering pages on the server to improve SEO and caching, making it suitable for production and fully extendable.', 'The tutorial covers building a full stack React app using NestJS, including creating UI components and APIs within the project. The tutorial encompasses building a full stack React app using NestJS, involving the creation of UI components and APIs within the project.', 'Distinguishing between server-side rendering (SSR) and client-side rendering (CSR), the chapter explains the benefits of SSR in terms of performance, SEO, and data caching. The chapter distinguishes between server-side rendering (SSR) and client-side rendering (CSR), explaining the benefits of SSR in terms of performance, SEO, and data caching.']}, {'end': 1020.597, 'start': 573.932, 'title': 'Setting up nestjs project', 'summary': 'Outlines the steps to set up a nestjs project, including checking and installing node and npm, creating a new project directory, utilizing vs code, and running the app using npm run command, with a focus on using node version 12 or later and hot reload functionality.', 'duration': 446.665, 'highlights': ["The built-in server-side rendering uses Node.js under the hood, requiring Node version 12 or later to be installed, which can be checked using the 'node -v' command.", "Creating a new project directory using 'mkdir' command and initializing a NestJS project with 'npx create nest app' and specifying the project name, such as 'events app'.", "Utilizing VS Code as the preferred IDE, installing 'code command in path' to open projects directly from the terminal, and running the app using 'npm run dev' command for hot reload functionality.", "Troubleshooting the issue of using an older Node version by upgrading it using the 'nvm' command, emphasizing the importance of having Node version 12 or later for the project setup."]}], 'duration': 1020.528, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw69.jpg', 'highlights': ['Next.js is a trendy JavaScript React framework, making building small and large apps easier.', 'NestJS offers advantages like rendering pages on the server to improve SEO and cache.', 'The tutorial covers building a full stack React app using NestJS, including creating UI components and APIs.', 'The built-in server-side rendering uses Node.js under the hood, requiring Node version 12 or later to be installed.', "Utilizing VS Code as the preferred IDE, installing 'code command in path' to open projects directly from the terminal."]}, {'end': 1712.812, 'segs': [{'end': 1218.393, 'src': 'embed', 'start': 1187.71, 'weight': 1, 'content': [{'end': 1191.211, 'text': 'So what if I tell you that we only need to generate five pages?', 'start': 1187.71, 'duration': 3.501}, {'end': 1201.114, 'text': 'We only need to generate home events, one per city and one per events, a single event and the about us.', 'start': 1191.591, 'duration': 9.523}, {'end': 1205.436, 'text': "Because next we'll generate the rest of the pages for us.", 'start': 1202.055, 'duration': 3.381}, {'end': 1213.851, 'text': 'So we will have three static pages, Home, Events, and About Us, and two template pages.', 'start': 1206.587, 'duration': 7.264}, {'end': 1218.393, 'text': 'So this would be one template, and this would be the second one.', 'start': 1214.511, 'duration': 3.882}], 'summary': 'Generate 5 pages: 3 static (home, events, about us) and 2 template pages.', 'duration': 30.683, 'max_score': 1187.71, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw1187710.jpg'}, {'end': 1338.714, 'src': 'embed', 'start': 1309.568, 'weight': 3, 'content': [{'end': 1314.895, 'text': 'And anything we store here, is going to be accessible by anyone.', 'start': 1309.568, 'duration': 5.327}, {'end': 1315.815, 'text': 'So keep that in mind.', 'start': 1314.995, 'duration': 0.82}, {'end': 1317.617, 'text': 'This is the public folder.', 'start': 1315.896, 'duration': 1.721}, {'end': 1321.38, 'text': 'Okay, so then we have pages.', 'start': 1319.038, 'duration': 2.342}, {'end': 1328.166, 'text': 'This is a really important folder because we are going to set up here the file-based routing.', 'start': 1322.441, 'duration': 5.725}, {'end': 1331.608, 'text': "So we'll have here all the pages that our app has.", 'start': 1328.646, 'duration': 2.962}, {'end': 1334.591, 'text': 'So home, all events, and about us.', 'start': 1331.748, 'duration': 2.843}, {'end': 1338.714, 'text': 'And this folder here is our API.', 'start': 1335.371, 'duration': 3.343}], 'summary': 'Setting up file-based routing with public and api folders.', 'duration': 29.146, 'max_score': 1309.568, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw1309568.jpg'}, {'end': 1400.058, 'src': 'embed', 'start': 1363.796, 'weight': 5, 'content': [{'end': 1372.3, 'text': 'in public, we store all the static content pages is where we store all our source code and style is for our css.', 'start': 1363.796, 'duration': 8.504}, {'end': 1375.101, 'text': 'We can add more folders if we want.', 'start': 1373.18, 'duration': 1.921}, {'end': 1379.904, 'text': 'So we could, for example, have here a data folder.', 'start': 1375.281, 'duration': 4.623}, {'end': 1385.728, 'text': 'Then we could have a lives folder.', 'start': 1382.266, 'duration': 3.462}, {'end': 1387.93, 'text': "Oh, I'm creating files.", 'start': 1386.429, 'duration': 1.501}, {'end': 1389.551, 'text': 'Sorry Let me just do it again.', 'start': 1387.97, 'duration': 1.581}, {'end': 1392.813, 'text': "Let's do it here.", 'start': 1389.571, 'duration': 3.242}, {'end': 1394.874, 'text': 'I need to be outside.', 'start': 1392.833, 'duration': 2.041}, {'end': 1396.656, 'text': 'So here, data.', 'start': 1395.255, 'duration': 1.401}, {'end': 1400.058, 'text': 'Okay, You see how the icon has changed?', 'start': 1397.276, 'duration': 2.782}], 'summary': 'Instructions on organizing content: static content in one folder, option to add more folders like data and lives.', 'duration': 36.262, 'max_score': 1363.796, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw1363796.jpg'}, {'end': 1689.185, 'src': 'embed', 'start': 1659.507, 'weight': 0, 'content': [{'end': 1670.914, 'text': 'this is the routing file system of nestds and what Next.js does is watches the URL and when this changes, when we navigate to another page,', 'start': 1659.507, 'duration': 11.407}, {'end': 1678.9, 'text': 'it prevents the browser from sending an extra request to the server and instead it displays the new page we specify.', 'start': 1670.914, 'duration': 7.986}, {'end': 1681.242, 'text': 'So, event one.', 'start': 1679.521, 'duration': 1.721}, {'end': 1686.344, 'text': 'And this is the advantage of having a single-page application.', 'start': 1682.883, 'duration': 3.461}, {'end': 1689.185, 'text': 'Nothing new from a React point of view.', 'start': 1687.064, 'duration': 2.121}], 'summary': 'Next.js optimizes page navigation, reducing server requests for single-page applications.', 'duration': 29.678, 'max_score': 1659.507, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw1659507.jpg'}], 'start': 1038.45, 'title': 'Nestjs app development and routing system', 'summary': 'Covers the process of developing a nestjs app with reduced page generation from 18 to 5, featuring file-based routing, backend connections, dynamic routing, and the automatic route creation system based on file structure.', 'chapters': [{'end': 1436.669, 'start': 1038.45, 'title': 'Nestjs app development overview', 'summary': 'Highlights the process of developing a nestjs app, including setting up the file-based routing, backend connections, and the power of dynamic routing within next. it also emphasizes the reduction of page generation from 18 to 5, with 3 static pages and 2 template pages.', 'duration': 398.219, 'highlights': ['The chapter emphasizes the reduction of page generation from 18 to 5, with 3 static pages and 2 template pages, showcasing the power of NestJS in efficient page creation.', "The section highlights the process of setting up the file-based routing within the 'pages' folder to organize and manage the app's pages effectively.", "The transcript discusses the importance of the 'public' folder for holding static content like images, videos, fonts, and icons, ensuring accessibility from the root domain."]}, {'end': 1712.812, 'start': 1437.45, 'title': 'Nestjs routing system', 'summary': 'Introduces the nestjs routing system, which automatically creates routes based on file structure, demonstrating the ease of creating pages and directories compared to react and the advantage of single-page applications.', 'duration': 275.362, 'highlights': ['NestJS routing system automatically creates routes based on file structure NestJS simplifies route creation by automatically generating routes based on file paths and names, making it easy to define routes for pages and nested folders.', 'Advantage of single-page applications in NestJS NestJS enables single-page application behavior, preventing extra requests to the server when navigating to a new page and displaying the specified page without additional requests.', 'Ease of creating pages and directories compared to React NestJS simplifies the creation of pages and directories without the need for external router libraries, contrasting with the additional requirements in React for managing pages and routes.']}], 'duration': 674.362, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw1038450.jpg', 'highlights': ['NestJS routing system automatically creates routes based on file structure', 'The chapter emphasizes the reduction of page generation from 18 to 5, with 3 static pages and 2 template pages', 'NestJS simplifies route creation by automatically generating routes based on file paths and names', "The section highlights the process of setting up the file-based routing within the 'pages' folder", 'NestJS enables single-page application behavior, preventing extra requests to the server when navigating to a new page', "The transcript discusses the importance of the 'public' folder for holding static content like images, videos, fonts, and icons"]}, {'end': 3292.115, 'segs': [{'end': 1778.49, 'src': 'embed', 'start': 1744.399, 'weight': 1, 'content': [{'end': 1750.643, 'text': "Events I'm just gonna leave this footer here.", 'start': 1744.399, 'duration': 6.244}, {'end': 1753.225, 'text': 'Okay, we have our homepage now.', 'start': 1750.663, 'duration': 2.562}, {'end': 1757.167, 'text': "I'm gonna start by adding the sections that we have.", 'start': 1753.805, 'duration': 3.362}, {'end': 1761.73, 'text': 'So first we have, we need a header.', 'start': 1757.267, 'duration': 4.463}, {'end': 1763.471, 'text': "So I'm just gonna do this.", 'start': 1762.131, 'duration': 1.34}, {'end': 1771.608, 'text': 'header and in the header we have a navigation and then we also have a logo.', 'start': 1764.465, 'duration': 7.143}, {'end': 1776.149, 'text': "we'll add all of that later and we have an anchor href.", 'start': 1771.608, 'duration': 4.541}, {'end': 1778.49, 'text': "it's gonna leave it empty.", 'start': 1776.149, 'duration': 2.341}], 'summary': 'Creating a homepage with header, navigation, logo, and anchor tags.', 'duration': 34.091, 'max_score': 1744.399, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw1744399.jpg'}, {'end': 2268.621, 'src': 'embed', 'start': 2213.792, 'weight': 2, 'content': [{'end': 2220.115, 'text': 'So this is how Next.js identifies the dynamic files, when we add the square brackets around them.', 'start': 2213.792, 'duration': 6.323}, {'end': 2224.717, 'text': 'And this page will be loaded for different paths and different page names.', 'start': 2220.735, 'duration': 3.982}, {'end': 2232.181, 'text': 'So we come here, okay? If I change this and I just write one, two, three, four, we also get it.', 'start': 2225.258, 'duration': 6.923}, {'end': 2235.943, 'text': 'If I write one, five, we also get it.', 'start': 2232.581, 'duration': 3.362}, {'end': 2246.744, 'text': 'And So this means that at the moment, any path that we specify here after the events forward slash will be picked up.', 'start': 2237.044, 'duration': 9.7}, {'end': 2251.829, 'text': 'And we can still have a static page next to dynamic one.', 'start': 2247.765, 'duration': 4.064}, {'end': 2254.132, 'text': 'So for example, here we have event one.', 'start': 2251.889, 'duration': 2.243}, {'end': 2260.338, 'text': 'So if we come here, we have still our event one page, our static page.', 'start': 2254.192, 'duration': 6.146}, {'end': 2268.621, 'text': 'Okay, so now we can have our single events rendered dynamically.', 'start': 2262.777, 'duration': 5.844}], 'summary': 'Next.js uses square brackets to identify dynamic files, allowing for dynamic rendering of pages for different paths and page names.', 'duration': 54.829, 'max_score': 2213.792, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw2213792.jpg'}, {'end': 2330.425, 'src': 'embed', 'start': 2298.347, 'weight': 4, 'content': [{'end': 2302.249, 'text': 'So we can also have NEST dynamic route.', 'start': 2298.347, 'duration': 3.902}, {'end': 2303.99, 'text': 'What do I mean by this?', 'start': 2302.829, 'duration': 1.161}, {'end': 2310.141, 'text': 'Okay, so we want to have something like here.', 'start': 2304.918, 'duration': 5.223}, {'end': 2314.262, 'text': "if i come here, we want to have events, i'm just gonna do it here.", 'start': 2310.141, 'duration': 4.121}, {'end': 2315.502, 'text': 'better, be better.', 'start': 2314.262, 'duration': 1.24}, {'end': 2316.842, 'text': 'just let me type here.', 'start': 2315.502, 'duration': 1.34}, {'end': 2324.944, 'text': 'so we want to have this part events slash um event per city.', 'start': 2316.842, 'duration': 8.102}, {'end': 2329.065, 'text': "i'm just gonna type it like this and then the event.", 'start': 2324.944, 'duration': 4.121}, {'end': 2330.425, 'text': 'uh, the event itself.', 'start': 2329.065, 'duration': 1.36}], 'summary': 'Implementing nest dynamic routes for events per city', 'duration': 32.078, 'max_score': 2298.347, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw2298347.jpg'}, {'end': 2764.061, 'src': 'heatmap', 'start': 2416.549, 'weight': 0.859, 'content': [{'end': 2418.91, 'text': 'So index.js.', 'start': 2416.549, 'duration': 2.361}, {'end': 2427.213, 'text': "And then I'm just gonna be lazy and well, yeah, I'm just gonna copy this and then I choose the data.", 'start': 2420.531, 'duration': 6.682}, {'end': 2431.195, 'text': 'Okay Okay.', 'start': 2427.493, 'duration': 3.702}, {'end': 2435.176, 'text': "Events in London, I'm just gonna leave it like this.", 'start': 2431.995, 'duration': 3.181}, {'end': 2452.593, 'text': 'Okay And I guess we have event one, Event two, event three, event four, event five.', 'start': 2436.697, 'duration': 15.896}, {'end': 2456.376, 'text': "I'm just going to print six, okay? So let's see how this works.", 'start': 2452.613, 'duration': 3.763}, {'end': 2460.178, 'text': 'If we go to our browser, we type events.', 'start': 2456.776, 'duration': 3.402}, {'end': 2468.744, 'text': 'We can type here whatever we want, as we said, because this is going to pick up anything that match this path.', 'start': 2460.879, 'duration': 7.865}, {'end': 2472.066, 'text': 'So F London, for example.', 'start': 2468.944, 'duration': 3.122}, {'end': 2479.933, 'text': 'Okay, so I need to remove this from here.', 'start': 2474.304, 'duration': 5.629}, {'end': 2482.317, 'text': 'Just save it again.', 'start': 2481.616, 'duration': 0.701}, {'end': 2485.693, 'text': 'And we can see our single event.', 'start': 2483.832, 'duration': 1.861}, {'end': 2488.974, 'text': 'And now we go to the events in London like this.', 'start': 2485.953, 'duration': 3.021}, {'end': 2491.114, 'text': 'We can see events in London.', 'start': 2489.834, 'duration': 1.28}, {'end': 2495.996, 'text': 'If I decide to type here whatever I want, I can still see events in London.', 'start': 2491.314, 'duration': 4.682}, {'end': 2498.176, 'text': 'Great This is working.', 'start': 2496.796, 'duration': 1.38}, {'end': 2501.397, 'text': 'Now we need to connect these links with our pages.', 'start': 2498.296, 'duration': 3.101}, {'end': 2506.279, 'text': 'So when we click in San Francisco here, for example, it takes us to the right page.', 'start': 2501.737, 'duration': 4.542}, {'end': 2510.22, 'text': 'and it shows us the right content.', 'start': 2507.359, 'duration': 2.861}, {'end': 2516.782, 'text': 'At the moment, we just see the same content for all the paths that go after events.', 'start': 2510.28, 'duration': 6.502}, {'end': 2524.424, 'text': "Okay, but first we need the data, so go to the description box and download the JSON file I've attached.", 'start': 2519.242, 'duration': 5.182}, {'end': 2530.205, 'text': "I have it here ready, so I'm going to drag it into this data folder.", 'start': 2525.344, 'duration': 4.861}, {'end': 2538.929, 'text': 'just drag it and let me show you what i have here.', 'start': 2534.466, 'duration': 4.463}, {'end': 2550.637, 'text': 'okay, so we have um two objects events categories, and this is an an array of.', 'start': 2538.929, 'duration': 11.708}, {'end': 2556.124, 'text': 'This is an array with all the events category that we have.', 'start': 2552.182, 'duration': 3.942}, {'end': 2559.546, 'text': 'In this case, our category is the cities.', 'start': 2556.564, 'duration': 2.982}, {'end': 2568.651, 'text': 'So events for London, with the title, an ID, a description and an image that we are going to use for our pages,', 'start': 2559.646, 'duration': 9.005}, {'end': 2572.433, 'text': 'for our homepage page and for our events page.', 'start': 2568.651, 'duration': 3.782}, {'end': 2576.756, 'text': 'And the same with San Francisco and Barcelona.', 'start': 2574.134, 'duration': 2.622}, {'end': 2590.312, 'text': 'All events, which is an array of objects. each holds the information of the event, the ID, the title, the city description, image and email register.', 'start': 2578.007, 'duration': 12.305}, {'end': 2592.513, 'text': "We'll look into this later on.", 'start': 2590.552, 'duration': 1.961}, {'end': 2599.196, 'text': 'Okay, so we have here quite a few events.', 'start': 2593.513, 'duration': 5.683}, {'end': 2606.619, 'text': 'And as we can see, we have identifier for each of them and the city where each of these events take place.', 'start': 2599.496, 'duration': 7.123}, {'end': 2611.891, 'text': 'Okay, now we need to get access to the specific data for each page.', 'start': 2607.449, 'duration': 4.442}, {'end': 2624.638, 'text': 'So extract the dynamic enter path value, this dynamic enter path, and print the data that belongs to each ID.', 'start': 2612.332, 'duration': 12.306}, {'end': 2626.999, 'text': 'So print all of this data.', 'start': 2624.778, 'duration': 2.221}, {'end': 2635.764, 'text': "This data could be coming from an external source, but in our case, we'll have it within our project in this data folder.", 'start': 2627.56, 'duration': 8.204}, {'end': 2642.428, 'text': "Next, allow us to render our content in different ways depending on our application's use case.", 'start': 2636.224, 'duration': 6.204}, {'end': 2648.492, 'text': 'So we have prerendering with server-side rendering or static generation,', 'start': 2642.949, 'duration': 5.543}, {'end': 2654.856, 'text': 'and updating or creating content at runtime with incremental static regeneration.', 'start': 2648.492, 'duration': 6.364}, {'end': 2659.879, 'text': 'If we want to render some content dynamically, we need to have server-side functions.', 'start': 2655.457, 'duration': 4.422}, {'end': 2667.883, 'text': 'So we are going to explore today how to pre-render the pages using server-side rendering and static generation.', 'start': 2660.479, 'duration': 7.404}, {'end': 2672.106, 'text': "Okay, so let's start with the server-side rendering.", 'start': 2668.604, 'duration': 3.502}, {'end': 2675.187, 'text': "For this, let's go to the homepage.", 'start': 2672.786, 'duration': 2.401}, {'end': 2677.449, 'text': "So I'm going to go here.", 'start': 2675.908, 'duration': 1.541}, {'end': 2681.171, 'text': 'This is our homepage.', 'start': 2679.33, 'duration': 1.841}, {'end': 2685.334, 'text': 'And we need to add the function called getServerSideProps.', 'start': 2682.171, 'duration': 3.163}, {'end': 2692.58, 'text': 'So outside this export page, we need to add our function.', 'start': 2685.454, 'duration': 7.126}, {'end': 2699.927, 'text': 'So we say export function getServerSideProps.', 'start': 2692.64, 'duration': 7.287}, {'end': 2711.945, 'text': "Okay, and now we think here we get the context, but we don't need it for now, so look into that later.", 'start': 2701.817, 'duration': 10.128}, {'end': 2720.872, 'text': 'And this function returns an object that has props.', 'start': 2712.786, 'duration': 8.086}, {'end': 2730.981, 'text': "And here within this is where we'll pass any props that we want our paste to have.", 'start': 2724.275, 'duration': 6.706}, {'end': 2735.848, 'text': 'so we can pass any props from here.', 'start': 2732.446, 'duration': 3.402}, {'end': 2742.072, 'text': "we can pass any pros from here to our page, so let's test it out.", 'start': 2735.848, 'duration': 6.224}, {'end': 2746.095, 'text': "so i'm just gonna say a title.", 'start': 2742.072, 'duration': 4.023}, {'end': 2752.679, 'text': "i'm just gonna say hello everyone.", 'start': 2746.095, 'duration': 6.584}, {'end': 2764.061, 'text': 'yeah, and And now this is going to be available without our page props.', 'start': 2752.679, 'duration': 11.382}], 'summary': 'Developing a web application using server-side rendering and static generation for event data in london, san francisco, and barcelona.', 'duration': 347.512, 'max_score': 2416.549, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw2416549.jpg'}, {'end': 2606.619, 'src': 'embed', 'start': 2578.007, 'weight': 5, 'content': [{'end': 2590.312, 'text': 'All events, which is an array of objects. each holds the information of the event, the ID, the title, the city description, image and email register.', 'start': 2578.007, 'duration': 12.305}, {'end': 2592.513, 'text': "We'll look into this later on.", 'start': 2590.552, 'duration': 1.961}, {'end': 2599.196, 'text': 'Okay, so we have here quite a few events.', 'start': 2593.513, 'duration': 5.683}, {'end': 2606.619, 'text': 'And as we can see, we have identifier for each of them and the city where each of these events take place.', 'start': 2599.496, 'duration': 7.123}], 'summary': 'Transcript: array of event objects with ids, titles, city descriptions, and email registrations.', 'duration': 28.612, 'max_score': 2578.007, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw2578007.jpg'}, {'end': 2667.883, 'src': 'embed', 'start': 2636.224, 'weight': 6, 'content': [{'end': 2642.428, 'text': "Next, allow us to render our content in different ways depending on our application's use case.", 'start': 2636.224, 'duration': 6.204}, {'end': 2648.492, 'text': 'So we have prerendering with server-side rendering or static generation,', 'start': 2642.949, 'duration': 5.543}, {'end': 2654.856, 'text': 'and updating or creating content at runtime with incremental static regeneration.', 'start': 2648.492, 'duration': 6.364}, {'end': 2659.879, 'text': 'If we want to render some content dynamically, we need to have server-side functions.', 'start': 2655.457, 'duration': 4.422}, {'end': 2667.883, 'text': 'So we are going to explore today how to pre-render the pages using server-side rendering and static generation.', 'start': 2660.479, 'duration': 7.404}], 'summary': 'Exploring prerendering options with server-side rendering and static generation for dynamic content.', 'duration': 31.659, 'max_score': 2636.224, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw2636224.jpg'}, {'end': 2742.072, 'src': 'embed', 'start': 2692.64, 'weight': 7, 'content': [{'end': 2699.927, 'text': 'So we say export function getServerSideProps.', 'start': 2692.64, 'duration': 7.287}, {'end': 2711.945, 'text': "Okay, and now we think here we get the context, but we don't need it for now, so look into that later.", 'start': 2701.817, 'duration': 10.128}, {'end': 2720.872, 'text': 'And this function returns an object that has props.', 'start': 2712.786, 'duration': 8.086}, {'end': 2730.981, 'text': "And here within this is where we'll pass any props that we want our paste to have.", 'start': 2724.275, 'duration': 6.706}, {'end': 2735.848, 'text': 'so we can pass any props from here.', 'start': 2732.446, 'duration': 3.402}, {'end': 2742.072, 'text': "we can pass any pros from here to our page, so let's test it out.", 'start': 2735.848, 'duration': 6.224}], 'summary': 'Code defines getserversideprops function to pass props to page.', 'duration': 49.432, 'max_score': 2692.64, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw2692640.jpg'}, {'end': 3292.115, 'src': 'embed', 'start': 3270.741, 'weight': 0, 'content': [{'end': 3281.708, 'text': "it's really important you get familiar with the frameworks or the libraries documentation and get used to learning how to use it just by reading the documentation.", 'start': 3270.741, 'duration': 10.967}, {'end': 3292.115, 'text': "so that's why i'm coming back to the nestes documentation, because it's really complete and it is important that you don't get afraid about.", 'start': 3281.708, 'duration': 10.407}], 'summary': 'Familiarize with documentation to learn frameworks and libraries effectively.', 'duration': 21.374, 'max_score': 3270.741, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw3270741.jpg'}], 'start': 1713.112, 'title': 'Web development with nest, next.js, and pre-rendering', 'summary': 'Covers nest web development highlights including setting up a homepage, progress in website development, next.js dynamic routes, and pre-rendering with server-side rendering and static generation. it includes adding sections, creating dynamic pages, and utilizing server-side functions for content rendering.', 'chapters': [{'end': 1842.261, 'start': 1713.112, 'title': 'Nest web development highlights', 'summary': 'Covers the process of setting up a homepage using nest, including removing unnecessary elements, adding sections such as header, navigation, logo, and anchor links, and saving the changes to have a functional homepage.', 'duration': 129.149, 'highlights': ['Setting up a homepage with Nest The process involves removing unnecessary elements and adding sections such as header, navigation, logo, and anchor links to create a functional homepage.', 'Fast and easy setup with Nest Nest provides a quick and easy way to start working with it, facilitating the development process.']}, {'end': 2212.092, 'start': 1843.65, 'title': 'Website development progress', 'summary': "Discusses the progress of creating the website's homepage, about us page, and events page, including adding divs, titles, and dynamic pages for single events.", 'duration': 368.442, 'highlights': ['The homepage is being developed with three event cards containing titles, descriptions, and links for events in London, San Francisco, and Barcelona. The developer is creating a homepage with three event cards, each containing titles, descriptions, and links for events in various cities, such as London, San Francisco, and Barcelona.', 'The About Us page has been completed with a title and placeholder text, while the Events page is being structured similarly to the homepage. The About Us page has been completed with a title and placeholder text, while the Events page is being structured similarly to the homepage.', 'A dynamic page template is being created to render content and create paths for each event, ensuring that the path is dynamic and matches the title of the event. The developer is creating a dynamic page template to render content and create dynamic paths for each event, ensuring that the path matches the title of the event.']}, {'end': 2606.619, 'start': 2213.792, 'title': 'Next.js dynamic routes', 'summary': 'Explains how next.js identifies dynamic files using square brackets, renders single events and events per city dynamically, and utilizes data from json files to create dynamic pages for different categories and cities.', 'duration': 392.827, 'highlights': ['Next.js identifies dynamic files using square brackets, allowing the page to load for different paths and page names.', 'Single events can be rendered dynamically by specifying the path, and event pages can coexist with static pages.', 'Dynamic routes for events per city can be created using nested dynamic routes, reducing the need for duplicating work as new cities or categories are added.', 'Folders and files can be organized to render dynamically by adding square brackets, enabling the creation of dynamic pages for different categories and cities.', 'The data from the attached JSON file contains information about events categories (cities) and all events, including their IDs, titles, descriptions, images, and city identifiers.']}, {'end': 3292.115, 'start': 2607.449, 'title': 'Pre-rendering with server-side rendering and static generation', 'summary': 'Focuses on pre-rendering pages using server-side rendering and static generation, highlighting the use of getserversideprops function for passing props to pages and emphasizing the importance of server-side functions for rendering content dynamically.', 'duration': 684.666, 'highlights': ['The chapter focuses on pre-rendering pages using server-side rendering and static generation The transcript emphasizes the process of pre-rendering pages using server-side rendering and static generation to optimize the performance and user experience.', 'the use of getServerSideProps function for passing props to pages getServerSideProps function is highlighted as a method for passing props to pages, allowing for dynamic content rendering and optimization of page performance.', 'the importance of server-side functions for rendering content dynamically The importance of server-side functions for rendering content dynamically is emphasized, ensuring that the client does not have direct access to private information and highlighting the security benefits of server-side rendering.']}], 'duration': 1579.003, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw1713112.jpg', 'highlights': ['Nest provides a quick and easy way to start working with it, facilitating the development process.', 'Setting up a homepage with Nest involves adding sections such as header, navigation, logo, and anchor links to create a functional homepage.', 'A dynamic page template is being created to render content and create dynamic paths for each event, ensuring that the path matches the title of the event.', 'Next.js identifies dynamic files using square brackets, allowing the page to load for different paths and page names.', 'Dynamic routes for events per city can be created using nested dynamic routes, reducing the need for duplicating work as new cities or categories are added.', 'The data from the attached JSON file contains information about events categories (cities) and all events, including their IDs, titles, descriptions, images, and city identifiers.', 'The chapter focuses on pre-rendering pages using server-side rendering and static generation to optimize the performance and user experience.', 'The use of getServerSideProps function is highlighted as a method for passing props to pages, allowing for dynamic content rendering and optimization of page performance.', 'The importance of server-side functions for rendering content dynamically is emphasized, ensuring that the client does not have direct access to private information and highlighting the security benefits of server-side rendering.']}, {'end': 4270.666, 'segs': [{'end': 3348.744, 'src': 'embed', 'start': 3322.287, 'weight': 0, 'content': [{'end': 3331.133, 'text': "And, by the way, if there is anything in this tutorial that is not really clear or I haven't covered in detail, please come here and search for it,", 'start': 3322.287, 'duration': 8.846}, {'end': 3337.318, 'text': "because I'm sure you're going to solve your doubts just by reading the documentation.", 'start': 3331.133, 'duration': 6.185}, {'end': 3341.24, 'text': 'Okay, so getServerSideProps.', 'start': 3338.138, 'duration': 3.102}, {'end': 3348.744, 'text': 'As you can see, you have here the cut snippet where it shows you how to write this function.', 'start': 3342.921, 'duration': 5.823}], 'summary': 'Tutorial emphasizes using documentation to clarify unclear points and solve doubts, as in the case of getserversideprops function.', 'duration': 26.457, 'max_score': 3322.287, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw3322287.jpg'}, {'end': 3427.315, 'src': 'embed', 'start': 3402.547, 'weight': 1, 'content': [{'end': 3408.05, 'text': "In our case, we don't need this, but nevertheless, I want to show you how it works.", 'start': 3402.547, 'duration': 5.503}, {'end': 3411.953, 'text': "And so that's why we are going to use it in the homepage function.", 'start': 3408.43, 'duration': 3.523}, {'end': 3416.096, 'text': 'Yeah, just so I can show you how it works.', 'start': 3413.474, 'duration': 2.622}, {'end': 3425.093, 'text': 'Okay, so in the homepage, we need to get the data and we need to get this data here.', 'start': 3416.736, 'duration': 8.357}, {'end': 3427.315, 'text': 'We need to get the data for the events in London.', 'start': 3425.114, 'duration': 2.201}], 'summary': 'Demonstrating data retrieval for london events in homepage function.', 'duration': 24.768, 'max_score': 3402.547, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw3402547.jpg'}, {'end': 3625.824, 'src': 'heatmap', 'start': 3449.347, 'weight': 0.922, 'content': [{'end': 3456.612, 'text': 'OK, we need to make this function and synchronous because we need to fetch and we need to wait for the response.', 'start': 3449.347, 'duration': 7.265}, {'end': 3459.394, 'text': 'So export async function.', 'start': 3457.092, 'duration': 2.302}, {'end': 3465.124, 'text': 'And now we can do it as simple as doing import.', 'start': 3460.962, 'duration': 4.162}, {'end': 3471.288, 'text': 'We pass here the path to where we have our data, our JSON.', 'start': 3466.025, 'duration': 5.263}, {'end': 3478.412, 'text': "And now const data equal and that's it.", 'start': 3474.31, 'duration': 4.102}, {'end': 3481.113, 'text': 'Now we console log this.', 'start': 3479.332, 'duration': 1.781}, {'end': 3486.957, 'text': 'This is going to give us the data and array with two objects.', 'start': 3482.374, 'duration': 4.583}, {'end': 3493.157, 'text': 'This is returning a promise because this is an asynchronous function, so we need to await this.', 'start': 3488.055, 'duration': 5.102}, {'end': 3501.441, 'text': 'And now we can see here that we get events categories and all events, the same data that we have here.', 'start': 3494.318, 'duration': 7.123}, {'end': 3512.965, 'text': 'If you were fetching from an external API, it would be a little bit more, not complicated, but you will need a few more lines of code.', 'start': 3502.041, 'duration': 10.924}, {'end': 3520.746, 'text': 'So you probably will need something like fetch, where here you will pass the URL.', 'start': 3513.045, 'duration': 7.701}, {'end': 3533.236, 'text': "you'll probably would do something like this res, And then we will need to transform the response into something we can work with.", 'start': 3520.746, 'duration': 12.49}, {'end': 3539.781, 'text': 'And to do that, we need to await it and we need to do rest.json, use this JSON method.', 'start': 3533.757, 'duration': 6.024}, {'end': 3545.285, 'text': 'Okay, so here we will get the same data that we are getting just by doing this.', 'start': 3540.542, 'duration': 4.743}, {'end': 3551.59, 'text': 'But this is if you were fetching from an external API, you probably will have to do something like this at least.', 'start': 3545.325, 'duration': 6.265}, {'end': 3555.751, 'text': "and you'll get an array of two objects.", 'start': 3552.35, 'duration': 3.401}, {'end': 3557.672, 'text': "Let's go back to where we were.", 'start': 3556.192, 'duration': 1.48}, {'end': 3559.773, 'text': 'Okay, so we are getting these data.', 'start': 3558.072, 'duration': 1.701}, {'end': 3563.615, 'text': "And the one that I'm looking for is the events category.", 'start': 3559.873, 'duration': 3.742}, {'end': 3571.298, 'text': "This is the one we want, we need for the homepage because it's the one that has the information about each category, about each city.", 'start': 3563.655, 'duration': 7.643}, {'end': 3576.86, 'text': 'So we could just do this, I guess.', 'start': 3572.638, 'duration': 4.222}, {'end': 3597.517, 'text': 'Yeah, and so we are destructuring this data here and now we could remove this and set data equal events category.', 'start': 3582.728, 'duration': 14.789}, {'end': 3604.502, 'text': 'Okay, so now we are going to have this data available in our component.', 'start': 3598.818, 'duration': 5.684}, {'end': 3606.183, 'text': 'Okay, so in this component.', 'start': 3604.582, 'duration': 1.601}, {'end': 3610.606, 'text': 'So we can come here and just destructure the data.', 'start': 3606.503, 'duration': 4.103}, {'end': 3617.658, 'text': 'And then here is where I want to add my new data.', 'start': 3611.894, 'duration': 5.764}, {'end': 3619.72, 'text': "So I'm going to use the map method.", 'start': 3617.678, 'duration': 2.042}, {'end': 3623.482, 'text': 'So this is just normal JavaScript, actually.', 'start': 3620.3, 'duration': 3.182}, {'end': 3625.824, 'text': 'And we just say data.map.', 'start': 3624.203, 'duration': 1.621}], 'summary': 'The function fetches data, awaits response, and maps it for use in the component.', 'duration': 176.477, 'max_score': 3449.347, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw3449347.jpg'}, {'end': 4161.372, 'src': 'heatmap', 'start': 3795.882, 'weight': 0.771, 'content': [{'end': 3810.174, 'text': "um, it's gonna be like, i don't know, 50, or let's just start like size.", 'start': 3795.882, 'duration': 14.292}, {'end': 3816.292, 'text': "um, then let's just add this as 100.", 'start': 3810.174, 'duration': 6.118}, {'end': 3821.855, 'text': 'Now, if we go to our browser, we are running into another error.', 'start': 3816.292, 'duration': 5.563}, {'end': 3831.521, 'text': 'Okay, so the host name image and splash is not configured under images.', 'start': 3822.075, 'duration': 9.446}, {'end': 3836.884, 'text': 'Okay, so we need to add this host name to our next config.', 'start': 3831.721, 'duration': 5.163}, {'end': 3843.276, 'text': 'Okay, by the way, this unsplash is a website that I use.', 'start': 3838.191, 'duration': 5.085}, {'end': 3848.36, 'text': "It's a stock photography where you can download images for free.", 'start': 3843.456, 'duration': 4.904}, {'end': 3855.787, 'text': "And what it's saying is that we need to add this hostname in the image config.", 'start': 3849.181, 'duration': 6.606}, {'end': 3856.848, 'text': "So let's do that.", 'start': 3855.827, 'duration': 1.021}, {'end': 3862.794, 'text': 'Image config and.', 'start': 3856.868, 'duration': 5.926}, {'end': 3867.206, 'text': 'And there is a C more here.', 'start': 3865.484, 'duration': 1.722}, {'end': 3870.809, 'text': "Let me just copy this first because I'm going to need that.", 'start': 3867.686, 'duration': 3.123}, {'end': 3875.342, 'text': 'Um, Okay, this is great.', 'start': 3872.171, 'duration': 3.171}, {'end': 3882.745, 'text': "As I was telling you, it's really good to get used to looking into the documentation,", 'start': 3875.842, 'duration': 6.903}, {'end': 3889.428, 'text': 'because it just tells you how to do the things or how to solve the warning errors that sometimes you might get.', 'start': 3882.745, 'duration': 6.683}, {'end': 3895.451, 'text': "Okay, so it's showing us an example of how to add these domains.", 'start': 3889.729, 'duration': 5.722}, {'end': 3902.595, 'text': 'Okay, so we need to have images.', 'start': 3898.253, 'duration': 4.342}, {'end': 3911.76, 'text': "Chaps images, and now it's an object, right? Domains.", 'start': 3909.079, 'duration': 2.681}, {'end': 3915.821, 'text': 'And we have here ours.', 'start': 3913.14, 'duration': 2.681}, {'end': 3919.742, 'text': 'Okay, we go back.', 'start': 3917.942, 'duration': 1.8}, {'end': 3925.484, 'text': "And this shouldn't work just yet because we need to restart the server.", 'start': 3920.862, 'duration': 4.622}, {'end': 3931.105, 'text': 'So when you make changes in the next config, remember that you need to restart the server.', 'start': 3925.924, 'duration': 5.181}, {'end': 3935.186, 'text': "Let's see if now, yeah.", 'start': 3933.186, 'duration': 2}, {'end': 3936.927, 'text': 'So now this is working.', 'start': 3935.767, 'duration': 1.16}, {'end': 3941.818, 'text': 'we have our images now displaying.', 'start': 3938.376, 'duration': 3.442}, {'end': 3953.745, 'text': "They don't display great, but we're going to show that in the next chapter when we start proper building the UI for our pages.", 'start': 3942.358, 'duration': 11.387}, {'end': 3961.95, 'text': 'I think this is all down to this height that I specify here because I have to specify something.', 'start': 3954.226, 'duration': 7.724}, {'end': 3962.851, 'text': 'Let me just close this.', 'start': 3962.01, 'duration': 0.841}, {'end': 3971.543, 'text': 'yeah, okay, well, this is okay for the moment.', 'start': 3967.56, 'duration': 3.983}, {'end': 3973.885, 'text': 'let me just see why.', 'start': 3971.543, 'duration': 2.342}, {'end': 3980.43, 'text': 'why do we have this space so weird?', 'start': 3973.885, 'duration': 6.545}, {'end': 3984.153, 'text': "i'm not sure why they are not all aligned.", 'start': 3980.43, 'duration': 3.723}, {'end': 3985.655, 'text': "um, but it's okay.", 'start': 3984.153, 'duration': 1.502}, {'end': 3996.803, 'text': 'Now we have our data coming from our database, our internal database.', 'start': 3987.358, 'duration': 9.445}, {'end': 4002.746, 'text': 'As I said earlier, there is another way we can pro-generate our pages.', 'start': 3997.443, 'duration': 5.303}, {'end': 4008.328, 'text': 'pro-generate, meaning create, render these pages on the server, okay?', 'start': 4002.746, 'duration': 5.582}, {'end': 4011.769, 'text': 'And that other way is called static generation.', 'start': 4008.708, 'duration': 3.061}, {'end': 4020.652, 'text': 'And the way it works is that we pre-generate next, pre-generate all the pages in advance during build time.', 'start': 4012.249, 'duration': 8.403}, {'end': 4026.754, 'text': 'When we build our application, we pre-generate these pages before we deploy it.', 'start': 4021.132, 'duration': 5.622}, {'end': 4038.103, 'text': "Let's just go back to next and let's open it, get the static path, okay? and showing us how to use it here.", 'start': 4027.074, 'duration': 11.029}, {'end': 4046.862, 'text': 'So in the server-side, rendering the function that we just used here this one.', 'start': 4039.46, 'duration': 7.402}, {'end': 4051.763, 'text': 'we were building the pages only after we deployed them at the requested time.', 'start': 4046.862, 'duration': 4.901}, {'end': 4055.584, 'text': 'So we send the pages to the client pre-populated with content.', 'start': 4052.023, 'duration': 3.561}, {'end': 4058.125, 'text': 'In the get-server-side props.', 'start': 4056.104, 'duration': 2.021}, {'end': 4067.247, 'text': 'we do it after we deploy at the requested time, but when we use static generation, we prepare this before we deploy our app.', 'start': 4058.125, 'duration': 9.122}, {'end': 4073.997, 'text': 'and this is going to keep updating even after we deploy without needing to redeploy our app.', 'start': 4068.385, 'duration': 5.612}, {'end': 4076.857, 'text': 'Okay, I hope that makes sense.', 'start': 4075.256, 'duration': 1.601}, {'end': 4080.08, 'text': "So let's go to the events page.", 'start': 4077.338, 'duration': 2.742}, {'end': 4091.049, 'text': "Okay is this one, and we're going to get the content, the same content, basically because we also need the content for events in London,", 'start': 4081.141, 'duration': 9.908}, {'end': 4094.031, 'text': 'events in San Francisco, events in Barcelona.', 'start': 4091.049, 'duration': 2.982}, {'end': 4100.636, 'text': 'But in this case, we only need the image and the title.', 'start': 4095.052, 'duration': 5.584}, {'end': 4106.238, 'text': 'I mean, We need same as this, but apart from the description.', 'start': 4101.577, 'duration': 4.661}, {'end': 4114.106, 'text': "Okay So let's go to, yeah, I'm here and the same.", 'start': 4108.921, 'duration': 5.185}, {'end': 4119.691, 'text': "This function that I'm going to use also needs to be a stand alone function.", 'start': 4114.886, 'duration': 4.805}, {'end': 4124.295, 'text': "And before continue, I'm just going to close a few things.", 'start': 4120.131, 'duration': 4.164}, {'end': 4130.781, 'text': "Okay I'm just going to remove this console log as well.", 'start': 4126.317, 'duration': 4.464}, {'end': 4134.962, 'text': 'And I closed the data.', 'start': 4134.102, 'duration': 0.86}, {'end': 4135.863, 'text': "I didn't mean to do that.", 'start': 4134.983, 'duration': 0.88}, {'end': 4137.746, 'text': 'Let me just have the data there.', 'start': 4136.245, 'duration': 1.501}, {'end': 4141.691, 'text': 'Okay, so we do export function get static props.', 'start': 4138.167, 'duration': 3.524}, {'end': 4161.372, 'text': 'Right? So as a standalone, again, we can move this above the component or just leave it below, but never inside.', 'start': 4152.604, 'duration': 8.768}], 'summary': 'Configuring image host name in next config, restarting server, and discussing static generation for pre-generating pages during build time.', 'duration': 365.49, 'max_score': 3795.882, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw3795882.jpg'}, {'end': 4051.763, 'src': 'embed', 'start': 4021.132, 'weight': 2, 'content': [{'end': 4026.754, 'text': 'When we build our application, we pre-generate these pages before we deploy it.', 'start': 4021.132, 'duration': 5.622}, {'end': 4038.103, 'text': "Let's just go back to next and let's open it, get the static path, okay? and showing us how to use it here.", 'start': 4027.074, 'duration': 11.029}, {'end': 4046.862, 'text': 'So in the server-side, rendering the function that we just used here this one.', 'start': 4039.46, 'duration': 7.402}, {'end': 4051.763, 'text': 'we were building the pages only after we deployed them at the requested time.', 'start': 4046.862, 'duration': 4.901}], 'summary': 'Pages are pre-generated before deployment, using server-side rendering, to improve performance.', 'duration': 30.631, 'max_score': 4021.132, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw4021132.jpg'}], 'start': 3292.115, 'title': 'Fetching and displaying data in next.js', 'summary': 'Covers understanding getserversideprops and getstaticprops, fetching and displaying data for events in london, and configuring images and static generation in next.js, providing insights into usage scenarios and implementation details.', 'chapters': [{'end': 3401.886, 'start': 3292.115, 'title': 'Understanding getserversideprops and getstaticprops', 'summary': 'Discusses the importance of searching for information in the documentation, particularly focusing on the usage of getserversideprops and getstaticprops, highlighting the conditions and scenarios for using each method.', 'duration': 109.771, 'highlights': ['The documentation is emphasized as a valuable resource for understanding and resolving uncertainties, promoting the importance of comfortable searching for information. (Quantifiable data: None)', 'The use of getServerSideProps is explained, detailing its purpose in rendering pages with data that must be fetched at request time, specifying the nature of the data or properties of the request, such as authorization headers or geolocation. (Quantifiable data: None)', 'The recommendation to use getStaticProps is presented for scenarios where rendering the page at request time is not necessary, providing a clear distinction for when this method should be considered. (Quantifiable data: None)']}, {'end': 3821.855, 'start': 3402.547, 'title': 'Fetching and displaying data in homepage', 'summary': 'Demonstrates the process of fetching and displaying data for events in london, including using asynchronous functions and mapping through the data to display the image, title, and description for each event.', 'duration': 419.308, 'highlights': ['The process of fetching and displaying data for events in London is demonstrated, including using asynchronous functions and mapping through the data to display the image, title, and description for each event. events in London, displaying image, title, and description', "The code implements an asynchronous function to fetch the data, utilizing the 'await' keyword to ensure that the response is received before proceeding with further operations. implementation of asynchronous function, usage of 'await' keyword", "The process of fetching data from an external API is discussed, involving the usage of the 'fetch' method, response transformation, and JSON parsing to obtain the required data. fetching data from external API, 'fetch' method, response transformation, JSON parsing", 'The technique of destructuring the fetched data and setting it equal to the events category for use in the homepage component is explained. destructuring fetched data, setting it equal to events category', 'The utilization of the map method in JavaScript to iterate through the data and create a link for each event, including the display of image, title, and description, is demonstrated. utilization of map method, iterating through data, displaying image, title, and description']}, {'end': 4270.666, 'start': 3822.075, 'title': 'Configuring images and static generation', 'summary': 'Discusses configuring images in the next config, restarting the server after making changes, and implementing static generation for pre-rendering pages before deployment, ensuring updated content without redeploying the app.', 'duration': 448.591, 'highlights': ['Implementing static generation for pre-rendering pages before deployment The chapter explains the concept of static generation, where pages are pre-generated during build time and updated after deployment without needing to redeploy the app.', 'Configuring images in the next config and restarting the server after making changes The discussion involves adding the hostname to the image config, restarting the server after changes, and ensuring the display of images, with further UI improvements planned for the next chapter.', 'Using documentation to solve warning errors and following best practices The importance of referring to documentation for solving warning errors and best practices is emphasized, aiding in understanding and implementing necessary configurations.']}], 'duration': 978.551, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw3292115.jpg', 'highlights': ['Covers understanding getServerSideProps and getStaticProps in Next.js', 'Demonstrates fetching and displaying data for events in London', 'Explains configuring images and static generation in Next.js']}, {'end': 5597.194, 'segs': [{'end': 4473.249, 'src': 'embed', 'start': 4428.899, 'weight': 2, 'content': [{'end': 4430.92, 'text': "This is not going to look good, but it's okay.", 'start': 4428.899, 'duration': 2.021}, {'end': 4437.964, 'text': 'And we need to import the image from Next.js.', 'start': 4431.14, 'duration': 6.824}, {'end': 4443.686, 'text': "Okay, it's weird that it's not auto-importing it.", 'start': 4440.665, 'duration': 3.021}, {'end': 4447.068, 'text': 'Let me just try again, image.', 'start': 4445.287, 'duration': 1.781}, {'end': 4451.49, 'text': 'Okay, so now we can see that this has been imported.', 'start': 4448.669, 'duration': 2.821}, {'end': 4454.512, 'text': 'So now I can remove all of this.', 'start': 4452.151, 'duration': 2.361}, {'end': 4465.206, 'text': 'right. i save it and here we have our images.', 'start': 4460.043, 'duration': 5.163}, {'end': 4466.226, 'text': "it's not looking great.", 'start': 4465.206, 'duration': 1.02}, {'end': 4469.307, 'text': "this i'm going to.", 'start': 4466.226, 'duration': 3.081}, {'end': 4473.249, 'text': "we're going to make this better later.", 'start': 4469.307, 'duration': 3.942}], 'summary': 'Imported image from next.js, made improvements for better appearance.', 'duration': 44.35, 'max_score': 4428.899, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw4428899.jpg'}, {'end': 4707.942, 'src': 'embed', 'start': 4682.221, 'weight': 0, 'content': [{'end': 4691.286, 'text': "And at most cases, this data would probably come from an external API, but even if it's an internal, Next doesn't know.", 'start': 4682.221, 'duration': 9.065}, {'end': 4695.509, 'text': "And Next also doesn't know what we want to do with this data right?", 'start': 4691.766, 'duration': 3.743}, {'end': 4702.176, 'text': 'Okay, so we need to explicitly tell Nest how many pages it needs to create for us at build time.', 'start': 4696.249, 'duration': 5.927}, {'end': 4707.942, 'text': 'And to do this, we need to have a function called get static path.', 'start': 4702.856, 'duration': 5.086}], 'summary': 'Nest requires explicit instruction for creating pages at build time.', 'duration': 25.721, 'max_score': 4682.221, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw4682221.jpg'}, {'end': 5006.672, 'src': 'heatmap', 'start': 4832.935, 'weight': 0.784, 'content': [{'end': 4835.117, 'text': "I'm going to map this events category.map.", 'start': 4832.935, 'duration': 2.182}, {'end': 4857.115, 'text': 'Okay, so what we are going to do here is we are going to go through each iteration and we are going to take each object and return it with this format that we have here.', 'start': 4841.405, 'duration': 15.71}, {'end': 4859.577, 'text': "So I'm going to just copy this.", 'start': 4857.915, 'duration': 1.662}, {'end': 4862.078, 'text': 'I have an extra.', 'start': 4859.597, 'duration': 2.481}, {'end': 4867.922, 'text': 'Okay, and this is going to be the event ID.', 'start': 4864.199, 'duration': 3.723}, {'end': 4875.306, 'text': "And before this complete, I'm going to convert this into a string like this.", 'start': 4869.502, 'duration': 5.804}, {'end': 4883.51, 'text': 'And I have a typo here, get started paths.', 'start': 4877.687, 'duration': 5.823}, {'end': 4885.512, 'text': 'Okay, there we go.', 'start': 4883.771, 'duration': 1.741}, {'end': 4890.735, 'text': "Okay, so now let's just console.log this all paths.", 'start': 4885.892, 'duration': 4.843}, {'end': 4899.756, 'text': 'Yeah, and we are getting here the data, okay? London, San Francisco, and Barcelona.', 'start': 4895.472, 'duration': 4.284}, {'end': 4906.462, 'text': 'So now we can go ahead and replace all of this with our new variable.', 'start': 4899.796, 'duration': 6.666}, {'end': 4911.747, 'text': 'Okay? There are more things that we can return here.', 'start': 4908.744, 'duration': 3.003}, {'end': 4920.995, 'text': "One of them that we actually need to, because if we come here, it's gonna tell us that it's missing a property, is fullback.", 'start': 4911.767, 'duration': 9.228}, {'end': 4934.712, 'text': 'So earlier we said that we could put any route here after events and next year was going to pick up anything that was matching this route, this path.', 'start': 4922.128, 'duration': 12.584}, {'end': 4942.395, 'text': 'But now we are specifying the paths we want Next to build these routes for.', 'start': 4935.212, 'duration': 7.183}, {'end': 4946.336, 'text': 'So here we are specifying and we are telling.', 'start': 4942.955, 'duration': 3.381}, {'end': 4963.753, 'text': 'and next, okay, we want you to build a page using these component templates for this, for this specific uh paths, which are the ids we have here.', 'start': 4947.256, 'duration': 16.497}, {'end': 4971.491, 'text': 'okay, so the full pack With the fallback property.', 'start': 4963.753, 'duration': 7.738}, {'end': 4981.359, 'text': "we need to tell Next what we want Next to do in the situations where the user put something else that doesn't match the paths that we specify.", 'start': 4971.491, 'duration': 9.868}, {'end': 4993.007, 'text': 'If we specify it to false, this means that our page will only render, will only be built for the paths that we specify here.', 'start': 4982.099, 'duration': 10.908}, {'end': 5002.206, 'text': 'If we navigate to a different page, okay, Seems like we have found Avra.', 'start': 4993.027, 'duration': 9.179}, {'end': 5006.672, 'text': 'Oh, yes, I have another typo here.', 'start': 5004.129, 'duration': 2.543}], 'summary': 'Iterating through events and specifying paths for next to build routes, resulting in data for london, san francisco, and barcelona.', 'duration': 173.737, 'max_score': 4832.935, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw4832935.jpg'}, {'end': 5100.158, 'src': 'embed', 'start': 5066.981, 'weight': 3, 'content': [{'end': 5074.784, 'text': "But now if we go to, if we walk here, we see that we are getting this error where it's missing get static props.", 'start': 5066.981, 'duration': 7.803}, {'end': 5080.506, 'text': 'So this function that we used earlier in the events page is missing this function.', 'start': 5074.844, 'duration': 5.662}, {'end': 5084.607, 'text': "So let's just go ahead and add this function.", 'start': 5081.246, 'duration': 3.361}, {'end': 5086.928, 'text': "I'm going to show you why we're missing it.", 'start': 5085.267, 'duration': 1.661}, {'end': 5097.355, 'text': 'So within getStatuteProps, we have a parameter called context.', 'start': 5092.85, 'duration': 4.505}, {'end': 5100.158, 'text': "I'm going to console.log this.", 'start': 5098.256, 'duration': 1.902}], 'summary': 'Error in code, missing getstaticprops function in events page.', 'duration': 33.177, 'max_score': 5066.981, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw5066981.jpg'}, {'end': 5245.315, 'src': 'embed', 'start': 5200.522, 'weight': 1, 'content': [{'end': 5212.991, 'text': 'Just to filter through this array of objects and get all the data, get all the objects where the ID is equal to this category ID.', 'start': 5200.522, 'duration': 12.469}, {'end': 5217.874, 'text': 'To do that, I need to use this function again.', 'start': 5215.032, 'duration': 2.842}, {'end': 5229.068, 'text': "But in this case, I don't need this, I need all events.", 'start': 5221.425, 'duration': 7.643}, {'end': 5245.315, 'text': 'Okay? And in all events, if we have a look at this object, we have here this city, okay? This is what we are going to use as our identifier.', 'start': 5234.03, 'duration': 11.285}], 'summary': 'Filter array for objects with id matching category id and use city as identifier.', 'duration': 44.793, 'max_score': 5200.522, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw5200522.jpg'}], 'start': 4270.926, 'title': 'Optimizing react function for server-side rendering and next.js image import', 'summary': 'Discusses optimizing a react function for server-side rendering and utilizing props passing and unique keys, as well as covering the process of importing images in next.js and dynamic page generation for event categories. it emphasizes the need to specify the number of pages to be created at build time using getstaticpaths function and the filtering process to retrieve specific data based on city id.', 'chapters': [{'end': 4417.19, 'start': 4270.926, 'title': 'Optimizing react function for server-side rendering', 'summary': 'Discusses optimizing a react function for server-side rendering, utilizing props passing and unique keys for production, with emphasis on ensuring multiple items do not have the same key.', 'duration': 146.264, 'highlights': ['Utilizing props passing through a server function for server-side rendering.', 'Emphasizing the need for unique keys for production, preventing collisions by adding numbers to ensure uniqueness.', 'Discussing the necessity of utilizing props to pass data, especially in a server context.']}, {'end': 4774.241, 'start': 4428.899, 'title': 'Next.js image import and page generation', 'summary': 'Covers the process of importing images in next.js and the dynamic page generation for event categories, with the need to explicitly specify the number of pages to be created at build time using getstaticpaths function.', 'duration': 345.342, 'highlights': ['The chapter covers the process of importing images in Next.js, with the need to import the image manually and later removing the placeholder text, showcasing the hands-on approach of preparing the course in real-time.', 'The dynamic page generation for event categories is demonstrated, emphasizing the need to explicitly specify the number of pages to be created at build time using getStaticPaths function, as Next.js does not automatically determine the pages to be generated based on the data, showcasing the explicit control required for page generation.', 'The process of importing images in Next.js is highlighted, showcasing the hands-on approach of preparing the course in real-time, while also emphasizing the need to manually import the image and remove the placeholder text for improved visual representation.']}, {'end': 5065.22, 'start': 4774.801, 'title': 'Create routes for events', 'summary': 'Discusses using the map method to generate an array with events per category in the data, specifying paths for next to build routes for, and setting fallback property for page rendering.', 'duration': 290.419, 'highlights': ['Using the map method to generate an array with events per category The speaker uses the map method to iterate through each object and return it in a specific format, generating an array of paths for events per category.', 'Specifying paths for Next to build routes for The transcript explains the process of specifying paths for Next.js to build routes for, such as London, San Francisco, and Barcelona, before deploying the app.', 'Setting the fallback property for page rendering The chapter discusses the importance of setting the fallback property to control page rendering, specifying that a 404 error page will be thrown if a path that is not specified is accessed.']}, {'end': 5597.194, 'start': 5066.981, 'title': 'Adding getstaticprops function and filtering data', 'summary': 'Details the process of adding the getstaticprops function to resolve an error and explains the filtering process to retrieve specific data based on city id, enhancing the functionality of the web page.', 'duration': 530.213, 'highlights': ['The getStaticProps function is added to resolve the missing function error, allowing the retrieval of data based on the context parameters, such as categories and page IDs.', 'The filtering process is implemented to extract data where the city property matches the specified ID, enabling the display of relevant events based on the city chosen, enhancing user experience.', 'An explanation of the fallback behavior is provided, with the option to render specified pages and the potential to improve the display of events using the map method and links component from SDS.']}], 'duration': 1326.268, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw4270926.jpg', 'highlights': ['Emphasizing the need to specify the number of pages to be created at build time using getStaticPaths function', 'The filtering process to retrieve specific data based on city id', 'The process of importing images in Next.js, with the need to import the image manually and later removing the placeholder text', 'The getStaticProps function is added to resolve the missing function error, allowing the retrieval of data based on the context parameters']}, {'end': 7180.922, 'segs': [{'end': 5727.836, 'src': 'embed', 'start': 5694.887, 'weight': 3, 'content': [{'end': 5703.57, 'text': 'We need to create a template page like this one where we have two server-side functions, the get static paths and the get static paths.', 'start': 5694.887, 'duration': 8.683}, {'end': 5712.961, 'text': 'props to tell Next.js which paths we want Next to create for us,', 'start': 5704.13, 'duration': 8.831}, {'end': 5720.87, 'text': 'which pages Next needs to create for us and what content it needs to generate for each path.', 'start': 5712.961, 'duration': 7.909}, {'end': 5723.232, 'text': "Okay, so let's recap.", 'start': 5721.551, 'duration': 1.681}, {'end': 5727.836, 'text': 'In the static generation, we have two functions.', 'start': 5723.853, 'duration': 3.983}], 'summary': 'Create a next.js template with two server-side functions for static generation.', 'duration': 32.949, 'max_score': 5694.887, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw5694887.jpg'}, {'end': 5788.529, 'src': 'embed', 'start': 5758.889, 'weight': 0, 'content': [{'end': 5761.43, 'text': 'we want to use this template for right?', 'start': 5758.889, 'duration': 2.541}, {'end': 5765.831, 'text': 'So, before deploying our app, when we build it,', 'start': 5761.99, 'duration': 3.841}, {'end': 5774.374, 'text': 'Nest is going to analyze our whole project and see how many HTML pages it needs to create based on our data.', 'start': 5765.831, 'duration': 8.543}, {'end': 5784.057, 'text': 'Okay, so once it knows how many pages and routes it needs to create, it will then go and fetch data for each page.', 'start': 5775.334, 'duration': 8.723}, {'end': 5788.529, 'text': "So it will come here, I'm just gonna close this.", 'start': 5784.497, 'duration': 4.032}], 'summary': 'Nest analyzes project to create html pages based on data.', 'duration': 29.64, 'max_score': 5758.889, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw5758889.jpg'}, {'end': 5874.34, 'src': 'embed', 'start': 5816.588, 'weight': 2, 'content': [{'end': 5820.81, 'text': 'to know what data it needs to generate in the component.', 'start': 5816.588, 'duration': 4.222}, {'end': 5833.936, 'text': 'Okay, so once it knows how many pages and routes it needs to create, it will then come here to the Get Study Props and fetch the data for each page.', 'start': 5822.43, 'duration': 11.506}, {'end': 5840.059, 'text': 'And it will put this data in the component here, in this component.', 'start': 5834.456, 'duration': 5.603}, {'end': 5844.582, 'text': 'So these dynamic page components work as a template.', 'start': 5840.859, 'duration': 3.723}, {'end': 5847.043, 'text': "That's why I keep repeating the word template.", 'start': 5844.642, 'duration': 2.401}, {'end': 5854.788, 'text': 'This means that we could have 100 events and only need to create one page and one template for all of them.', 'start': 5847.584, 'duration': 7.204}, {'end': 5865.695, 'text': "So if we need to make a change to one single events page, let's say to add an option to buy tickets for this event, we will only need to do it once.", 'start': 5855.509, 'duration': 10.186}, {'end': 5871.098, 'text': 'and it will update the 100 event pages we might have.', 'start': 5866.716, 'duration': 4.382}, {'end': 5874.34, 'text': 'So you can see how powerful NestJS is.', 'start': 5871.659, 'duration': 2.681}], 'summary': 'Dynamic page components serve as a template, allowing for efficient creation and updating of event pages using nestjs.', 'duration': 57.752, 'max_score': 5816.588, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw5816588.jpg'}, {'end': 6496.085, 'src': 'embed', 'start': 6463.048, 'weight': 1, 'content': [{'end': 6468.452, 'text': 'pages Nest is going to go through all the links and prefetch all the pages.', 'start': 6463.048, 'duration': 5.404}, {'end': 6479.96, 'text': 'Okay, so now I think Yeah, I think we have covered how to build a static page, how to build dynamic page,', 'start': 6470.634, 'duration': 9.326}, {'end': 6486.622, 'text': 'how to fetch the data using server-side functions, server-side rendering and static generation functions.', 'start': 6479.96, 'duration': 6.662}, {'end': 6496.085, 'text': 'And before starting building all the UI and all the components, we need to create this, our events page.', 'start': 6487.322, 'duration': 8.763}], 'summary': 'Nest will prefetch all pages. covered static, dynamic, and data fetching methods. preparing to build events page.', 'duration': 33.037, 'max_score': 6463.048, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw6463048.jpg'}, {'end': 6710.103, 'src': 'embed', 'start': 6679.246, 'weight': 5, 'content': [{'end': 6684.572, 'text': "We want to throw an error if the root doesn't match these paths.", 'start': 6679.246, 'duration': 5.326}, {'end': 6695.834, 'text': "Okay, so let's go to the terminal terminal, to the browser, and it's telling us that a required parameter, cat, was not provided as a string in.", 'start': 6686.59, 'duration': 9.244}, {'end': 6697.274, 'text': 'get static paths, okay?', 'start': 6695.834, 'duration': 1.44}, {'end': 6703.697, 'text': 'This is because this page, this path, has events and then it has a dynamic part.', 'start': 6697.714, 'duration': 5.983}, {'end': 6707.28, 'text': 'and its dynamic page itself.', 'start': 6704.577, 'duration': 2.703}, {'end': 6710.103, 'text': "So it's saying that we are not specifying here.", 'start': 6707.7, 'duration': 2.403}], 'summary': "Error thrown when root doesn't match paths, missing required parameter 'cat' in dynamic page.", 'duration': 30.857, 'max_score': 6679.246, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw6679246.jpg'}], 'start': 5597.194, 'title': 'Next.js and nestjs features', 'summary': 'Covers next.js static generation for efficient page creation and nestjs features for client-side navigation. it also discusses building static and dynamic pages, implementing static paths, and dynamic pages for optimized code efficiency and error handling.', 'chapters': [{'end': 5847.043, 'start': 5597.194, 'title': 'Next.js static generation', 'summary': 'Covers the process of creating static pages using next.js, including the use of getstaticpaths and getstaticprops functions to generate and fetch data for dynamic and static pages, with a focus on optimizing performance and efficiency.', 'duration': 249.849, 'highlights': ['The chapter covers the process of creating static pages using Next.js, including the use of getStaticPaths and getStaticProps functions to generate and fetch data for dynamic and static pages.', 'Next.js analyzes the project to determine the number of HTML pages and routes needed to be created based on the data, and then fetches data for each page to generate the content.', 'The getStaticPaths function is used to specify how many paths need to be generated for dynamic pages, while the getStaticProps function is used to fetch the data for each page.', 'The dynamic page components serve as templates, with the getStaticProps function fetching the data for each page and populating the component with the fetched data.']}, {'end': 6079.246, 'start': 5847.584, 'title': 'Nestjs features and client-side navigation', 'summary': 'Discusses the powerful features of nestjs including the ability to update multiple event pages at once, and the implementation of client-side navigation for smoother and quicker transitions between pages.', 'duration': 231.662, 'highlights': ['NestJS allows for updating multiple event pages at once, improving efficiency and reducing the need for repetitive actions.', 'Client-side navigation in NestJS provides smoother and quicker transitions between pages, enhancing user experience and avoiding full page refreshes.', "The 'passHref' property in NestJS link ensures the accessibility of anchor tags without the need for a href attribute, optimizing the UI for users.", 'Importing the NestJS link enables client-side navigation and the ability to wrap anchor tags for improved page transitions.']}, {'end': 6524.504, 'start': 6079.526, 'title': 'Building static and dynamic pages', 'summary': 'Covers building static and dynamic pages, using server-side functions, server-side rendering, and static generation functions to prefetch code for all internal pages, including events and about us, and implementing a simple approach for creating the events page.', 'duration': 444.978, 'highlights': ['Using server-side functions, server-side rendering, and static generation functions The chapter covers using server-side functions, server-side rendering, and static generation functions to prefetch code for all internal pages, including events and about us.', 'Implementing a simple approach for creating the events page The chapter explains implementing a simple approach for creating the events page, including an image, a title, and a text.', 'Replacing anchors with link components for accessibility The transcript discusses replacing anchors with link components for accessibility, ensuring proper navigation and capitalization for page names.']}, {'end': 7180.922, 'start': 6531.424, 'title': 'Implementing static paths and dynamic pages', 'summary': 'Demonstrates implementing static paths using getstaticpaths and dynamic pages using getstaticprops in next.js, focusing on fetching and filtering data to generate dynamic routes and content, including error handling, and optimizing code efficiency.', 'duration': 649.498, 'highlights': ['The chapter demonstrates implementing static paths using getStaticPaths and dynamic pages using getStaticProps in Next.js. The chapter covers the implementation of static paths and dynamic pages in Next.js using getStaticPaths and getStaticProps to enable dynamic routing and content generation.', 'The chapter focuses on fetching and filtering data to generate dynamic routes and content. The chapter emphasizes the process of fetching and filtering data to dynamically generate routes and content for each page, optimizing the user experience and overall performance.', 'The chapter includes error handling for missing parameters and fallback options. The chapter showcases error handling for missing parameters, providing a fallback option to prevent errors and ensure a smooth user experience.', 'The chapter discusses optimizing code efficiency by using appropriate array methods, such as find instead of filter. The chapter highlights the importance of optimizing code efficiency by choosing appropriate array methods, such as find, over filter, to ensure optimal performance and resource utilization.']}], 'duration': 1583.728, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw5597194.jpg', 'highlights': ['Next.js analyzes the project to determine the number of HTML pages and routes needed to be created based on the data, and then fetches data for each page to generate the content.', 'The chapter covers using server-side functions, server-side rendering, and static generation functions to prefetch code for all internal pages, including events and about us.', 'NestJS allows for updating multiple event pages at once, improving efficiency and reducing the need for repetitive actions.', 'The chapter demonstrates implementing static paths using getStaticPaths and dynamic pages using getStaticProps in Next.js.', 'Client-side navigation in NestJS provides smoother and quicker transitions between pages, enhancing user experience and avoiding full page refreshes.', 'The chapter includes error handling for missing parameters and fallback options.', 'The dynamic page components serve as templates, with the getStaticProps function fetching the data for each page and populating the component with the fetched data.', 'The chapter covers the process of creating static pages using Next.js, including the use of getStaticPaths and getStaticProps functions to generate and fetch data for dynamic and static pages.']}, {'end': 8734.772, 'segs': [{'end': 7349.51, 'src': 'embed', 'start': 7314.695, 'weight': 4, 'content': [{'end': 7318.476, 'text': 'At the moment, we are adding everything to these pages.', 'start': 7314.695, 'duration': 3.781}, {'end': 7325.557, 'text': "So let's start by refactoring our header and our footer and create its own component.", 'start': 7318.736, 'duration': 6.821}, {'end': 7332.159, 'text': 'When we build apps in NestJet, we are still building via components, so this works exactly the same.', 'start': 7326.077, 'duration': 6.082}, {'end': 7337.5, 'text': 'The only difference is that Nest comes with some libraries and components under the hook that we can use.', 'start': 7332.199, 'duration': 5.301}, {'end': 7349.51, 'text': 'we saw earlier that we could use a special custom next component for link and for the image, and there are many others that we can use.', 'start': 7338.36, 'duration': 11.15}], 'summary': 'Refactoring header and footer into own component in nestjet, utilizing special custom components for links and images.', 'duration': 34.815, 'max_score': 7314.695, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw7314695.jpg'}, {'end': 8189.979, 'src': 'embed', 'start': 8160.541, 'weight': 0, 'content': [{'end': 8165.013, 'text': "okay?. So let's repeat what we just done.", 'start': 8160.541, 'duration': 4.472}, {'end': 8177.076, 'text': 'we have wrapped our component with the main layout component, where we have our header and our footer, and a children property in between,', 'start': 8165.013, 'duration': 12.063}, {'end': 8182.297, 'text': 'where all of our pages components will be rendered okay.', 'start': 8177.076, 'duration': 5.221}, {'end': 8189.979, 'text': 'something else that we could add here is a head content with some generic settings that applies to all of our pages.', 'start': 8182.297, 'duration': 7.682}], 'summary': 'Wrapped component with main layout, including header, footer, and children property for rendering pages components.', 'duration': 29.438, 'max_score': 8160.541, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw8160541.jpg'}, {'end': 8399.714, 'src': 'embed', 'start': 8376.849, 'weight': 3, 'content': [{'end': 8387.371, 'text': 'Okay, so as now the warning message is gone, and as it was saying us, to apply styles to each specific component, we could use CSS modules.', 'start': 8376.849, 'duration': 10.522}, {'end': 8390.592, 'text': 'And there are also other ways of doing this.', 'start': 8387.451, 'duration': 3.141}, {'end': 8399.714, 'text': 'So, CSS modules allow us to write style sheets for each component, and then we import the sheets to the component.', 'start': 8391.532, 'duration': 8.182}], 'summary': 'Css modules enable writing style sheets for each component and then importing them.', 'duration': 22.865, 'max_score': 8376.849, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw8376849.jpg'}, {'end': 8629.036, 'src': 'heatmap', 'start': 8456.614, 'weight': 0.951, 'content': [{'end': 8458.776, 'text': "Actually, I'm going to use SAS.", 'start': 8456.614, 'duration': 2.162}, {'end': 8464.942, 'text': 'SAS stands for synthetically awesome style sheets, I think.', 'start': 8459.176, 'duration': 5.766}, {'end': 8469.535, 'text': 'and sas is an extension to css.', 'start': 8466.454, 'duration': 3.081}, {'end': 8472.736, 'text': "it's a css preprocessor.", 'start': 8469.535, 'duration': 3.201}, {'end': 8477.238, 'text': 'we need to install it and we need to solve the sas package.', 'start': 8472.736, 'duration': 4.502}, {'end': 8484.961, 'text': "so let me install that, while i explain to you why i think it's better for us to use us.", 'start': 8477.238, 'duration': 7.723}, {'end': 8489.549, 'text': "okay, so i'm gonna click here to create a new Windows, okay?", 'start': 8484.961, 'duration': 4.588}, {'end': 8491.87, 'text': "So I'm gonna do NPM,", 'start': 8489.929, 'duration': 1.941}, {'end': 8504.074, 'text': "install shortcut I for I shortcut for install SAS and I'm going to save it in the development mode because we don't need this for production.", 'start': 8491.87, 'duration': 12.204}, {'end': 8511.037, 'text': 'So there you go, okay? So, yes, okay.', 'start': 8504.534, 'duration': 6.503}, {'end': 8518.078, 'text': 'so i have a kind of an issue with this shell, so i need to.', 'start': 8512.265, 'duration': 5.813}, {'end': 8530.568, 'text': "The reason why I'm going to use Sass is because Sars Nest supports Sass natively and it's a lot quicker to write code.", 'start': 8522.482, 'duration': 8.086}, {'end': 8532.71, 'text': 'because we can use variables.', 'start': 8530.568, 'duration': 2.142}, {'end': 8534.391, 'text': 'we can nest the code.', 'start': 8532.71, 'duration': 1.681}, {'end': 8537.413, 'text': "that is especially the reason why I'm going to use it.", 'start': 8534.391, 'duration': 3.022}, {'end': 8545.259, 'text': 'we can nest code and we can also avoid using some semicolons or columns on some punctuation.', 'start': 8537.413, 'duration': 7.846}, {'end': 8547.441, 'text': "Well, yeah, it's installed.", 'start': 8546.34, 'duration': 1.101}, {'end': 8548.602, 'text': 'That was pretty quick.', 'start': 8547.481, 'duration': 1.121}, {'end': 8555.767, 'text': 'So now we only need to actually rename this style.', 'start': 8548.722, 'duration': 7.045}, {'end': 8558.008, 'text': 'So for example, we have here home module CSS.', 'start': 8555.787, 'duration': 2.221}, {'end': 8563.492, 'text': 'So when you install in SDS, as you can see, it comes with the module CSS by default as well.', 'start': 8558.048, 'duration': 5.444}, {'end': 8566.634, 'text': "But we don't want to use module CSS for now.", 'start': 8564.393, 'duration': 2.241}, {'end': 8575.32, 'text': 'I just want to do the styles part as fast as possible because I prefer to focus this tutorial in learning SDS.', 'start': 8566.714, 'duration': 8.606}, {'end': 8581.607, 'text': "So having said that, let's rename this and I'm going to remove all of this.", 'start': 8576.321, 'duration': 5.286}, {'end': 8586.152, 'text': "I'm just going to say Home SaaS, okay? So this should work.", 'start': 8581.767, 'duration': 4.385}, {'end': 8589.456, 'text': "You see how, okay, I'm just going to undo what I just done.", 'start': 8586.332, 'duration': 3.124}, {'end': 8591.178, 'text': "I'm going to save.", 'start': 8590.217, 'duration': 0.961}, {'end': 8599.948, 'text': 'so Command, save in Mac and all the curly brackets and semicolons are gone.', 'start': 8591.178, 'duration': 8.77}, {'end': 8606.371, 'text': 'okay. so that is one of the reasons why i prefer to use sass, and i prefer to use sass over scss.', 'start': 8599.948, 'duration': 6.423}, {'end': 8609.472, 'text': "cool, and that's it.", 'start': 8606.371, 'duration': 3.101}, {'end': 8614.935, 'text': 'now we just need to start adding our styles.', 'start': 8609.472, 'duration': 5.463}, {'end': 8617.957, 'text': "okay. so now let's start building the ui.", 'start': 8614.935, 'duration': 3.022}, {'end': 8629.036, 'text': "Okay, I'm going to start by building the header, then the footer, and then we'll move to the homepage events page and all the other pages.", 'start': 8619.153, 'duration': 9.883}], 'summary': 'Using sas for css preprocessor, supports nesting, variables, and quicker to write code.', 'duration': 172.422, 'max_score': 8456.614, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw8456614.jpg'}, {'end': 8545.259, 'src': 'embed', 'start': 8512.265, 'weight': 2, 'content': [{'end': 8518.078, 'text': 'so i have a kind of an issue with this shell, so i need to.', 'start': 8512.265, 'duration': 5.813}, {'end': 8530.568, 'text': "The reason why I'm going to use Sass is because Sars Nest supports Sass natively and it's a lot quicker to write code.", 'start': 8522.482, 'duration': 8.086}, {'end': 8532.71, 'text': 'because we can use variables.', 'start': 8530.568, 'duration': 2.142}, {'end': 8534.391, 'text': 'we can nest the code.', 'start': 8532.71, 'duration': 1.681}, {'end': 8537.413, 'text': "that is especially the reason why I'm going to use it.", 'start': 8534.391, 'duration': 3.022}, {'end': 8545.259, 'text': 'we can nest code and we can also avoid using some semicolons or columns on some punctuation.', 'start': 8537.413, 'duration': 7.846}], 'summary': 'Prefers using sass due to native support and quicker coding with variables and nesting', 'duration': 32.994, 'max_score': 8512.265, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw8512265.jpg'}], 'start': 7180.942, 'title': 'Building ui components and react component organization', 'summary': 'Covers building ui components in nestjet, organizing react components, creating main layout component, and discussing css usage in a nestjs project to improve code reusability and smooth user experience.', 'chapters': [{'end': 7612.445, 'start': 7180.942, 'title': 'Building ui components in nestjet', 'summary': 'Discusses building ui components in nestjet, creating header, footer, and event page components, and refactoring the homepage to include components, aiming for efficient navigation and smooth user experience.', 'duration': 431.503, 'highlights': ['The chapter discusses building UI components in NestJet. Focuses on the main topic of the chapter.', 'Creating header, footer, and event page components. Describes the specific components being created for the application.', 'Refactoring the homepage to include components. Explains the process of enhancing the homepage by incorporating created components.', 'Aiming for efficient navigation and smooth user experience. Emphasizes the objective of creating components for seamless user interaction.']}, {'end': 8020.528, 'start': 7614.005, 'title': 'React component organization', 'summary': 'Discusses the process of organizing react components within a project, addressing the issues of component placement, duplication of code, and the best practices for creating a main layout component to streamline the application structure and improve code reusability and maintenance.', 'duration': 406.523, 'highlights': ["The key 'return' keyword was missing in the function, causing it to not work, highlighting the importance of using the correct syntax and keywords for proper functionality.", 'Creating a main layout component is emphasized as a best practice for organizing components and ensuring common elements like headers and footers are consistently displayed across all pages, enhancing code reusability and maintainability.', 'The file underscore app is identified as the application shell and root app, where providers and shared code can be added to wrap the entire application, demonstrating the central role of this file in implementing common code and components across all pages.', "The need for a clean and efficient approach to organizing components is underscored, leading to the creation of a main layout component within the 'layout' folder to streamline the structure and improve code maintenance and scalability."]}, {'end': 8221.236, 'start': 8022.269, 'title': 'Component layout and rendering', 'summary': 'Explains how to create a main layout component to wrap page components with header and footer, using the children property and destructuring props, allowing for flexible rendering and generic settings, as part of a minimal viable product (mvp).', 'duration': 198.967, 'highlights': ['The main layout component is created to wrap page components with header and footer, using the children property for flexible rendering.', 'Destructuring of props is demonstrated to access and pass the children property, allowing for nested rendering of page components.', 'The concept of using generic settings for all pages, such as meta description, is mentioned as part of future iterations for the Minimal Viable Product (MVP).']}, {'end': 8734.772, 'start': 8224.038, 'title': 'Nestjs project css usage', 'summary': 'Discusses the usage of css in a nestjs project, including the use of global css, css modules, and sass, with a preference for using sass due to its native support and quicker code writing.', 'duration': 510.734, 'highlights': ['The global CSS is imported on the root component and applies styles to the whole website, but cannot be imported in other pages. The global CSS is imported on the root component and applies styles to the whole website, but cannot be imported in other pages, leading to a warning message about CSS imports from files other than the custom app.', 'CSS modules allow writing style sheets for each component, scoping styles to that component and avoiding conflicts between different class names. CSS modules allow writing style sheets for each component, scoping styles to that component and avoiding conflicts between different class names.', 'Sass is preferred due to its native support in NestJS, quicker code writing with variables and nested code, and avoiding certain punctuation usage. Sass is preferred due to its native support in NestJS, quicker code writing with variables and nested code, and avoiding certain punctuation usage.']}], 'duration': 1553.83, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw7180942.jpg', 'highlights': ['Creating a main layout component is emphasized as a best practice for organizing components and ensuring common elements like headers and footers are consistently displayed across all pages, enhancing code reusability and maintainability.', 'The main layout component is created to wrap page components with header and footer, using the children property for flexible rendering.', 'Sass is preferred due to its native support in NestJS, quicker code writing with variables and nested code, and avoiding certain punctuation usage.', 'CSS modules allow writing style sheets for each component, scoping styles to that component and avoiding conflicts between different class names.', 'The chapter discusses building UI components in NestJet. Focuses on the main topic of the chapter.']}, {'end': 10212.567, 'segs': [{'end': 9406.019, 'src': 'embed', 'start': 9373.151, 'weight': 0, 'content': [{'end': 9376.093, 'text': "I'm just going to copy this, what I did here, background.", 'start': 9373.151, 'duration': 2.942}, {'end': 9378.716, 'text': "I'm just going to go to header and paste it here.", 'start': 9376.193, 'duration': 2.523}, {'end': 9382.499, 'text': 'So I love to add styles in the Spectre because I can see it.', 'start': 9378.836, 'duration': 3.663}, {'end': 9393.067, 'text': 'I can use the browser tools to adjust the CSS, see it in real life a lot faster than doing it in the code.', 'start': 9383.099, 'duration': 9.968}, {'end': 9396.19, 'text': 'So yeah, I like doing it like this.', 'start': 9394.288, 'duration': 1.902}, {'end': 9397.531, 'text': 'So this is how I do it.', 'start': 9396.49, 'duration': 1.041}, {'end': 9406.019, 'text': 'So this is a header and this is a display flex.', 'start': 9398.351, 'duration': 7.668}], 'summary': 'Using browser tools to adjust css for faster real-time visualization and styling, especially with display flex.', 'duration': 32.868, 'max_score': 9373.151, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw9373151.jpg'}, {'end': 9722.665, 'src': 'embed', 'start': 9694.154, 'weight': 2, 'content': [{'end': 9701.512, 'text': 'okay and then margin Okay, this is to sell like a maximum width.', 'start': 9694.154, 'duration': 7.358}, {'end': 9710.818, 'text': "So our page doesn't use like a stretch to the infinity, basically of the size of your device,", 'start': 9701.712, 'duration': 9.106}, {'end': 9717.102, 'text': 'because some users might have like a massive monitor screen.', 'start': 9710.818, 'duration': 6.284}, {'end': 9719.423, 'text': "So you don't want that, right?", 'start': 9717.962, 'duration': 1.461}, {'end': 9720.444, 'text': "You don't want to design that.", 'start': 9719.443, 'duration': 1.001}, {'end': 9722.665, 'text': "it's just like full width, like that, right?", 'start': 9720.444, 'duration': 2.221}], 'summary': 'Setting maximum width to prevent page stretching and ensure consistent display across devices.', 'duration': 28.511, 'max_score': 9694.154, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw9694154.jpg'}, {'end': 9909.777, 'src': 'embed', 'start': 9856.198, 'weight': 1, 'content': [{'end': 9857.378, 'text': "Oh, I don't need this now.", 'start': 9856.198, 'duration': 1.18}, {'end': 9867.462, 'text': 'So display flex, flex direction, go to column.', 'start': 9858.259, 'duration': 9.203}, {'end': 9882.547, 'text': 'Okay. And now what I need is for each of them, which is a link, I need to add a class to each of them, okay?', 'start': 9872.584, 'duration': 9.963}, {'end': 9889.069, 'text': "So I'm just going to say class name, equal card, okay?", 'start': 9882.587, 'duration': 6.482}, {'end': 9893.531, 'text': 'So I can come here now and say card.', 'start': 9890.55, 'duration': 2.981}, {'end': 9901.094, 'text': 'And now I want to do, yes, so I want to say display flex.', 'start': 9895.852, 'duration': 5.242}, {'end': 9909.777, 'text': 'And then this is a flex direction row, okay? As you said.', 'start': 9903.214, 'duration': 6.563}], 'summary': "Styling links with class 'card' using flexbox layout.", 'duration': 53.579, 'max_score': 9856.198, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw9856198.jpg'}, {'end': 10120.845, 'src': 'embed', 'start': 10087.036, 'weight': 3, 'content': [{'end': 10088.276, 'text': 'events in barcelona.', 'start': 10087.036, 'duration': 1.24}, {'end': 10099.541, 'text': 'okay, so, to make a little bit more interesting, uh, we said that we would want to um, put this one, the image starting the right side,', 'start': 10088.276, 'duration': 11.265}, {'end': 10110.502, 'text': "so like reverse the order of the elements, and something that I'm seeing here is that I would like to have more padding at the top, at the bottom.", 'start': 10099.541, 'duration': 10.961}, {'end': 10120.845, 'text': "So for that, I'm going to have here to the main, I'm going to say like 30 pixels is fine for left and right.", 'start': 10110.962, 'duration': 9.883}], 'summary': 'Discussing visual design changes for events in barcelona, such as reversing image order and adding 30 pixels padding.', 'duration': 33.809, 'max_score': 10087.036, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw10087036.jpg'}], 'start': 8734.772, 'title': 'Web design and css styling', 'summary': 'Covers creating a header design with a 300 pixel height, implementing css properties like display flex, adding styles to web page elements including font size adjustments, and optimizing the home page layout with a maximum width of 1450 pixels, as well as discussing styling and ordering content in web design.', 'chapters': [{'end': 9254.638, 'start': 8734.772, 'title': 'Creating header design and css implementation', 'summary': 'Entails the process of creating a header design with a 300 pixel height, adding a logo and navigation elements, implementing css properties like display flex and padding, and incorporating semantic html elements for improved structure and readability.', 'duration': 519.866, 'highlights': ["Creating a header design with a 300 pixel height The speaker discusses setting the header's height to 300 pixels for the design.", 'Adding a logo and navigation elements The speaker explains the process of adding a logo and navigation elements within a div and aligning them using CSS properties.', 'Implementing CSS properties like display flex and padding The speaker demonstrates the use of CSS properties such as display flex and padding to improve the layout and appearance of the header design.', 'Incorporating semantic HTML elements for improved structure and readability The speaker emphasizes the importance of using semantic HTML elements like nav and li to enhance the structure and readability of the code.']}, {'end': 9620.627, 'start': 9256.979, 'title': 'Styling web page elements', 'summary': 'Details the process of adding styles to web page elements using css, including font size adjustments, flexbox layout, and background color modifications.', 'duration': 363.648, 'highlights': ['The speaker demonstrates the process of adding styles to web page elements in real-time, using CSS and browser tools, for faster adjustments and real-life visualizations.', "The use of flexbox layout and CSS properties like 'align-items' and 'text-align' is shown to create responsive and visually appealing web page designs.", 'The speaker applies specific pixel sizes for font adjustments, such as increasing the font size to 40 pixels and reducing it to 30 pixels for different elements, showcasing precise styling decisions.']}, {'end': 9909.777, 'start': 9620.627, 'title': 'Optimizing home page layout', 'summary': 'Discusses optimizing the home page layout by implementing a main layout component with customized main and header elements, setting a maximum width of 1450 pixels to prevent stretching on larger screens, and using flexbox for the link display.', 'duration': 289.15, 'highlights': ['Implementing main layout component with customized main and header elements to optimize the home page layout.', 'Setting a maximum width of 1450 pixels to prevent stretching on larger screens, ensuring a consistent design.', 'Using flexbox for link display to create a responsive and visually appealing layout.']}, {'end': 10212.567, 'start': 9911.517, 'title': 'Styling and ordering content in web design', 'summary': 'Discusses the process of styling and ordering content in web design, covering aspects such as setting widths, adding padding, and reversing the order of elements for improved customization and presentation.', 'duration': 301.05, 'highlights': ["The process involves setting width to 50%, wrapping content in a div, and adding a class name 'content' with a 30-pixel gap for an image.", 'Adjusting padding to 50 pixels at the top and bottom, and 30 pixels for left and right, to improve the layout.', "Reversing the order of elements by using CSS properties, such as 'order' and 'direction', to achieve the desired layout presentation."]}], 'duration': 1477.795, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw8734772.jpg', 'highlights': ['Implementing CSS properties like display flex and padding to improve the layout and appearance of the header design.', "The use of flexbox layout and CSS properties like 'align-items' and 'text-align' is shown to create responsive and visually appealing web page designs.", 'Setting a maximum width of 1450 pixels to prevent stretching on larger screens, ensuring a consistent design.', "Reversing the order of elements by using CSS properties, such as 'order' and 'direction', to achieve the desired layout presentation."]}, {'end': 12514.259, 'segs': [{'end': 10306.603, 'src': 'embed', 'start': 10212.567, 'weight': 8, 'content': [{'end': 10225.202, 'text': "okay, yes, i think i think i'm not sure what it does, what it looks better, but Okay, this doesn't looks great.", 'start': 10212.567, 'duration': 12.635}, {'end': 10227.423, 'text': "Okay, so let's just do something.", 'start': 10225.943, 'duration': 1.48}, {'end': 10234.067, 'text': "Let's just make our screen smaller.", 'start': 10230.825, 'duration': 3.242}, {'end': 10239.529, 'text': "And what I'm going to do is to make the images a little bit bigger.", 'start': 10235.307, 'duration': 4.222}, {'end': 10250.355, 'text': 'Okay So now, okay, I think this looks a bit better.', 'start': 10239.629, 'duration': 10.726}, {'end': 10267.512, 'text': "Okay, and I think I want to do the same for the header because now I don't really like how it looks.", 'start': 10261.542, 'duration': 5.97}, {'end': 10286.014, 'text': "So in the header, I'm just gonna open the header component, okay? I'm just gonna open it.", 'start': 10280.191, 'duration': 5.823}, {'end': 10292.196, 'text': "I'm just going to say, right, I want to wrap the whole thing in a div.", 'start': 10286.174, 'duration': 6.022}, {'end': 10306.603, 'text': "And now here, when I'm in a header, I'm just gonna do it like this, okay? This is not the best way of doing it, but it's fine for now.", 'start': 10299.02, 'duration': 7.583}], 'summary': 'Adjusting screen and image sizes to improve visual appearance.', 'duration': 94.036, 'max_score': 10212.567, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw10212567.jpg'}, {'end': 11065.428, 'src': 'embed', 'start': 11008.188, 'weight': 7, 'content': [{'end': 11021.013, 'text': "What I've been doing is font size 35 pixels, 38 pixels, then color white, I transform it and put it in uppercase.", 'start': 11008.188, 'duration': 12.825}, {'end': 11036.338, 'text': "And then I added a bold shadow just to make everything more visible, okay? So let's go here and just add all of these styles.", 'start': 11021.533, 'duration': 14.805}, {'end': 11065.428, 'text': 'Okay So we have now the homepage, we have the about us and we have the events page.', 'start': 11042.445, 'duration': 22.983}], 'summary': 'Styling text with font size 35px, 38px, white color, uppercase, and bold shadow for homepage, about us, and events page.', 'duration': 57.24, 'max_score': 11008.188, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw11008188.jpg'}, {'end': 11145.03, 'src': 'embed', 'start': 11108.583, 'weight': 6, 'content': [{'end': 11115.364, 'text': "So we need to add effects to it, but we'll do it once that we finish like styling all our page, okay?", 'start': 11108.583, 'duration': 6.781}, {'end': 11125.106, 'text': "So let's start by bringing all of this into its own component that we can add within the events folder that we already created.", 'start': 11116.184, 'duration': 8.922}, {'end': 11132.278, 'text': "okay?. So Let's just go here and let's go to the components folder.", 'start': 11125.106, 'duration': 7.172}, {'end': 11145.03, 'text': "And I'm going to add a new, no, no folders, no more folders, just a new file that is event card.", 'start': 11132.298, 'duration': 12.732}], 'summary': "Creating a new component 'event card' within the events folder.", 'duration': 36.447, 'max_score': 11108.583, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw11108583.jpg'}, {'end': 11343.077, 'src': 'embed', 'start': 11308.385, 'weight': 4, 'content': [{'end': 11323.209, 'text': 'Okay And I created a specific component for this class because I really like to have everything really organized.', 'start': 11308.385, 'duration': 14.824}, {'end': 11329.57, 'text': 'Like if this is a class, this is a card, this is an atom, this should be in its own component.', 'start': 11323.509, 'duration': 6.061}, {'end': 11336.392, 'text': 'So, but nevertheless, I mean, our application is quite small.', 'start': 11331.868, 'duration': 4.524}, {'end': 11339.534, 'text': "I don't want this tutorial to be super, super long.", 'start': 11336.412, 'duration': 3.122}, {'end': 11343.077, 'text': "So for that reason, I'm going to remove this one.", 'start': 11340.235, 'duration': 2.842}], 'summary': 'Created specific components for class organization in a small application. removing unnecessary component to keep tutorial concise.', 'duration': 34.692, 'max_score': 11308.385, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw11308385.jpg'}, {'end': 11755.883, 'src': 'embed', 'start': 11720, 'weight': 5, 'content': [{'end': 11726.243, 'text': 'events in London, events in San Francisco, events in Barcelona and the homepage versus clicking San Francisco.', 'start': 11720, 'duration': 6.243}, {'end': 11728.745, 'text': 'it takes us to this beautiful play a page.', 'start': 11726.243, 'duration': 2.502}, {'end': 11733.427, 'text': 'And when we click in one, it takes us to this to the single event.', 'start': 11729.685, 'duration': 3.742}, {'end': 11739.511, 'text': 'I think this is Good, I think this is okay for us, for this tutorial is definitely okay.', 'start': 11734.187, 'duration': 5.324}, {'end': 11755.883, 'text': "So, something else that we need to add now to this page, I'm just going to quickly do this, and is to add a button, no, an input type email.", 'start': 11740.011, 'duration': 15.872}], 'summary': 'Tutorial includes adding events in london, san francisco, barcelona, and a homepage; also adds an input type email.', 'duration': 35.883, 'max_score': 11720, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw11720000.jpg'}, {'end': 11805.032, 'src': 'embed', 'start': 11774.277, 'weight': 3, 'content': [{'end': 11781.703, 'text': 'which is build the API and interact with an internal API that we are going to have within our project.', 'start': 11774.277, 'duration': 7.426}, {'end': 11786.907, 'text': "okay?. So let's just recap what we just done.", 'start': 11781.703, 'duration': 5.204}, {'end': 11789.289, 'text': 'We just added styles.', 'start': 11787.347, 'duration': 1.942}, {'end': 11795.446, 'text': 'we added to this Sass file.', 'start': 11789.289, 'duration': 6.157}, {'end': 11800.949, 'text': 'we could add the styles in different ways, like CSS modules, emotions, style components,', 'start': 11795.446, 'duration': 5.503}, {'end': 11805.032, 'text': 'but we decided to go for a simple option just adding all the styles here.', 'start': 11800.949, 'duration': 4.083}], 'summary': 'Built an api and added styles to the sass file.', 'duration': 30.755, 'max_score': 11774.277, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw11774277.jpg'}, {'end': 12120.835, 'src': 'embed', 'start': 12090.191, 'weight': 2, 'content': [{'end': 12096.314, 'text': "So here it's telling us API routes provide a solution to build your API with Next.js.", 'start': 12090.191, 'duration': 6.123}, {'end': 12107.3, 'text': 'So any file inside the folder pages API is mapped to API and will be treated as an API endpoint instead of a page.', 'start': 12097.575, 'duration': 9.725}, {'end': 12112.863, 'text': "They are server-side only bundles and won't increase your client-side bundle size.", 'start': 12108.06, 'duration': 4.803}, {'end': 12119.086, 'text': "Okay So let's just go to our project, to our repo and go to pages.", 'start': 12113.043, 'duration': 6.043}, {'end': 12120.835, 'text': 'Here it is.', 'start': 12120.094, 'duration': 0.741}], 'summary': 'Api routes in next.js map files in pages api to server-side api endpoints, not pages.', 'duration': 30.644, 'max_score': 12090.191, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw12090191.jpg'}, {'end': 12342.387, 'src': 'embed', 'start': 12313.589, 'weight': 0, 'content': [{'end': 12324.054, 'text': 'So when the user clicking submit, we are going to have a post request And so we are going to create an API endpoint for that.', 'start': 12313.589, 'duration': 10.465}, {'end': 12334.842, 'text': 'So the user clicks in submit, we create a post request, and we are going to update our JSON file and add the new email.', 'start': 12324.074, 'duration': 10.768}, {'end': 12342.387, 'text': 'So things that we need to consider is each email needs to be added to its right event, right?', 'start': 12335.602, 'duration': 6.785}], 'summary': 'Creating a post request on user submit to update json file with new email.', 'duration': 28.798, 'max_score': 12313.589, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw12313589.jpg'}, {'end': 12466.878, 'src': 'embed', 'start': 12435.05, 'weight': 1, 'content': [{'end': 12442.394, 'text': 'When the request hits our API, we extract that data from the request and store it in a database.', 'start': 12435.05, 'duration': 7.344}, {'end': 12446.657, 'text': 'Okay, so I want to send an HTTP request with JavaScript.', 'start': 12443.735, 'duration': 2.922}, {'end': 12454.962, 'text': 'When the request hits our API, we extract that data from the request and store it in a database.', 'start': 12447.177, 'duration': 7.785}, {'end': 12459.064, 'text': 'We can send the request to our API root.', 'start': 12455.962, 'duration': 3.102}, {'end': 12466.878, 'text': 'And then in the API root here, we connect to our database, this file here.', 'start': 12460.816, 'duration': 6.062}], 'summary': 'Data from http request is stored in database through api.', 'duration': 31.828, 'max_score': 12435.05, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw12435050.jpg'}], 'start': 10212.567, 'title': 'Ui design and api integration', 'summary': 'Covers topics such as improving screen and image display, website design and styling, creating category events ui, building ui and preparing for api, and understanding next.js api. it involves modifications for better visual appeal, css properties, layout adjustments, flexbox layout, api integration, and practical examples.', 'chapters': [{'end': 10306.603, 'start': 10212.567, 'title': 'Improving screen and image display', 'summary': 'Discusses making the screen smaller, increasing image size, and modifying the header component for better visual appeal.', 'duration': 94.036, 'highlights': ['Modifying header component for better visual appeal by wrapping it in a div and adjusting the layout.', 'Increasing image size to improve visual appearance.', 'Making the screen smaller to enhance display aesthetics.']}, {'end': 11145.03, 'start': 10311.069, 'title': 'Website design and styling', 'summary': 'Involves designing and styling a website with sections like homepage, about us, and events page, as well as implementing various css properties and layout adjustments.', 'duration': 833.961, 'highlights': ['Implementing CSS properties and layout adjustments for homepage, about us, and events page. The speaker discusses making changes to the design and layout of the homepage, about us page, and events page, including adjustments to the footer, text styles, and overall appearance.', 'Utilizing CSS to enhance the appearance of different sections of the website. The speaker demonstrates the use of CSS properties like minimal height, text size, flex layout, and color to improve the appearance of various sections on the website.', "Creating a new component for event card and integrating it within the events page. The speaker explains the process of creating a new component called 'event card' and integrating it within the events page to display images and text effectively."]}, {'end': 11739.511, 'start': 11149.073, 'title': 'Creating category events ui', 'summary': 'Involves creating a ui for category events, including flexbox layout, component organization, and event display, with a focus on simplicity and functionality.', 'duration': 590.438, 'highlights': ['The chapter involves creating a UI for category events, including flexbox layout, component organization, and event display, with a focus on simplicity and functionality.', 'The UI design aims to display events in London, San Francisco, Barcelona, and a house party, with a focus on simplicity and functionality.', 'The tutorial emphasizes the importance of organizing components into smaller components and follows the React component structure for efficient development.']}, {'end': 12023.491, 'start': 11740.011, 'title': 'Building ui and preparing for api', 'summary': 'Discusses the process of building the ui, including adding styles, creating components for header, footer, and page content, and preparing for api integration, while also addressing ui issues such as padding and flexbox alignment.', 'duration': 283.48, 'highlights': ['The chapter discusses the process of building the UI, including adding styles, creating components for header, footer, and page content. Building the UI involves adding styles, creating components for header, footer, and page content.', 'Preparing for API integration is a key focus, with plans to interact with an internal API within the project. Preparing for API integration is a key focus, with plans to interact with an internal API within the project.', 'Addressing UI issues such as padding and flexbox alignment is mentioned as part of the process. Addressing UI issues such as padding and flexbox alignment is mentioned as part of the process.']}, {'end': 12514.259, 'start': 12024.031, 'title': 'Understanding next.js api', 'summary': 'Discusses the concept of apis, how to create api routes with next.js, and the process of sending http requests and storing data in a database with javascript, emphasizing the importance of understanding apis and providing practical examples.', 'duration': 490.228, 'highlights': ['API stands for Application Programming Interface, allowing software to interact with other software. It allows software to interact with other software, serving as an important concept to understand.', 'Next.js allows us to build an API without having to build a separate project just by having the API folder within our pages. Next.js simplifies the process of building an API by having the API folder within the pages, eliminating the need for a separate project.', 'Creating an API endpoint for handling post requests and updating the JSON file with new data, considering error handling and duplicate email prevention. The process involves creating an API endpoint to handle post requests, update the JSON file with new data, and implement error handling and duplicate email prevention.', 'Sending an HTTP request with JavaScript to send data to the server, extract the data from the request, and store it in the database. The process includes sending an HTTP request with JavaScript, extracting data from the request, and storing it in the database.', 'Emphasizing the importance of understanding APIs and providing practical examples for creating and interacting with API routes using Next.js. The chapter emphasizes the importance of understanding APIs and provides practical examples for creating and interacting with API routes using Next.js.']}], 'duration': 2301.692, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw10212567.jpg', 'highlights': ['Creating an API endpoint for handling post requests and updating the JSON file with new data, considering error handling and duplicate email prevention.', 'The process involves sending an HTTP request with JavaScript, extracting data from the request, and storing it in the database.', 'The chapter emphasizes the importance of understanding APIs and provides practical examples for creating and interacting with API routes using Next.js.', 'Preparing for API integration is a key focus, with plans to interact with an internal API within the project.', 'The tutorial emphasizes the importance of organizing components into smaller components and follows the React component structure for efficient development.', 'The UI design aims to display events in London, San Francisco, Barcelona, and a house party, with a focus on simplicity and functionality.', 'Creating a new component for event card and integrating it within the events page.', 'Implementing CSS properties and layout adjustments for homepage, about us, and events page.', 'Modifying header component for better visual appeal by wrapping it in a div and adjusting the layout.', 'Increasing image size to improve visual appearance.', 'Making the screen smaller to enhance display aesthetics.']}, {'end': 14164.662, 'segs': [{'end': 12597.678, 'src': 'embed', 'start': 12514.259, 'weight': 0, 'content': [{'end': 12524.475, 'text': 'but In most cases you will have credentials in the database and if you send data from the client directly to the database,', 'start': 12514.259, 'duration': 10.216}, {'end': 12526.556, 'text': 'you will be exposing these credentials.', 'start': 12524.475, 'duration': 2.081}, {'end': 12536.141, 'text': "And before we continue, let's just make this properly and add some styles to it.", 'start': 12528.357, 'duration': 7.784}, {'end': 12542.304, 'text': "So I'm going to close some slides.", 'start': 12540.303, 'duration': 2.001}, {'end': 12544.807, 'text': "We don't need this.", 'start': 12543.946, 'duration': 0.861}, {'end': 12546.748, 'text': "Let's just leave here the JSON.", 'start': 12545.267, 'duration': 1.481}, {'end': 12550.691, 'text': "So we're going to create a form.", 'start': 12547.349, 'duration': 3.342}, {'end': 12555.475, 'text': 'And within the form, we are going to move all of this within the form.', 'start': 12552.332, 'duration': 3.143}, {'end': 12566.563, 'text': 'So now we are going to, like I said, like the ID is email.', 'start': 12557.156, 'duration': 9.407}, {'end': 12579.71, 'text': 'Placeholder is please insert your email here.', 'start': 12571.647, 'duration': 8.063}, {'end': 12582.792, 'text': "Yeah, let's just leave it here for a moment.", 'start': 12581.091, 'duration': 1.701}, {'end': 12588.094, 'text': 'And in the button, this is fine.', 'start': 12583.192, 'duration': 4.902}, {'end': 12590.715, 'text': 'We can add here, type button if we want.', 'start': 12588.154, 'duration': 2.561}, {'end': 12597.678, 'text': 'And in the onForm is where we are going to, we need to add the onSubmit.', 'start': 12592.776, 'duration': 4.902}], 'summary': 'Transcript covers database security and form creation with javascript.', 'duration': 83.419, 'max_score': 12514.259, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw12514259.jpg'}, {'end': 12990.28, 'src': 'embed', 'start': 12915.39, 'weight': 2, 'content': [{'end': 12918.152, 'text': "I'm going to come, I'm going to add label, just as it is.", 'start': 12915.39, 'duration': 2.762}, {'end': 12920.334, 'text': 'Save it.', 'start': 12919.894, 'duration': 0.44}, {'end': 12921.935, 'text': 'Come back.', 'start': 12921.475, 'duration': 0.46}, {'end': 12923.937, 'text': 'Here we have it.', 'start': 12923.296, 'duration': 0.641}, {'end': 12927.56, 'text': "Okay Let's add the styles to the button.", 'start': 12924.477, 'duration': 3.083}, {'end': 12931.943, 'text': "So I'm just going to add button.", 'start': 12930.142, 'duration': 1.801}, {'end': 12934.646, 'text': 'All of these should really have class names, but.', 'start': 12932.384, 'duration': 2.262}, {'end': 12938.424, 'text': 'Our website is quite simple at the moment.', 'start': 12935.382, 'duration': 3.042}, {'end': 12940.164, 'text': "So let's just leave it like this.", 'start': 12938.484, 'duration': 1.68}, {'end': 12941.445, 'text': 'Cool Okay.', 'start': 12940.765, 'duration': 0.68}, {'end': 12945.167, 'text': "So again, let's have the styles here.", 'start': 12941.885, 'duration': 3.282}, {'end': 12949.889, 'text': "So we're going to start for border radius, I want it to be the same.", 'start': 12946.368, 'duration': 3.521}, {'end': 12952.731, 'text': 'And then a height, the same.', 'start': 12950.81, 'duration': 1.921}, {'end': 12955.012, 'text': 'Mean width.', 'start': 12954.372, 'duration': 0.64}, {'end': 12969.826, 'text': "Okay This is going to be like, for example, Okay, border none, we don't want any border.", 'start': 12961.195, 'duration': 8.631}, {'end': 12975.75, 'text': 'And then we want the font size to be 16 pixels as well.', 'start': 12970.086, 'duration': 5.664}, {'end': 12981.794, 'text': 'Text transform, uppercase, we want everything in uppercase.', 'start': 12976.23, 'duration': 5.564}, {'end': 12990.28, 'text': "And then margin left, let's just add 16 pixels.", 'start': 12983.115, 'duration': 7.165}], 'summary': 'Adding button styles with border radius, height, width, font size, and text transform.', 'duration': 74.89, 'max_score': 12915.39, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw12915390.jpg'}, {'end': 13069.861, 'src': 'embed', 'start': 13029.335, 'weight': 5, 'content': [{'end': 13035.458, 'text': 'I choose the selector and then I come to any part of the page and I just select the color that I want.', 'start': 13029.335, 'duration': 6.123}, {'end': 13038.3, 'text': 'In this case, I want to select this green.', 'start': 13035.858, 'duration': 2.442}, {'end': 13044.583, 'text': "Okay And yeah, I'm just going to leave this green.", 'start': 13040.401, 'duration': 4.182}, {'end': 13046.304, 'text': "It's a bit too clear actually.", 'start': 13044.623, 'duration': 1.681}, {'end': 13049.685, 'text': 'Maybe we can select like a darker version.', 'start': 13046.344, 'duration': 3.341}, {'end': 13059.555, 'text': 'Or to be fair, Maybe a border.', 'start': 13053.227, 'duration': 6.328}, {'end': 13065.899, 'text': 'I do the same here.', 'start': 13064.758, 'duration': 1.141}, {'end': 13068.72, 'text': 'Red, but then this is not going to be red.', 'start': 13066.119, 'duration': 2.601}, {'end': 13069.861, 'text': "I'm going to change this.", 'start': 13068.78, 'duration': 1.081}], 'summary': 'User selects and adjusts colors on a page for design purposes.', 'duration': 40.526, 'max_score': 13029.335, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw13029335.jpg'}, {'end': 13241.72, 'src': 'embed', 'start': 13201.317, 'weight': 6, 'content': [{'end': 13206.261, 'text': "Okay So now that we have the UI already, let's start by creating our API.", 'start': 13201.317, 'duration': 4.944}, {'end': 13218.851, 'text': 'We are going to come here to the API folder and we are going to create a new page that is going to be email registration.', 'start': 13207.782, 'duration': 11.069}, {'end': 13228.033, 'text': 'Okay So we need to export a function as default.', 'start': 13223.795, 'duration': 4.238}, {'end': 13233.796, 'text': "So let's just start by export default.", 'start': 13228.193, 'duration': 5.603}, {'end': 13241.72, 'text': "She's a handler, let's just call it like this, that has two props.", 'start': 13237.317, 'duration': 4.403}], 'summary': 'Creating an api for email registration with a default function and handler with two props.', 'duration': 40.403, 'max_score': 13201.317, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw13201317.jpg'}, {'end': 13572.091, 'src': 'embed', 'start': 13538.871, 'weight': 7, 'content': [{'end': 13540.012, 'text': "Let's just keep it here.", 'start': 13538.871, 'duration': 1.141}, {'end': 13547.956, 'text': 'Value And now, what we need is to identify the event ID.', 'start': 13540.312, 'duration': 7.644}, {'end': 13550.237, 'text': "And to do that, I'm going to use another hook.", 'start': 13548.156, 'duration': 2.081}, {'end': 13553.819, 'text': 'So const Router equal useRouter.', 'start': 13550.737, 'duration': 3.082}, {'end': 13557.121, 'text': 'And this is a NestJS hook.', 'start': 13553.859, 'duration': 3.262}, {'end': 13561.003, 'text': 'Okay So.', 'start': 13559.482, 'duration': 1.521}, {'end': 13566.167, 'text': "Let's just select this option so it gets imported automatically.", 'start': 13562.864, 'duration': 3.303}, {'end': 13572.091, 'text': 'And now we are going to be able to get inside our page, the router page.', 'start': 13566.807, 'duration': 5.284}], 'summary': 'Using nestjs hook to identify event id for router page.', 'duration': 33.22, 'max_score': 13538.871, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw13538871.jpg'}, {'end': 13854.3, 'src': 'embed', 'start': 13771.745, 'weight': 8, 'content': [{'end': 13782.072, 'text': 'If the status is 200, if everything is good, then send a JSON response with a message like this message.', 'start': 13771.745, 'duration': 10.327}, {'end': 13796.448, 'text': "Um, you, let's say you has been registered successfully with the email and we will have to pass here the email.", 'start': 13784.558, 'duration': 11.89}, {'end': 13805.975, 'text': 'Okay So for now, so this is if we do a post request and the response status is 200, this is what we do.', 'start': 13796.488, 'duration': 9.487}, {'end': 13812.761, 'text': "Okay From here, I'm just going to go ahead and say const email and event ID.", 'start': 13806.356, 'duration': 6.405}, {'end': 13819.578, 'text': 'And this is going to be request.body.', 'start': 13816.757, 'duration': 2.821}, {'end': 13825.241, 'text': 'Okay And yes.', 'start': 13819.618, 'duration': 5.623}, {'end': 13830.283, 'text': "Okay So let's do a post fetch request and test that this is working.", 'start': 13825.381, 'duration': 4.902}, {'end': 13836.686, 'text': "Okay So here in try, I'm going to say const response.", 'start': 13830.383, 'duration': 6.303}, {'end': 13840.848, 'text': "Let's just type the word like this.", 'start': 13838.407, 'duration': 2.441}, {'end': 13842.668, 'text': 'Await Okay.', 'start': 13841.088, 'duration': 1.58}, {'end': 13844.029, 'text': 'Because these are asynchronous.', 'start': 13842.688, 'duration': 1.341}, {'end': 13848.477, 'text': "function we are fetching, so it's asynchronous.", 'start': 13845.736, 'duration': 2.741}, {'end': 13854.3, 'text': 'And then this is API and email registration.', 'start': 13849.017, 'duration': 5.283}], 'summary': 'If status is 200, send json response confirming successful registration with email.', 'duration': 82.555, 'max_score': 13771.745, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw13771745.jpg'}, {'end': 14076.681, 'src': 'embed', 'start': 14035.087, 'weight': 11, 'content': [{'end': 14051.391, 'text': "So throw So throw new error and then let's say error.", 'start': 14035.087, 'duration': 16.304}, {'end': 14053.972, 'text': 'And then we say response.status.', 'start': 14051.591, 'duration': 2.381}, {'end': 14055.993, 'text': 'Okay This is in case something is going wrong.', 'start': 14054.052, 'duration': 1.941}, {'end': 14057.974, 'text': 'So we can see that.', 'start': 14056.393, 'duration': 1.581}, {'end': 14061.916, 'text': 'So we can throw an error and this will catch it here.', 'start': 14059.275, 'duration': 2.641}, {'end': 14076.681, 'text': 'Okay So now we have the data and We have the email registration, we have our request, our endpoint returning a JSON.', 'start': 14062.977, 'duration': 13.704}], 'summary': 'Code includes error handling and returns json data.', 'duration': 41.594, 'max_score': 14035.087, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw14035087.jpg'}], 'start': 12514.259, 'title': 'Web form development', 'summary': 'Covers securing client data, creating forms, styling form inputs and buttons for user experience, creating an api for email registration, and implementing ascent function and post fetch request for email registration, with a focus on specific attributes, mobile responsiveness, visual aesthetics, and error handling.', 'chapters': [{'end': 12635.906, 'start': 12514.259, 'title': 'Client data security and form creation', 'summary': 'Discusses the importance of securing credentials when sending client data to the database and the process of creating a form with specific attributes and functions.', 'duration': 121.647, 'highlights': ['The importance of securing credentials when sending client data to the database is emphasized, to prevent exposure of sensitive information.', 'The process of creating a form is detailed, including specific attributes such as ID and placeholder, and functions like onSubmit.', 'Adding styles and class names to the form is mentioned as part of the form creation process.']}, {'end': 13201.257, 'start': 12635.906, 'title': 'Styling form and button', 'summary': 'Covers the process of styling form inputs and buttons, including setting specific dimensions, colors, and styles to enhance user experience, with a focus on mobile responsiveness and visual aesthetics.', 'duration': 565.351, 'highlights': ['The form inputs are styled with specific dimensions and attributes, such as height, width, border radius, and font size, to ensure a user-friendly interface, with a focus on mobile responsiveness. Form inputs are set to have a height of 40 pixels, width of 200 pixels, border radius of 5 pixels, and font size of 16 pixels, emphasizing the importance of mobile design and responsiveness.', 'The button is styled with specific attributes, including border radius, height, width, font size, and text transform, to create a visually appealing and interactive design. The button is styled with a border radius, height, width, font size of 16 pixels, and text transform set to uppercase, with a focus on creating an interactive and visually appealing design.', 'The process of selecting colors for the background and text of the button is detailed, showcasing the use of specific techniques to achieve the desired visual effect. The technique of selecting colors for the button background and text is described, including using a specific method to choose colors and ensuring the visual effect aligns with the desired design.']}, {'end': 13642.956, 'start': 13201.317, 'title': 'Creating api for email registration', 'summary': 'Discusses the process of creating an api for email registration, including handling multiple http methods, adding functionality in the client, and using react hooks like useref and userouter.', 'duration': 441.639, 'highlights': ['The process of creating an API for email registration is explained, including handling multiple HTTP methods and adding logic for the post method. Handling multiple HTTP methods, adding logic for the post method', 'The functionality in the client is explored, including using React hooks like useRef and implementing onSubmit function. Using React hooks like useRef, implementing onSubmit function', 'The usage of useRouter hook and identifying the event ID is demonstrated. Usage of useRouter hook, identifying the event ID']}, {'end': 14164.662, 'start': 13644.337, 'title': 'Ascent function and post fetch request', 'summary': 'Covers the implementation of an ascent function and a post fetch request for email registration, including specifying the endpoint, sending a json response, and handling response status codes, with an emphasis on error handling and data retrieval.', 'duration': 520.325, 'highlights': ['Implementing ascent function and post fetch request for email registration The chapter focuses on implementing an ascent function and a post fetch request for email registration, with an emphasis on specifying the endpoint, sending a JSON response, and handling response status codes.', 'Specifying endpoint and sending a JSON response The process involves specifying the endpoint for the API email registration and sending a JSON response with the email value and event ID in the body of the fetch request.', 'Handling response status codes and error logging The chapter emphasizes handling the response status codes, such as sending a JSON response with a success message if the status is 200, and utilizing console.log for error logging.', 'Implementing error handling and data retrieval The chapter covers implementing error handling by throwing an error if the response is not okay and retrieving data using the JSON method from the response.']}], 'duration': 1650.403, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw12514259.jpg', 'highlights': ['The chapter emphasizes the importance of securing credentials when sending client data to the database to prevent exposure of sensitive information.', 'The process of creating a form is detailed, including specific attributes such as ID and placeholder, and functions like onSubmit.', 'Adding styles and class names to the form is mentioned as part of the form creation process.', 'The form inputs are styled with specific dimensions and attributes, such as height, width, border radius, and font size, to ensure a user-friendly interface, with a focus on mobile responsiveness.', 'The button is styled with specific attributes, including border radius, height, width, font size, and text transform, to create a visually appealing and interactive design.', 'The process of selecting colors for the background and text of the button is detailed, showcasing the use of specific techniques to achieve the desired visual effect.', 'The chapter covers creating an API for email registration, handling multiple HTTP methods, adding logic for the post method, and exploring functionality in the client using React hooks like useRef and implementing onSubmit function.', 'The usage of useRouter hook and identifying the event ID is demonstrated.', 'The chapter focuses on implementing an ascent function and a post fetch request for email registration, with an emphasis on specifying the endpoint, sending a JSON response, and handling response status codes.', 'The process involves specifying the endpoint for the API email registration and sending a JSON response with the email value and event ID in the body of the fetch request.', 'The chapter emphasizes handling the response status codes, such as sending a JSON response with a success message if the status is 200, and utilizing console.log for error logging.', 'The chapter covers implementing error handling by throwing an error if the response is not okay and retrieving data using the JSON method from the response.']}, {'end': 15122.36, 'segs': [{'end': 14220.718, 'src': 'embed', 'start': 14165.863, 'weight': 0, 'content': [{'end': 14173.51, 'text': 'And you can, I believe you can actually add the right type to the button, which is submit, and this should work.', 'start': 14165.863, 'duration': 7.647}, {'end': 14175.052, 'text': 'Yes, this is working.', 'start': 14174.071, 'duration': 0.981}, {'end': 14178.375, 'text': "Okay, so as we can see here, let's just clean this.", 'start': 14175.512, 'duration': 2.863}, {'end': 14185.446, 'text': 'We have been registered successfully, which is not true, but our message is coming through.', 'start': 14179.382, 'duration': 6.064}, {'end': 14192.591, 'text': "And it's coming through with the right email that we have introduced and the ID of the page.", 'start': 14185.927, 'duration': 6.664}, {'end': 14205.98, 'text': 'So we have some things working good, okay? So from our single event, when we are submitting this form, now we can send this value to our API route.', 'start': 14193.131, 'duration': 12.849}, {'end': 14213.673, 'text': 'Our API route is going to accept this, extract it, and save it in our database.', 'start': 14207.088, 'duration': 6.585}, {'end': 14220.718, 'text': "So to do that, let's just write here everything that we need to do, okay? So I'm just going to do it outside the post.", 'start': 14214.674, 'duration': 6.044}], 'summary': 'Successfully registered button with submit type, sending data to api route and saving in database.', 'duration': 54.855, 'max_score': 14165.863, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw14165863.jpg'}, {'end': 14346.461, 'src': 'embed', 'start': 14266.212, 'weight': 2, 'content': [{'end': 14270.394, 'text': 'And then there we need to add the email.', 'start': 14266.212, 'duration': 4.182}, {'end': 14278.957, 'text': 'So add the email to this entry, emails register.', 'start': 14271.614, 'duration': 7.343}, {'end': 14283.178, 'text': 'Add email into this.', 'start': 14282.078, 'duration': 1.1}, {'end': 14289.741, 'text': 'So what we need to is write the write function.', 'start': 14283.218, 'duration': 6.523}, {'end': 14294.683, 'text': 'We need to write on our data.', 'start': 14290.921, 'duration': 3.762}, {'end': 14299.251, 'text': 'What else do we need to do?', 'start': 14296.189, 'duration': 3.062}, {'end': 14310.36, 'text': 'Access our data, extract our data, extract specifically all events, look through them and identify the event ID.', 'start': 14299.812, 'duration': 10.548}, {'end': 14313.623, 'text': 'add the email into the email register.', 'start': 14310.36, 'duration': 3.263}, {'end': 14317.065, 'text': 'write on our data.', 'start': 14313.623, 'duration': 3.442}, {'end': 14321.469, 'text': "This doesn't make sense.", 'start': 14317.085, 'duration': 4.384}, {'end': 14322.95, 'text': 'Something that we also need to do.', 'start': 14321.609, 'duration': 1.341}, {'end': 14336.934, 'text': 'we could add it here is, and the response should be 404 if there are no all events, okay, this could be a possibility,', 'start': 14322.95, 'duration': 13.984}, {'end': 14340.197, 'text': 'especially when you are interacting with external database.', 'start': 14336.934, 'duration': 3.263}, {'end': 14340.997, 'text': 'you can, you.', 'start': 14340.197, 'duration': 0.8}, {'end': 14346.461, 'text': "you always have to think about all possible errors or everything that can't go wrong.", 'start': 14340.997, 'duration': 5.464}], 'summary': 'Add email to entry, extract events and identify event id, handle errors', 'duration': 80.249, 'max_score': 14266.212, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw14266212.jpg'}, {'end': 14493.06, 'src': 'embed', 'start': 14462.682, 'weight': 3, 'content': [{'end': 14467.247, 'text': 'Okay, so first we need to get access to the current working directory.', 'start': 14462.682, 'duration': 4.565}, {'end': 14475.856, 'text': 'So get access to the root, okay? So we will say process.cwd, current working directory.', 'start': 14467.888, 'duration': 7.968}, {'end': 14479.08, 'text': 'Okay, so now we are in the root of the project.', 'start': 14476.617, 'duration': 2.463}, {'end': 14487.817, 'text': 'So if I open this again, if we are in the root of the project, the next thing that we have is the data folder, and then we have the data.json.', 'start': 14480.253, 'duration': 7.564}, {'end': 14493.06, 'text': 'So we need to add data, then comma, and data.json.', 'start': 14488.177, 'duration': 4.883}], 'summary': 'Access current working directory using process.cwd to navigate to root of project and locate data folder and data.json.', 'duration': 30.378, 'max_score': 14462.682, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw14462682.jpg'}, {'end': 14558.88, 'src': 'embed', 'start': 14523.593, 'weight': 4, 'content': [{'end': 14526.577, 'text': 'So let me just return the path like this.', 'start': 14523.593, 'duration': 2.984}, {'end': 14533.458, 'text': 'We also need to be able to update the file data.json.', 'start': 14528.936, 'duration': 4.522}, {'end': 14544.682, 'text': 'So to do that, there is something else we need to import, which is the module fs, so import fs from fs, just like this.', 'start': 14533.498, 'duration': 11.184}, {'end': 14548.964, 'text': 'And again, this comes kind of live by default.', 'start': 14545.543, 'duration': 3.421}, {'end': 14556.498, 'text': 'This module here allows us to read and overwrite the data of a file.', 'start': 14551.755, 'duration': 4.743}, {'end': 14558.88, 'text': 'So this is exactly what we need.', 'start': 14556.578, 'duration': 2.302}], 'summary': 'Import fs module to update file data.json.', 'duration': 35.287, 'max_score': 14523.593, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw14523593.jpg'}, {'end': 15050.938, 'src': 'embed', 'start': 15014.282, 'weight': 5, 'content': [{'end': 15020.724, 'text': 'And now we will add our new email, which is this one that comes from this request body, okay?', 'start': 15014.282, 'duration': 6.442}, {'end': 15034.011, 'text': 'And now, if this is not true, because this will loop through all the events, so when it finds the event ID, it will do this operation.', 'start': 15023.143, 'duration': 10.868}, {'end': 15039.074, 'text': 'If not, it will just return the event object without any transformation.', 'start': 15034.191, 'duration': 4.883}, {'end': 15044.731, 'text': 'Cool, okay.', 'start': 15044.09, 'duration': 0.641}, {'end': 15047.914, 'text': 'Now we need to overwrite our file.', 'start': 15045.251, 'duration': 2.663}, {'end': 15050.938, 'text': "So we'll use fs again.", 'start': 15048.515, 'duration': 2.423}], 'summary': 'Code adds new email, loops through events, and overwrites file using fs.', 'duration': 36.656, 'max_score': 15014.282, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw15014282.jpg'}], 'start': 14165.863, 'title': 'Form submission and data processing, file path building and data extraction, data transformation and file overwriting', 'summary': 'Discusses successful registration of a form, sending values to an api route, extracting and saving data in a database, building a path to access data files, extracting and parsing data from a file, restructuring data, validating email uniqueness, and overwriting a file in javascript.', 'chapters': [{'end': 14395.609, 'start': 14165.863, 'title': 'Form submission and data processing', 'summary': 'Discusses the successful registration of a form, sending values to an api route, extracting and saving data in a database, including the process of accessing, extracting, identifying event ids, adding emails, handling potential errors, and checking email format.', 'duration': 229.746, 'highlights': ['The form submission process successfully registers the message with the introduced email and page ID.', 'The API route accepts and extracts submitted values, then saves them in the database.', 'The process involves accessing the data file, extracting all events, identifying event IDs, and adding emails to the email register.', 'Handling potential errors is crucial, with a 404 response planned for cases where no events are found in the database.', 'A check for the email format is recommended as a final step in the process.']}, {'end': 14719.83, 'start': 14395.97, 'title': 'File path building and data extraction', 'summary': 'Discusses building a path to access data files using the join method in node.js with the process.cwd method and extracting and parsing data from a file using the fs module, with a focus on updating and manipulating the data objects.', 'duration': 323.86, 'highlights': ['Building file path using process.cwd and join method The process.cwd method is used to get the current working directory, and the join method is used to construct a path to access the data files, making it easier to access the data files.', 'Importing and using the fs module for reading and overwriting file data The fs module is imported and used to read and parse data from a file, allowing for the manipulation and updating of the data objects within the file.', "Function for extracting and parsing data from a file The function 'extract data' is created to extract and parse data from a file, enabling the manipulation and extraction of specific objects within the data for further processing."]}, {'end': 15122.36, 'start': 14719.87, 'title': 'Data transformation and file overwriting', 'summary': 'Covers the process of restructuring data, validating email uniqueness, and overwriting a file in javascript, highlighting the use of if statements, spread operators, and file system functions.', 'duration': 402.49, 'highlights': ["The process involves restructuring the 'all events' data by mapping through it, using if statements to validate event IDs and email uniqueness, and utilizing the spread operator to preserve existing data while adding new data.", "The code includes a check to set the response status to 404 and provide a JSON response if there is no data in 'all events', enhancing the reliability and error handling of the system.", 'The chapter demonstrates the use of fs.writeFileSync to overwrite the file with the restructured data, ensuring that the changes are saved and reflected in the file system.']}], 'duration': 956.497, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw14165863.jpg', 'highlights': ['The form submission process successfully registers the message with the introduced email and page ID.', 'The API route accepts and extracts submitted values, then saves them in the database.', 'The process involves accessing the data file, extracting all events, identifying event IDs, and adding emails to the email register.', 'Building file path using process.cwd and join method The process.cwd method is used to get the current working directory, and the join method is used to construct a path to access the data files, making it easier to access the data files.', 'Importing and using the fs module for reading and overwriting file data The fs module is imported and used to read and parse data from a file, allowing for the manipulation and updating of the data objects within the file.', "The process involves restructuring the 'all events' data by mapping through it, using if statements to validate event IDs and email uniqueness, and utilizing the spread operator to preserve existing data while adding new data.", 'The chapter demonstrates the use of fs.writeFileSync to overwrite the file with the restructured data, ensuring that the changes are saved and reflected in the file system.', 'Handling potential errors is crucial, with a 404 response planned for cases where no events are found in the database.']}, {'end': 16052.878, 'segs': [{'end': 15244.041, 'src': 'embed', 'start': 15172.25, 'weight': 0, 'content': [{'end': 15178.111, 'text': 'It says the path argument must be of type string, receive type function, anonymous.', 'start': 15172.25, 'duration': 5.861}, {'end': 15183.293, 'text': "Okay, so let's go to this bit and we say path join process.", 'start': 15178.211, 'duration': 5.082}, {'end': 15184.993, 'text': 'Okay, of course.', 'start': 15184.013, 'duration': 0.98}, {'end': 15186.673, 'text': 'So we are missing these brackets.', 'start': 15185.033, 'duration': 1.64}, {'end': 15193.235, 'text': "Okay, so we save this and let's see.", 'start': 15187.954, 'duration': 5.281}, {'end': 15198.173, 'text': "We're still running into errors, all events.", 'start': 15194.67, 'duration': 3.503}, {'end': 15202.818, 'text': 'Okay, so all events.', 'start': 15199.495, 'duration': 3.323}, {'end': 15207.903, 'text': 'Okay, so we are missing here a yes, right? Yes, so all events.', 'start': 15202.958, 'duration': 4.945}, {'end': 15212.287, 'text': 'And again, let me just double check.', 'start': 15209.364, 'duration': 2.923}, {'end': 15219.354, 'text': 'Make this a smaller, all events, okay.', 'start': 15215.79, 'duration': 3.564}, {'end': 15226.908, 'text': 'You know, okay, and yes, we are also missing here in an S in emails register.', 'start': 15220.063, 'duration': 6.845}, {'end': 15230.931, 'text': 'So that means that we are missing an S here as well.', 'start': 15227.849, 'duration': 3.082}, {'end': 15239.117, 'text': "Okay, so now let's say this, hopefully, haven't made any other mistake.", 'start': 15232.092, 'duration': 7.025}, {'end': 15242.019, 'text': "Cool, so now it's working.", 'start': 15240.458, 'duration': 1.561}, {'end': 15244.041, 'text': 'So we get here this message.', 'start': 15242.259, 'duration': 1.782}], 'summary': 'Fixing errors in code and successfully running the program.', 'duration': 71.791, 'max_score': 15172.25, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw15172250.jpg'}, {'end': 15359.667, 'src': 'embed', 'start': 15330.659, 'weight': 2, 'content': [{'end': 15334, 'text': "Let's have a look at why we are not seeing this response.", 'start': 15330.659, 'duration': 3.341}, {'end': 15346.845, 'text': "And first I'm gonna start by updating this because this should be a 401 error, okay? So we get a 401 error when response code already exists.", 'start': 15335.02, 'duration': 11.825}, {'end': 15350.305, 'text': 'Um, right.', 'start': 15348.324, 'duration': 1.981}, {'end': 15355.646, 'text': "Okay So I updated this as for the email register, but I didn't update it here.", 'start': 15350.405, 'duration': 5.241}, {'end': 15359.667, 'text': 'So this is a thing which is causing us an issue.', 'start': 15355.846, 'duration': 3.821}], 'summary': 'Identified issue: 401 error due to missing update for email register.', 'duration': 29.008, 'max_score': 15330.659, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw15330659.jpg'}, {'end': 15421.279, 'src': 'embed', 'start': 15394.441, 'weight': 3, 'content': [{'end': 15399.285, 'text': "So let's go up here, our list of things that we need to do.", 'start': 15394.441, 'duration': 4.844}, {'end': 15408.811, 'text': 'Okay, so we have access our data, we have extract our data, all events, we have sent a response 404 if there are not all events, good.', 'start': 15399.365, 'duration': 9.446}, {'end': 15413.094, 'text': 'Then all events, look through them, identify the event ID.', 'start': 15409.671, 'duration': 3.423}, {'end': 15417.497, 'text': "Yes, add the email into the email register, but only if the email doesn't exist.", 'start': 15413.294, 'duration': 4.203}, {'end': 15418.277, 'text': "That's good.", 'start': 15417.697, 'duration': 0.58}, {'end': 15421.279, 'text': "And then check the format of the email and it's okay.", 'start': 15418.818, 'duration': 2.461}], 'summary': 'Extract and process all events, add emails to register, and validate email format.', 'duration': 26.838, 'max_score': 15394.441, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw15394441.jpg'}, {'end': 15617.64, 'src': 'embed', 'start': 15568.306, 'weight': 4, 'content': [{'end': 15569.206, 'text': 'okay, cool.', 'start': 15568.306, 'duration': 0.9}, {'end': 15577.231, 'text': 'so then we can do something like if email value this email value here.', 'start': 15569.206, 'duration': 8.025}, {'end': 15594.096, 'text': "So if this email value doesn't match the value register we just created, then we are going to display some message to the user.", 'start': 15580.873, 'duration': 13.223}, {'end': 15603.018, 'text': 'And to display a message, what we can do is we can use a user state.', 'start': 15594.376, 'duration': 8.642}, {'end': 15609.499, 'text': 'This is a hook, a React hook.', 'start': 15604.038, 'duration': 5.461}, {'end': 15614.758, 'text': 'So we can say message and then set message.', 'start': 15609.955, 'duration': 4.803}, {'end': 15617.64, 'text': 'So this is a really handy hook.', 'start': 15615.739, 'duration': 1.901}], 'summary': "Using react hook to display message if email value doesn't match the register value.", 'duration': 49.334, 'max_score': 15568.306, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw15568306.jpg'}, {'end': 15840.008, 'src': 'embed', 'start': 15812.257, 'weight': 6, 'content': [{'end': 15816.44, 'text': 'Cool Okay, there are a couple more things that we can do to improve our app.', 'start': 15812.257, 'duration': 4.183}, {'end': 15822.084, 'text': "So for example, when we add an email, so let's just add another email.", 'start': 15816.84, 'duration': 5.244}, {'end': 15834.787, 'text': 'Okay, you have been registered successfully, but we know that because we have this console out here and we have the console open,', 'start': 15827.745, 'duration': 7.042}, {'end': 15836.307, 'text': "but the user doesn't know that.", 'start': 15834.787, 'duration': 1.52}, {'end': 15840.008, 'text': "The user doesn't have any feedback if this went through or not.", 'start': 15836.407, 'duration': 3.601}], 'summary': 'Improve app feedback for user on successful email registration.', 'duration': 27.751, 'max_score': 15812.257, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw15812257.jpg'}, {'end': 16027.111, 'src': 'embed', 'start': 16002.633, 'weight': 7, 'content': [{'end': 16010.979, 'text': 'In our component, we are hitting our API endpoint, which is this one, API and email registration with a POST request.', 'start': 16002.633, 'duration': 8.346}, {'end': 16018.745, 'text': 'We are sending in our body the email value and the event ID of this page, the page that we are on.', 'start': 16011.62, 'duration': 7.125}, {'end': 16027.111, 'text': 'Okay, We check that the response is okay before continuing and if the response is okay,', 'start': 16019.526, 'duration': 7.585}], 'summary': 'Component hitting api endpoint with post request for email registration and event id validation.', 'duration': 24.478, 'max_score': 16002.633, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw16002633.jpg'}], 'start': 15124.201, 'title': 'Code debugging, email optimization, and custom messages', 'summary': 'Involves debugging code for all events, optimizing the email registration process, and adding custom messages for email validation, resulting in successful code operation, registration process, and improved user experience.', 'chapters': [{'end': 15207.903, 'start': 15124.201, 'title': 'Debugging code for all events', 'summary': 'Involves debugging code for all events, including fixing a path argument error and adding a missing parameter, resulting in successful operation of the code.', 'duration': 83.702, 'highlights': ["Identifying and fixing path argument error by adding missing brackets to 'path.join' process, resolving the type function issue.", "Addressing missing parameter 'yes' in 'all events' operation, ensuring successful execution of the code."]}, {'end': 15495.786, 'start': 15209.364, 'title': 'Email registration process optimization', 'summary': 'Discusses the troubleshooting of an email registration process, including identifying errors, updating response codes, and ensuring proper email format, resulting in successful registration and error handling.', 'duration': 286.422, 'highlights': ['The response code is updated to 401 for email registration, resolving the issue of response code duplication.', 'The system is configured to send a 404 response if all events are not present, ensuring comprehensive event data access.', 'The process includes checking and ensuring the correct format of the email, emphasizing the importance of data integrity and error prevention.']}, {'end': 16052.878, 'start': 15495.786, 'title': 'Adding custom messages for email validation', 'summary': 'Shows how to add custom messages for email validation in a react application, including implementing email value checks, displaying error messages, and resetting input values, resulting in improved user experience and functionality.', 'duration': 557.092, 'highlights': ['Implemented custom message for email validation and displayed it when the email value does not match the register, resulting in improved user feedback and experience. Improved user experience', 'Utilized React hooks to set and display error messages for incorrect email format, enhancing user feedback and interaction with the application. Enhanced user feedback', 'Reset input value after successful email registration, improving user experience and providing visual confirmation of the registration status. Improved user experience', 'Outlined the process of hitting the API endpoint for email registration, including sending the email value and event ID, and checking the response status for successful registration. Described API endpoint process']}], 'duration': 928.677, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw15124201.jpg', 'highlights': ["Identified and fixed path argument error by adding missing brackets to 'path.join' process, resolving the type function issue.", "Addressed missing parameter 'yes' in 'all events' operation, ensuring successful execution of the code.", 'The response code is updated to 401 for email registration, resolving the issue of response code duplication.', 'The system is configured to send a 404 response if all events are not present, ensuring comprehensive event data access.', 'Implemented custom message for email validation and displayed it when the email value does not match the register, resulting in improved user feedback and experience.', 'Utilized React hooks to set and display error messages for incorrect email format, enhancing user feedback and interaction with the application.', 'Reset input value after successful email registration, improving user experience and providing visual confirmation of the registration status.', 'Outlined the process of hitting the API endpoint for email registration, including sending the email value and event ID, and checking the response status for successful registration.']}, {'end': 17248.409, 'segs': [{'end': 16128.616, 'src': 'embed', 'start': 16100.204, 'weight': 0, 'content': [{'end': 16106.089, 'text': "So to deploy this app, I'm going to use Verso because Verso and Nest are made by the same creator.", 'start': 16100.204, 'duration': 5.885}, {'end': 16107.69, 'text': "So it's an easy way of doing it.", 'start': 16106.149, 'duration': 1.541}, {'end': 16111.468, 'text': 'There are different services we can use to deploy NET.', 'start': 16108.567, 'duration': 2.901}, {'end': 16128.616, 'text': "We could use Heroku, like this one, or we could use AWS, I'm sure you know about this one, or Netlify, or any other service.", 'start': 16111.628, 'duration': 16.988}], 'summary': 'To deploy the app, verso or other services like heroku, aws, or netlify can be used.', 'duration': 28.412, 'max_score': 16100.204, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw16100204.jpg'}, {'end': 16192.382, 'src': 'embed', 'start': 16163.044, 'weight': 1, 'content': [{'end': 16170.329, 'text': "And for this, it's free to use, so you can go ahead and sign up.", 'start': 16163.044, 'duration': 7.285}, {'end': 16173.03, 'text': "So I'm going to sign up to this.", 'start': 16171.169, 'duration': 1.861}, {'end': 16177.553, 'text': 'You can sign up using GitHub, GitLab, or Bitbucket.', 'start': 16173.731, 'duration': 3.822}, {'end': 16183.456, 'text': 'The reason for this is because you can push your code to a remote repository and synchronize both things.', 'start': 16178.113, 'duration': 5.343}, {'end': 16192.382, 'text': 'So synchronize your GitHub with Verso, so you will be updating your website and deploying it automatically to Verso.', 'start': 16183.877, 'duration': 8.505}], 'summary': 'Free to use, sign up via github, gitlab, or bitbucket to push code to remote repository and synchronize with verso for automatic website deployment.', 'duration': 29.338, 'max_score': 16163.044, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw16163044.jpg'}, {'end': 16425.785, 'src': 'embed', 'start': 16398.899, 'weight': 2, 'content': [{'end': 16405.144, 'text': "Okay, so what I'm going to do is create a new repository on the command line, following these steps.", 'start': 16398.899, 'duration': 6.245}, {'end': 16409.096, 'text': 'So to do that, we need to have Git installed in our machine.', 'start': 16406.192, 'duration': 2.904}, {'end': 16411.659, 'text': 'And Git is a version control system.', 'start': 16409.155, 'duration': 2.504}, {'end': 16416.825, 'text': "If you don't have it installed, you need to go to Google and follow the steps.", 'start': 16412.159, 'duration': 4.666}, {'end': 16421.982, 'text': 'Okay, getting you started with Git.', 'start': 16419.92, 'duration': 2.062}, {'end': 16424.204, 'text': 'So this, just follow the steps.', 'start': 16422.101, 'duration': 2.103}, {'end': 16425.785, 'text': 'It should be quite straightforward.', 'start': 16424.304, 'duration': 1.481}], 'summary': 'Creating a new repository on the command line using git, a version control system, and providing instructions for installation and setup.', 'duration': 26.886, 'max_score': 16398.899, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw16398899.jpg'}, {'end': 16500.534, 'src': 'embed', 'start': 16461.679, 'weight': 3, 'content': [{'end': 16468.344, 'text': "So now, let's see if this is working, git status, yes, okay, this is showing us.", 'start': 16461.679, 'duration': 6.665}, {'end': 16486.808, 'text': 'project So now we can go back to GitHub, we can copy this URL, we can come here and say git remote at origin and paste the URL.', 'start': 16470.503, 'duration': 16.305}, {'end': 16491.927, 'text': "Okay It seems like it's working.", 'start': 16489.089, 'duration': 2.838}, {'end': 16500.534, 'text': 'What this is doing is linking up our local repo with our remote repo, the one that we just created.', 'start': 16491.987, 'duration': 8.547}], 'summary': 'Linking local repo to remote repo using git, successfully completed.', 'duration': 38.855, 'max_score': 16461.679, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw16461679.jpg'}, {'end': 16756.455, 'src': 'embed', 'start': 16715.571, 'weight': 4, 'content': [{'end': 16722.992, 'text': "Okay, so now that we have our project here, let's go back to Vercel and add our project.", 'start': 16715.571, 'duration': 7.421}, {'end': 16726.033, 'text': "And yeah, we didn't even need to reload the page.", 'start': 16723.613, 'duration': 2.42}, {'end': 16728.633, 'text': "It's already showing us our new repo.", 'start': 16726.233, 'duration': 2.4}, {'end': 16729.914, 'text': 'So we click in Import.', 'start': 16728.694, 'duration': 1.22}, {'end': 16746.731, 'text': "Okay, and there are some settings here, but I don't think we need to worry about that for our project.", 'start': 16738.166, 'duration': 8.565}, {'end': 16751.193, 'text': 'So we can click on Deploy, click on Deploy.', 'start': 16747.311, 'duration': 3.882}, {'end': 16756.455, 'text': 'Maybe we just need to wait a few minutes.', 'start': 16753.874, 'duration': 2.581}], 'summary': 'Deployed project on vercel without page reload, new repo shown, deployment in progress.', 'duration': 40.884, 'max_score': 16715.571, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw16715571.jpg'}, {'end': 16901.925, 'src': 'embed', 'start': 16861.135, 'weight': 5, 'content': [{'end': 16863.356, 'text': 'It was Read Only File System.', 'start': 16861.135, 'duration': 2.221}, {'end': 16867.762, 'text': 'Open Okay, read-only.', 'start': 16864.156, 'duration': 3.606}, {'end': 16876.626, 'text': 'So the data, our database is working because we can see all the data, but it seems like we cannot write on our database.', 'start': 16868.182, 'duration': 8.444}, {'end': 16879.928, 'text': "It says like it's read-only file system.", 'start': 16877.107, 'duration': 2.821}, {'end': 16887.412, 'text': 'So I think this is a great exercise for you to now go and dig in and see what is happening.', 'start': 16881.509, 'duration': 5.903}, {'end': 16901.925, 'text': "If we are probably missing some configuration here when we added our repo, and it's probably something gone wrong.", 'start': 16888.392, 'duration': 13.533}], 'summary': 'Database issue: read-only file system preventing write access, need to investigate for configuration errors.', 'duration': 40.79, 'max_score': 16861.135, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw16861135.jpg'}, {'end': 16939.776, 'src': 'embed', 'start': 16915.113, 'weight': 6, 'content': [{'end': 16925.519, 'text': 'but but i think you should go ahead and try to figure out what is happening here, why we are getting these 500 errors and how to solve this.', 'start': 16915.113, 'duration': 10.406}, {'end': 16930.55, 'text': 'Okay, so what other suggestions can you do?', 'start': 16926.627, 'duration': 3.923}, {'end': 16936.333, 'text': 'You could, for example, add more styles, make it look a little bit better.', 'start': 16931.31, 'duration': 5.023}, {'end': 16939.776, 'text': 'For example, here in the logo, it would be good if this is a link.', 'start': 16936.433, 'duration': 3.343}], 'summary': 'Troubleshoot 500 errors and improve design with more styles and logo as link.', 'duration': 24.663, 'max_score': 16915.113, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw16915113.jpg'}, {'end': 17098.486, 'src': 'embed', 'start': 17066.656, 'weight': 7, 'content': [{'end': 17071.977, 'text': "Something else that we haven't covered either was the head metadata.", 'start': 17066.656, 'duration': 5.321}, {'end': 17085.38, 'text': 'So when we inspect the page, you see this head, this section here, it would be better if we add a specific metadata per page.', 'start': 17071.997, 'duration': 13.383}, {'end': 17098.486, 'text': 'So at the moment we can see the title is Events app, but if we go to the About Us page and our title actually comes empty and in the rest comes empty,', 'start': 17085.6, 'duration': 12.886}], 'summary': 'Improve page metadata for better seo by adding specific metadata per page.', 'duration': 31.83, 'max_score': 17066.656, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw17066656.jpg'}, {'end': 17199.865, 'src': 'embed', 'start': 17168.506, 'weight': 8, 'content': [{'end': 17173.29, 'text': 'We learned how to do lots of things with Nest DS, at least the main things.', 'start': 17168.506, 'duration': 4.784}, {'end': 17181.396, 'text': 'I hope I was able to teach you how to start creating and how to start putting together an application in Nest DS.', 'start': 17173.97, 'duration': 7.426}, {'end': 17189.323, 'text': 'And from now, I hope you have all the skills to carry on to taking this application into the next level.', 'start': 17181.777, 'duration': 7.546}, {'end': 17192.984, 'text': 'keep adding more things and keep sharing them with me.', 'start': 17190.183, 'duration': 2.801}, {'end': 17199.865, 'text': 'And yes, I guess the next thing to say is I see you in my next video.', 'start': 17193.004, 'duration': 6.861}], 'summary': 'Learned main skills in nest ds, ready to take app to next level. see you in next video.', 'duration': 31.359, 'max_score': 17168.506, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw17168506.jpg'}, {'end': 17241.117, 'src': 'embed', 'start': 17214.528, 'weight': 9, 'content': [{'end': 17223.294, 'text': "And don't forget that this project, you can take it on your own, so you can put it into your own repo, to your own GitHub, and then just change it.", 'start': 17214.528, 'duration': 8.766}, {'end': 17228.758, 'text': 'And then if you need to present this for maybe a kind of interview process, feel free to do so.', 'start': 17223.354, 'duration': 5.404}, {'end': 17232.321, 'text': "This is your project, you have built it, so it's yours.", 'start': 17229.118, 'duration': 3.203}, {'end': 17241.117, 'text': 'If you liked this video, if I was able to teach you something, at least one thing, please give it a thumbs up and leave me a comment down below.', 'start': 17233.385, 'duration': 7.732}], 'summary': 'Encourages viewers to take ownership of the project and share it, and asks for feedback on the video.', 'duration': 26.589, 'max_score': 17214.528, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw17214528.jpg'}], 'start': 16053.398, 'title': 'Deploying and managing node.js apps', 'summary': 'Covers deploying a node.js app using verso, setting up git, troubleshooting deployment errors, and managing head metadata in nestjs. it emphasizes using verso for deployment, encountering issues with writing to the database, troubleshooting 500 errors, and improving website features and styles. it also discusses adding specific metadata per page and enhancing application functionality and styles.', 'chapters': [{'end': 16398.239, 'start': 16053.398, 'title': 'Deploying node.js app with verso', 'summary': 'Covers the deployment process of a node.js app using verso, including setting up accounts on github and verso and creating a new repository for the app, emphasizing the use of node.js and the ease of deployment with verso.', 'duration': 344.841, 'highlights': ['The tutorial emphasizes the use of Verso for deploying the app, highlighting its ease of use and integration with Node.js. Verso and Nest are made by the same creator, making it an easy way to deploy the app. The tutorial also mentions other services like Heroku, AWS, and Netlify for deploying Node.js apps.', 'The process of signing up and creating an account on Verso is detailed, including using GitHub for synchronization and creating a new repository for the app. The process includes signing up with GitHub, creating a new repository, and emphasizing the synchronization between GitHub and Verso for updating and deploying the website automatically.', 'Instructions for creating a new repository on GitHub and setting it up for deploying the app are provided. The tutorial explains the steps for creating a new repository on GitHub, including setting it as public and creating a README file.']}, {'end': 16887.412, 'start': 16398.899, 'title': 'Setting up git and deploying project', 'summary': 'Discusses setting up a local git repository, linking it with a remote repository on github, and deploying a project on vercel, demonstrating the process and encountering an issue with writing to the database.', 'duration': 488.513, 'highlights': ['The chapter discusses setting up a local Git repository and linking it with a remote repository on GitHub. It provides step-by-step instructions on initializing Git, adding a remote origin, staging changes, committing code, and pushing changes to the remote repository.', 'The process of deploying the project on Vercel is demonstrated, including importing the project, configuring settings, and waiting for deployment. It shows the steps of importing the project to Vercel, configuring settings, and observing the deployment process, emphasizing the simplicity and ease of the process.', 'An issue with a read-only file system is encountered while attempting to submit data, prompting further investigation. The problem of a read-only file system preventing data submission is identified, indicating the need for troubleshooting and problem-solving to resolve the issue.']}, {'end': 17065.615, 'start': 16888.392, 'title': 'Troubleshooting deployment errors and website improvements', 'summary': 'Covers troubleshooting deployment errors, including 500 errors, and suggests website improvements such as adding more styles, implementing basic functionality like linking the logo to the homepage, improving responsive design, updating page titles, adding images, and enhancing event details and categories.', 'duration': 177.223, 'highlights': ['The chapter covers troubleshooting deployment errors, including 500 errors, and suggests website improvements such as adding more styles, implementing basic functionality like linking the logo to the homepage, improving responsive design, updating page titles, adding images, and enhancing event details and categories.', 'Suggestions for website improvements include adding more styles, making the logo a link to the homepage, improving responsive design, updating page titles, adding specific titles and images, passing props to print specific titles and background images, and adding more sections and categories to the home and events pages.', 'Additional website improvement suggestions encompass adding more details to event single pages, including event prices, implementing a like feature, and adding comments, as well as expanding event categories to include different seasons, music types, and more.']}, {'end': 17248.409, 'start': 17066.656, 'title': 'Managing head metadata in nestjs', 'summary': 'Explains the importance of adding specific metadata per page, the merging of multiple head elements in nestjs, and the significance of adding more functionality and styles to the application.', 'duration': 181.753, 'highlights': ['The chapter emphasizes the importance of adding specific metadata per page, addressing the issue of empty titles for different pages, and suggesting to include a head section in each page to ensure proper rendering and merging of head elements.', 'The tutorial covers various functionalities of NestJS, equipping learners with essential skills to build and enhance applications, and encourages them to continue adding more features and sharing their work.', 'The speaker encourages viewers to take ownership of the project, highlighting its customizability and potential use for presenting in interview processes, while also soliciting feedback, likes, and subscriptions for further engagement.']}], 'duration': 1195.011, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KjY94sAKLlw/pics/KjY94sAKLlw16053398.jpg', 'highlights': ['The tutorial emphasizes the use of Verso for deploying the app, highlighting its ease of use and integration with Node.js.', 'The process of signing up and creating an account on Verso is detailed, including using GitHub for synchronization and creating a new repository for the app.', 'Instructions for creating a new repository on GitHub and setting it up for deploying the app are provided.', 'The chapter discusses setting up a local Git repository and linking it with a remote repository on GitHub.', 'The process of deploying the project on Vercel is demonstrated, including importing the project, configuring settings, and waiting for deployment.', 'An issue with a read-only file system is encountered while attempting to submit data, prompting further investigation.', 'The chapter covers troubleshooting deployment errors, including 500 errors, and suggests website improvements such as adding more styles, implementing basic functionality like linking the logo to the homepage, improving responsive design, updating page titles, adding images, and enhancing event details and categories.', 'The chapter emphasizes the importance of adding specific metadata per page, addressing the issue of empty titles for different pages, and suggesting to include a head section in each page to ensure proper rendering and merging of head elements.', 'The tutorial covers various functionalities of NestJS, equipping learners with essential skills to build and enhance applications, and encourages them to continue adding more features and sharing their work.', 'The speaker encourages viewers to take ownership of the project, highlighting its customizability and potential use for presenting in interview processes, while also soliciting feedback, likes, and subscriptions for further engagement.']}], 'highlights': ['The tutorial covers building a full stack React app using NestJS, including creating UI components and APIs.', 'The chapter focuses on pre-rendering pages using server-side rendering and static generation to optimize the performance and user experience.', 'Creating a main layout component is emphasized as a best practice for organizing components and ensuring common elements like headers and footers are consistently displayed across all pages, enhancing code reusability and maintainability.', 'The process of creating a form is detailed, including specific attributes such as ID and placeholder, and functions like onSubmit.', 'The chapter emphasizes the importance of securing credentials when sending client data to the database to prevent exposure of sensitive information.', 'The tutorial emphasizes the use of Verso for deploying the app, highlighting its ease of use and integration with Node.js.']}