Full stack FastAPI, React, and MongoDB : building Python web applications with the FARM stack

Wield the power of Python, React, and MongoDB to build web and data applications quickly and broaden your web development horizons Key Features Learn how to build web applications without having to know the intricacies of the components Build full stack projects without compromising on development speed and app performance Prepare yourself for the diverse world of web development, analytics, and data visualization Book Description If you need to develop web applications quickly, where do you turn? Enter the FARM stack. The FARM stack combines the power of the Python ecosystem with REST and MongoDB and makes building web applications easy and fast. This book is a fast-paced, concise, and hands-on beginner's guide that will equip you with the skills you need to quickly build web applications by diving just deep enough into the intricacies of the stack's components. The book quickly introduces each element of the stack and then helps you merge them to build a medium-sized web application. You'll set up a document store with MongoDB, build a simple API with FastAPI, and create an application with React. Security is crucial on the web, so you'll learn about authentication and authorization with JSON Web Tokens. You'll also understand how to optimize images, cache responses with Redis, and add additional features to your application as well as explore tips, tricks, and best practices to make your development experience a breeze. Before you know it, you'll be deploying the application to different platforms. By the end of this book, you will have built a couple of functional applications efficiently and will have the springboard you need to delve into diverse and more specialized domains. What you will learn Discover the flexibility of the FARM stack Implement complete JWT authentication with FastAPI Explore the various Python drivers for MongoDB Discover the problems that React libraries solve Build simple and medium web applications with the FARM stack Dive into server-side rendering with Next.js Deploy your app with Heroku, Vercel, Ubuntu Server and Netlify Understand how to deploy and cache a FastAPI backend Who this book is for This book is for web developers and analysts who want to include the power of a modern asynchronous Python framework, a flexible data store and a powerful UI library with the combination of two of the most important programming languages today in their web development toolkit. Beginners in the field of information presentation will also find this book helpful. You must have a beginner-level understanding of Python, JavaScript, and HTML and CSS to get the most out of this book. Table of Contents Web Development and the FARM Stack Setting Up the Document Store with MongoDB Getting Started with FastAPI Setting Up a React Workflow Building the Backend for Our Application Building the Frontend of the Application Authentication and Authorization Server-Side Rendering and Image Processing with FastAPI and Next.js Building a Data Visualization App with the FARM Stack Caching with Redis and Deployment on Ubuntu (DigitalOcean) and Netlify Useful Resources and Project Ideas Cover Title Page Copyright and Credits Dedication Contributors Table of Contents Preface Part 1 – Introduction to the FARM Stack and the Components Chapter 1: Web Development and the FARM Stack What is the FARM stack and how does it fit together? Why the FARM stack? Evolution in Web Development Why use MongoDB? Introducing FastAPI REST APIs What is FastAPI? Python and REST APIs The frontend – React Why use React? Summary Chapter 2: Setting Up the Document Store with MongoDB Technical requirements The structure of a MongoDB database Documents Collections and databases Installing MongoDB and friends Installing MongoDB and Compass on Windows Installing MongoDB and Compass on Linux – Ubuntu Setting up Atlas Importing (and exporting) data with Compass MongoDB querying and CRUD operations Querying MongoDB Creating new documents Updating documents Deleting documents Cursors Aggregation framework Summary Chapter 3: Getting Started with FastAPI Technical requirements Python setup Virtual environments Code Editors REST Clients Installing the necessary packages FastAPI in a nutshell Starlette Python type hinting Pydantic Asynchronous I/O Standard REST API stuff How does FastAPI speak REST? Automatic documentation Let’s build a showcase API! Retrieving path and query parameters The request body – the bulk of the data The request object Cookies and headers, form data, and files FastAPI response customization Summary Chapter 4: Setting Up a React Workflow Technical requirements Let’s Create (a) React App Tailwind CSS and Installation JSX and the Components – the building blocks Components React Hooks, events, and state Creating stateful variables with useState Communicate with APIs using useEffect Exploring React Router and other goodies Summary Part 2 – Parts of the Stack Working Together Chapter 5: Building the Backend for Our Application Technical requirements Introducing our app Creating a MongoDB instance for our app Creating our FastAPI backend Deployment to Heroku Summary Chapter 6: Building the Frontend of the Application Technical requirements Creating our Frontend with React Setting up React and Tailwind Installing and setting up React Router 6 Layout and components Creating the pages functionalities Creating the car details and the update/delete page Summary Chapter 7: Authentication and Authorization Technical requirements Understanding JSON Web Token – our key to security FastAPI backend with users and relationships Creating a User model and MongoDB relationships Authenticating the users in React Summary Part 3 – Deployment and Final Thoughts Chapter 8: Server-Side Rendering and Image Processing with FastAPI and Next.js Technical requirements Introduction to our Sample App Managing images and files in the backend Creating a Cloudinary account Creating a new MongoDB database and collections Updating the FastAPI REST API Integrating Python Pillow for image processing Introduction to Next.js and our frontend project Scaffolding the application Authentication with API routes and httpOnly cookies in Next.js Creating the page for inserting new cars Creating the car list page Creating statically generated pages for individual cars Deployment to Heroku and Vercel Summary Chapter 9: Building a Data Visualization App with the FARM Stack Technical requirements The specification Creating the backend The MongoDB Aggregation Framework Building the frontend with SWR and Charts.js React pagination and SWR Building the dashboard with Chart.js Background Tasks Summary Chapter 10: Caching with Redis and Deployment on Ubuntu (DigitalOcean) and Netlify Deploying FastAPI on DigitalOcean (or really any Linux server!) Adding caching with Redis Deploying the Frontend on Netlify 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 – like exploratory data analysis application A document automation pipeline Summary Index About Packt Other Books You May Enjoy This book explains how to use FastAPI, React, and MongoDB to build web and data visualization applications efficiently without in-depth knowledge of each component. It will be the springboard for you to explore the diverse world of web application development.