Book Image

Full Stack FastAPI, React, and MongoDB

By : Marko Aleksendrić
4 (1)
Book Image

Full Stack FastAPI, React, and MongoDB

4 (1)
By: Marko Aleksendrić

Overview of this book

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.
Table of Contents (17 chapters)
1
Part 1 – Introduction to the FARM Stack and the Components
6
Part 2 – Parts of the Stack Working Together
10
Part 3 – Deployment and Final Thoughts

Building the frontend with SWR and Charts.js

Now, we will proceed to build our frontend with two goals in mind: we want to have a way of paginating through our cars with the usual previous or next buttons and we want to find a way of displaying the data from our MongoDB aggregations – whether by the average price of models by brand or something else. In order to be able to start tinkering with the user interface, we will create a new React App using our faithful friend: the create-react-app script and I will (again) install Tailwind CSS. Since we have already seen this procedure a couple of times, I will not repeat it here. After installing Tailwind, we are going to need React Router 6 as well, so go ahead and install it. Now, it is time to set up the router and the three pages that will be displayed in our analytics application. Follow these steps:

  1. Edit the index.js file in the /src directory:
    import React from 'react';
    import ReactDOM from 'react-dom...