Creating Python Virtual Environment for API Application Using Pipenv | Full Stack Web Development Bootcamp with React and Python

Book Overview & Buying
Table Of Contents

Full Stack Web Development Bootcamp with React and Python

By : Bogdan Stashchuk

Buy this Video

Full Stack Web Development Bootcamp with React and Python

By: Bogdan Stashchuk

Buy this Video

Overview of this book

This is a practical React and Python Flask full-stack web development Bootcamp. Here, you will start with building real applications from the first lecture. The application will consist of the front-end and back-end parts. The frontend will be built using JavaScript React. The backend API will be built using Python Flask. During the creation of the frontend app, you will perform the following practical tasks: - Initialize a React app using create-react-app - Create different React components - Use useEffect and useState React hooks - Adjust favicon.ico in the frontend app - Create and insert an SVG logo - Make an API request to the Unsplash API - Use React props and state While making an API app, you will perform the following practical tasks: - Create a Python virtual environment using pipenv - Install and use Python packages such as Flask, dotenv, and requests - Create Flask routes - Make external API calls from the Flask app - Accept requests from the clients You will also learn how to use the following applications: - Visual Studio Code - Git and GitHub - Postman By the end of this course, you will become a full-stack web developer with practical knowledge about JavaScript React and Python Flask. The code bundle is available at https://github.com/PacktPublishing/Full-Stack-Web-Development-Bootcamp-with-React-and-Python

Introduction

Introduction to Web Development

Frontend Versus Backend

Project Start - Initial Frontend App Overview

Installing Visual Studio Code

Visual Studio Code Setup

Overview of the Initial Application Version

How to Create a New React Application

Installing Node Along with NPM and NPX

Creating React Application and How React Works

Creating React Application Using Create-React-App

Starting React Application

Structure of the Frontend App

Reinstalling NPM Dependencies

Creating and Serving Optimized Build of the Frontend App

Basic Frontend Application Implementation Steps

Cleaning Up Default React Application

How React Works and What is JSX

React Functional Components

Initializing Git and Creating Remote GitHub Repository

Installing and Configuring Git

Creating First Commit

Adding the Eslintcache File to the Gitignore

Publishing Repository to GitHub

React Props and Creation of the Header and Search Components

Changing Favicon

Creating Header Component

What are React Props

Plan for Creation of the Search Component

Creating Search Component with Input Form

Styling Search Component

Submission of the Search Form

Controlled Search Component

Search Component Summary

Disabling GitLens Blame Annotations Feature

Making Unsplash API Requests

Creating Account at Unsplash and Registering New App

Adding Local File with Environment Variables

How to Make Unsplash API Request and What is URL

Making First API Request for Random Photo

Analyzing API Requests and Responses

Challenge - Clear Search Input

Challenge Solution - Clear Search Input

Configuring ESLint and Prettier in the Frontend App

What is Code Formatter

What is Linter

Configure ESLint Validation

Installing and Enabling Prettier ESLint Plugin

Adjusting Prettier Configuration

Enabling ESLint Errors Fixing on File Save

Adding NPM Linting Scripts

Fixing All Linting Errors

Changing Editor TabSize in VS Code

ESLint with Prettier Setup Summary

Saving Images in the State and Deleting Them in the UI

Planning Next Steps in Building Frontend App

Saving Images in the State

State in React is Updated Asynchronously

Adding React Developer Tools Chrome Extension

Creating ImageCard Component

Adding Props to the ImageCard Component

Displaying All Images in the UI Using Map Method

Adjust Layout of the Image Cards

Adding Delete Images Functionality

Adding SVG Logo and Welcome Component

Creating SVG Logo from Text

Editing SVG Logo

Adding Welcome Component

Basic Frontend App Summary

Basic Frontend App Codebase Review

Updating Create-React-App Application

REST API and HTTP Methods

Which Problems API Solves

Client-Server Communication

REST API

URL is Unique Resource Identifier

Requests and Responses

Analyzing Requests and Responses in our Frontend App

HTTP Methods Overview

CRUD Operations

Idempotent HTTP Methods

HTTP Response Status Codes

Most Common Success and Redirect HTTP Status Codes

Most Common Client and Server Error Status Codes

REST API and HTTP Methods Summary

API Service Overview and Python Installation

Frontend and API Services Overview

Installing Python, Pip, and Pipenv on MacOS

Installing Python, Pip, and Pipenv on Windows

Python Flask API Implementation Steps

Creating Python Virtual Environment for API Application Using Pipenv

Creating API Folder and Running Basic Python App

Creating Python Virtualenv and Installing Flask

Exploring Python Virtualenv and Changing Versus Code Python Interpreter

Creating and Starting Simple Flask Web Server

Simple Flask Application

Imports in Python and __name__

Import from Another Python Module and __name__

Decorators in Python

Starting Flask App Inside of the Module

Consistent launch of Python Modules on Mac and Windows

Creating New-Image Flask API Endpoint and Testing it Using Postman

Creating New-Image API Endpoint

Testing New-Image API Endpoint Using Postman

Making API Request to the Unsplash API

Finalize and Test API Request to the Unsplash API

Importing ENV Variables from the File in the Python App

Extracting UNSPLASH_KEY to the ENV File

Verifying Usage of the ENV Variables from the File

Enabling Debug Mode in the Flask App

Configuring Frontend App to Make New Image API Requests Via Flask API

Changing API in the Frontend React App

Trying to test Frontend App with Flask API

CORS and Enabling CORS in the Flask App

What is CORS

Comparing Responses from the Flask API and Unsplash API

Enabling CORS in the Flask App

Installing and Enabling Pylint linter and Black Formatter

Enabling Formatting on Save and Fixing all Mistakes in the Python App

Basic API Summary

Database Integration Plan

It is Time to Save Images Data to the Database

Application Structure with Database

Implementation Steps for Saving Images Data in the Database

All API Endpoints in the Current Implementation Phase

Dockerizing Backend Flask API Service

Installing Docker and Hello-World Using Docker

Creating Dockerfile for the Python API Service

Building Docker Image for the API Service

Running API Containers Based on the Built Docker Image

Analyzing API Docker Container from Inside

Docker Image for the API Service Summary

Dockerizing Frontend React Application

Creating Dockerfile for the Frontend Application

Building Docker Image for the Frontend App

Running Docker Container for the Frontend Service

Exploring Frontend Container from Inside

Why You Need to have Node_Modules Folder and Python Venv Folder Locally

Running Both Frontend and API Containers in Background

Docker Compose for the API and Frontend Services

Creating Basic Docker-Compose File

Bringing Up Both Containers Using Docker-Compose

How to Operate Containers Using Docker-Compose

Creating Volumes Mapping for the Frontend Service

Fix Volumes Sync in the React Container

Enabling Volumes Mapping for the API Service

Enabling Auto-Restart and Docker-Compose Summary

Adding MongoDB to the Docker Compose

Why do we Need Mongo and Mongo-Express Services

Mongo and Mongo-Express Official Docker Images Overview

Adding Mongo and Mongo-Express Services to the Docker-Compose File

Starting All Services Including Mongo and Mongo-Express Using Docker-Compose

Docker Desktop Overview

Using MongoDB Shell and Mongo-Express GUI

Persistent Volume for MongoDB and Docker Networking

MongoDB Data is Now Deleted After Docker-Compose Restart

Configuring Persistent Data Volume for the Mongo Container

Verifying Persistent MongoDB Storage Using Volume

Mongo and Mongo-Express Setup Summary

How Docker-Compose Containers Communicate with Each Other

Exploring Networking Between Docker Containers

API endpoint for reading and creating images in the database

Plan for the Integration of the MongoDB and Flask API Service

BEGIN - Installing PyMongo

Creating Instance of the MongoClient

Adding Insertion of the Document to the MongoDB by Python API Service

Rebuilding API Service Docker Image

END - PyMongo and Mongo Connectivity Testing Summary

BEGIN - New API Endpoint for Reading and Creating Images in the Database

Adding Images Endpoint and Handling GET Requests

Handling POST Requests to the Image's Endpoint

Testing GET and POST Methods in the Images API

Fixing Errors in the Images API

END - Finalize with Testing of the Images API After Errors Fixing

Images API Endpoint Summary

Saving and Reading Images from the Database in the Frontend App

Save and Get Images in the Frontend Implementation Overview

BEGIN - Installing Axios in the Frontend App and Rebuilding Frontend Image

Start of the Replacement of the Fetch with Axios

END - Continue Replacement of the Fetch with Axios

BEGIN - Adding Some Images to the Mongo Database Using Postman

Retrieving Saved Images when React App Loads

END - Examining how useEffect Works

BEGIN and END - Explaining ESLint Error and Extending ESLint Config

BEGIN - Saving Images in the Database from the Frontend App

END - Hiding Save Button for Already Saved Images

Saving Images in the Database Summary

Deleting Images and Frontend Improvements

Plan for the Improvements Section

How to Handle Deletion of the Images

BEGIN - Delete Image API Endpoint Challenge

Delete Image API Endpoint Solution

END - Error Handling for the Delete Image API Endpoint

BEGIN - Delete Image Request in the Frontend Challenge

END - Delete Image Request in the Frontend Solution

BEGIN - Spinner Challenge

Spinner Solution

END - Finalize with Spinner Solution

BEGIN - Image Author Information Challenge

END - Image Author Information Solution

BEGIN - Toast Notifications Challenge

Toast Notifications Solution

END - Finalize with Toast Notifications Solution

Improvements Challenges Section Summary

Crash Courses

Crash Courses Section Overview

Shell and Terminal Crash Course

Visual Studio Code Crash Course

Git and GitHub Crash Course

JavaScript Crash Course

NPM Crash Course

React Crash Course

Python Crash Course

Full Stack Web Development Bootcamp with React and Python

By : Bogdan Stashchuk

Full Stack Web Development Bootcamp with React and Python

By: Bogdan Stashchuk

Overview of this book

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access