Description

A complete practical React and Python Flask full-stack web development Bootcamp with JavaScript, React, Python, Flask, API, Git, and VS Code. Basic software development knowledge and basic programming skills are required.

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

What You Will Learn

Understand what API is and how API works
Learn how to build a single-page application using React
Create a Python virtual environment using pipenv
Learn how to build backend API service
Use Python Flask to build backend API service
Use React components, props, and state

Audience

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.

Approach

This is a complete practical course that includes JavaScript, React, Python, Flask, API, Git, and VS Code.

Key Features

Easy and complete practical course * Connect frontend application written in React with backend application written in Python * Includes Visual Studio Code, Git and GitHub, JavaScript, NPM, React, and Python crash courses

Github Repo

https://github.com/PacktPublishing/Full-Stack-Web-Development-Bootcamp-with-React-and-Python

About the Author

Bogdan Stashchuk

Bogdan Stashchuk has over 20 years of experience as a software engineering instructor. He excels at breaking down complex topics into easy-to-follow steps. His courses are designed with hands-on exercises, ensuring that learners can actively participate and apply what they learn. From start to finish, students can follow along and complete tasks just as Bogdan demonstrates in his lectures. He also includes challenging assignments with detailed solutions. This approach helps learners understand and remember the material long after they've completed the course. Through his dedication and expertise, Bogdan ensures a valuable and effective learning experience for everyone.

Course Outline

25. 0px;padding:0px;clear:both;font-family:'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif;font-size:12px;">

In this section, we will cover API endpoint for reading and creating images in the database.

1. 0px;padding:0px;clear:both;font-family:'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif;font-size:12px;">

In this video, we will plan for the integration of the MongoDB and Flask API service.

2. 0px;padding:0px;clear:both;font-family:'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif;font-size:12px;">

In this video we will start with installing PyMongo.

3. 0px;padding:0px;clear:both;font-family:'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif;font-size:12px;">

In this video, we will be creating an instance of the MongoClient.

4. 0px;padding:0px;clear:both;font-family:'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif;font-size:12px;">

In this video, we will be adding insertion of the document to the MongoDB by Python API service.

5. 0px;padding:0px;clear:both;font-family:'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif;font-size:12px;">

In this video, we will be rebuilding API service Docker image.

6. 0px;padding:0px;clear:both;font-family:'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif;font-size:12px;">

In this video, we will cover PyMongo and Mongo connectivity testing summary.

7. 0px;padding:0px;clear:both;font-family:'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif;font-size:12px;">

In this video, we will start with a new API endpoint for reading and creating images in the database.

8. 0px;padding:0px;clear:both;font-family:'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif;font-size:12px;">

In this video, we will be adding images endpoint and handling GET requests.

9. 0px;padding:0px;clear:both;font-family:'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif;font-size:12px;">

In this video, we will be handling POST requests to the image's endpoint.

10. 0px;padding:0px;clear:both;font-family:'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif;font-size:12px;">

In this video, we will be testing GET and POST methods in the images API.

11. 0px;padding:0px;clear:both;font-family:'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif;font-size:12px;">

In this video, we will be fixing errors in the images API.

12. 0px;padding:0px;clear:both;font-family:'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif;font-size:12px;">

In this video, we will cover Finalize with testing of the images API after errors fixing.

13. 0px;padding:0px;clear:both;font-family:'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif;font-size:12px;">

In this video, we will cover images API endpoint summary.

26. 0px;padding:0px;clear:both;font-family:'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif;font-size:12px;">

In this section, we will cover saving and reading images from the database in the frontend app.

1. 0px;padding:0px;clear:both;font-family:'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif;font-size:12px;">

In this video, we will cover save and get images in the frontend implementation overview.

2. 0px;padding:0px;clear:both;font-family:'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif;font-size:12px;">

In this video, we will start with installing Axios in the frontend app and rebuilding frontend image.

3. 0px;padding:0px;clear:both;font-family:'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif;font-size:12px;">

In this video, we will start with the replacement of the fetch with Axios.

4. 0px;padding:0px;clear:both;font-family:'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif;font-size:12px;">

In this video, we will cover continue replacement of the fetch with Axios.

5. 0px;padding:0px;clear:both;font-family:'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif;font-size:12px;">

In this video we will start with adding some images to the Mongo database using Postman.

6. 0px;padding:0px;clear:both;font-family:'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif;font-size:12px;">

In this video, we will be retrieving saved images when React app loads.

7. 0px;padding:0px;clear:both;font-family:'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif;font-size:12px;">

In this video, we will be examining how useEffect works.

8. 0px;padding:0px;clear:both;font-family:'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif;font-size:12px;">

In this video, we will be explaining ESLint error and extending ESLint config.

9. 0px;padding:0px;clear:both;font-family:'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif;font-size:12px;">

In this video, we will start with saving images in the database from the frontend app.

10. 0px;padding:0px;clear:both;font-family:'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif;font-size:12px;">

In this video, we will cover the Hiding Save button for already saved images.

11. 0px;padding:0px;clear:both;font-family:'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif;font-size:12px;">

In this video, we will be saving images in the database summary.

27. 0px;padding:0px;clear:both;font-family:'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif;font-size:12px;">

In this section, we will cover deleting images and frontend improvements.

1. 0px;padding:0px;clear:both;font-family:'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif;font-size:12px;">

In this video, we will plan for the improvements section.

2. 0px;padding:0px;clear:both;font-family:'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif;font-size:12px;">

In this video, we will learn how to handle deletion of the images.

3. 0px;padding:0px;clear:both;font-family:'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif;font-size:12px;">

In this video, we will start with delete image API endpoint challenge.

4. 0px;padding:0px;clear:both;font-family:'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif;font-size:12px;">

In this video, we will cover delete image API endpoint solution.

5. 0px;padding:0px;clear:both;font-family:'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif;font-size:12px;">

In this video, we will cover error handling for the delete image API endpoint.

6. 0px;padding:0px;clear:both;font-family:'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif;font-size:12px;">

In this video, we will start with delete image request in the frontend challenge.

7. 0px;padding:0px;clear:both;font-family:'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif;font-size:12px;">

In this video, we will cover delete image request in the frontend solution.

8. 0px;padding:0px;clear:both;font-family:'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif;font-size:12px;">

In this video, we will start with the spinner challenge.

9. 0px;padding:0px;clear:both;font-family:'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif;font-size:12px;">

In this video, we will cover the spinner solution.

10. 0px;padding:0px;clear:both;font-family:'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif;font-size:12px;">

In this video, we will cover Finalize with the spinner solution.

11. 0px;padding:0px;clear:both;font-family:'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif;font-size:12px;">

In this video, we will start with image author information challenge.

12. 0px;padding:0px;clear:both;font-family:'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif;font-size:12px;">

In this video, we will cover image author information solution.

13. 0px;padding:0px;clear:both;font-family:'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif;font-size:12px;">

In this video, we will start with toast notifications challenge.

14. 0px;padding:0px;clear:both;font-family:'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif;font-size:12px;">

In this video, we will cover toast notifications solution.

15. 0px;padding:0px;clear:both;font-family:'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif;font-size:12px;">

In this video, we will cover Finalize with toast notifications solution.

16. 0px;padding:0px;clear:both;font-family:'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif;font-size:12px;">

In this video, we will cover improvements challenges section summary.

Course Images

Full Stack Web Development Bootcamp with React and Python

By Packt

Booking options

Highlights

Description

Course Content

About The Provider

Tags

Reviews