Practical full-stack web development Bootcamp with JavaScript, React, Python, Flask, API, Git, and VS Code
About This Video
In Detail
This is a practical React and Python Flask full-stack web development …
Practical full-stack web development Bootcamp with JavaScript, React, Python, Flask, API, Git, and VS Code
About This Video
In Detail
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:
While making an API app, you will perform the following practical tasks:
You will also learn how to use the following applications:
By the end of this course, you will become a full-stack web developer with practical knowledge about JavaScript React and Python Flask.
Who this book is for
This course is developed for web developers, frontend developers, backend developers, and full-stack developers. Basic software development knowledge and basic programming skills are required.
Chapter 1 : Introduction
Introduction
Chapter 2 : Introduction to Web Development
Frontend Versus Backend
Chapter 3 : 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
Chapter 4 : 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
Chapter 5 : 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
Chapter 6 : 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
Chapter 7 : 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
Chapter 8 : 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
Chapter 9 : 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
Chapter 10 : 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
Chapter 11 : 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
Chapter 12 : 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
Chapter 13 : 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
Chapter 14 : 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
Chapter 15 : 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
Chapter 16 : 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
Chapter 17 : 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
Chapter 18 : 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
Chapter 19 : 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
Chapter 20 : 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
Chapter 21 : 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
Chapter 22 : 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
Chapter 23 : 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
Chapter 24 : 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
Chapter 25 : 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
Chapter 26 : 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
Chapter 27 : 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
Chapter 28 : 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