MERN Fundamentals

Learn how MongoDB stores data in collections of documents, with flexible key-value pairs and arrays, and follow steps to install MongoDB locally (or Atlas) and verify with Studio 3T.

Install and use react dev tools to inspect components and state while building your application. Install postman to test your APIs and verify server responses as you develop.

Install Node.js (prefer LTS) via npm or nvm, then create a folder structure with a back end and a front end. Initialize a React app with vite, install dependencies, and run npm run dev to view at localhost:5173.

Set up babel to compile server code, install babel cli and babel core as dependencies, then add express, mongoose, and node module; create babel dot rc in the backend.

Set up an Express server in index.js, add a start script using nodemon and babel-node, and run npm start on port 4000 to show 'application is running on port 4000'.

Organize your backend by creating a source folder and adding controllers, models, and routes, then populate them with a player controller, a player model, and soccer routes.

Configure the API database using mongoose for mongo connections, enable body parser and cors, and wire up routes. Connect to MongoDB, parse requests, and run the server on port 4000.

Create a mongoose schema in the player model to enforce data types and required fields like first name, last name, and email, with enums for skills and created date default.

Create a post endpoint to add new players, validating inputs against the mongoose player schema and returning the created player as json via localhost 4000/players.

Create a get players endpoint to fetch all players from MongoDB with mongoose find and return them as a JSON array via the route.

Create a get player by ID endpoint by implementing an async controller function, querying Mongo with find by ID, and returning the player as JSON.

Put endpoint to update a single player by id in a MERN app, wiring an updatePlayer controller with findOneAndUpdate and testing with Postman to confirm updates.

Create a delete endpoint in the MERN app by using deleteOne with the player ID, return a 'successfully deleted player' message, and test with Postman to verify Mongo removal.

Add materialize css via a cdn to the index.html, set up a components folder with a player subfolder and three jsx files, and prepare the front end for dev testing.

Add main page structure by creating functional components for the form, list, and single player, then assemble a class app with materialize css grid for responsive layout and manage state.

Install axios in the front end, fetch players on mount, and update the state with the response; pass players as props and set the current player on click.

Pass the current player state to the player signal as a prop and render a single player card with a soccer image, name, phone, email, and skills using Materialize.

In this MERN fundamentals lecture, convert the add player form to a React class component and wire inputs for first name, last name, phone, and email.

Finalize the form by adding the submit player function, sending first name, last name, phone, and email via axios to the backend /players, with error handling and testing.

Use your knowledge to quickly build a stock application with MERN, replicate the process by creating collections, models, schemas, and endpoints for transactions, and explore React as your front end.