1. Introduction FREE CHAPTER

• Introduction

2. Introduction to Web Development

• Frontend Versus Backend

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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