Full Stack Web Development Bootcamp with React and Python [Video]
Video
Video
$99.99
Subscription
$15.99
$10 p/m for three months
What do you get with a Packt Subscription?
This book & 7000+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with Video + Subscription?
Download this video in MP4 format, plus a monthly download credit
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook?
What do I get with Print?
Get a paperback copy of the book delivered to your specified Address*
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do I get with Print?
What do you get with video?
What do you get with video?
What do you get with Audiobook?
What do you get with Exam Trainer?
Video
$99.99
Subscription
$15.99
$10 p/m for three months
What do you get with a Packt Subscription?
This book & 7000+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with Video + Subscription?
Download this video in MP4 format, plus a monthly download credit
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook?
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do I get with Print?
Get a paperback copy of the book delivered to your specified Address*
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do I get with Print?
Get a paperback copy of the book delivered to your specified Address*
Access this title in our online reader
Online reader with customised display settings for better reading experience
What do you get with video?
Download this video in MP4 format
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with video?
Stream this video
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with Audiobook?
Download a zip folder consisting of audio files (in MP3 Format) along with supplementary PDF
What do you get with Exam Trainer?
Flashcards, Mock exams, Exam Tips, Practice Questions
Access these resources with our interactive certification platform
Mobile compatible-Practice whenever, wherever, however you want
-
Free ChapterIntroduction
-
Introduction to Web Development
-
Project Start - Initial Frontend App Overview
-
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
-
React Props and Creation of the Header and Search Components
-
Making Unsplash API Requests
-
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
-
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
-
Creating Python Virtual Environment for API Application Using Pipenv
-
Creating and Starting Simple Flask Web Server
-
Creating New-Image Flask API Endpoint and Testing it Using Postman
-
Importing ENV Variables from the File in the Python App
-
Configuring Frontend App to Make New Image API Requests Via Flask API
-
CORS and Enabling CORS in the Flask App
-
Database Integration Plan
-
Dockerizing Backend Flask API Service
-
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
About this
video
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
- Publication date:
- July 2021
- Publisher
- Packt
- Duration
- 25 hours 30 minutes
- ISBN
- 9781801811040