Learn to Code in 3 Hours, Not 3 Years (Free Course)

Estimated read time: 1:20

Learn to use AI like a Pro

Get the latest AI workflows to boost your productivity and business performance, delivered weekly by expert consultants. Enjoy step-by-step guides, weekly Q&A sessions, and full access to our AI workflow archive.

Summary

In this free course, Marc Lou shares a roadmap for learning to code quickly using AI, showcasing how he became a successful solo developer earning $1.2 million per year. Through practical examples and engaging explanations, the course covers fundamentals, building software businesses, and utilizing modern AI tools to expedite development. Key areas include understanding the internet, setting up development environments, building web pages, and managing databases. The course emphasizes the importance of a proactive approach and effective marketing strategies for success.

Highlights

Marc Lou's journey from learning code in 2016 to earning $1.2 million annually in 2025 as a solo developer. 🌟
Importance of understanding internet fundamentals to effectively use AI for coding. 🌍
Step-by-step guide to setting up a development environment with tools like VS Code and Next.js. 🔧
Detailed walkthrough on creating web pages using HTML, CSS, and JavaScript. 🖥️
Utilizing AI for enhancing development speed without replacing the need for fundamental coding skills. ⚡
Practical explanation of how to integrate and manage databases using MongoDB. 🗄️
Insights into building and deploying a software business via versatile platforms like Vercel. 🚀
Comprehensive look into user authentication and transactions for secure web applications. 🔒
Recommendations for leveraging marketing strategies to boost software project visibility and success. 📊
Encouragement for continuous learning and adapting to new tools and techniques in the tech industry. 🔄

Key Takeaways

AI is not here to replace programmers but to enhance their capabilities. 🚀
Learning the basics of the internet is crucial before delving into coding. 🌐
Building an efficient workspace with the right tools makes development faster. 🛠️
Understanding HTML, CSS, and JavaScript is foundational for web development. 💻
Practicing with real projects helps solidify coding skills and build confidence. 🔨
AI can significantly speed up coding tasks, but foundational knowledge is still essential. 🤖
Ensure to implement security measures to protect your projects and data. 🔐
Effective marketing is necessary to attract users to your software projects. 📈
Regular practice and perseverance are keys to mastering coding efficiently. 💪
Using online resources and community tips can enhance your learning process. 📚

Overview

Marc Lou embarks on a mission to erase the daunting task of learning to code by providing a roadmap that condenses years of learning into just three hours. Starting from his humble beginnings in 2016 to becoming a self-made millionaire by 2025, Marc emphasizes adopting AI as a tool to boost your development speed and creativity. His methodical approach breaks down the mystique of coding, showcasing how understanding internet fundamentals and setting up the right environment can significantly enhance one’s ability to code efficiently and effectively.

In this course, Marc dives deep into the practical aspects of coding, from setting up a user-friendly development environment using tools like VS Code and Next.js to mastering HTML, CSS, and JavaScript. With a strong focus on real-world applicability, Marc guides viewers through the process of building and deploying software businesses, utilizing modern platforms and frameworks to their fullest potential. His detailed insights into managing databases, integrating user authentication, and ensuring application security are invaluable for anyone aiming to create functional and professional-grade web applications.

Marc wraps up his empowering course by encouraging developers to continually practice and engage with the coding community. Highlighting the significance of marketing in successfully launching software projects, he shares strategies that have proven effective in drawing user attention and maintaining relevance in the competitive tech space. This program not only teaches coding but also instills a mindset geared towards success, motivating participants to turn their creative ideas into professional realities.

Chapters

00:00 - 00:30: Introduction The chapter titled 'Introduction' discusses the transformative role of AI in programming, suggesting that while AI won't replace programmers, it will empower them to build solutions that can potentially replace other jobs. The speaker recounts their own journey in learning to code, starting in 2016 with online courses but initially finding them tedious and overwhelming. By 2018, the speaker shifted their approach, focusing on creating small internet businesses instead of dwelling on extensive theoretical training. Through this practical learning method, the speaker successfully built 28 websites and now earns $1.2 million annually as a solo developer. The speaker intends to share a revised strategy for learning to code based on their experiences, which they plan to discuss in detail in the video.
00:30 - 01:00: Roadmap Overview The chapter provides an overview of a roadmap designed for beginners to learn how to code quickly using AI. It is divided into three parts. The first part emphasizes the importance of understanding the fundamentals of the internet, which is crucial for knowing how to effectively use AI tools and search for solutions when faced with challenges. The second part focuses on building a software business from scratch, where the narrator will share the tools used in their own business development.
01:00 - 02:00: Part 1: Fundamentals In this chapter, we will guide you through setting up your computer and delve into various key concepts essential for establishing an online business. This includes understanding front-end and back-end development, APIs, and databases. Additionally, you'll learn about sending emails, processing payments, and leveraging modern AI tools to expedite your coding process. The chapter emphasizes the importance of mastering the fundamentals of Internet development, which is crucial for creating an application that can reach a global audience.
02:00 - 06:00: Setting up Development Environment The chapter titled 'Setting up Development Environment' primarily focuses on the vital role of AI in modern development work, emphasizing that about 80% of the work can now be done by AI. However, this places importance on understanding the fundamentals, specifically how the internet functions. The chapter suggests that learning how websites operate from a consumer perspective is crucial. It implies using AI tools like ChatGPT to explore what occurs when visiting a website, though advising against asking the AI to explain certain elements.
06:00 - 10:00: Part 2: Building Internet Business This chapter emphasizes the importance of using relatable metaphors to understand technical internet concepts. It suggests imagining the process like sending a letter when searching for a website. Once comfortable with this metaphorical understanding, the reader is encouraged to delve back into the technical terms for a more comprehensive grasp of internet fundamentals.
10:00 - 16:00: Next.js Setup and Explanation This chapter focuses on the initial setup and explanation of Next.js, an important framework in modern web development. It starts with the basic understanding of fundamental web concepts such as HTTP, URLs, DNS, and the client's journey when making a request on the internet. Using an example of accessing YouTube, the narrative explains the step-by-step process starting from a client (user) making a request using an internet browser. The request is then sent through various layers, including the user's Wi-Fi and ultimately, traversing the complex systems that constitute the internet. Although not every detail is discussed, a fundamental understanding of these components is emphasized as important for developers learning Next.js.
16:00 - 25:00: Part 3: Advanced Concepts The chapter explains advanced internet concepts, focusing on how the internet locates and connects users to servers. It describes the process using the example of searching for YouTube. The Internet's role is highlighted as it navigates various devices and DNS servers globally to direct requests to the correct server, such as YouTube's in the US. A server, likened to a large online computer, handles requests and returns the appropriate HTML page via the same path.
25:00 - 30:00: User Authentication and Security This chapter explains the basic process of user authentication and security, focusing on the communication between your computer and web servers. It details how, upon requesting a webpage like YouTube, your browser interacts with the DNS and servers over the internet to retrieve and display the required HTML content. The chapter also introduces the use of developer tools, such as Google Chrome's developer console, to understand and analyze web pages. This tool allows you to inspect various elements of the webpage, which might initially seem complex and unfamiliar, thereby enhancing your ability to troubleshoot and learn about web interactions.
30:00 - 35:00: Sending Emails The chapter titled 'Sending Emails' begins with an introduction to the basic structure of an HTML page, which includes the head and body sections. This structure is likened to what one might see when inspecting a webpage, like Reddit, through the developer console. The transcript highlights that whenever a user browses the internet, the information transmitted consists of HTML pages. The chapter seems to set the stage for a deeper dive into understanding this HTML structure and its relevance to sending emails.
35:00 - 40:00: Handling Payments The chapter titled 'Handling Payments' aims to guide developers in creating web pages accessible to millions on the internet. It begins with the essential step of installing a code editor. Two popular options are discussed: Visual Studio Code and Corser AI, both supporting AI features. The choice between them is portrayed as relatively insignificant due to their similarities, though Corser AI is noted for having a specific plan at the time of the video recording. This chapter emphasizes the foundational step of choosing a code editor for web development.
40:00 - 45:00: Database and API Integration This chapter discusses the integration of databases and APIs, focusing on essential tools like AI features in code editors used for web development. It mentions subscription plans such as VS Code's free GitHub Copilot AI and the importance of understanding the default structure of a web page. The chapter also emphasizes the ubiquitous nature of web pages, using examples like Facebook, Google, and Instagram, and suggests using tools like CHPT for guidance.
45:00 - 50:00: Using AI for Development This chapter provides a guide on creating a basic HTML page. It explains the steps of generating default HTML structure using AI, copying the suggested code to a code editor, and saving the file with a proper '.html' extension. The importance of file extensions for different types of files, such as '.mp4' for videos and '.png' for images, is also mentioned.
50:00 - 55:00: Final Tips and Advice In the final chapter, the focus is on providing essential advice and recommendations for web development. The author emphasizes the consistent structure of HTML pages, highlighting that HTML documents generally start with a doctype declaration followed by the opening and closing HTML tags. Within these tags, there are typically 'head' and 'body' sections, which have been demonstrated on platforms like YouTube and Reddit. Moreover, it is mentioned that ChatGPT has pre-configured some information in these sections for illustrative purposes. The chapter aims to guide readers in understanding how to structure web pages efficiently and encourages practical learning, suggesting that readers should not only understand the theoretical aspects but also apply these concepts to real web development scenarios.

Learn to Code in 3 Hours, Not 3 Years (Free Course) Transcription

00:00 - 00:30 AI won't replace programmers but rather make it easier for programmers to replace everyone else when I learned to code in 2016 I didn't even know where to start I ended up buying courses on Udi but I almost gave up because it was so long and boring so in 2018 I ditched all the theory and instead build tiny internet businesses now in 2025 I have built 28 website and I know earned $1.2 million per year as a solo developer if I had to learn how to code again I would do it completely differently so in this video I'm going to show you the exact
00:30 - 01:00 road map to go from complete beginner to knowing how to code fast using AI okay so this is the entire road map we're going to go through it's divided into three parts the first one is important you stick with me even though people make mistake and skip it it's the fundamentals of the internet if you want to understand how to use AI to code fast you need to understand how things work so you know what to tell the AI you know what to search when you're stuck in the second Park we're going to build a software business from scratch I'm going to show you the tools I use to build my own software business
01:00 - 01:30 I'm going to show you how to set up your computer we're going to talk about front end backend API databases we're going to send emails we're going to process payments and all the things you need to set up a business on the internet and finally we're going to talk about how to use the AI modern AI Tools in order to 10x your development process and code even faster in the first part we're going to cover the fundamentals of the internet we're going to understand what it means for you as a developer to build an app that could be seen by millions of people across the world it is very important that you stick with me for this part because later you'll see that
01:30 - 02:00 80% of your work will be done by an AI and you just have to tell the AI what you want but for that you need to understand how things work you need to understand the foundation of the internet so first we're going to understand how the internet work as a consumer you right now watching this video we are browsing hundreds of websites per day so you want to understand what actually happens when you go to a website for that you can just open chpt and ask chpt or whatever AI you're using to explain what happens when you visit a website you want to mention that they should not explain
02:00 - 02:30 using technical skills you want to use like metaphors and things that are very simple for you to understand first and here chpt is doing actually a pretty good job at explaining it Compares um searching for a website on the internet to sending a letter uh to the post office try to have like a little image in your mind of what is going on when you visit a website when this is done learn the fundamental concept of the internet so go back to chpt and ask chpt uh to explain the same thing the same Journey but instead this time not using a metaphor but using the actual terms
02:30 - 03:00 that developers use htps uh URLs DNS Etc there are seven terms that I think are important for you to know you don't need to know everything about it but just try to have a a clear understanding of what each of those is doing as a quick example this is me going to YouTube in New Zealand and this is what the journey looks like I'm on my internet browser and I search for youtube.com so I'm considered as the clients when I press enter my request is sent to my Wi-Fi and then it goes basically on the internet the internet is is basically like a
03:00 - 03:30 collection of uh devices that are somewhere across the planet you have DNS you have servers you have a bunch of things and the role of the internet is to find the right recipient for my request so in my case since I'm searching for youtube.com it search for the YouTube server the server is basically like a big online computer that is somewhere on the planet likely in the United States in the case of YouTube and this server is going to receive my request and then he's going to send me back an HTML uh page using the same route that it took to come to
03:30 - 04:00 the server so it's going to go back to the DNS and the servers that are on the internet and then it going to come back to my computer and then my internet browser Safari Google Chrome whatever is going to take this HTML page and display it so that I can actually see the YouTube homepage as a consumer and now to jump to the next part you can do something interesting you can open the developer console search for your developer console so here developer tools it's called on Google Chrome um and you can see on the right side I have a bunch of stuff that might look like foreign language for you right now now
04:00 - 04:30 but it's going to become much more clear soon um and we see that I have this like um a body and head and HTML now if I go to Reddit homepage and I open the developer console again you see that I have this HTML head and body thing again H that is quite interesting actually here what is going on is that everything on the internet that Transit whenever you're browsing as a consumer you get HTML pages and what you see here in the console HTML head and body is basically the structure of an HTML page a web page and so after this part you will
04:30 - 05:00 understand that your job as a developer is to build web pages and put them somewhere on the internet so that millions of people can access it across internet so let's build your first web page as a developer we're entering the second phase now you need first to install a code editor so there are two popular ones and actually many others but there is a visual studio code and you have also corser AI be honest both are very similar it really doesn't matter which one you choose both support AI features I think cursor AI are the moment I'm making this video has a plan
05:00 - 05:30 for like $20 per month to have the AI features and vs code has a free plan for their uh GitHub copilot AI feature once you picked your code editor just open it and create a new file usually you can go to help and type file and you will see like new text file now we're going to write your first web page remember everything that Transit on the internet whether you're going to Facebook Google Instagram no matter what is a web page so for that we need to know what is the default structure of a web page and so here our best friend is chpt so it can
05:30 - 06:00 just say what is the default structure of an HTML page and then it's going to send you back a similar piece of code just copy that code and go back to your code editor and past it there then press command s to save the file and you can name it no matter what you want I'm going to call it homepage and then make sure you keep the HTML at the end because a web page is a file so it needs an extension just like MP4 is used for uh videos PNG is used for images HTML is used for web p pages so you can name it
06:00 - 06:30 the what whatever you want just add. HTML you'll see that the structure of an HTML page is always the same it starts with this little thing here and then you have HTML tag here HTML closing tag here and then you have a head and a body just like we saw on YouTube and reddits before and on top of that CH GPT already added a few information in this head and body tag but we're going to see that later okay now you want to learn what you can add inside of a web page as a developer the web page 101 and for that I don't want you to just learn I want
06:30 - 07:00 you to uh build something a real web page that you could show to a friend that could be a portfolio that could be a lending page for your IDE it doesn't matter just think about something that you can show to a friend and now any web page you see on the entire internet is made of three things HTML CSS and JavaScript if we compare this with a house HTML is the foundation the structure of the house without HTML there is no house we have CSS which is used for styling to make your web page beautiful the colors Etc and we have
07:00 - 07:30 JavaScript which is used for uh user interaction and adding some Dynamic parts to your page so first we have HTML which is the foundation of any web page it is made with tags and attributes so just like we saw before this is uh written in HTML you have here a tag is this little thing here that where you see HTML it is surrounded with brackets around it and you always have an opening tag and a closing tag and everything inside is like a children of this tag and attributes like this are properties
07:30 - 08:00 that you give to those tags you will see HTML is very simple uh there are a few tags you want to learn like for instance links to be able to link between web pages headings for titles paragraph if you need to write a block of text images of course buttons and inputs in forms and containers if you need to wrap things around you don't need to learn all the tags just learn the very minimum you can start writing the first version of your ID of your web page using HTML tags only then you can jump into CSS CSS is basically a way to style your page to
08:00 - 08:30 make it more beautiful to change the layout Etc there are a few things that are important like colors layouts heading phone size Etc you don't need to learn everything once again in the road map you'll see there are few CSS properties that you can learn that are important but learn just enough to make a beautiful web page and then finally there is Javascript so JavaScript could be like a kitchen a bedroom a toilet whatever it has interaction it adds features to your web page for instance when you click the like button under this video on YouTube it will Tri JavaScript to do something if you
08:30 - 09:00 actually do like the video that means a lot for me JavaScript could be quite Advanced there are many things to learn I would recommend to start with those foundations the very minimum for instance you could have a button that when you click on it it sends a little Hello message somewhere on the page and use that homepage. HTML file we created earlier to add text to change the text color add features using JavaScript no matter what and whenever you're stuck with something whenever you need to learn something ask chpt to help you around once you're done and you've saved your file what you can do is is you can open this file and view the results of
09:00 - 09:30 your creation for instance now if I open this like homepage. HTML if I double click I'm going to go in my internet browser and it's going to display the things that I wrote with my code and now you can do something even crazier you can send that web page to someone I'm just going to go drag and drop it to my wife on WhatsApp send the page to my wife and now if she opens her phone and double click on this file it will open her internet browser and she will be able to see the code that I wrote and just like this you have made your first web page now of course uh it is not
09:30 - 10:00 available on the internet there is no way for anyone across the world to access my web page but you'll see that is very simple we're going to cover that in the next part okay now moving on to part two here you're going to learn exactly what you need in order to build any internet business here I said SAS short Force software but that can be a directory that can be a habit tracker that can be an AI tool it can be literally anything for instance these are all the websites that I built they're all very different you have like a analytics tools that I built habit
10:00 - 10:30 tracker that are made for people to uh track their reading and workout habit um I have built directories like this one where you have like thousands of uh pages indexed on Google and I am using all the time the exact same road map that I will show you right here so we're going to cover how to create landing pages how to process payment how to create user account API database front end backend anything that you have heard of and that you think you need in order to build an internet business will be in this road map the first step is to pick a text tack so this is the text T I use
10:30 - 11:00 for absolutely all of my apps in the programming language I am using JavaScript some developers use python or C or C++ usually for the back end but mine only use JavaScript language it's much easier I don't have to learn two languages just JavaScript on the front end part which is what people are going to see I'm using react which is a JavaScript library to build reusable components like buttons and and forms that my users can click on I am using twin CSS to make writing CSS a little bit easier I am using Daisy UI which is
11:00 - 11:30 a free UI component Library so it has a set of like predefined buttons and tables so I don't have to design everything from scratch and I am using nextjs as a reactjs uh framework in order to organize pages on the back end which is the part that users don't see usually the server I am using two Services I'm using nextjs for the API we're going to cover that later but it's basically the invisible part where you do all your business logic and I am using mongodb for the database to store information and I'm using some
11:30 - 12:00 thirdparty tools in order to help me in my process so for instance for user authentification uh login with Google Etc I am using OJs to send emails across the internet I am using recent I am using stripe and sometimes lemon squeezy to charge and process payments so subscription what time payments invoices Etc and I am using data fast as a web analytic tools to know for instance who visits my website okay maybe at this point you're wondering like what is going on to HTML JavaScript and CSS what are we doing all of this you'll see that
12:00 - 12:30 even though the internet relies on web pages and everything you see on the internet is HTML JavaScript and CSS as a developer it is much faster to use those tools in order to write HTML JavaScript and CSS for us those tools are just meant to make our life easier the text tack I use right here is almost free for you to use you see most of those tools have free plans so you can get started with 0 and of course if you don't like my Tex tack if you have heard of another tools that you prefer to use it is perfectly fine what is important here is that whenever you have decided what
12:30 - 13:00 you're going to use for your text tag you want to stick to it and never change it because every time you have to learn a new tool you're losing time on things that matters which is shipping apps and you will see that in the ends all those text tax thing it's always the same debate you can do pretty much anything you want with any text stack and finally I want to mention that I am not sponsored whatsoever in here to make this video uh none of those tools that you see here are paying me to make that the only sponsor of this video is myself I created this course called code fast uh to teach people how to learn to code
13:00 - 13:30 quickly it's a 12 hours course on the same Principle as you see in this video it's more Hands-On because we're going to code along over 2,000 students have already learned how to code using the course but of course you don't need the course in order to learn how to code you can learn by yourself using an AI in the road map I am going to show you right now okay before we get started you want to discover what the terminal is if you go on your computer and you search for terminal it is going to open a little app that looks like this where you can type command line it's basically a chat box to do stuff on
13:30 - 14:00 your computer so here for instance if I type PWD is going to tell me in which folder I am I can navigate inside of folders like CD and here I entered the desktop there are very few simple commments like those ones PWD CD LS Etc that you can learn to help you later you also have a terminal inside of your code editor now if you go to the top and you search for terminal you can pop up a new terminal directly inside of your code editor which going to be useful for later and the reason we need a terminal at some point is because we're going to
14:00 - 14:30 have some tools developer tools running on our computer to make our life easier and those tool usually need to be run using common lines in the terminal okay now that we're good with the terminal things we're going to move on and set up your computer to use all the tools we have from the text tack so first of all you will need to install node.js you'll find nodejs as the first link on Google just click here and download it for your computer it was not really clear for me when I started to code why I need nodejs so here is a quick example of why you
14:30 - 15:00 need it when you are on your uh computer your internet browser so Safari or Google Chrome there is something called the V8 engine which is the little background process that is running all the time and that is used to execute JavaScript if you want to test your V8 engine on your computer you can go to any website you can open the developer console and you can see that you can write JavaScript inside of the console here and if I write alert name is going to print uh send me a little alert with my name this thing here is able to run JavaScript thanks to the V8 engine that
15:00 - 15:30 is coming already installed on your computer and it allows us developers to write JavaScript inside of HTML Pages now nodejs it's very similar to the uh engine except that it can run on any computer anywhere any time that means now that you could start a little engine on your computer not necessarily on internet browser but like in the background on your computer and you can run JavaScript from anywhere so we're going to use it for two things we're going to use it right now on your computer to set up all those developer tools and run them in the background and
15:30 - 16:00 you're going to use it later automatically when we're going to push your site on the internet there will be some processes that are always running on the machine we're going to push your code so that it listens for like visitors coming to your site and is able to answer those requests okay the second thing we need is to install nextjs we're going to use nextjs for two things the front end what people see and the back end what people don't see some developers use two completely separate Frameworks for their front end and backend I just find it easier to use GS for both of them for the front end for
16:00 - 16:30 like web pages thing that our visitors are going to see and use um you remember from the previous section of this video that we have HTML files that are able to be shown somewhere on your internet browser but you'll see that with nextjs we're not going to write HTML directly we're going to write JavaScript and then on your computer there will be a process that will turn these JavaScript into an HTML files that we are going to send back to visitors so that they can see
16:30 - 17:00 your creation on their internet browser and this process that will turn the JavaScript into HTML is using behind the hood nodejs that we just downloaded and for the backend part with nextjs it is using serverless so we won't have to manage an entire instance or machine and put it on the internet uh this will be done automatically for us so we won't have to think about that but don't worry about that we're going to go deeper later and finally if you haven't done it from the previous lesson already you want to install a code editor like vs
17:00 - 17:30 code or cursor okay now we need to install nextjs the framework that we're going to use to show pages to our customer so the front end part but also as the backend the server so the thing that is invisible to customer where we're going to have our API and database logic Etc some developers prefer to have two separate projects for their front end and their backend I just find it easier to use just nextjs for both the front end and the back end so to install nextjs just go on Google Search for nextjs and take the first link that you see you
17:30 - 18:00 will see this little command line written right here just copy that and open your terminal just before you pass the command here and press enter make sure you are in the right folder because it's going to create a nextg project so for that I am going to navigate to my desktop on my computer and I'm going to go inside of the nodejs workspace this is exactly the same as if I were going to click here on the desktop and open this node.js workspace so now that I am inside of the node.js workspace I can
18:00 - 18:30 pass the common and press enter so quick breakdown of the common here uh this npx thing now is available because we just downloaded nodejs so we have access to this command which is going to execute something the something we're going to execute is this common here create next app which is something that the nextjs team has created to uh create an entire project right on our computer and the AD Sign and latest right here just mean that we want to use the latest version
18:30 - 19:00 of this program so we have access to the latest feature it's not a big deal but it's better you just copy paste it the way it's given here it's going to promt you with a bunch of questions so you press y to proceed I'm going to name my project unicorn uh I am not going to use typescript yes foran lint yes for kwin CSS we don't need the SRC directory yes we need the app router yes we need turbo pack and we don't need to customize the import alas once you press enter here it
19:00 - 19:30 is going to set up something on your computer and you will see that on the left side in this folder there will be a new folder that is created uh that I named unicorn that in this unicorn folder will contain all the nextjs file the project was successfully created and now if I visually go to my uh unicorn folder you will see that I can uh actually see all the new files that were added so all of those files here uh were created during the command line script
19:30 - 20:00 that we executed just before and finally if you haven't already from the previous lesson you want to download a code editor like vs code or cursor okay now open your code editor and open the folder we just created so for me it's in my desktop no JS workspace and then unicorn now you see on the left side I have all the files and folder that were created automatically for me there's a bunch of stuff going on here and this is going to be your workspace basically as a developer so we need to understand and break down a little bit of what is going on so there are multiple things here
20:00 - 20:30 that are going on inside of this project the first one and a very important one is the package manager we now have access to npm npm stands for node package manager it's basically a directory of modules of packages that we can use from the internet so for instance uh there are developers who create really cool libraries like a date peer a nice form or this like a component library that we're going to use later in the project with there's a bunch of components that were already
20:30 - 21:00 made and are available for free and you can just download it uh here for instance the commment to download this entire package with all those components is npm I short for install Daisy UI and if you run this common inside of your terminal you will have access to all those components inside of your own project actually if we go back to the project and you open the nodecore modules folder you will see you already have a bunch of packages that were installed already for you you can actually see a list of all the packages that we have installed now they are here
21:00 - 21:30 inside of your package the Jon is like a a controller of all the list of packages that we have installed they are here in the dependencies or the dev dependencies here we have react react D and next and sometimes those packages realiz on other packages which r on other packages that's why we have like an array of packages so here we only have a few packages but you have a thousands maybe 100 packages here in the ne modules is because some of those ones here rely on more packages and whenever you installed
21:30 - 22:00 a new package it's going to appear somewhere here in this package.json file so now I'm going to open a terminal inside of the code editor so I am already inside of my project and if I want to install a new package I just have to type npm installed and the name of the package and another part that is important in your package manager is that you can run script using the npm Run script name comment so let's go back to the project here here we see in the package J Json you have already four
22:00 - 22:30 scripts and the first one the dev script is one that we're going to use a lot to run a script npm run and the name of the script now when I press enter it's going to execute this command this is something that was created by the nextjs team and it's going to set up my computer to uh run a little development server so that I can write and compile code here it tells me to go to uh Local Host 30001 is because I already have another script run running but for you it's likely local h 3000 just copy or follow
22:30 - 23:00 this link go to your internet browser and press enter and you should see right here a little uh website that is now on your computer so as a quick recap about the node package manager uh now on your project you have access to a few commands you can install or update packages which are like uh tools uh that were created by other developers that will help you in your uh programming journey and you can run scripts which are going to do a stuff on your computer
23:00 - 23:30 which going to execute something on your computer like the one we just run npm runev where we are setting a local development server to make your website the next part that's important for your project is the Version Control System I might get canceled by real software engineer for putting GitHub and git inside of the same uh topic here uh but roughly those two Services git and GitHub will help you do a bunch of things on one hand you have git which is going to help you make versions of your code so for instance you push a new feature or you fix a bugs you create a
23:30 - 24:00 new version for your code and so that later if you realize you made a mistake you can revert back to the previous version it helps you organize your code and GitHub is like a Google Drive for developers where you're going to push your code uh what you write on your computer you're going to push it on the internet in GitHub it's a free service and we're going to push all of our code out there so in case you lose your computer you can still download your code from GitHub later on you'll see that we'll have something connected to GitHub and then whenever GitHub as a new change a new code that is being pushed
24:00 - 24:30 is going to deploy our change to our actual website okay first let's start with Git and just a few thing here those three commments GI had git commit and git push um you don't need to memorize them but basically they're inside of your code editor there uh whenever for instance I press the plus Button as stage the change it is the same thing as if I type git add dots inside of my terminal right here those three commands are the ones you're going to use the most but technically you won't have to
24:30 - 25:00 write them because well your code editor has a interface for you to just type buttons so you don't have to write those comments and finally there is the dogit ignore file uh which is already installed in your project uh right here on the root side if you open it you'll see a bunch of uh words and things here um each line is basically one thing to ignore so we don't want git to track those files or folders uh for instance the slash node modules which is this one
25:00 - 25:30 right here this like a massive folder of modules that we've talked about earlier we don't want git to track this because those are dependencies this is not code that we write as developers those are just packages we installed so we don't need to track this inside of git normally you won't have to touch the git ignore file but just in case you know that anything that is in here will be ignored by git and therefore won't be put pushed to GitHub to install git on
25:30 - 26:00 your computer go to those three dots on the left and click download git for your Mac follow the link they tell you and here if you are a Windows user you're lucky it's very simple if you're a micos user we need to install a home brew first so click The Homebrew uh link and then install Homebrew copy pass. command line and open your terminal just pass that command into your terminal and press enter it's going to go on the internet and inst the soft it's not a software it's that the it's similar to
26:00 - 26:30 npm the package manager we had we talked about previously for nodejs except that is for your entire Mac OS system to complete the home brew installation we just need to copy past the lines of code they tell us so uh copy the first one past it interior terminal press enter and do the exact same thing for the second one now that you're done you can go back to the git inst ation page and copy past the command Homebrew install git and P
26:30 - 27:00 it into your terminal press enter is going to install git and then a few second later you should be done you'll need to restart vs code so go to vs code close the application and then restart the application again open the repository we were working on and then go back to the three dots thing and click initiate repository and here you're going to see the list of all the files that were changed in this project and we're going to go over that very soon whenever you're done coding a
27:00 - 27:30 little feature for your application or maybe like fix a bug you want to create a new version using git for that you're going to use git commit quite often to make a commit you will have to go on the git part of vs code so the little three dots at the top left and then you would have to write a message usually you would write something that is explicit uh for instance added this feature or fix that buug in this case we're just getting started so we're going to write first commit and the message is only for you later to remember press commit and
27:30 - 28:00 you're going to see a little error message is because we need to set up git for your computer for the first time and if you scroll in the error message you will see that there are two missing uh things we have to run get config Global you need to set up your email and your username this is not going to log you anywhere it's not on the Internet it's just purely staying on your computer just so you just so git knows who is the user who made those changes so you don't even have to write your actual email you can write anything you want copy paste
28:00 - 28:30 those lines of code um go to your terminal pass the comment there eventually update the email or the name if you want press enter and then click commit again and boom here we go you've made your first commit now you've created the first version of your app it would be great if your code was stored somewhere on the internet so that if you lose your computer or if you work with other
28:30 - 29:00 developers they can access it or you can access it from another computer and for that we're going to have to use GitHub so when you click publish branch is going to ask you to sign up for GitHub you'll have to create an account this time with a real email so sign up with whatever you have uh as your primary email finish the GitHub tutorial like sign up entirely and then go back to this course all right so now you're signed up to GitHub it's basically some kind of like Google Drive for developers the code you write on your computer can be pushed on GitHub so it's online and
29:00 - 29:30 either other developers can use it or you can use it with other computers so now go back to vs code and you can click publish Branch uh it's going to ask you again to sign up with GitHub this side you have an account so you can just authorize vs code to access your GitHub account and is going to reopen vs code for you and here uh select the publish to GitHub private repository and after a few seconds your project will be pushed on GitHub now if you go to your GitHub profile you can see the repository your project with the entire code that we've
29:30 - 30:00 been writing on your computer okay another tool that is going to make your life much easier as a developer is called the linter the linter we use in our project is called es lint if you open your project if you go to whatever file you want and let's remove for instance uh this little line here you can see that I have a red color and it says GSX element has no corresponding closing tag is because in the background I have this linter called es lint that is analyzing my code all the time and whenever I make some typo or whatever I write code that should not exist it's
30:00 - 30:30 going to try to tell me uh where the error is and how to fix it and now they even connected with AI so I can actually just click here and ask the AI to fix it in the composer for me if you ever need to customize some of the rules and how it behaves uh you would search for ES lint somewhere in your project and you could customize some of the behavior of the linter okay and finally let's have a quick look at the nextjs project architecture so you see now we have a big folder with a bunch of of files and a bunch of folders inside of the app
30:30 - 31:00 folder is where you're going to write most of your code you're going to create new pages you're going to create components Etc inside of the public folder is where we're going to put some like files and icons uh things that we want to be available anywhere on the internet and then you have a bunch of other files uh we have the package Jen that is kind of like the controller of our app we have a configuration file for nextjs you have your GE ignore file you have your uh lint uh file as well uh those are more like controller files now you might be wondering like well Mark um
31:00 - 31:30 previously we used HTML to make a simple web page that I can send to my friend and they can see it and now we have all those things with like different uh type names and extensions and folders Etc where is my HTML file so this is what we have done before we created an HTML page we send it to a friend it opens their internet browser and they can see what you have created and anywhere you go on the internet no matter what website you visit you're going to receive HTML JavaScript and and CSS but the problem is as a developer if you were to create
31:30 - 32:00 an entire website using just pure HTML JavaScript and CSS it would be kind of tedious and kind of boring to be honest that's why developers have created uh Frameworks and libraries around it to write in a different language that is faster and easier to write and instead is going to turn what we have created what we have coded into actual HTML JavaScript and CSS so this is exactly why we have a nextjs project instead of writing HTML we're going to write JavaScript the JS stands for JavaScript
32:00 - 32:30 meaning the file will be written using JavaScript language we're going to use libraries like react to write even faster and nextjs is going to compile our uh code into valid actual HTML JavaScript and CSS so there are three main components here the programming language we're using is Javascript on top of it we have reactjs as a JavaScript library is going to give us a set of tools to do things faster so for instance we can create usable components so for instance we can create a button
32:30 - 33:00 that shows a little message using react and we can reuse that exact same component at many different areas into our app so this is going to make our life much easier and finally on top of this we have nextjs which is a react JS framework which is going to help us organize all our code and also going to compile all the code we write and turn it into actual HTML JavaScript and CSS so that anyone in the world with an internet browser can uh see and use our app all right one one last thing about breaking down the actual project uh you
33:00 - 33:30 know there are bunch of files here you're not really yet sure of how those files interact with each other but don't worry the goal here with this video is to show you really the minimum you need to know in order to turn uh your idea into an actual project so we're going to jump into the coding as fast as possible and only later when you will need to customize a few things you will learn by yourself um what each of those files are needed for and since now ai is here to help us developers build but also explain stuff I recommend you to start
33:30 - 34:00 setting up your AI co-pilots in your code editor so for cursor the one I use myself it is already here if I press command L uh it's going to open a chat window with an AI I think if you're using vs code you will have to add a little extension like here you would have to search for GitHub copilot um it really depends on your code editor just search it on Google you'll easily find it one of the first use case of AI which you can use even before starting a how a code is to explain what you don't understand directly in ins of your code base so for instance here um I just set
34:00 - 34:30 up this project I am new uh to nextjs I don't understand every uh single of those Styles but I can do is I can just type English and I can ask my AI what is the app folder this thing here used for and then you'll see that the AI is actually really good at explaining things for me so I have a clear understanding can also refine my prompt and explain me using metaphors I can ask it to explain it in my own language in French if I want you can really use this AI chats to explain you what every single part of the code is for okay
34:30 - 35:00 theory is kind of boring so now it's time to jump into the part where we're going to actually code something we're going to build a landing page a landing page is basically a single static page where you can uh introduce your idea or you can showcase your skill like your portfolio page what I want you to do here is to actually build something for yourself even if it's a very simple website just build something along with me because later we're going to deploy it on the internet and you'll be able to send uh your website to anyone and they will be able to access and visualize and see what you have created there are
35:00 - 35:30 three parts when it comes to creating landing pages there is react nextjs and tedwin CSS okay first we need to start a development server so pop up your terminal common shift n as a shortcut and write npm run Dev press enter and it is going to start a local development server now to view the project I can just go to uh HTTP Local Host 3000 I'm going to copy that link and I am going to my uh internet browser pass the link here press enter and then I can see my actual app and so now whenever you make changes inside of the code this little
35:30 - 36:00 script here is going to rerun this page and you're going to see the latest changes so for instance if I were to add a yo right here you can see that now my Local Host 3000 website is showing what I just wrote okay the first and probably the most important part is react it's the most popular JavaScript library used to build user interface it's basically like uh you're going to create component that you can use reuse across your app react developer are usually paid really well and there a bunch of courses that
36:00 - 36:30 you can find on the internet if you want to go deeper uh but you will see that most of them are actually really long like 70 80 uh sometimes 100 of hours I believe that you need way less if you want to turn your idea into a tiny product for the internet so here are some of the core concept I think you should know in order to uh build something on the Internet there are two categories those on the left here are a reacton uh concept and on the right there are some advanc JavaScript concept that you will probably uh need in order to build your react components uh now it would take a couple of hours if I had to
36:30 - 37:00 go through each of those concept which might be a little bit too much for this YouTube video um if you really want to go deeper with me and code along I have created the course name code fast where you have all those fundamentals concept and we uh go over each of them and now in this future video I'm going to give you a quick overview of all of those Concepts first one is that everything in react is a component if we go to uh one of my website this one here and if we break it down into react component this is what you would see at the top you would have a header component then you
37:00 - 37:30 would have this like a big hero component and then you would have the smaller one this button checkout component that allows me as a developer to uh write once and then I can put this button for instance at multiple places without having to uh rewrite it every single time so I just wrote it once and then it's here displayed at multiple locations now let's go to your code editor uh I am going to remove actually a bunch of things we don't need here that and that I'm going to save this and on the right this is what you would normally see in your local Whole 3000
37:30 - 38:00 since we're going to write bunch of components a common practice is to create a new folder code components inside of this folder you're going to create one file per react component in this case here the demo I want to show you is a counter component so I'm going to name it counter with a Capital C and then JS for JavaScript it's important that you name your uh component as well as the file name in a way that is easy for you as a human to understand as well as easy for an AI so that later on the AI can go through your codebase and understand it easier and this is a react
38:00 - 38:30 component it's very simple it's just a simple JavaScript function so function counter here is the name of your component and it has to return something that something here looks like HTML it is not actual HTML it is jsx this is the notion here jsx it's a syntax language uh that we're going to use to uh basically return every uh thing that we want to show to our users in this case I am just returning this div which is very simple now I need to show this component
38:30 - 39:00 to the user and since one component is inside of a file we need to export the component so we make it available to other files so then for instance in this page.js we can import the component from that file and we can display it right here when now when I press save you can see that I have the sort of counter being shown here and since it's a reusable component then I can show it even three times if I want and I will have it three time right here and so this component now is reusable I can use
39:00 - 39:30 it across anywhere I want in my app now there's another important notion in react called props props are like properties that we are going to give to components so they can be customizable in the function to create a react components there will be a parameters pass name props this is an object where we can pass specific properties so the components can behave differently so in this props we're going to show the title now if I go back to my page JS what I can do is I can add title and I can give it the value of counter 1 counter two
39:30 - 40:00 counter three and now when I press save you'll see that I see counter 1 counter two counter three and so thanks to this prop uh thing then for the same component I can have different output different look different customization now with just those few things here you can already create a nice lending page just a visual lending page to present your idea you might want to have some kind of user interaction like what happens if someone clicks on a button and for that we need to introduce the notion of server and client components so there are two types of react
40:00 - 40:30 components by default all react component we create are server components and the difference between a server and a client component is basically when is this component rendered so in the case of a server component if a client someone a visitor from the internet goes to your website the server is going to uh take the reactjs component is going to compile this reactjs component which means it's going to turn this JavaScript code into HTML and then it's going to send back to the client this HTML uh component in our
40:30 - 41:00 case the counter. JS react component is a server component because it's the default value so whenever we navigate to localle 3000 our the little script running in our computer is turning this uh JavaScript code into an HTML code and sending back to the client so that me as a person I actually see HTML here in uh my internet browser now in some cases where you want to have user interaction like people click on buttons and you update the component you want to use react client components in this case
41:00 - 41:30 when the clients goes to your server and ask for uh whatever page react is going to check the the client components and he's going to send them back as they are and then when the JavaScript code Returns on the client then react is going to swap this reactjs this JavaScript code into an actual HTML the rendering process is going to be done on the client side hence it makes it a react client component to make a react client component all you have to do at the top of the file you just have to
41:30 - 42:00 write quotequote use client and now since my counter is a client component that gives me access to more react features for instance I have access to react hooks like uh use State and use effects which are very handy function that's going to help us perform some actions we're going to cover that in a minute and we also have access to the unclick listener where we can listen for uh events for like when people press on buttons on our app so now we have a client component we can listen for clicks uh let's actually turn these components into some like an actual
42:00 - 42:30 counter okay so here I have updated the code uh don't mind about those class name thing those are just used to style a little bit the counter we're going to cover that in the Tailwind CSS section what we have here first we have imported the function named use state from the react Library this is the most popular react hooked which is used to uh save a state the actual state of a component in our case we want to save the actual counter how many times the button has been clicked on we're going to write this line where we call the function use
42:30 - 43:00 state zero is the default value by default the value of the counter will be zero and then we have uh here a stateful variable named count and a set count which is a function that we can use to update the stateful variable and right here I am just displaying the value of counts and you can see for the three counters we see zero one of the big perks of using those like stateful variable is that whenever we update the count using set count react will rerender under our page it will show the new value of count without us developers
43:00 - 43:30 having to do anything all we have to do is to just call the method set counts so here I have created two buttons a minus button and a plus button one will decrement the value of count and one will increment it on each of those button we have this event listener on click so that whenever a person clicks on the button then it's going to trigger a function and this function is this thing here this will be called whenever someone clicks on the plus button or the minus button and what this function is doing here it's calling the set count
43:30 - 44:00 function this one that is going to update the count and we're going to reuse the previous value of the counter so the actual value right before the click and we're going to say that the new value is the count value minus one and exactly the same for the increment counter where we're going to say plus one and so now you'll see that when I press the plus button the value of count is updated and since it's a stateful variable in the background react rerenders the component and shows the actual new value so those are some of the core and fundamental concept of
44:00 - 44:30 react and you will see that you can go already pretty far just with some of those okay now the next concept is nextjs it's a react framework it's mostly going to be used to organize your pages so we're going to write react components and we're going to put all of them inside of one page and nextjs in the background is going to turn this reactjs code and compile it so we can give it to people on the internet as HTML these are the fundamentals of nextjs I think you should learn um of course there are a bunch of other
44:30 - 45:00 features that they have but those ones here will get you pretty far so for instance a page.js it's a file convention whenever you write inside of your code page.js nextjs is going to create a new page for you so this right here this entire thing is a page um actually if I look at the content inside of page JS you can see that I am exporting a function with a capital letter that is returning some jsx and what you can notice here is that a page is actually a real reactjs component it's just a big react component that is
45:00 - 45:30 going to have other components inside to be shown on the client so nextjs is going to help you organize your pages now let's say we want to have another page at SL dashboard like a private dashboard for your customers for instance what you can do is you can create a new folder named uh dashboard the name of the the actual path you want inside of the app folder and inside of this folder you create a new page.js this is a convention it has to be named page.js and here you can uh create a new reactjs component so a function that
45:30 - 46:00 exports some jsx and now when I go here and I press enter I am going to go in inside of this like new uh page for now it's it's a boring page it doesn't do much thing but uh this is how you are going to use nextjs to create a bunch of pages for your app another feature of nextjs is the layout. JS so here once again we already have one created this is a Convention as well you have to name it layout. JS and it's basically going to be a wrapper around your pages and all the things you do here will be applied to the underneath pages so again
46:00 - 46:30 here we have a react component because everything is a react component and what it says here is that basically we're going to wrap all the pages so children is a keyword in uh react that you also should learn um and then we're going to wrap all those pages inside of an HTML and a body tag actually we do that here because we applied this G sense variable so this is basically like a font the font we actually get from from Google and we want to apply the same font on every pages and we can do that simply
46:30 - 47:00 using layout. JS if I want to go crazy and set a background color of red inside of the layout you can see that in my SL dashboard page the background is not red and the background of my main page is also red so whenever you apply something inside of a layout. JS every uh thing here will be applied to all the pages underneath there are two other things that nextjs has created for us that is very handy uh those are two react components so we have link and image you would use the link one in order to navigate from pages to Pages you would
47:00 - 47:30 first import the link component from the next package and then you would simply do link so you would have the hre attribute and you would point to wherever you want to point so in this case I want to go to the dashboard and then you can write text or anything else inside and then you should have a nice link on your page and if you click I'm going directly to the dashboard so now you might be wondering why we just don't use the HTML a tag and the reason behind is when we use this component nextjs in the background will do some work and is
47:30 - 48:00 going to prefetch the dashboard page so that whenever we click on this link it is super fast to navigate to the dashboard page so whenever you have some navigation going on inside of your app you mostly want to use the link component again finally the image component here will help you display images in the right format so I have added this little nextjs PNG file inside of my app folder then in my dashboard component I'm going to import this image and I'm also going to import the image component from the next package and I
48:00 - 48:30 can just use it like this you have a source attribute where in this case I'm passing the image here the image is available inside of the project that's why I'm I'm using this uh thing but you can also pass a URL of an image here instead then a few parameters and then a few uh styling options and then here I can see my image is displayed you could technically use the HTML image tag uh the reason we do it using nextjs is that there are going to optimize our image so my image right here is actually pretty
48:30 - 49:00 big I think the file is around 1 mbte so what next is doing using this components instead of the traditional image HTML tag they optimize the image now if I go to my console and I check the image itself uh you see that I have multiple uh Source set in the background nexs is basically trying to uh guess how big the size of my screen is and is going to serve the the smallest possible image size so if you can see here uh the file size is only 10 kilobytes which is like I think 10x or maybe even 100x smaller
49:00 - 49:30 than my original file so it's a common practice to use the image tag to help you um load images faster for your users and better for SEO as well okay now the missing part of the puzzle is how to style our react component and for that we're going to use tawin CSS which is a framework around CSS you can find it in your package.json normally you already have tawin CSS installed with nextjs tawin CSS is a CSS framework which is going to make our our life much easier if you were to write an entire app using
49:30 - 50:00 only CSS you would go you would do lots of back and forth between your components and the style you apply to them and trust me it would get very boring instead TN has created a bunch of classes that we can apply right away inside of our components for instance here in the title of my counter I already have the text Excel class that was created by twin CSS their class have a good naming so it's easier for us developers to know what they're doing so you would kind of get that if I apply text Excel the text will be of like a
50:00 - 50:30 large font now if I go crazy if I appli text for Excel you would see that the counter becomes really big and just for fun I'm going to say text EXs and you see that now the counter uh title is very small and actually if I hover my mouse on the the the actual class I can see the CSS uh class that is created for us so this text Excel applies the CSS property phone size of 20 pixels and a line height of 28 pixels if you don't have this inside of your code editor just go for your extension Tab and
50:30 - 51:00 search for the tawin CSS intelligence plugin and then you will start showing you the CSS property that are applied and you will see twin has a bunch of classes I think they have over a thousand classes uh for instance this one uh P6 P stands for padding and it applies 24 pixels of padding inside of the counter if instead I would write px6 and py12 I would apply 24 pixels of uh hor horizontal pading so X stands it's for the horizontal axis and the y stands
51:00 - 51:30 for the vertical axis and you can see here on my card I have on the left side and on the right side we have 24 pixels and we have 48 pixels at the bottom and at the top the name of the colors as well are much easier to apply so for instance you kind of guess that the Border applied here will be gray which is much easier than if you had to write the hex color into CSS itself there are a bunch of classes and you don't need to learn all of them but I recommend you is to take all the CSS classes you need so maybe like a font size font weight the
51:30 - 52:00 padding margin Etc and learn only the Tailwind CSS classes you need to style your page one you're going to need quite often is the flex container uh which allows me here to create three containers uh on top of each other uh so I created this little like a cheat cheet if that helps you can uh take a screenshot of it it is going to help you organize your uh Flex container and the flex items inside and have like a layouts where you have stuff on the top left stuff on the top right Etc I think I forgot to mention that we writing react component we are not using the
52:00 - 52:30 class attribute we're using class name but of course remember next GS is going to compile our project and send HTML JavaScript and CSS to the client so now if I go into my internet browser I inspect the counter um I don't have class name written I have the attribute class written here and if I click on it I can see all the CSS classes that tawin has created for us and of course life wouldn't be fun as a developer if we didn't have access to UI components libraries so the one I use to create
52:30 - 53:00 buttons form cards Etc on all my app is Daisy UI it is a collection of pre-made component that I can use inside of my app without having to style them so this is the daisy UI website and uh for instance if you go to their documentation you can have access to all those buttons so they have different states so if you press on them they move different colors um they react to when you hover them with your mouse cursor uh you have avatars you have uh badges Etc uh you want to you to leverage UI uh component libraries as much as you can
53:00 - 53:30 so you don't have to do everything from scratch now in our project what we can do is we can install it so we can do npmi daisy UI this is going to install Daisy UI inside of my project I'm going to restart the de development server and now we should be able to access all of their classes oh actually I just forget one thing I have to open the Tailwind configuration file and then here I have to include the daisy UI plugin in order for tawin to know that we are using this UI Library so now for instance we can use Daisy UI buttons for our counter um
53:30 - 54:00 I think this round button would look great so I have to look for the jsx and they told me to add BN BN Circle so I just add it right here inside of the button and now I can see that I have like two clicky buttons on the left side and on the right side of the counter which make my app much more stylish and easy to use now is time we are going to deploy your website on the internet so that anyone in the world can see it and I'm going to get a domain name so people have an easy access to go to your
54:00 - 54:30 website and for that I'm going to give you a free preview of my course cut fast where we're going to go over those lessons and I'm going to guide you step by step in how to deploy your website on the internet first make sure you commit all your changes and push them to GitHub you might have something different than me here it doesn't matter just commit your changes then go to versal decom versal is a company that will provide a server for you so that you can put your code and you can serve to anyone anywhere on the internet and also versal has a free plan that lets us deploy our
54:30 - 55:00 projects at no cost I personally use versal for all my project I have no affiliation with them whatsoever it's just very simple to deploy a project if you do not fcy Verso uh there are some Alternatives like netlify or render once you're on this page uh click Start deploying and login with GitHub you will enter your github's credential and you will be prompted to connect your versal account with your GitHub account authorize the connection and I will see you on the other side okay now you should land on a page that it's a little bit similar you're going to go uh here
55:00 - 55:30 add a new project and we are going to look for the repository you created on GitHub this is mine right here I have many other for other my project at this moment you might have only one click import versal might ask you to reauthorize something just make sure you let versal connect with GitHub and then do not change anything right here and just click deploy it's going to take a couple of minutes you have something called build logs this is the place where versal is going to take all your
55:30 - 56:00 code and is going to run it on their servers as a little hint you can see that it's running in Washington DC at least for me um this is where your server is and then you can follow along with the time and the commments that are being executed um it looks like everything is going fine is generating some pages for our application and within a few seconds maybe a few minutes it should be done here we go the project was deployed I'm going to continue to the dashboard and I am going to get this
56:00 - 56:30 button where I can visit my project and this is it the project is available on the internet I have a URL that I can share to any friends and anyone on the planet can see my project and just a quick break down here of what we have um this is versal doapp the domain name that versal owns and they give you a subdomain on their domain so that anyone can access your website later we will connect our own domain so we don't need to use the versal one and if you're running into any kind of issue during
56:30 - 57:00 the building process you can go to the build logs and then here you will see probably some red color it will give you a hint of what is going on what broke down in the deployment phase if you have a code that is a little bit different than mine you might run into an error or two and it's perfectly fine normally they will tell you where the error come from and how to fix it um just copy past this error in Google or CH GPT to help help you let's break down a little bit about the process what is actually going on so you are working on your computer
57:00 - 57:30 and you make changes on your code and when you press the commit and sync button is going to run those common git commit git push which is going to send the new code to GitHub now that we've connected versal and GitHub then whenever there is a change on GitHub versal will be updated so versal is going to run two command npn run build is going to check the new code and create a bundle of all the pages an npn Run start is going to start a little development server on uh versal and it's
57:30 - 58:00 going to start listening for requests for people and serve the new pages updated with a new code let's dive just a little bit deeper into the two those two comments so on your local machine in the package.json you have those three scripts the one we always run is npn run Dev and the one that will run on versal by default is npn run build and npn run starts the npn Run build you can actually run it on your computer if you want just stop the development server and say npn run build you can just
58:00 - 58:30 follow along with this tutorial as well you don't have to do it the npn Run build script is creating an optimized bundle of your application and once it's done running it's going to put all the code in the do next folder it's a very complicated folder with stuff will'll never touch but it's the code is there and it's optimized to be sent to visitors and the npn Run start command is going to start a local development server so it's listening for HTTP request and it's going going to use the next folder to give the right HTML pages
58:30 - 59:00 so somehow those two uh build and start script are a little bit similar to what the dev script is doing the dev one is used on our local machine because it has some extra features like if you save a file for instance is going to refresh the entire page so that you can see your changes right away but for production it's good we create an app that's as small as possible that's why versal is going to run those two scripts you are now entering the most exciting part of the course we're going to buy a domain name and usually developers will buy a
59:00 - 59:30 domain as soon as they have an ID and they usually never push code to it so congratulation you already have a tiny application and we're going to connect this with your future domain name also note that you don't have to buy a domain name right now although I really recommend you to do so because it's it's a very important part of the entire Journey you'll need a domain name um for the business side of things you'll need a domain name to rank your uh pages on Google you need a domain name to send links in the course I'll always do my
59:30 - 60:00 best to make sure that there is an Alternatives where you don't need a domain but it's a very good thing if you do so right now to buy a domain name I usually use name chip uh for no specific reason I have no affiliation with them I just like them there is godadi that is also very popular since I named my app cfast sast I will search for cfast sas.com hopefully it's available I think it is it is available and it's pretty shipped which is nice um if you're is not available you can go with any other uh extension called TLD top level
60:00 - 60:30 domain uh the here is one of the most popular but you have many others like.org net doio uh there are a bunch of them and it really doesn't matter which one you use I own a St domain like k.st and this doesn't make any difference if you already have a business name in mind go ahead and purchase a domain that is related to that if you have no clue what you're going to build in the future what you can do now is you can purchase something that is related to your name so that you can build a little portfolio website
60:30 - 61:00 later for instance I own mar.com and this is my portfolio of little projects then proceed to check out uh create your account and I'll see you on the other side okay now I assume that you have voted your domain name so congratulation one of the thing you want to do first is to enable the auto renew feature because you actually do not own the domain name forever you are actually renting it for a year and this will ensure that your credit card will be charged every year so your domain name doesn't go away uh
61:00 - 61:30 because in that case you can actually lose it if someone purchase it and if you are using another domain register than name chip for instance godadi the auto renew feature will be there for sure is just going to be at a different uh location on the user interface and then the part we're interested in is called Advance DNS if you're using another register it might be named a little bit different like manage gns or Zone file you are looking for user interface where you see these kind of things where you have type host value
61:30 - 62:00 we're going to use these settings here to connect people who are visiting our domain name with our applications hosted on versal so now going to versal I'm going to go to the settings part in my project and on the left side there should be a domains um Tab and here you want to add your domain name and then press the button add and you can go with one or the the first or the second option I usually choose the second one it's just a matter of preference whether you want people uh to visit ww.you
62:00 - 62:30 name.com or yourdomain name.com and then when you press add versal is going to give you the instructions to connect your domain name and the project so here they're telling me I should add a record in my DNS of type c name with uh the name ww and the value should be this so copy that value here and go back to your DNS settings and add a new record the new record was a C name record we're going to go over that in a minute the host or the name is www and the value is
62:30 - 63:00 the one you just created then press save change and we're going to do the exact same thing for uh the second one the root domain the domain name.com where this time we need to add an A type record with the name of uh at and the value should be this IP address so going back to name chip and I'm going to add this new record of type A the host should be be at and the IP address should be this then save the changes and let's go back to versal and normally
63:00 - 63:30 within a few minutes after a refreshing they will uh connect successfully the domain to your viral project it could take up to 24 hours for those things to connect so if it doesn't work within the first 5 minutes it's totally fine um if it still doesn't work after 24 hours you want to go back here and check that you put the exact same uh thing here to make sure that everything is correct um now that it is working I can see that if I go to Cod fast sas.com then I end up on
63:30 - 64:00 my virtual project and then I can send this link to anyone my friends my family um and they will be able to see the exact same thing as me uh let's go here just to understand really quickly what's happening when someone visits your domain name.com it's going to go first to the DNS the DNS um is name cheap or is GoDaddy it's basically a big server um that you can compare with a phone book if you're an old person like me where they map domain names to IP addresses people in general will never
64:00 - 64:30 remember IP addresses it will be way too complex so they remember something simple like a domain name and then the DNS will do the work of mapping the domain to an IP address and this IP address is an address of a computer on the internet and it's magically the versal computer where we host our project versal is going to receive the request and return the right page to the client I went a little fast when purchasing the domain names so let's break it down let's say for this example that I own domain.com when I own
64:30 - 65:00 domain.com I also own any subdomain under underneath so I own ww. doom.com email. doom.com anything I want to create. doom.com subdomains are pretty useful when you want to separate some things let's say you want to have a subdomain that is responsible to send emails a subdomain like blog.com that serves a different application that is dedicated for your blog uh you'll see that it could be quite handy and when you purchase a domain you can edit the DNS records
65:00 - 65:30 which are used to map domain name request to a specific type of data there are many types of domain name records we're going to study the most common ones a records which stands for address are used to map a domain uh request to an IP address the at sign here is used to describe the root of your domain so domain.com but you could also have like a subdomain here where you could write ww or email or blog and then map it to uh whatever IP address of your server
65:30 - 66:00 where the code is running address records are the most common ones because it's uh super simple this someone goes to your domain name and you redirect them to your server cames record which stands for canonical names are used to create alas or subdomains here you would add the subdomain so ww blog email uh whatever you want and then you would map it to another domain name this is quite useful if you want to redirect someone from your subdomain to your root domain for instance MX records MX stands for
66:00 - 66:30 Mail Exchange are records to tell what to do when we receive an email at let's say mark.com and the value here should be the domain name of a mail server it's usually a company that knows what to do with incoming emails and could either save them forward them reply to them it's usually a paid service and finally we have the txt records txt stands for text and those are used only for display purposes so all those records are public meaning anyone can see them and we
66:30 - 67:00 typically use txt records to show that we own a domain to verify a domain for instance if you want to submit your website to Google so that they know your exist they will probably ask you to add a txt record with some kind of like a unique identifier just to show that you own the domain and you were able to update the value here all right at this point you already have a bunch of information and knowledge in order to deploy a website show it your friends you can present your ideas you can do already a bunch of things what I really
67:00 - 67:30 recommend you to do is to build a little portfolio or build like a demo page for your ID and put it on the internet now we have built mostly static websites where um people can view stuff but they cannot do much apart from just seeing your website this is where we have to introduce another big notion in programming called The backend the backend in other word is like all the things that your users don't see they can be like saving information into a database that can be creating a user account they can be uh calling another API like open AI to summarize a piece of
67:30 - 68:00 text it includes really a bunch of stuff that are invisible for users and of course we want our front end and our backend to communicate and for that we going to have to create API endpoints an API endpoint is basically like a little door on your server so that your front end can communicate with your back ends so there are two parts the first one is actually create an API endpoint on the server side so these are some of the core concept we're going to go over and there is the front end part the thing that will our users our visitors will be able to play with like touch buttons Etc
68:00 - 68:30 and these are some of the core JavaScript Concepts that we need for our front end to communicate with our backend now to understand a little bit about API endpoints and create your first API endpoint I'm going to give you again access to a free preview of my course to guide you step by step and right after that we're going to go back to our counter project and uh we are going to see how we can call like apis like uh open AI chpg apis for instance API here API there all developers are talking about API so what is it and why do we need API anyway the most common
68:30 - 69:00 way to Transit data on the Internet is when someone is visiting a website the server is returning an HTML page the visitor is happy but an HTML page is not the only way that data travels on the internet in fact if you go to uh the cat ai.com jd. jpeg you will get back an image of a cat this is not an HTML page and if you go to this YouTube video of a guy wearing the same shirt as me and by pressing the like button we are making a
69:00 - 69:30 request on the internet that is sent to the YouTube API now that you are a developer you'll see that uh internet is not just getting web pages you can also update data set data get images there are many other things we can do on the internet and this is where the terms API come from an API is basically a generic word to describe that a server has opened some doors for developers to per performs some kind of actions when you build software and web application a common use case is to have an API on the
69:30 - 70:00 server so that our front end the HTML Pages can communicate with the back end we're going to create an API so that people can sign up for the service log to their account or even create a feedback board for instance and each of these individual functionalities that we're going to create are called API endpoints you can imagine an API endpoint as a door to the brain of your application but apis are not limited to only connection between web pages and
70:00 - 70:30 servers they can be also server and servers without realizing it you've already called an API earlier when we created the database and you use the mongodb package in our application we are we were talking with the mongodb atlas API on their servers they have created an API endpoint that says give me your connection string give me a request and I'll perform the this action for you so that two servers can communicate to each other with apis theory is good but practice is much
70:30 - 71:00 funnier so let's code our first API endpoint in the old days developers would have to create a dedicate seat server for their API but luckily with modern Technologies we can create an API right here inside of our nextjs project the first thing we want to do is we want to add a folder called API into the app folder that way we make sure we separate all the rest of the code the pages and and the images and the components from the API and inside of this API folder
71:00 - 71:30 we're going to create another folder called oath oath is a short word for authentification and it would kind of make sense for us as we're doing user logging logout for now and to create your first API route nextjs made a convention whatever file that is named route. JS will become an API endpoint and we're going to write export function gate the export keyword it just mean that we can use this function outside of our project the function keyword is here because it's a simple JavaScript function and the get should be
71:30 - 72:00 capitalized and it means that when anyone makes an HTTP get request to our API endpoint we're going to execute the code that's inside if you remember from the previous lessons there are four major types of HTTP request there is the get one where usually you request information there is the post one where you are uh adding some information to a database for instance there is a patch one when you want to edit and there is the delete one to yes
72:00 - 72:30 you get it and then we are going to return this thing here so let's break it down first the response is a global object that's available our project is using JavaScript and there are some objects that are um available to us developers the response one is one of them and it's basically the response that you send when you get an HTTP request because remember uh to Transit data on the internet we make HTTP request with a method the get method for instance so we receive a request and we
72:30 - 73:00 we answer with a response and the response is is here to help us format the data so that it can Transit on the internet if you hover it you will see that there are a few methods on it um if you don't like the what the person sent you you can reply with an error like your email is incorrect you can send some data in Json format you can also redirect the person to a different URL there are a bunch of methods and in this case I'm just using the Jon method so I'm going to send back some data and the data is this JavaScript object that is
73:00 - 73:30 going to be formatted in Json format maybe we can give it a try so let's go to our internet browser maybe we open the developer console so we understand what is going on here go to the network tab to see that the how the data will be transiting and type localle 3000 and then uh since we're putting everything inside of the API folder you have to write slash API slash the other folder we created for user authentification so SLO and when you press enter you'll see that there are a few things happening first I'm not getting an HTML page back
73:30 - 74:00 I'm getting some data and now if you look at what is going on here we see that we have made a request and when we click on it you'll see some interesting information so we've made a request the URL is the one we just type in the internet browser the method is get because as a person whenever you type something in your internet browser it will make a get request all the other method post patch delete are for developers since you're going to spend most of your time creating API endpoints and making communication between front end and back end let's study those
74:00 - 74:30 concept a little deeper and let's also see how we can call another API like chpg and let's take for that an example let's say that every time as a person I press one of those buttons I want to send this information and save it into a database for that I will need to have an API endpoint that is uh receiving some information whether or not the user press the button Plus or the button minus and save this information in the database of course we would need first an API endpoint this is what it looks like I have created another uh route. JS
74:30 - 75:00 file inside of/ API SLC counter uh here we're using a puff function because we're going to send some information along with the API request we're going to say the user press the plus button or the minus button and we need to know this information specifically and then we're going to use a try catch block this is very important this is very common in JavaScript because sometimes things will go wrong we programmer make mistakes and we want to have some way to gracefully handle those errors we don't want our function to crash for instance
75:00 - 75:30 if I write some code that is not JavaScript when I try to execute this function is going to crash and in the front end part uh when people click buttons we don't want to uh show them the logs and these weird errors we want to tell them like oops something went wrong so what the try catch block does is going to try to run all your code inside and if there is an error then it's going to catch this error into the catch block and then you can safely return some information to the user and say something like oops sorry try again
75:30 - 76:00 okay now in this catch block first we're going to create a new variable called Budd and for that we're going to uh use the Json method on the request object since we're making HTTP request and response now we are receiving the request from the front end the do Json is the method that is going to turn the Json format which is a typical format for how data Transit on the internet we're going to use that to parse the data and make it into a JavaScript object so we can use it inside our API endpoint and this method is asynchronous
76:00 - 76:30 so we're going we're going to have to use the await keyword which is why we also declare the function as an asan function those asan await keyword are very important especially when you deal with API endpoint because um now between the front end and the back end uh you know we can have like a front end where the user is in New Zealand and my back end could be in the United States and so the data has to Transit from New Zealand to the United States and come back that's why we need this Asun 08 features to execute code where we don't know how
76:30 - 77:00 long it's going to take okay the next line is called JavaScript object destructuring so this body object has information that we send from the front end we're going to destructure this object and extract those two properties so this refers to http parameters we're sending parameters along with our HTTP request for instance we're going to say like uh this is the counter number uh two or this is counter number three and this is the action increment or decrement those are parameters we pass from the front end to our back end here
77:00 - 77:30 in this case I am just going to console log something so whenever I press on this button here you'll see that in my console log I see a counter counter one incremented and if I uh downgrade the counter 3 I will have another log that says counter counter 3 decrement of course here this is not the most interesting uh thing you can do with a back end um but you could do a bunch of other things here for instance we could have saved this information in a database we're going to cover database a little bit later you can compute some
77:30 - 78:00 data like do some math or advanced stuff and you can even call another API like open AI so for instance now if I go to openai API platform um this is made for developers uh you would typically log in or sign up to create an account they'll give you a little uh API key we're going to cover that later as well and then very simply you can just call open AI for instance to summarize a text that was given by a user or to uh fixed typo you can generate photos out of text uh you can do it using their Library so
78:00 - 78:30 there are two parts first you need to install this open AI package and then you just have to run this code right here uh this is not going to work but just to show you you would just typically run the code like copy past the code they give you right here I would need to import um the the package Etc but you can just run the code just like this right here and then your API endpoint is going to call another API endpoint that was created by open AI that is going to return You Back some data that you can send back then to your front end and you can make bunch of multiple API endpoints calls if you want
78:30 - 79:00 uh you can go as crazy as you want and this is just as simple as this okay and now finally we need to return information because remember HTTP is made of like a request and a response and since this is the back end we need to return a response so we use the next response object that is given from a next server so it's a little helper for us to send back information to the front end and we said that we want to format the the data we're sending back into a Json format and here we are passing an object with some data in this case I'm
79:00 - 79:30 passing success true and something interesting too here in the catch block you see we also have the same object of the data we want to pass back to the front end and we also specify something else where we say we give an object and we say status 500 because remember when you make HTTP requests across the internet there is a there are codes like status code uh to say whether or not the request was successful um by default it is too 200 200 means everything went well uh this is by default so this is what we're sending back here uh in this
79:30 - 80:00 case something went wrong so we want to tell the front end that something ran really wrong that's why we're sending the status 500 okay so this is for the API part now for the front end we want to tie uh the click of this button to the call to the API so this is what I have done first I have created a new stateful variable called is loading this is going to be used in order to uh show a loading state to the user so what I want to do is when the person clicks on the button I want to put everything on
80:00 - 80:30 hold like wait we're loading information we're sending this information to the back end wait a minute and then when the information comes back to the front end then we want to say okay it went well you can Cod it again I am using it inside of the the two buttons we have created uh this disabled attribute if it's true then the unclick event listener will not be triggered so if is loading is true this button will do nothing we can use this to prevent people from double clicking on buttons for instance so I also have updated the
80:30 - 81:00 unclick event listener I am not going to run code inside right away I'm going to call a function that I created called handle counter action and I am passing parameters like one parameter so that the function knows if it's a plus or a minus button here I pass decrement and here I pass increment so this function here is this one right here it is of course an asychronous function because we're going to call the back ends so we don't know how long that's going to take so we have to make it asynchronous in order to be able to use the await keyword it received the parameter action
81:00 - 81:30 so we know if it's a decrement or an increment function and the first thing we want to do is to uh set the loading uh state to true so that the user cannot double click on the button then we have a nice TR catch block and there is another part in the TR catch block called finally which is going to execute after the try or the catch block is done but no matter what this will be executed after try and catch and because here no matter if you got an error or not we want to set the loading State back to false so that the people can press the
81:30 - 82:00 button again in the catch block we just log the error we could have a little popup that says like oh something went wrong or something it's not big deal right here and then in a tri block this is where we make the call to our API endpoint on the front end side to make an HTTP request you're going to use the fetch method this function gets two parameters the first one is the uh API you want to Target so in our case we created SL API SL counter that's why it is here maybe you want to call an API that is not yours or an API that is a
82:00 - 82:30 different location you can just also add the the actual domain here to call basically any API you want and the second parameter are all the options we're passing uh so this is a big object in the first part we have the method which is very important uh so here it's a post method so we're making a post HTTP request which is exactly the same post as we have here then we have headers um headers are like a kind of like metadata that are uh passed along with HTTP request here we're saying that the information will be of type
82:30 - 83:00 application. Json this is the format of the data we're sending that's why here we have to uh parse those Json data and turn it into a JavaScript object and we have the most interesting part which is the body the body is uh usually where we pass some information uh to the back end since we're sending Json format we have to use json. stringify uh method in order to turn our object into a Jon a valid Json format and here I want to pass two thing I want to pass the action
83:00 - 83:30 so increment or decrement the little uh parameter here for this function which going to be a value decrement or increment and I also want to pass the counter ID which is the unique identifier for this counter so counter one counter two counter three so that on my back end I know which counter send me this information and then when we call this function is going to return a response so since we're going to wait for uh the response from the back end uh right after we will have access to the response if it is not okay this is going to invert so if response is not okay
83:30 - 84:00 then we're going to throw an error so this is automatically going to tell JavaScript to enter the catch block and here we're just going to log the error and then of course if response is okay so the API answered well so everything went well then we're going to update the state the counter State and we're going to increment or decrement the state of the counter and now just like this each of those C Hunter is going to make an API endpoint so is going to call this API endpoint for now we're just logging
84:00 - 84:30 uh the data inside of the console but you have basically done what developer do most of the time you create a nice front end for you people to interact with you create an API endpoint where you handle those interaction and you make them communicate with each other okay now we are entering the world of databases no matter what you are building on the internet chances are you will need a database at some point we can do very simple thing using database for instance like saving user after they login so that we can retrieve whether or not they're actually like pay users of our service or you can do more advaned
84:30 - 85:00 stuff like saving logs and information so later you can see what happens in your app a database is like a big bucket where you can put lots of information and retrieve this information really fast usually when you build like complex and advanced software you want to think about how the data works first this is something called the MVC the model view controller the model is the data uh the view is what people see and the controller is how the view updates the data so whenever you have a software ID in mind you always want to think data
85:00 - 85:30 first so for instance um you wants to build a social network like Facebook you have to think like okay we need users in a database each users has a name an email Etc then we have a list of posts like things that people can write each post has a user associated with it has a published date has a text a description an image Etc and then on top of these data you want to build your API endpoints to update the data and then you want to create the front endend part to call those API end points to update the data this is the typical workflow of
85:30 - 86:00 a proper engineer to be honest what I love to do is to just create buttons and stuff and then update the data later but I might get cancel for saying this so anyway uh let's study this database I want you to get started ASAP so I am going to give you again access to a free preview of my course we're going to cover how databases work and how do we connect it with our API for instance uh we're going to talk about Atlas which is a service that lets you deploy a database because uh we need to actually have a server on the internet that we can store a bunch of data and Atlas is
86:00 - 86:30 the one we're going to be using and of course I forgot to mention but we are going to use the mongodb type of database I'm going to explain why and what is the difference between this database and other types of databases uh we're going to install a little software called mongodb Compass to help us visualize our data right here on our machine and finally we're going to create a little helper function uh so that whenever we are inside of one of our API endpoint we can easily connect to our database to easily write or retrieve information before we start
86:30 - 87:00 writing any lines of code let's understand the overall architecture of a database how do we call a database so your clients a user a visitor will always make request to your web server the web server right now is uh the little program running on your computer later it will be running somewhere in the cloud so that anyone can access your app at the moment we don't do anything complicated the web server is basically compiling your react components creating an HTML page and sending back to the clients but at some point we want to do
87:00 - 87:30 some more Advance operations like the user maybe is asking for the dashboard page where they have access to some of their private information which in this case we have to access the database the database is a place where it's another server and it's a place where you only store data you don't pretty much don't do anything else it has an API key called a connection string that lets anyone with a key do anything on the database so we never want to make a direct connection from the client to the
87:30 - 88:00 database we want to do that connection from our web server to the the actual database so for instance if the user is asking for the dashboard page with uh his private information our app will process this information create all the react component with some empty data and then it's going to ask the database um we need this information about that user get those information put that information in the HTML page and send it back to the client this is pretty much how any database on the internet work
88:00 - 88:30 there are two types of databases SQL for structured query language and nosql for non structured query language SQL databases um are databases that are more um as the name suggests structured where it's a little bit like a spreadsheet where you have columns um and headers where each data is labeled so every user has a name every user has an age and things like that we're going to go with a nosql where it's more flexible where
88:30 - 89:00 the data is stored as um a little bit like JavaScript object but the big difference is that we don't necessarily need to have an a name an age and a hobby for each users we can have a user uh with Hobbies we can have a users with no hobbies and another value as a job for instance uh it's much more flexible and for this lesson we're going to choose mongodb as our database which is a nosql database it's one of the most popular nosql database in the world and
89:00 - 89:30 you will see it's very simple now just a little bit of wording with mongodb uh what we call a document is a little piece of data for instance when we save a user in our database we would create a new document um it's written in Json format that we've studied before so you would have opening curly braces and closing curly braces and then you would have a set of key value the you can have different types um as we've studied before you can have a string you can have a number you can have a Boolean you can even have an array or an object when
89:30 - 90:00 we have multiple documents with similar values it's called a collection for instance in our database we'll have a collection of users and you can create a collection for pretty much anything you want you can create a collection for um let's say you have a marketplace with uh jobs available you can create a collection for jobs um you have uh access to the Twitter database there might be a collection for a list of tweets um it goes on and on and then all the collections combined together form
90:00 - 90:30 our database normally for any business you create you would have one database if you create a new business you would have a new database and from time to time if you want to test something on one of your app you can create two databases for one of your app so if you break the test database the production database is still okay for our database we are going to go with the mongodb atlas to host the database and they have a free plan so we're going to get uh advantage of that you're going to go on the website link and click try for free
90:30 - 91:00 then create an account and I'll see you on the other side then you will end up on this page just fill the information with whatever feels right it doesn't really matter and then we're going to start creating our first database you want to go with the m0 type of database it is free you want to disable the preload sample data set we want an empty database and pick region of um somewhere in North America it is where the actual database will be and it's important to
91:00 - 91:30 choose something in the North America because it's likely that it is where our web server the brain of our app will be also hosted so we want to minimize the distance between the two and then you can just create a deployment and you might have to uh face a little capture okay you will arrive on this page and to connect to your database also called a cluster you will need to set set up a username and a password then you can just create a database user so these users that I just created will have
91:30 - 92:00 access to the database and you can say choose a connection method you can choose uh compath for now and we're just going to do this you're just going to copy that uh little complicated URL that we have here put it somewhere in a notepad or something we're going to need it later and then you can click done and you should be good to go we need to set up a little thing so on the left side go to the network access uh setting and then add an IP address and you will say allo access from anywhere and then
92:00 - 92:30 confirm the fact that we allow any IP from the internet to access our database does not mean that they can do anything they still need to have credentials to access the database the IP verification thing is just an extra layer of security that we need to remove because if you go to a coffee shop for instance your IP will change and you will need to every time update your IP in the database and also later when we're going to deploy our application to production we will not be the one accessing the database it
92:30 - 93:00 will be our web server that will access the database and we don't necessarily know the IP of the web server so it's much easier to allo any IP to access the database and just verify using the credentials okay then you can go back to the database and we're going to explore a little bit this part uh this thing called cluster zero is your actual uh cluster it's a little it's a physical physical space somewhere in uh Oregon in the US uh where you own a little part of a server and your database is hosted so
93:00 - 93:30 let's uh browse The Collection see what we have in there and normally your database should be completely empty so what I'm going to do is I'm going to add my own data I'm I'm just doing it to show you you don't have to follow along with that uh the database name uh we're going to call it let's say production and I can create a collection in this database and let's say we're going to create a collection called jobs and here we go we are in the database called production we are in the collection of jobs we can create multiple Collections
93:30 - 94:00 and we can also insert document in each of those collections I'm going to insert a job of the title entrepreneur in the database and here we go we just created our first document in our database you'll notice that we have this Dash ID equal um a long string of characters uh this is something that is proper to mongod that's how they identify unique documents that's what makes them super fast to search across millions of
94:00 - 94:30 documents you don't really want to touch any of this it's added by default and we're going to use it later to retrieve uh and edit documents okay now we want to install something called compass mongodb compass so go to the link below and click download now here you will have to choose uh your type of platforms by default I think it knows which one you're using then click download uh follow the instruction to to install the application and once you're done open it and you will end up in a page that looks like this one we want to connect to our
94:30 - 95:00 database for that you're going to pass the string we copied previously uh this thing here is basically the key the API key to your database anyone with this can do anything on your database that's why it has to remain private in mongodb it's called a connection string it always have this structure this little piece of text here then the username uh column and then the password ATS and then the URL to your database if you
95:00 - 95:30 ever forget this link just go back to Cloud uh click connect and then uh when you click Compass it will tell you the actual connection uh string and if you ever forget your password then in this case you would have to recreate a new user so for that you will go to database access and then you would edit the actual user so my user name is Mark Lon uh you would edit the password you cannot change it so you have to create a new one you can autogenerate one and then you would have a new password for
95:30 - 96:00 the same username and you would copy past those details right here okay now we can connect so now we are connected on the database you'll see on the left we have different types of databases uh admin confing and local are stuff that are added by default you don't want to touch any of those and we're going to go to the production one since I already created The Collection jobs uh it's displayed here if you want to have fun you can create a one just to play around and I'm going to do this with you I'm going to say it's maybe users and then create collections I'm going to add a
96:00 - 96:30 user I'm going to add those information to the user uh since it's using Json format you always want to write the key with quotes uh at the beginning and at the end and then you can write either uh text or uh numbers or booleans I'm going to click insert and now I have a new collection of users with one document and then I can do a bunch of things if I want to retrieve a user I will have to pass a query so I would have to write um
96:30 - 97:00 curly braces and then the name of the value I want to filter so is entrepreneur column and then true and then when I press enter is only going to return documents where the uh key is entrepreneur is true and you can do a bunch of other really cool stuff like for instance I want to find users where the age is greater or equal to 30 so I can use this little syntax here and uh press enter and it's going return those users If instead a wrate 40 it's going to return uh no other users because I am
97:00 - 97:30 not 408 and by double clicking on any value you can edit their value and you can also check the type of data that are stored in a database so the email is a string the age is int 32 is an integer so kind like a number aoan etc etc and recently with the new boom of AI you have this generate query feature um you might have to log in to
97:30 - 98:00 your account again so that it works um it's a quick overview here but basically you can speak in natural language and it's supposed to give you back the type of query you're supposed to run so let's try with this find users where age is lower than 40 and it generated this uh little query here and if I press f is going to query those user as we build our application we're going to go a little bit deeper about how to retrieve and how to edit data in the database for now you have a rough
98:00 - 98:30 overview and you can visualize all the data with mongodb compass okay so now that we know how to edit our database with our hands and our eyes let's do this with code for that we'll need to add our connection string somewhere in our application and because it's a very sensitive data we want to do it in something called environment variable so the first thing you want to do as the root of your project you want to create a m. local and I'm going to put it in the root there we go and here you want to first name the variable I'm going to
98:30 - 99:00 call this URI you can call it the way you want just make sure it's capital letters and there's no space if you want to add a space you need to add a dash then equal and then the value uh that we get previously from mongodb we can save the file and try to understand a little bit what is going on here first you'll notice that inside of the git ignore file there is this thing that says do environments. loal are basically ignored by git which mean that anything you put
99:00 - 99:30 in here will never be pushed to get so it's a safe place to put everything that is secure in your app so the connection string uh your stripe API key to process payments your API key to send emails uh we'll study that later but this is the place where you're going to put every sensitive information you'll also notice that we're not writing JavaScript we're not importing anything not exporting anything um it's it's a very different structure than we've studied before it's something very specific to nodejs okay to understand how to get this value in
99:30 - 100:00 the code so we can uh query our database uh I'm going to log the value of it process. do the name of your variable and if you do this and look at the console you will see that I actually get the value right here is because we have this script running on the computer npn run Dev and it's basically looking at any environment uh file so a file that starts with do NV EnV and then every uh variable that he finds there is going to
100:00 - 100:30 add it inside of the process. environment object and so if you want to call it in the code you would have to do process. do the name of the variable okay and just as a security uh thing here we are doing this command inside of a react server component so this is going to be logged in the S side of the server and not available on the client but if you reference the variable somewhere in the code and you put it in here you'll see that we can actually see the variable the fact that this variable is inside of this do environment file uh
100:30 - 101:00 doesn't mean it's invisible to users it just mean that it's not going to be sent on GitHub and so it's staying on your local machine okay so I'm going to delete that part because this is pretty dangerous to do and um let's recap really quick so this uh do environment file is the place where you put every sensitive information you have in your app there are two main advant ages the first one is that it's the file is staying on your local machine it's not going to be sent to GitHub and the second is that we can have different
101:00 - 101:30 values based on the environment our application is running let me show you what I mean by this here we are working on our computer we are building new features we're testing things so we want to make sure we work on a separate database as the one that will be used by our customers so these connection string here is going to connect to the cluster and if we had slash and then a name whatever name you want after I usually called M Dev and by doing this we're going to connect specifically on the dev database on the cluster and in
101:30 - 102:00 production where our app is running on versal instead of having Dev we can just say prod and so that we connect to two different databases with the exact same variable name so for now I'm going to name this one de you can call it development you can call it the way you want and I'm going to use that thing here I'm going to go to my project unversal in the settings part there is something called environment variable and this this is the equivalent of your uh environment file on your local machine but this one is hosted on versal and here is where you would add your
102:00 - 102:30 environment variable the key is what's before the equal sign and the value is what is after so you can copy past the value and instead of having the SL Dev we're going to say SLR and then when you save the project now this variable will be available inside of your project hosting on versal and so now when we are working on our computer this uh function that will connect to the database is going to use the mongodb URI we have in the environment. local because we are on our
102:30 - 103:00 computer and when it's going to be deployed in production on versal it's going to use the value that we just set up in versal so that we can keep the exact same code and have two different values for the same variable and you will see that it's common for developers to work on one database when you are coding and to work on another database for the production values a quick note on environment variables you might have heard in the past API Keys API Keys API Keys what are API Keys usually an API key is like a unique identifier so that
103:00 - 103:30 you as a developer can identify yourself for the service you're using for instance let's say you want to use the chpt uh like open AI API when you sign up they will give you an API key and you will use that as a developer when you make request to the open AI API those are extremely private you always want to keep it for you and the envirment variable file is usually a good place to put all of your API Keys okay now we need to connect to our database in the code for that we'll need a little package called mongodb so just pop up
103:30 - 104:00 your terminal and stop the current process you can press uh contrl C or command C and run npm e short for installed mongod DB press enter and when the packaging is installed uh let's restart the development server so npn run Dev and we're good to go now we need to customize the bridge to pass for instance our connection string um so we will will customize a function so we can reuse that function everywhere in the
104:00 - 104:30 code uh so we can update our database anytime it's a good thing to separate different type of functions in your code um so what we're going to do we're going to create a new folder inside of the root directory called Libs short for Library some people call it utilities uh you can call it the way you want I just like the word lips and then we're going to create a DJs file this will be the file responsible uh to connect with our database and instead of writing some very boring code uh let's use the code
104:30 - 105:00 base I created for you just uh use the link below uh you will end up on this page you can just copy and pass the code in JS okay so the reason we're copy pasting this code instead of writing it ourselves is because it's very Advanced uh because it's very boring and also because you will never touch this code it's only specific to this project once we've created this we'll never touch it again instead I'm going to break down a few pieces for you so first at the top we import the mongod DB
105:00 - 105:30 client so the bridge to mongodb from the package we just installed then we have this if condition so the process. environment dot is that things that let us access environment variable on our computer the URI is the one that we have in the environment. local right here and then when we when we try to evaluate if and then a variable is going to return true if the variable exists it's going to return false if it doesn't
105:30 - 106:00 exist and the exclamation mark is going to reverse that value so if this does not exist if we did not add the value somewhere in our project then this is going to return false and we're going to reverse it with the exclamation mark which means this becomes true and then we enter this line and then we're going to throw an error we're going to go over that uh in the next part of the but basically this is going to make the code crash so that if you forget to add this uh to your project uh the code the app
106:00 - 106:30 here will uh show you a big error message then we do const URI equal uh the name of the variable so we're just reassigning the value of this uh mongodb URI inside of a shorter uh variable something the name is just a little bit more friendly then we have another variable which is a JavaScript object with some options um this is just how do we connect to the database this is some like really advanced stuff and then we create those two variables uh with the
106:30 - 107:00 let keyword the let keyword just mean that uh later uh in this file we'll probably update the variable give it different values it's not a constant and then we have a big if else statement the if else statement is going to check if that is true um the process. environment is what we've talked about earlier the node - EnV is a very popular environment variable it's been given uh by default when we run the project with nextjs is
107:00 - 107:30 going to set these to the actual uh environment and the environment remember it could be either development on your computer or production on the web machine the web server somewhere on the internet so what this line does is basically is checking if we are running the code on your computer or on the online server and the reason we do that is because on our computer it's a little bit different how things are handled uh as you're editing code and you save and
107:30 - 108:00 it's refresh the entire code um it's a bit different from the server where instead we're just going to deploy the code once and it's going to be running forever this is very advance but what it says is basically create a connection with a database and if we save the file and then we refresh everything keep the connection open instead of killing the connection and reopening one it's just a matter of performance again this is very Advanced uh you really don't want to get into this this is not important the only important line here is this one where we
108:00 - 108:30 have the clients the variable we declared previously and equal to new mongodb clients the mongodb client is what we import from mongodb at the top this is the driver that let us connect and we give it two things we give it the URI which is this thing so basically we give it the connection string the keys to our database and we give it uh an object of options with a few uh parameters which in this in our case it doesn't really matter so this thing is basically a bridge to let us connect to
108:30 - 109:00 our database using JavaScript and that's why we have the line here client. connect and then we have this line export default client promise and so this uh variable here is equal to client. connect so we exporting a little JavaScript object that is connecting to the database so now the thing that matters is how do we use it to connect to the datab base uh in our code you can save the file and close it because we'll never touch it again and then in our page.js it this is just to show you this
109:00 - 109:30 is not going to work right now but this is just to show you a glimpse it's as simple as this first we need to import the client promise that object we just created that has the keys to our database we import it from the lebs uh folder inside of the JS file and then um we we say something like um do DB to say we want to connect to a database and then do connection for the connection we want to check and then we can have something like do find with
109:30 - 110:00 some parameters to do exactly the same things we were doing before all right so having a database is nice but if we could actually use the database it's even better and for that we're going to authenticate user so whenever we talk about login sign in sign up sign out log out whatever uh this is what roughly authenticating users mean so after this section users will be able to create an account we're going to save this user information like name emails inside of our database and then we will be able to check if the person is actually a user
110:00 - 110:30 of our application to let some people do some actions like access their private dashboard or some people not access the dashboard because they have not yet created an account user authentication is something that is extremely popular on the internet so there are already bunch of developers who build open source project that are working really well and for that we're going to use one called oath. JS if you search o DS on the internet you will find this website you can click get started and follow the tutorial for whatever framework you're using in our case we're using nextjs so
110:30 - 111:00 first you need to install uh next oath at beta and then you need to run this little common it's basically going to give you a little token like a unique identifier that we're going to use later to Hash some information to encrypt our information it's not a big deal you'll see and then it'll tell you a few things you need to do if you want to follow along with me and make sure you have all the steps completed um in your SL API folder you should have created an O folder and then you should have created this like a little bit complex do do do dot next o folder and inside you have a
111:00 - 111:30 route. JS and you should have this code inside this means OJs is going to create a set of API endpoints for you so that you can use that to authenticate users you should also have add your uh unique um secret key that you generated earlier in the environment. loo and you should have at the root of your project an oath. JS file this is basically like the control center of OJs here you have a list of all your uh providers for now it
111:30 - 112:00 should be empty the providers we're going to cover that later is basically how our users are going to uh log to our app so that could be using email like magic links or email and password or they can be using social providers like Google Facebook GitHub and then we should have an adapter an adapter is where we are going to save the user information in this case we're using the mongodb adapter because we are going to save the user information inside of our database all right now your project is set up it's important to understand roughly how user authentification work on the Internet it's it's pretty much the same thing
112:00 - 112:30 whatever app you're using so for that let me show you a quick video of how everything works so when our client visitors of our website are going to the loging page of our site our server is going to give them back a signin HTML page this page will will have several options to login um email Facebook uh Google uh anything will set up for now it's it's empty because we haven't configured anything in OJs the type of login we choose is called a provider so we can have a provider for Google we can
112:30 - 113:00 have a provider for Facebook for instance on this page the user can click on a type of logging they want or enter their emails and password for instance this is going to make a post request to our / apios signin and point and it's going to pass some parameters so if they sign up with an email it's going to send that email if they trying to sign up with Google is going to say type Google and our server is going to receive that request and going to process it if the user picked a social login for instance
113:00 - 113:30 login with Facebook then our server is going to communicate with Facebook to make sure that the user actually exists and then our server is going to communicate our with our database so mongodb first is going to check if the person actually exists and for that we're going to use emails so wherever a user sign up with we need an email so if it's a email and password we have the email if it's a magic link uh where people receive an email and then they click a login link to be logged on the app then we also have the email and if
113:30 - 114:00 the person use a social provider like Google or Facebook both of those services will give us the person email so that in our database OJs can check if the person exists if the person doesn't exist then uh OJs is going to create a new documents inside of our database so we store this information and then OJs is going to create a little session for the user the session is just another document that we will store in our database it's a very simple document that has a unique token so unique identifier so that we can
114:00 - 114:30 easily retrieve the user it also has an expiry date which is usually 30 days that's why sometimes when you log in to a service after 30 days they ask you to log in again and we'll use this session in order to verify that the user actually has access so our server is going to send back this session to our client the visitor and he going to put the session inside of a cookie we're going to study cookies in the next lesson the purpose of putting the session token inside of the cookies is that first it's persistent so if the
114:30 - 115:00 user close the tab and uh open a new tab to log to our app the cookies is still there and the cookie will be sent to every request the person makes to our server so that we can easily identify them and the user will be redirected usually to a dashboard page or an app page and after this process every time the user will make a request to our server whether to get a new page or to um call an API endpoint the cookie will automatically be sent so that's our
115:00 - 115:30 server will receive the cookie and it can easily check if the cookie that contains the session token is actually in the database and it's not expired we talked about cookies what are cookies they are small piece of data that are sent by web servers like your API for instance to an internet browser and then your internet browser is going to store this data somewhere on your computer or on your phone C cookies are used everywhere in the internet they're used for things like tracking analytics they're used for user preference sometimes you see like a model on the
115:30 - 116:00 page and you say I don't want to see this anymore and then it's going to set a cookie that says the user doesn't want to see this anymore so never show it again in our case we're using cookies in order to store the session token data so that we know whether the user has access to our application or not let me show you this example this is a website that I built that is also using OJs if you want to see your cookie you can just open the developer console and go to the application Tab and under the cookie you will normally see the domain name of your site and if you click it you will see all the cookies that are being
116:00 - 116:30 stored by this website and if I click on the secure OJs session token you'll see that the value is long sequence of characters so that now every time I make a request on the site whether I navigate to a new page or ask an API endpoint I'm also sending this little uh piece of data to uh the inso website and on the back end when the to receive the request from the person they also receive the cookie value and they can decide uh anything they want they can check if the cookie exist if they can check if the
116:30 - 117:00 cookie is not expired and they can perform some actions like if the cookie is expired ask the user to log in again if the Cookie doesn't exist then we have the user to sign up uh there are a bunch of actions that we'll cover later okay now let's be practical and talk about some use cases of authentification inside of our app things like signing out signing up protected Pages private API Etc okay so this is one of my nextjs projects uh not the one I showed you earlier but it works exactly the same way I have the same system for all of my
117:00 - 117:30 apps so here um when I navigate to my domain name or local / apios SL signin users will end up on this page where they will have multiple options to sign in to my applications this is done automatically for me by OJs I have nothing to do besides sending up the providers information so here I have created a provider for Google I have created a provider for email we're going to do that later this is what you set up here in this providers array in .js file they have tutorials to help you set up
117:30 - 118:00 any kinds of providers you want so you want to check out their documentation once they sign up or sign in here this information the information they give me here will be saved in the database I will get at least their emails and if they sign up with Google I'll also get their names and the profile picture they use for their Google accounts so for instance here if I add my email and I stand up with uh email then because I am using the mongodb adapter from OJs with just this line of code in my database I am going to see the user Mark gmail.com
118:00 - 118:30 created it's going to add a unique identifier field is also going toh check if I verify my email if I click the link inside of my email we're going to cover that later so I have this information saved in my database then what I do I redirect people after they successfully sign up to a SL dashboard page this is a private and protected page only for people who sign up and the code is actually very simple what you see here on the screen on the right side is basically just this like little uh jsx code right here and no matter which user
118:30 - 119:00 is going to my app it is the exact same code it's basically like a template that I fill with the data that was generated by the user so this is the page.js file you see here so this is the typical nextjs file I export this react components I return some GSX and here uh there is a function that I created so get user this function right here that is executed so whenever someone go to my/ dashboard page this function is executed and this function first call the oath function that is created by OJs
119:00 - 119:30 with this single line of code what OJs is going to do in the background is going to check if the person has the right cookies so if the person successfully signed up to my app and if that's the case it's going to create a little session object with some information but if the session does not exist and the person has never actually created an account for my application then they are going to be redirected to the homepage of my website so for instance now if I go uh if I open an incognito tab where I have no cookies it's like I am a new user and if I go to
119:30 - 120:00 the SL dashboard press enter and boom I am redirected to the homepage of my site and with just those uh three lines of code I am able to uh either show information to the right people who sign up to my service or don't show anything at all and because this is a react server component uh this is a safe place to do all the checkup verify that the user is authenticated so that's uh people who are not will never actually see the content inside okay now let's assume the person has created as um an account so they are authenticated they have an actual session object uh OJs is
120:00 - 120:30 going to populate the session object with some information so if I go to session. user. ID this is the exact same thing as this ID here inside of my database and that way I can simply retrieve the user from my database using the session of the user the actual authentification St of the user and I can find the right information about the user in this case I find the user boards those little uh cards here um so that
120:30 - 121:00 anyone who goes to my app who has already signed up will see different information because everyone will have a different uh session user ID and so I will retrieve only the information about the actual user who is now browsing my site and I'm going to populate the content the visual part of my app with what I retrieve from the database that I got from the unique user session ID this is how you make a page private in your application now let's say that I want to protect an API endpoint like let's say this post function inside of/ API board
121:00 - 121:30 then I would do the exact same thing I would retrieve the session and if the session does not exist then I will just return uh an an error like a an HTTP response with a status code of 401 and that's pretty much how the entire authentification system work how you make uh protect pages and private apis endpoint for your users how you you create one page that can display different kinds of information based on the actual users who signed up and how you reject people from your app if you don't want them uh to visualize or see
121:30 - 122:00 some information all right now it is very likely that after authenticating users you will need to send emails so there are two types of emails in the world transactional and marketing emails the marketing emails is the one usually you don't like to receive as a person uh they are U companies who broadcast one message to thousands of users like a discount for a product or a Black Friday deal and the ones we are interested in as developers are the transactional emails so we can send magic links when people want to log in to our service for
122:00 - 122:30 that I'm going to leave you with a little preview of my Cod fast course where we're going to select a provider a service to send those emails and how to set up your DNS record in order for uh your domain to be able to send those emails there are many providers out there there is mail gun which is very famous and there is a recent which is a fairly new but it's very fr and they have a free plan so we're going to go with this one click the button get started and create an account once you signed up you will go to The Domain part
122:30 - 123:00 and click add a domain here you will enter your domain name and we're going to send email from a sub doain so I'm going to write something like recent. cfast sas.com it's important to use a subdomain because if someone managed to hike your system and send uh thousands of emails to uh people who don't even exist with your root domain it might damage your domain reputation so instead we're going to to use a subdomain so that uh if something goes wrong it's just the subdomain reputation that is
123:00 - 123:30 being impacted you can say whatever uh I usually use the name of the service I'm using you can say email you can say mail you can just say e this is totally up to you and then keep North Virginia for the location and then add the domain resent is going to send emails on our behalf so we need to verify that we own this actual domain So Below there is a list of all the D records we need to add so first there is an MX record with uh send. your subdomain with this value you can copy those and go back to your name
123:30 - 124:00 chip account or whatever you use like GoDaddy uh for uh your domain name and then uh in the DNS panel that we've seen earlier the advanced DNS tab you will be able to add those records in name chip there is no option for MX record here is just a little bit below in that category in the mail settings instead of email forwarding you can go and choose custom MX and then you can add your own custom MX records so then I add exactly what
124:00 - 124:30 they ask me the host the value and the priority of 10 and I can save the changes then I can go back to resent and do the exact same thing for all the records so send. resend as a text record with this value so I can go back here and find the txt records and I can save this one and I'll do again for this other one right here add a new record txt and press save and the final one the DeMark record which is another txt records and so I'm going to go here
124:30 - 125:00 txt and press save and the reason we're using those text records which are commonly known in the email word as dkim SPF and DeMark records is to tell um email providers like Gmail that we are legit so that our emails don't end up in spam okay so now that we've added all the records we can verify the DNS records it could take a while uh it could take sometimes up to a few hours uh DNS records are pretty slow
125:00 - 125:30 to update um just make sure after an hour or two if it's still not verified to make sure that you've entered the exact same values as they show here since my domain is verified now I'm going to go to the API Keys section and I'm going to create an API key you would normally call it the name of your project so for mine it will be code fast SAS and then for the access uh select sending access and then the domain we just added and then click add and copy that key then go back to the code editor and the file. m. local add a little key
125:30 - 126:00 called recent Das key or whatever you want but just make sure you use the word recent so you remember what it is and then equal and then add the key right here this little sequence of character is called an API key is basically the key to your resend account so that you can send emails from your code and make sure you never share this key with anyone otherwise uh they can send email on your behalf and you can save the file and close it and now you're ready to send any emails to anyone now just to
126:00 - 126:30 show you an example of how you would do so in the recent documentation there is something called API reference and you can check they have something called send email right here and they show you for a node js project how to send an email and it's as simple as this you will have to download their Library so npm installed recent and then you import their object then you give the API key we just created to that object so we have a client or a bridge to send email and then with just this lines of code
126:30 - 127:00 you can send an email to pretty much anyone every developers SL business owners have different needs on emails but I wanted to show you a quick example of how I use emails for some of my apps so uh here on the left this is a file where whenever someone purchase one of my product this code is being executed there is a part where I send the customer an email like a welcome email to send them a unique link so that they can sign up to the app and also how to get started and this uh this here is a function that I created myself called
127:00 - 127:30 send email uh this is what you see on the right side and so in this send email function I am calling the typical recent API we just watched earlier where I pass from to subject text HTML and a bunch of other things and I export this function send email from this file so that anywhere in my app I can just do await send email the name of the the EMA email of the person uh the subject line and the content inside of the email and I can send literally an email to anyone and the part you're probably going to need emails the most is when people try
127:30 - 128:00 to sign in using emails they're supposed to receive a magic link when they click on this button and for that I am using the provider the recent Provider from uh OJs our o user authentification uh Library we talked about earlier and with just this single line of code here where I give OJs the access to my uh recent account through the API key they are able to send an email to anyone who input their emails here that looks like this uh where if people click they will
128:00 - 128:30 then be uh logged in authenticated into our applications in this case you don't even have to customize the emails you just have to have this line of code inside of your OJs file and uh OJs is going to do all the work of crafting the emails preparing the unique link for your customers to click on and all you have to do is to give OJs your recent API ke all right now we are entering the most exciting part of the course the part where we're going to set up a little pricing system for our application to charge money on the
128:30 - 129:00 internet you will need a payment provider uh the two ones that are pretty famous at the moment are stripe and lemon squeezy I personally use stripe but it's not available for every countries out there for instance if you're watching from India uh you might have to settle for lemon squeezy because they will let you open a lemon squeezy account before we talk about the Practical things I want to give you a few unsolicited piece of advice the first one is that in order to open a stripe account you will need to have a business that could be a freelancer
129:00 - 129:30 business that could be a legit uh company like an LLC or something but you will need a business now your business does not have to be in the country you're living in you can have an offshore company be careful with that because um it is very tempting to open a 0% tax offshore company in Delaware USA I've seen lots of people doing that but you have to be extremely PR cautious with what your countries allows you to do or not because in some countries you would have a double taxation so you're going to be taxed 0% of your us company
129:30 - 130:00 but you will be taxed by your country on your US income so be careful with these kind of things you want to make sure you always ask chpt uh where you leave what kind of business you're running what kind of company you intend to open and ask jgpt what are the rules what is the double taxation saying about that uh make sure you do things really properly from the day Zero because you really don't want to go into legal issu the number one reason we're doing this internet thing is to have as most Freedom as we can and there's nothing worse than being engage in some legal
130:00 - 130:30 stuff so do things properly from Day Zero okay and another question I get asked all the time is uh how do I handle my strap accounts with the company so I have one company that hold all the strap accounts for all of my businesses so in my case I have multiple businesses and for each business I have one stripe account per business that is under the company name and one final piece of advice about pricing for your software your digital product uh you always want to price a little higher than what you think is right because it's a tendency I
130:30 - 131:00 see in developers to underprice themselves uh you're amazing you're doing uh something that most people don't you're shipping something on the Internet your time deserves to be paid well so make sure you price your product well uh pricing is marketing those are two are really correlated I made a video an entire video uh dedicated to pricing I add a link into the description if you want to watch it that's going to help you uh choose your pricing system okay now before we start coding our checkout and subscription system we need to understand how stripe or demon cuzi is
131:00 - 131:30 going to integrate with our software both of the payment processing platforms are going to give us some kind of like user interface elements such as like a checkout page where users can input emails and credit card Etc that we're going to show to our clients this page is going to communicate directly with a payment processor which is going to process the request for instance charge the credit card and create a subscription and the payment processor is going to send us back some events to confirm what just happened something
131:30 - 132:00 like uh that user just pay the invoice we're going to tell the payment processor to send those events on our API so we can update our database and do things like granting or removing access to the product for a specific user we can also update the user information Etc and in the background our payment processor is also going to execute some other tasks so for instance if we set up a subscription at the end of each month the payment processor is going to try to charge that credit card of user again without us having to do anything now
132:00 - 132:30 let's dig a little bit deeper inside of the payment processor Solutions those again it's either stripe or Leoni both are working in similar fashion there are two main categories of things we will touch the first one is the product so if we compare your software with a library of books a product could be a book it's the item or the service you sell and the price SLV variance the price is the word in stripe and the variance is the word in lemon squeezy is like a version of your product for instance a PDF book uh
132:30 - 133:00 a Kindle version of your book a physical version of your book you get it and the other part is the web hook events those are notification or messages whatever we want to call them that are sent from the payment processor back to our server our API to let us know about some information that happens for instance a customer just pay the invoice or the last payment of that customer failed etc etc okay so no matter if you are running a subscription business a onetime
133:00 - 133:30 payment digital product or a advance SAS with meted usage the payment flow is always very similar there's a part where users can interact with uh your front end so like let's say they wants toh create a checkout or they wants to access their customer protal to uh update their building information cancel a subscription download an invoice Etc and there's another part called the web book where it's more like invisible things happening in the background we're we're going to cover that later so first the part where people can interact with your system for instance like creating a checkout uh for one of your products
133:30 - 134:00 they will be able to click a button this click will return a URL for uh in my case stripe and then here uh people will be able to input their credit cards and subscribe to a plan that you have on for your software or just buy a digital product for instance this is usually done in two part there's the front end and the back end the first thing you will need to do is to create a product in stripe in the of the software I just showed you I have a bunch of plans so I have a bunch of products but you could have technically just one and then uh this is the code of what I just showed you one more time um this is a simple
134:00 - 134:30 button so you can see it's a it's a react component that when people click it's going to trigger this function and this function is basically going to make an a call to my API and the API endpoint is right here on the right side uh here first I need to check if the user is authenticated because I don't let people who are not authenticated to my app make a payment and then I'm going to use the stri API to create a checkout uh in the stripe API call I give stripe the price ID of the product customers want to subscribe to I also give a client
134:30 - 135:00 reference ID which is a unique identifier that I will use later in the webbook part the invisible part to retrieve information about that user so that when stripe tell me oh this customer just made a purchase I know exactly which customer in my database that is and then I get back a URL from stripe which I sent back to my front end and in my front end when I get the response here here I open a new window to that URL I got from stripe and this is why after clicking the button customer end up on this checkout. stripe.com so that they can start a subscription for my app in the case you
135:00 - 135:30 want to have a customer portal which I recommend where customers can update their uh credit card information they can download invoice Etc uh you can use customer stripe customer portal it works exactly like the stripe checkout you make a call to the stripe API they're going to give you back a link and they're going to create um a page for your customers with all their information so your customer will be able to see the credit card they use to make a checkout they will be able to uh see their billing history they will be able to cancel their plan even change
135:30 - 136:00 the plan so that they can perform any form of like a billing settings this is great we can create checkout for our users but now you want to give access to the product to your users for that we're going to use the stripe webbook events so in the developer tab inside of the webbook uh part you will be able to add webbook endpoints a webbook endpoint is basically like a little API we're going to create to listen for events from stripe so for instance when a person completes a checkout we want stripe to let us know inside of our webbook endpoint that a customer XYZ completed a
136:00 - 136:30 payment so that we can give them access to the product when you add an endpoint you add you have to add the URL of your API so that could be domain.com AI stripe and you have to choose the events you want to receive they have really a bunch of events I think over 100 so you want to select only the one that you need let's check the code for that so for instance this is one of the webbook endpoint for one of my software I put it in the/ API SL webbook route and here I
136:30 - 137:00 have a simple function this is just a regular API endpoints like we used to do previously and in the first part we want to make sure that this uh only stripe can send us events so we want to verify that the person making a call to this endpoint is actually stripe that's why there's a little part of the code here that stripe will give you when you set up your account uh we use that to verify the source of the event and then we get the event data from stripe and we are going to iterate over which type of
137:00 - 137:30 event no matter what you are running whether it's a software it's a digital product no matter what usually the checkout session completed is the number one event you want to listen for this is the part where you would typically give access to your product a checkout. session. completed means someone went to like a a proper stripe checkout they input the credit card details and successfully completed the checkout and if you remember from the previous part when I created the checkout I would give a client reference ID to stripe and now stripe is going to attach this client reference ID to the data that I get from
137:30 - 138:00 the events so that I can just use that to retrieve the user from my database and in my case what I do usually is I have an as access Boolean on my database that is either true or false and it becomes true only if the person has completed a checkout to use the customer portal the that part that page where people can update their credit card details Etc I also save the customer ID I get from stripe inside of the user and here you can do pretty much anything you want you could send an events to the customer that say thank you for your
138:00 - 138:30 purchase here is the unique link to uh download the book uh you just purchased you can literally it's an API endpoint so you can literally do anything you want and if you're running a digital product this checkout doation and completed type of event will get you as far as you want now if you're running a more advanced like maybe like a software with a SCP subscription system uh this check out the session that completed uh same could be used in order to give access to the product but now if the person has canceled their subscriptions they stop paying or their credit card stopped working you want to revoke
138:30 - 139:00 access to your product and for that you can listen for the customer. subscription. deleted event here stripe again will send you some information about the customer so they could be the client reference ID or they can be the actual customer ID so you can retrieve the customer for your database and what I do in my case is if the person has a deleted subscription then I'm just going to remove the as access I'm going to turn it to false and in the front end part the visual part of my app whenever they try to do something I check if has access is true if that's the case I let them use my software if not then I just
139:00 - 139:30 revoke access I redirect them to the homepage or I send them back an error that says that you need to subscribe to my service in order to use it stripe really has a bunch of uh events that you can listen to um don't go too crazy with it because it can become really complicated those two events will get you really far uh there's another one that's really good for marketing which is the checkout session EXP HED which basically if someone create a checkout session but did not complete the session so they uh they abandon the cart that what they call it in eCommerce uh stripe would let you know that and sometimes
139:30 - 140:00 they would have include their emails and you can send them back an email that says hey I noticed you didn't finish the payment uh you can ask them question why they didn't complete the payment or you can then send them a coupon so they come back to your site or whatever by now you have a pretty solid understanding of what you need to know in order to build a software there is nonetheless a part that is pretty important about security how to make your app secure to make sure that there is no data leaks or to make sure that the users has access to the right information Etc are you're lucky
140:00 - 140:30 after 2024 there are a bunch of AIS that are in your code that are going to help you understand uh if something is wrong or not so what I really really really recommend you to do is to open a chat with an AI inside of your code base give it access to the entire workspace and then ask question so in this case I ask a very basic question which might not cover everything but you can ask AI to review your entire code and ask if there is a security issue somewhere and you can go deep and ask specific questions this is very important to do this
140:30 - 141:00 because AI will be able to review the entire code base really quickly and able to flag some very important things which is going to save you a bunch of headaches there are a few part that are important about Security in this case of our project we have the one about react server versus client components as we mentioned earlier everything in this project is a react component and and by default those components are server components so they're rendered on the server where it's safe to do some kind of operations and if we turn them into a client component by adding use client at
141:00 - 141:30 the top then they are rendered on the clients and so simply put client components are not a safe space to do some sensitive operations you want to use client components for stuff where people can click on buttons but you want to make sure that in those clients component you never perform some kind of operation like a database query for instance so make sure you always do datab B connections and all forms of like sensitive operation things that people should not be aware of on server side components in this case this is the page that renders the dashboard you see
141:30 - 142:00 on the right side here I have this little function that is going to retrieve the user data based on the session of the user so I need to make a database connection and retrieve the user and I have to make sure I do this operation on the server so either on my computer or on the place my server is hosted on the internet but never on the client's side okay we covered this a little bit earlier about envirment variables you want to make sure that your API Keys Etc are stored inside of off. local inside
142:00 - 142:30 of your computer and add your un variable on your hosting provider when you deploy your code on the internet you want to make sure you use onment variables in order for your code to never be pushed accidentally on the internet here for instance if I do process. of. stripe API key inside of these client components this is a really terrible thing to do because every every person who is going to see a page where there is a button delete dashboard component will be able to see the stripe API key so really really don't do this and then you want to have some form of
142:30 - 143:00 controls on your API endpoint so whenever a client someone on internet makes a request to one of your API endpoint you want to have like a policeman or whatever this is that checks a few information about the person for instance have you logged into to my app have you paid for the service if you have paid which plans are you on you want to have like a set of control at the top of your API endpoint to make sure that you only allow a specific subset of users to perform some actions for instance this is the API endpoint here to create a record in my database
143:00 - 143:30 to create a new board like you see on the right side uh here I'm checking a few things if the body does not include a name so the name of the board I am rejecting this API endpoint I also check if the user has a session and if it does not I'm going to kick the user out and then I'm going to retrieve the user from the database and I'm going to check if that person has access or not to my product meaning has the person paid or not and one more time if it does not have access then I'm going to reject this from the API endpoint to make sure that the code below is never executed and finally there what developers calls
143:30 - 144:00 middleware firewall proxy uh they have different names B on what you need uh but basically they will be like a middleman between your client people making request and your server because uh the client can be a malicious actor and it does not necessarily has to be someone like a a person on the internet like a physical human but that could also be a developer U making request to your API using aot script and in that case they could send like a thousand request to your API endpoint in 1 second
144:00 - 144:30 this is where you want to have like those firewall proxy middleware that stands in between you and the server to make sure that uh the requests are only sent to your server if they match a certain um conditions for instance you can block access to a certain country or you can use a rate limiter that checks uh how many times this IP address has has requested access to your API endpoint and you can say like if you have done this more than 10 times per minute then I'm going to block access there really are a bunch of things you can do here uh it can get really complex
144:30 - 145:00 but here you have a global understanding of one of the Core Concepts of security that you want to dig deeper when you deploy your application to make sure everything goes out safe before we talk about how to use AI to code super fast we're going to go over a few advaned concept that are not necessary for you to learn uh but they're pretty handy and useful and I will show you in some of my applications how I use each of them so for nextjs we have the dynamic routes for instance if I go over these tweets you can see that it's under x.com Markus
145:00 - 145:30 status unique identifier and if I go to this other tweet of mine uh it is the exact same URL except that it has a different identifier in the route this is basically a dynamic route Twitter has built this like a structured page like it's ENT page where uh if I go left or right no matter what which tweet I look look it's going to always look the same on the left but the content inside the actual tweet will be different this is called Dynamic route this is basically like how you create those templates that are empty like structures and then
145:30 - 146:00 you're going to fit them uh the data so it has a similar uh layout but it has different content this is very helpful if you do some things like SEO for instance uh and then talking about SEO we also have nextjs metadata so for instance this is one of my websites uh metadata are things that are invisible to users like here the title of these website the descriptions and a few keywords etc those are visible for search engines like Google and so you want to make sure you have the minimum metadata for your app to be indexed and
146:00 - 146:30 referenced by Google nextjs makes it very simple when you export a constant called metadata with title description um URL whatever they will automatically add those tags to your page so that Google can reference you and finally there are the loading screens uh for instance if I go to this page and refresh the page you're going to see that I'll see this like state right now where I have those white cards because the page is actually loading it's not necessary but it gives a little uh clue to user that something is happening when
146:30 - 147:00 we're actually fetching the data from uh the database so they have something to look at all right now we have uh advaned St CSS classes transition group uh opacity Shadow border all of them are pretty handy uh they will help you make better designs uh the hover one is probably what you are seeing right now when I'm hovering my mouse cursor on this card or that card um this is likely a hover effect from CSS so you might want to learn some of them about react um I think you learned pretty much a
147:00 - 147:30 good chunk already there is another hook you might have to use from time to time which is use ref and you have this suspense component for JavaScript uh there are a few ones that are important the local storage this is like a mini database inside of your internet browser so for instance uh you can see this is one of my websites it helps people make logos so they can uh change the size of the logo they change the icons they can change the colors Etc what I do as a developer I put stuff inside of their local storage um actually if you open
147:30 - 148:00 your developer tab you will see inside of application local storage and here logo fast I can see all those things here written are things that I add automatically with JavaScript to the local storage of my users and for instance this is where I save the actual settings of the person so if I reload this page I am going to see the exact same logo that I used to see because it's loading the information from my local storage okay now it's pretty slow because my Wi-Fi is really bad but there we go uh it's loading this uh this apple
148:00 - 148:30 again from my local storage so people don't have to create an account because all the information is stored inside of their local storage this is very handy when you do like free tools marketings and stuff like that uh we have not covered yet form validation uh so when you have forms like stuff where you people can input stuff uh you can let them input text you can have like a controls where here I'm saying that you can only have maximum 280 characters so here I can press my keyboard but nothing is happening and then you have um
148:30 - 149:00 methods on uh arrays and objects like sort and find uh which are pretty handy methods uh sorting will help you sort an array based on the certain conditions fine to retrieve one item from an array uh there are a bunch of helpers inside of JavaScript that's going to make your life easier okay I guess we are entering now the most exciting part of this video where we're going to use AI in order to 10x your code output as a developer now if you haven't followed the previous part of this video and you don't know
149:00 - 149:30 yet how to build a little software by yourself I really really really recommend you to do so before we start using AI uh to code for us because AI is really good at explaining things to help you learn but if you build stuff if you use AI to write stuff that you do not understand you will likely end up in like what people call the AI hell Loop where you're going to be prompting an AI that will make first a good output that looks like you can make a bunch of stuff but as soon as you get stuck a little bit or as soon as you find bugs Etc
149:30 - 150:00 you'll spend hours prompting the AI to fix stuff which is absolutely not fun so learn the Fundamentals by yourself and start using AI to 10x your output after that okay the first step is to actually set up your AI coding agent inside of your code editor at the moment recording this video there are two uh great code editors the first one is vs code which has an AI option with GitHub copilot this little guy here since it's free I think this is where I recommend you to get started and I am personally using cursor AI uh both are very similar so
150:00 - 150:30 you can swap back and forth you won't be lost then once you set it up inside of your code editor you will have to choose a llm a large language model uh in my case I use clo 3.5 sonnets uh to be honest don't overthink that pick the popular language models so at this moment GPT 40 is also very famous so just pick one and let's move on to the next part and now it is time to build a deep relationship with your AI let me show you what is my uh workflow with AI to code fast okay now uh you are in your code editor you have an AI so basically
150:30 - 151:00 you have like a software senior engineer that has the knowledge of your entire app so you can ask the AI to do pretty much anything for you I use this little like inline AI feature uh when I need to change one line of code usually this is what I do for CSS properties and styles so for instance uh this makes no sense but I would say something like uh you know add this CSS property to the div and then I would just review the change and accept it or not uh this also works super well if you go to the web and you like an SVG like this little icon here I like it so I copy past it into my code
151:00 - 151:30 but it is an HTML uh SVG and I want to turn this into a valid jsx so for react and it's going to do all the brain work of updating uh the right attribute so it's a valid GX okay now for anything that is more than just one or few lines of code I use the chat you can press I think commment plus L to pop it up and I use the chat for almost everything as we have covered in a previous section you can use it if you don't understand a part of the code if you want to learn about a specific function Etc it is very useful for Education it's also useful
151:30 - 152:00 for brainstorming sometimes I have a feature idea in mind and I asked the AI how would you implement this feature uh here I just this is just an example but normally you want to give more instructions and then you will see what the AI suggest here I will just check what the AI had come up with that give me a little idea of how to implement it then I just keep chatting with the AI in order to get something that I think is worth it and then of course when I'm ready I apply those changes to my code base and I review them step by step something that is very important for this part is the the context the context
152:00 - 152:30 is basically how much knowledge do you give to the AI about your codebase in this case I gave the contest of page.js so this actual page right here which um for a big feature like this one where I'm like adding a complete new feature to my app is probably not enough that's why sometimes you can just uh do this like you press comment enter and you will give the entire app all the files will be used as context for uh the chat with the AI it's a little bit slower but you will get better results and you can also give like specific lines of code AS
152:30 - 153:00 context so for instance I can select this SVG and I can say add to chats and now the AI knows exactly which lines of code I'm referring to and it gets better results all right and another thing I love which is called the composer in cursor if you press command I it's going to pop up this window that looks like the chat but it's actually a composer so you have access to like an AI agent so it can run your terminal it can create edit files without you um accepting or not uh this is very powerful you can do
153:00 - 153:30 really a bunch of stuff but it can also be dangerous because it goes really fast and it change a lot of stuff uh what I do usually I use the this composer thing when I know exactly what I want for instance I already have created some of the components I want to use and I have exact like clear instruction to give to the AI I would use the composer as you keep learning you'll learn how to better prompt the AI to get the best result as possible and you will see that one thing that really helps is having a code base like a template like a Cod template that you reuse across your apps so that uh
153:30 - 154:00 the AI has a already like a foundation so it can add more code on top of it that is similar to your foundation for instance this is a little code base I built for myself about a year and a half ago for because I was U making the same project over and over as the starting point and now I always have like this code base and whenever I start a new project the AI already has some data some file some codee to look at so you can just write the code that is right for me so there are a few things you want to consider to get the best results first you want to have the right naming
154:00 - 154:30 so you want to have like explicit names for your variables files and functions so for instance my API endpoints have a clear naming for instance the Chrome folder this check status or this fetch email for uh payments uh this is explicit so me as a developer I understand what it means and the AI can Al also understand what it means in in the same way uh if I search for button in my files all the react component I create that have a button will include the word button inside of the file so if I search for button I will find all the buttons I use in my app and the words
154:30 - 155:00 after explain a little bit about what this button does so button checkout will uh create a checkout the button name is also button checkout so this gives more uh context to the AI it's easier for the AI if I want to create a new feature that creates a checkout the AI knows right away there is another very powerful feature you can use at the beginning when you're getting started is AI rules uh those are a set of rules that we give to the AI developers in order for the AI to behave the way we want so in cursor you can go to cursor settings and then cursor settings and
155:00 - 155:30 here you have this like a big text file where you can input uh anything you want those are basically rules that will be used by the AI to generate code that fits your needs so in my case uh I explain my text tack I'm using JavaScript react node etc etc so uh whenever I try new features for instance I want the AI to keep um suggesting tools and text tacks that I use myself also if you have some preference about how you use the libraries sometimes there are Frameworks like nextjs that um builds features so fast that you want
155:30 - 156:00 your AI to use the latest ones or the ones you use for all of your project uh this is where you can mention all of that right here as of 2025 uh there is the 8020 rule uh that I use where 80% of the code is return by an AI and 20% of the code is return by me so usually what I do is one of I have something to build the AI builds it first it does the hard work of creating the components writing the functions Etc I keep promting the AI until I refine and get a result that are
156:00 - 156:30 pretty decent then I apply all my changes and then me as a developer I finish the last 20% by reviewing the code and polishing a few details on it until it works as I expect okay and finally this is pretty new uh but this is absolutely awesome especially for us developers who are not the best at designing uh is how to use AI inside of your code Editor to design for you so sometimes I don't know exactly how the design should look like so what I do is I find a design that I like I just search for like the components I'm trying to design inside of Google I'll
156:30 - 157:00 pick an image that I like pretty much so for a Time picker let's say I would go for this one for instance I would just take a screenshot of it and I would give the screenshot to the composer so right here you have an option that says image and you can upload a photo of the component you want and I would add a little uh explainer of what I want you can say uh you know change the colors and make it as a primary orange or something U build this component name it whatever you want and what should happen when the person click on buttons Etc and then you submit and the a will give you
157:00 - 157:30 something that usually is working pretty well so learn how to become lazy and uh take parts that you like and just use the AI to code for you okay I just added this little section here because I think it's important uh these days I see lots of developers mentioning tools like vzer and lovable as the perfect place to start your product project and I don't think so so in case you know you don't know what those are uh those are basically like web apps where you can input whatever you want create a dashboard create a signup page a landing page for my app or whatever and it's
157:30 - 158:00 going to uh generate the entire code in front of you and it builds some really absolutely beautiful components like those crypto dashboards nice customer facing dashboards landing pages Etc the output you get from just a little input of text is absolutely amazing but it is also dangerous because it is not trained on your code it is trained on the overall internet it is going to Output some code that you are not familiar with it might use different libraries that the one you're using it will have different design constraints than the word the one you're using it will name
158:00 - 158:30 your files Etc differently than the one you typically do and in the end you're going to have to do a lot of rework in order to um format this code to fit into your own project so what I recommend you is to not use those tools even though I love them is to uh build something by yourself in your code editor and then whenever you create a new project reuse your code as a foundation as a code base for your next project and then you can use the AI inside of your code editor in order to uh write code for you design components for you uh you can upload
158:30 - 159:00 those components for instance and you can tell the AI to uh fit the design constraints you set up and so it's going to create the same uh time Pier which will have the same uh border radius as your other components will have the same color at your other components it will name the file exactly like the way you name your other files and you will have really few work to do on the AI outputs and it's going to make your life much easier and this is likely the end of the road map now let me give you two quick piece of advice before I let you build your apps the first one is that I have
159:00 - 159:30 seen hundreds of people making money on the internet and they all have one thing in common they all have a bias for Action they show up every single day and build stuff watching a video to learn how to code is great but now taking your computer and starting to code your own project is even better and second advice do marketing at some points building app is really fun but you will need some users to impact people's life to make a little bit of money So eventually you can quit your job and for that you need to do marketing 50% coding 50% marketing
159:30 - 160:00 is a good balance I know marketing is hard especially when you're a developer that's why I'm going to link below some articles that I wrote that uh I like marketing strategies that I've learned along the journey that help me uh get couple thousands of visitors on my site every single day it goes from SEO ads copyrighting audience building Etc check out the description below it is free and that's it that's I think it's about a 2 or three hours long video so congrats for staying until the end and also congrats to myself for finishing this video because it took me a lot of time
160:00 - 160:30 you probably have seen from my beard and my hair uh that went a little crazy that it took about a month or something also remember that there are no sponsors for this video none of the tools I recommended pay me to make this video the only sponsor of this video is myself because I have made a course called code fast to help people learn how to code from scratch like what we've done in the road map but more in the details into each steps over 2,000 students love the course so if you like this video you might like the course as well now I want you to close this video take your keyboard start typing some JavaScript buy a domain name push it on the
160:30 - 161:00 internet and add a link below this video as proof of work see you next time