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

Create the front-end for the Kanban app by building a landing page with navigation to registration and login, submitting user data to a backend route, and styling with bootstrap 5.3.

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.

Explore how a module bundler converts multiple modules into browser-ready HTML, CSS, and JavaScript, using webpack and a setup with a src folder and npm dev dependencies.

Learn to configure the JavaScript entry point with index.js, link it to index.html, and perform basic DOM manipulation using a test-h1 element, laying the groundwork for Webpack bundling.

Configure webpack by creating webpack.config.js, set entry point index.js, output to dist, and enable dev server and babel compatibility with plugins for HTML and CSS.

Install and configure the HTML Webpack Plugin as a development dependency, update webpack.config.js with the plugin, and run npm run build to generate a dist/index.html for the Kanban board.

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.

Discover how Babel enables backwards compatibility by transpiling modern JavaScript, such as arrow functions, into legacy code through Webpack configuration and Babel loader.

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.

Master front-end routing in a single-page application by creating routes for /, /register, and /login with a shared navigation bar and dynamic view updates via innerHTML.

Define and wire the front-end router by creating a routes object, importing it into index.js, and rendering HTML fragments into the app div.

Master front-end routing by loading the landing HTML fragment into the app div with fetch, using try/catch for errors, and preparing webpack to copy pages to dist.

Implement a single-page registration form using a register class in register.js that prevents page refresh, validates input, submits a new user to the backend, and clears the form on success.

Initialize the register class with the registration form element on the /register route, render its behavior, and set up a submit listener to prevent default and log the event.

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.

review the register module in bootstrap.js and learn to import a default export class. instantiate it to enable the registration form and attach a submit listener.

Validate all fields in the onsubmit register form, alert users when fields are missing, and return to stop sending an incomplete payload, using SweetAlert2 for the approved alert design.

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.

Implement a navigate to helper in a new utils folder that uses the router to route users from the register page to the login view after submission.

Learn how to control navigation in a vanilla JavaScript single-page app by handling popstate and data-link clicks with a centralized function that prevents reloads and keeps routes in sync.

Create a backend folder, initialize npm, install express, run an index.js server on port 8000, then connect to cloud MongoDB to validate and store data and respond to the client.

Create a cloud MongoDB Atlas cluster on Azure for the Kanban app, set up the Kamban prototype vanilla js database with a users collection, and add a database user.

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.

Model a user in Mongoose by defining a schema with required name, email, and password, using a transient confirm password for validation before exporting the user model for MongoDB.

Implement a user repository layer to handle creating and saving users to a cloud MongoDB via Mongoose, enabling registration in a full-stack JS and Azure backend.

Expose an API route to receive new user data, implement an Express router and user controller, and test the end-to-end flow from form submission to database storage.

Implement a service layer for user creation and store users in the database. Wire the controller to the service, enforce encryption and unique emails, and test with Postman and MongoDB.

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

encrypt user passwords with bcrypt by salting and hashing before storage, update the create user flow, and omit the password from responses to protect user privacy.

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.

Set up a Joy-based validation layer on auth/create enforcing name, email, password, and confirm password. Return 400 on errors and enforce strong password rules: min eight characters, uppercase, lowercase, numbers.

Connect the front end to the back end and test the full stack by integrating axios requests, a reusable api client, MongoDB-backed registration, and CORS configuration.

Connect the front to back by testing frontend and backend validations for user registration, including required fields, password matching, and server-side checks for email and password constraints.

Implement the auth login route to validate the login object, authenticate the user, and issue a json web token in a cookie for protected backend requests, with corresponding error handling.

Learn how to securely validate a login by comparing the provided password with the encrypted one stored in the database using bcrypt, and respond with generic invalid credentials when needed.

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 an authorization cookie to store the JWT, using httpOnly, secure, expires, and sameSite None settings, and ensure the response omits the password to protect user data.

Implement a middleware auth check that validates the JSON web token from cookies, returns 401 when unauthorized, and grants access to the tasks endpoint.

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.

refactor the back end to use environment variables via a central config object. update the env file, restart the server, and align jwt helpers and database settings with config values.

Implement the front-end login flow by creating a login class, wiring the login form submit, using suite alert, and routing to the Camden board on success.

Implement front-end login form validation by capturing the submit event, extracting email and password into a payload, validating required fields, and handling success and server errors with alerts.

Send the login payload via a post request to the authentication API on the back end, and include credentials in the API client while updating cors for localhost 3000.

Develop and update an authentication store to manage login state, storing user data in local storage and toggling isAuthenticated via mutations and a commit method, based on server responses.

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.

Redirect users to the dashboard after login by adding a dashboard folder (html and js), securing routes with auth, and using local storage to persist user data.

Implement an authorization middleware layer to verify authentication for protected routes, wiring an auth middleware and run middleware into the router to redirect unauthenticated users to the login view.

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.

Build a task repository with mongoose to handle CRUD operations on tasks. Implement an async create task method that saves a new task to MongoDB and export the repository class.

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.

implement the service layer create task function with business rules: default missing status to todo, require authorization, save via repository, and return 201 or 500 accordingly.

Implement a Joi-based validation for create task after authentication and before controller, enforcing a required task summary, acceptance criteria optional, status values (to do, in progress, done), and 400 errors.

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.

Send a post request from the front end to create a new task via api v1 tasks, and implement an interceptor to handle 401 by alerting and redirecting to login.

Implement the front-end service layer by validating the create form, constructing the task object, and calling the Kanban board API with an interceptor.

Implement get all tasks api in backend, validate user, use a helper to ensure current user, and query by user id to return that user's tasks with try-catch error handling.

Learn to fetch all tasks from the back-end with a new get all tasks API, update the dashboard to render tasks, and refresh the Kanban board on 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.

Implement a backend delete task flow to remove tasks by id, with authentication, routing from route to controller, service, and repository, and returning 200 ok when successful.

Enable the front end to delete tasks by calling the api with the task id. Attach a delete button listener across all columns, confirm, and refresh tasks via the api.

Implement the get task by id route in back end, perform an auth check by retrieving the user from the request, and fetch the task via the service and repository.

Add a get task by id api call. Wire a view button to populate the update form with task data such as summary, acceptance criteria, status, and id.

Implement the update operation with a put route and id, perform validation and auth check, then wire controller, service, and repository to update the task and return the updated document.

Update the front-end to integrate the back-end update route by enhancing the render view update form, adding a submit listener, and validating the task summary.

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.

Implement drop function in dashboard class to append the dragged item to the target list on the front end via the allowed drop event, noting changes don’t persist after refresh.

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.

Enable vertical drag and drop of task cards within a kanban column to raise priority, using insert before logic and get drag after elements with top offset calculations.

Enable the back-end by uncommenting and storing the task hierarchy, sort tasks by hierarchy in queries, and implement bulk drag-and-drop updates through the service, roots, and controller.

Explore bulk updates for drag and drop in a full stack kanban, updating source and destination columns, rearranging tasks, and persisting changes with a single API call.

Build a full stack vanilla JavaScript kanban with drag-and-drop, using two maps to link list ids to statuses and update hierarchy and status via bulk API calls.

Explore Microsoft Azure’s cloud services for storing data, running apps, and securing backups, with core features like virtual machines, storage, databases, and networking, plus exam prep for AZ-900.

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.