Full Stack FastAPI, React, and MongoDB, 2nd Edition

Boost your web developer potential and stay ahead in the fast-paced web development and AI race with the flexibility, adaptability, and robustness of the FARM stack Key Features • Learn the basics of MongoDB to be able to model any type of data • Explore the powerful Python web development ecosystem with Pydantic and FastAPI • Future-proof your applications by integrating ChatGPT or other LLMs Book Description Discover how to harness the power of the FARM stack—FastAPI, React, and MongoDB—to develop production-ready web applications of varying complexity. Written by a team of industry experts, including MongoDB champions and product leaders, this fast-paced, hands-on guide equips beginners with essential skills to build web applications efficiently. Introducing each element of the stack, the book demonstrates how to seamlessly integrate them to create a medium-sized web application. You'll set up MongoDB as a document store, construct a simple API with FastAPI, and build an application using React. The guide also covers enhancing application security through authentication and authorization with JSON Web Tokens. Beyond mastering the stack, you'll get to grips with integrating Large Language Models (like ChatGPT) for advanced functionality, such as automated email sending. Additionally, you'll learn how to make the most of Next.js 14, a robust full-stack framework offering improved developer experience. By the end of the book, you'll have created functional applications and gained the foundation to explore diverse and more specialized domains, expanding your development horizons. Who is this book for? The book is for intermediate web developers with basic JavaScript and Python knowledge who want to enhance their developer skills, master a powerful and flexible stack, and write better applications faster. What you will learn • Set up and manage MongoDB databases and collections, and model data • Leverage the power of FastAPI to write complex APIs using pure Python • Create frontends of varying complexity with the React library • Build and deploy robust and secure backends using FastAPI and MongoDB • Ship production-ready applications with Next.js 14, applying your React and backend knowledge • Integrate Large Language Models, send emails, and do much more with the flexible FARM stack Cover Table of Contents Preface Chapter 1: Web Development and the FARM Stack Technical requirements What is the FARM stack? Why the FARM stack? Why use MongoDB? Why use FastAPI? Python and REST APIs The frontend – React Why use React? Summary Chapter 2: Setting Up the Database with MongoDB Technical requirements The structure of a MongoDB database Documents Supported data types in MongoDB Collections and databases Options to install the MongoDB database Installing MongoDB and related tools Installing MongoDB and Compass on Windows Installing the MongoDB Shell (mongosh) MongoDB Database Tools Installing MongoDB and Compass on Linux: Ubuntu Setting up Atlas Creating an Atlas cluster Getting the connection string of your Atlas Cluster Connecting to the Atlas cluster from Compass MongoDB querying and CRUD operations Querying in MongoDB Projection Creating new documents Updating documents Deleting documents Summary Chapter 3: Python Type Hints and Pydantic Technical requirements Python types Type hinting Implementing type hints Advanced annotations Pydantic Pydantic basics Deserialization Model fields Pydantic types Pydantic fields Serialization Custom data validation Model validators Nested models Pydantic Settings Summary Chapter 4: Getting Started with FastAPI Technical requirements Python setup Virtual environments Code editors Terminal REST clients Installing the necessary packages FastAPI in a nutshell Starlette Asynchronous programming Standard REST API operations How does FastAPI speak REST? Automatic documentation Building a showcase API Retrieving path and query parameters FastAPI response customization Summary Chapter 5: Setting Up a React Workflow Technical requirements Creating a React app using Vite Tailwind CSS and installation Components and building blocks of JSX Recap Components Creating dynamic components Events and state React Hooks with events and state Communicating with APIs and the outside world using useEffect Exploring React Router and other useful packages Summary Chapter 6: Authentication and Authorization Technical requirements Understanding JSON Web Token What is JWT? FastAPI backend with users and dependencies User model for authentication Authentication and authorization with FastAPI: a walk-through Authenticating the users in React Persisting authentication data with localStorage Other authentication solutions Summary Chapter 7: Building a Backend with FastAPI Technical requirements Introducing the application Creating an Atlas instance and a collection Setting up the Python environment Defining the Pydantic models Scaffolding a FastAPI application Creating a .env file to keep the secrets CRUD operations The POST handler Handling the GET requests Updating and deleting records Uploading images to Cloudinary Adding the user model FastAPI middleware and CORS Deployment to Render.com Summary Chapter 8: Building the Frontend of the Application Technical requirements Creating a Vite React application React Router Installing and setting up React Router React Router loaders React Hook Form and Zod Performing data validation with Zod Authentication context and storing the JWT Implementing the login functionality Protecting routes Creating the page for inserting new cars Displaying single cars Summary Chapter 9: Third-Party Services Integration with FastAPI and Beanie Technical requirements Project outline Building the backend with FastAPI and Beanie Introduction to the Beanie ODM Defining the models with Beanie Connecting to the MongoDB database Creating the FastAPI application Background tasks with FastAPI Integrating OpenAI with FastAPI Summary Chapter 10: Web Development with Next.js 14 Technical requirements Introduction to Next.js Creating a Next.js 14 project Next.js project structure Routing with Next.js 14 Data loading with server components Authentication and Server Actions in Next.js Creating protected pages Implementing the new car page Providing metadata Deployment on Netlify Pushing the changes to GitHub Summary Chapter 11: Useful Resources and Project Ideas MongoDB considerations FastAPI and Python considerations Testing FastAPI applications React practices Other topics Authentication and authorization Data visualization and the FARM stack Relational databases Some project ideas to get started Old-school portfolio website React-admin inventory Plotly Dash or Streamlit to create exploratory data analysis applications A document automation pipeline Summary Index Other Books You May Enjoy