Back To Course Home

Quick Start Full Stack Web Development

0% completed

Introduction

What To Expect From This Course Full Stack Development The Elements of a Web Application FRAP Applications

Basic Client Pages with React

Introduction to React Setting up the React Application A Look at Necessary Files Tinker with the Live React App Making a Collatz Conjecture Application: String Output Making a Collatz Conjecture Application: List Output Working With Fonts

Dynamic Client-Side Pages with React

Practical Advantages of React Creating Input Elements Introduction to Controlled Inputs Further Exploring Controlled Inputs Global State

Server-Side API Creation with Flask

Why Are Rest APIs Good?Conventions for REST APIs Python Flask Servers Python Decorators Flask-RESTPlus Has What You Need Fixing Issues Managing the Configurations: Set Up ENV Variable Managing the configuration: YAML File Creating Scripts

Database Definition and Creation with SQLAlchemy

PostgreSQL vs SQLite Pros and Cons of SQLAlchemy Working With SQLAlchemy SQLAlchemy Data Types Keys in SQLAlchemy Creating Session Using Query Method in the Session Object Using The Query Method: Filter Connecting Multiple Tables From SQLite to PostgreSQL

Code Documentation with Sphinx

Introduction to Sphinx Compile to HTML: Set Up Sphinx Compile to HTML: Important Changes Compile to HTML: Make HTML Get More reST: Making Changes Get More reST: Re-run make HTML Get More reST: Adding Files Some More Features of Sphinx Publish

An Introduction to Code Testing

The Purpose of Code Tests: Clarity of Thought The Purpose of Code Tests: Coding in Small parts The Purpose of Code Tests Unit Testing Recommended Tests Snapshot Testing Making Snapshot Testing Easy Integration, User, and Acceptance Testing

UI Testing

Tools for Testing Jest Testing Your First Test Importing and Exporting items Writing Unit Tests for Our Application Throwing an Error and Testing It Why do we Need Storybook?Making Custom Stories storiesOf() and Placeholders Creating Documentation Snapshot Testing Combining Snapshot Testing and Storybook

API Testing

Interactive Testing: Introduction Interactive Testing: Handling Errors Using Pytest Pytest on Flask: Setting up the Flask App for Testing Pytest on Flask: Performing Tests

Database Integrity Testing

Common Issues with Databases Invalid Semantics Foreign Key Foreign Key: Postgres Constraints Why We Need Integrity Tests Integrity Tests Integrity Tests: pytest

Automatically Testing Every Update

Introduction to Automated Testing Hooking the Test into Git: Requirements Hooking the Test into Git: Working of Git Commands for Testing: React Applications Commands for Testing: Flask Application Commands for Testing: Documentation Commands for Testing: Necessary Details

Design a Web Application

Introduction to Designing Web Application Planning Stories and Interactions for the Application Design the UI Design the API Design the Data Model Finalizing the Design of Data Model

Build the Data Model

Requirements of Data Model Create Tables: Usage Construct User and Game Class Necessary Updates Inspecting the Usage Database Build Postgres Database

Build the REST API

Getting Started with the API of Langman Reaching Out to the Routes and Database DELETE: Remove the Game POST: Starting a Game GET: Seeing Game Status PUT: Guessing a Letter Handling Diacritics Looking into the Database

Build the React Client

The Front-End of Our Application Buttons, Forms, and Panels Button Panel Form Play Again Panel Screen Components Result Banner Usage and Blanks The Gallows Component Gallows Component: Adding the Body Screens: Sign-In Screens: Win Screens: Lose Screens: Play App Component: Overview App Component: Connecting to the Back-end App Component: Changing Screens

Finishing Touches for the App

Introduction Play the Game: Error Message Play the Game: Dealing with the Error A Quick Look Back Replace favicon.ico Compiling the Documentation Creating Some Tests: Approaches Creating Some Tests: Things to Check Creating Some Tests: Additional Functions Creating Some Tests: Checking the Guesses Creating Some Tests: Running Tests

Web Authentication

Introduction to Web Authentication

The Role of Data Signatures

JWT: JSON Web Tokens

Creating the Authentication Table

Necessary Changes for Creating the Authentication API

Creating the Authentication API

Looking Inside a JSON Web Token

Necessary Changes for Updating the Langman API

The Langman API

Steps to Update the Langman API

Updating the Client: The Login Screen

Updating the Client: Functions

Updating the Client: `flashMessage` Component

Deploy the Application

Introduction to Heroku Installing and Configuring Heroku Create Heroku Application Prepare the Environment to Support the Database Configure the Production Server Configure the Proxy Server Deploy the Application Deploy the Application Yourself

Conclusion

Coding Efficiently Three Pillars of Web Application Development Lessons Learned: Shortening the Feedback loop Lesson Learned: Design Approach What To Do Next

Appendix

Proficient Tool Use Language Fluency Python REPL and Environment Manager Preparing Your Virtual Environment: pipenv Preparing your Virtual Environment: Pipfile Installation of PostgreSQL

The Langman API

Get to know how the `langman/server` directory will turn out.

We'll cover the following

Application definitions
The langman/server directory

Application definitions

The updates for the methods have been completed, but with two different API namespaces, that is, games and auth, it now makes more sense to put the definition of the Flask application in its own file together with the before_request and teardown_request decorated methods. To do this, we put the game resources into a new file, game_api.py, and leave the App definition in app.py. This separation of pieces will make them more reusable.

Get hands-on with 1400+ tech skills courses.