If needed: Continue working on getting access to FrontEndMasters via the GitHub Student Developer Pack, or setting up GitHub Codespaces / your personal laptop development environment.

Web Engineering Setup

For this assignment, and all future work, we will follow this workflow as shown in this diagram.

1. Do all development work locally on your laptop, or on GitPod or GitHub Codespaces, depending on your preferences. We will call this your local dev environment. We will set up an SSH tunnel to your AWS server to access its database from your local dev environment, so you don't have to install and maintain two separate databases.

2. When you have made changes and are satisfied that it works, commit and push your code to GitHub, and merge to main branch.

3. We will set up your AWS server to periodically pull from GitHub, to monitor for changes, to install any new package dependencies, to build a static distribution, and to serve your app, straight from main branch.

Starting with this homework, you'll create a project directory with your team and start applying this assignment to it. Follow the commands below in your laptop/GitPod/GitHub Codespaces

cd <REPO_DIR>/web-24wi/projects
mkdir <YOUR_PROJECT_NAME>
cd <YOUR_PROJECT_NAME>

In this case, you will be adding adding user registration, user login, and database functionality to your final project, with page types and routes called

• /auth/register
• /auth/login
• /auth/profile

Don't worry if those are the only pages in your final project so far: it is a good start, and you will add other page types in the weeks ahead.

Final Project Details (work-in-progress)

Our goal in this assignment is to combine our existing knowledge from previous homeworks of

• HTML
• CSS
• JS
• the browser's fetch functionality
• an HTTP POST request to a backend API server and we will now add to it a web <form> that lets us register a username and password with our backend server, which will let us login to authenticate ourself and authorize reading private data.

Watch the following sections from the "Web Authentication APIs video course

• Section 1: Introduction
• Section 2: Web Authentication Strategies
• Section 3: Classic Login Flow

You may refer to the course notes website, however, we ask that keep it (or the video when you pause it) side-by-side with your text editor for typing, and that you do not copy and paste, as explained above.

We recommend that you do this and all work on your local laptop, GitPod, or GitHub Codespaces (your development machine). We suggest that you do not work on your AWS server (your production machine, which is where we deploy our code) for a number of reasons:

• You can use VSCode with its productivity features on your local dev environment
• these free tier t2.micro AWS machines are not powerful enough to support VSCode remote server well without crashing
• developing on your AWS machine represents another Git repo to keep in sync, in addition to its .gitconfig settings
• if you share the machine with your team or host multiple services, you would have to share the ubuntu user or create additional accounts

Everyone's workflow is different, and we invite you to find one that works for you and your teammates.

Before you start working, make sure you are on main branch and you start from a clean working repository.

$ git status                                                                     On branch main
Your branch is up to date with 'origin/main'.

nothing to commit, working tree clean

Follow the git-branch-pull-request workflow that we have been learning in class to submit your work.