Build Full-Stack Projects with FARM stack

Explore NoSQL basics with MongoDB by creating databases and collections, inserting and querying documents, and performing update and delete operations, then learn how Mongoose simplifies schema validation and crud operations.

Connect to MongoDB from Python using MongoEngine by configuring database module, define a student model with last name, student name, email, and phone, and expose FastAPI endpoints to fetch students.

Design a schema to map MongoDB results to JSON, convert each item into a student entity, and return single or multiple student records with safe, stringified fields.

Create api endpoints to fetch all students and create new ones, using a schema layer to convert MongoDB documents to JSON and control which fields are returned.

Create, update, retrieve, and delete student records with FARM stack endpoints using MongoDB, including find one, find all, and returning updated or deleted objects via schema.

Learn how to push your local FastAPI and MongoDB project to a GitHub repository using a personal access token, including generating the token, configuring the remote, and pushing commits securely.

Enable cors in a FastAPI backend to allow a separate frontend on another port to access data by configuring cors middleware, origins, credentials, and allowed methods.

Install and set up Visual Studio Code, Node.js, and MongoDB with a graphical UI tool to enable end-to-end full-stack development using JavaScript across frontend and backend.

Create the front-end React app for the student management system by scaffolding with create-react-app, installing axios and bootstrap for API calls to the fast API, and running the development server.

Explore the project structure of a FARM stack app, from the index.html root and the main app component to component-based GSX rendering and bootstrap integration.

Develop a responsive school management header and user interface by integrating React components, Axios data fetching, and Bootstrap styling for a polished glass-themed layout.

Create a responsive bootstrap form for adding students with name and email in a card, using input controls and action buttons, plus a section to display all students.

Create a footer component that displays a student list with their details, adds a copyright message, and applies user interface styling such as padding and margins to refine the layout.

Define state for the student list and input fields, and bind changes to update them. Use useEffect to fetch all students on page load, then post new ones.

Learn to implement a delete feature for student records by calling the API delete endpoint with the student id using axios, and update the list on success.

Demonstrate rendering a dynamic student list with map and props in a FARM stack app, showing each student's name, email, and phone, and enabling add and delete operations.

Fix the data refresh issue by moving the axios get all students call into a reusable method and triggering it after adding a student, ensuring the list updates instantly.

Implement edit features for student records by populating a form with selected data via state and props, enabling updates through parent and child components when the ID is present.

Learn to distinguish add and update operations for students by checking the student id; update existing records via the update method, or add new ones with post.

Implement delete functionality in a farm stack app, refresh the student list after deletion by re-fetching data through props, and ensure a responsive Bootstrap interface.