No Frameworks: Build a Full Stack Kanban with JS + Azure

Create a front-end npm package for a single page application by initializing npm in the front-end folder, generating package.json, and managing scripts and dependencies.

Configure webpack to bundle css by adding a styles folder with style.css, installing css-loader and mini-css-extract-plugin, and importing the css in index.js.

Set up webpack dev server to auto rebuild with instant feedback, configure scripts, and enable hot module replacement, gzip compression, and history API fallback on port 3000.

Implement an asynchronous bootstrap function in bootstrap.js that loads the register class by path with a switch, export bootstrap, and invoke it from index.js to test with console logs.

Implement front-end form validation for the onSubmit register function, including password match checks, a try-catch block, and a success alert, then prepare the back end payload and navigate to login.

Implement a function to clear fields after submit in the onsubmit register form, resetting inputs after success, and prototype whether to redirect to login or stay.

Connect your cloud MongoDB to the backend using mongoose, create a database configuration with a connect function, export it, and call it from the entry point to establish the connection.

Recap the back-end flow from index.js to API v1 users, covering routes, user controller and service, and membership creation with repository archiving.

Enforce email uniqueness by checking for an existing user before creation, returning a 400 error if found. Implement a repository get user with lean find one to verify the email.

Generate a json web token after login using a jwt helper that signs with HS256, includes issuer and subject details, and sets a two-hour expiry for authorized actions.

Implement the get all tasks route under api/v1/tasks, protected by authentication middleware, returning an empty list for the authenticated user and validating cookies.

Build and update a centralized auth store that uses local storage, commits login mutations, and prepares for logout, with a single store hub for app state.

Implement ux enhancements by updating the auth middleware to block login and register routes for authenticated users, inform them they're logged in, and redirect to the dashboard after logout.

Implement an event emitter to update the navbar based on auth state, showing dashboard and user options when signed in. Use local storage and event-driven updates.

Update the navbar to reflect authentication by wiring DOM elements via getElementById and reading the store state, while implementing logout to clear auth data and access the board.

Model a task with mongoose to support create task operation. Define fields for summary, acceptance criteria, and status defaulting to do, plus a user ID for ownership and drag-and-drop readiness.

Implement the create task flow by wiring post routing to the controller and service, authenticate requests, and save tasks to the database with a default status of todo.

Connect the finished backend with a bootstrap front end by implementing the create task modal and new task form in the dashboard, wiring the submit event to enable task creation.

Display tasks on a three-column kanban board by manipulating the DOM with the dashboard HTML, creating task cards from API data, and rendering categorized lists for todo, in-progress, and done.

Explore implementing drag and drop for kanban task cards across three columns—to do, in progress, and done—updating card status with the drag and drop API and core JavaScript.

The lecture shows wiring drag enter, drag over, and drop events across all columns, preventing default behavior and implementing an asynchronous drop handler to enable valid drops.

Drag and drop a card triggers a drag event, capturing x and y coordinates to determine where you drop in the three columns, considering neighboring task cards.

Deploy the full stack Kanban app to Azure using VS Code extensions, configure Atlas access, deploy backend, connect the front end, and validate with Postman tests.

Deploy the vanilla JS frontend to Azure static web apps via GitHub, creating a deployment folder. Configure navigation fallback and copy dist with webpack to enable deployment.