Setting Up Your MERN Stack Development Environment

{"scenes":[{"slideOrder":0,"text":"Welcome to this lesson on setting up your MERN stack development environment. Whether you're brand new to web development or transitioning from another technology, you're in the right place. In this lesson, you'll learn exactly what the MERN stack is and how its four core technologies work together. Then you'll install Node.js and npm, configure Visual Studio Code with essential extensions, and set up Git for version control. By the end, you'll verify every installation through the terminal so you can move forward with confidence. No prior setup is required — just bring your computer and your curiosity. By the time you're finished, you'll have a fully configured, professional-grade environment ready for building modern full-stack JavaScript applications. Let's get started."},{"slideOrder":1,"text":"Before you install anything, let's understand what you're building toward. MERN stands for MongoDB, Express.js, React, and Node.js — four open-source technologies that together form a powerful full-stack JavaScript framework. The beauty here is that you use one language, JavaScript, across every layer. React runs in your browser and handles everything you see and interact with. When your app needs data, React sends an HTTP request to the server. Express.js, running on top of Node.js, receives that request, processes it, and communicates with MongoDB to fetch or store information. MongoDB keeps your data in flexible, JSON-like documents instead of rigid tables. Think of it as a relay race — React passes the baton to Express, Express passes it to MongoDB, and the data flows right back."},{"slideOrder":2,"text":"Let's start with the most critical installation: Node.js. It powers not just your server but also the tooling for React, package management, and build processes. Head to nodejs.org and download the LTS version, which stands for Long Term Support. This gives you maximum stability. The great news is that npm, the Node Package Manager, comes bundled automatically — no separate download needed. Windows users, run the .msi installer and accept the defaults. Mac users can use the .pkg installer or type 'brew install node' in the terminal. Linux users should consider installing nvm first. I recommend nvm for everyone, actually, because it lets you switch between multiple Node.js versions easily. Once installed, open your terminal and type 'node -v' then 'npm -v' to confirm both return version numbers."},{"slideOrder":3,"text":"Now let's set up your code editor. Visual Studio Code is free, fast, and incredibly extensible — perfect for MERN development. Download it from code.visualstudio.com and install using the defaults. Once it's open, click the Extensions icon on the left sidebar. First, install ESLint. It analyzes your JavaScript in real time and flags errors and style inconsistencies, much like spell-check in a word processor. Next, install Prettier for automatic code formatting. In your settings, set Prettier as the default formatter and enable Format on Save. Now your code cleans itself up every time you save. Then install Thunder Client, a lightweight API testing tool that lives inside VS Code. You'll use it to test your Express endpoints without leaving the editor. Also consider grabbing the ES7+ React Snippets and MongoDB for VS Code extensions."},{"slideOrder":4,"text":"Next up is Git, the industry-standard version control system. Even working solo, Git is essential — it tracks every change you make and lets you revert if something breaks. Head to git-scm.com and download the installer. Windows users, accept the defaults but select VS Code as your default editor when prompted. Mac users, type 'git --version' in the terminal — if it's not found, run 'xcode-select --install' or use Homebrew. After installation, configure your identity with two terminal commands: 'git config --global user.name' followed by your name, and 'git config --global user.email' followed by your email. Then create a free GitHub account for hosting remote repositories and building your portfolio. VS Code has Git built right in, so you can stage, commit, and push code without ever leaving the editor."},{"slideOrder":5,"text":"Now comes the satisfying part — verifying everything works. Open your terminal and run through the checklist. Type 'node -v' and press Enter. You should see a version number like v20.11.0. Type 'npm -v' and confirm you see something like 10.2.0. Then type 'git --version' and look for output like 'git version 2.43.0.' If all three return version numbers, your core tools are installed. Now run a smoke test by typing 'npm create vite@latest test-app' and selecting React as the framework. If the project scaffolds successfully, Node.js, npm, and your React tooling are all working together. You can delete that test folder afterward. If any command returns 'command not found,' restart your terminal and check that the tool's directory is in your system PATH."},{"slideOrder":6,"text":"Let's recap everything you've accomplished. You now have a professional MERN development environment ready to go. Node.js provides your JavaScript runtime, npm gives you access to thousands of packages, VS Code with ESLint, Prettier, and Thunder Client delivers a powerful coding experience, and Git keeps your work safely version-controlled. Remember the architecture: React handles the front end, Express and Node.js power the back end, and MongoDB stores your data — all connected through JavaScript and JSON. For your next steps, set up MongoDB locally or create a free MongoDB Atlas cloud cluster. Practice running 'npm init,' installing packages, and initializing Git repositories. Bookmark the official documentation for each technology, and try building a small to-do list app to see everything working together. You've laid the foundation — now start building!"}]}