Learning full-stack JavaScript development

- [Samer Buna] Hello, Welcome to Learning Full Stack JavaScript Development with MongoDB, Node and React. My name is Samer Buna. I'm a Software Engineer at Galoy where we create open source software for community banking with Bitcoin. At Galoy, we use MongoDB, Node, and React, and we love them. They are simple and powerful. This is a project based course where I'll be building a simple JavaScript web application for people looking for ideas to name things. It could be a new startup, a book, a website or anything else. To keep the course short, I simplified the features, layout and style for this application as much as I could and provided a few files, like CSS and configurations, to keep the focus on the core topics of MongoDB, Node, and React. This course is mostly hands-on, where I write code and talk about it, starting the project from scratch really, and building it step by step, talking about new concepts as we need them and use them. I'm recording this intro video last, so let me warn you. I run into many code problems. I make typos, I write code and then decide to change it later. It's really the raw process of writing code and how we debug problems and make decisions to evolve the code. There is a lot to learn, and building a practical project is, in my opinion, the best way to learn. So, don't just watch me code. Copy what I do, and expand on it when you can. Here's how the final product looked like at the end of this course. The homepage lists all naming contests. Anyone can create a naming contest. We can go to a single contest page. We'll see the already proposed names for that contest and anyone can propose a new name on any contest. We'll keep the technical structure of this application as simple as it can be. We'll use MongoDB for the database with a single collection to hold all the data. We'll use the native MongoDB driver to work with the database within Node Gs. We'll use Node Gs as both an API server on top of that database, and as a web server to host the application assets using the Express GS framework. On the front end, the focus will be on React, purely, without using any other React helper packages like React Router or Redux. It's going to be just React to build a user interface to represent the API data, manage application state, handle events, and perform side effects, and render the application as HTML from the server. We'll also use the native browser dom API in a few places as well to implement app navigation and handle browser's history. A quick overview of the course chapters. The first chapter covers the basic Node commands and project structure, how to set up a web server, and how to bundle React code for browsers to understand. In this chapter, we'll also load some test data that I prepared for the project into MongoDB. The second chapter covers the fundamentals of React. We'll talk about JSX components, their props and state, HTML event handlers, and component side effects. If you know the basics of React already, you might want to skip all the way to chapter three. You can check out the Git branch for it and start from there. The project is tracked in this Git repo, and I created a branch for every video and every chapter, and there are these chapter final branches that you can start a chapter with. So if you want to start with chapter three you can check out the two final branch. I show you the command to do that in the beginning of every chapter. You can also use these branches if you're following everything I do but things don't work for you for any reason. You can try these branches, and you can also compare your code to mine to see what's missing. Chapter three is where things start to become serious. That's where we're going to create API endpoints and make them fetch data from MongoDB, and it's also where we start to make React use these API endpoints and a bit of server-side rendering logic as well. Be prepared for an increasing level of difficulty. That's how the course videos ended up naturally. So chapter four builds on the knowledge you gain in previous chapters, and I'd say chapter five is the hardest of them all. In chapter four, we'll talk about state actions in a bit more detail, how to pass data down the tree, and how to invoke actions up the tree. We'll cover browser history and how to make it work with React, and we'll do more of server-side rendering as well this time to make the server path aware and render different views based on what route the user starts with. In chapter five, we'll go over an example of how to take data from the user and persist it in the database and handle the UI response for it with React. At the end of that chapter, you'll have a project challenge that spans all the knowledge you learn in this course. I'll try to be not too slow and not too fast, but remember that you can always control the play speed, pause, skip and replay when needed. You're also welcome to ask questions in the jsComplete Support Slack channel. You can get an invite for that at jscomplete.com/help.