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

Play Again Panel

Screen Components

Usage and Blanks

The Gallows Component

Gallows Component: Adding the Body

Screens: Sign-In

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

Screen Components

Let's create the Banner which includes the ShortTitle.

We'll cover the following

Setting it up
Banner
Try it yourself

The design calls for the banner to show the application’s name, Lang-Man, written in large cursive font. We’ll choose the Allura font from Google Fonts. Because of the decorator we’ve added, this font will also be available to the story.

Setting it up

We create a new file for the screen components and call it components.js. We’ll start it off, with a defined Banner component and stubs for ResultBanner, and UsageAndBlanks.

Get hands-on with 1200+ tech skills courses.