MEAN Fullstack Trello clone: WebSocket, Socket IO

Install express, mongoose, and socket IO, configure an http server with express and socket IO, and ensure MongoDB connects before starting the API on port 4001 for production ready application.

Create mongoose user model with TypeScript interface and document, hash passwords before save with bcrypt, enforce email and username validations, and add a password validation method for login.

Develop a registration method with MVC in Express, using a users controller and model, parsing JSON body, validating and normalizing the user, and returning a JWT token.

Implement a login route in Node.js at /api/users/login that reads email and password, finds user by email, normalizes the user to obtain token, and validates password with the model.

Implement authentication middleware in nodejs by reading the bearer token from the authorization header, verifying it with JSON Web Token, and attaching the current user to the request.

Develop a basic Angular authentication module with login and register pages, a current user interface, and a get current user service using HttpClient and environment API URLs.

Develop an Angular register component with its own module and routes. Use reactive forms with a form group and form builder to handle email, username, and password validation and submit.

Implement a register API call in an Angular service, typing the register request, posting to /users, handling current user and token storage, and displaying validation errors on the register page.

Implement a standalone Angular login page using the same form as register, with email and password, posting to /api/users/login, handling errors, and redirecting to the home page on success.

Create a dedicated home page module in Angular for anonymous users, focusing on markup only, with header, hero, and content blocks including images and login or register links.

Implement a global Angular http interceptor that reads the token from local storage, clones requests, and appends an authorization header to all calls; fix bearer formatting to authenticate the user.

Explore Angular auth guard patterns by transforming the current user stream into a boolean is logged in, and guard routes with canActivate to redirect to home or boards.

Build a boards page in a MEAN stack app to list a user's boards and create new ones, via the /api/boards get endpoint and mongoose models with id transformation.

Implement the frontend boards module and boards component, set up a guarded /boards route, and build a shared board interface with a boards service to fetch boards from the API.

Build a reusable inline form component for the MEAN Trello clone using Angular modules and reactive forms. Cover editing states, inputs, placeholders, and submit events via a shared module.

Implement a create board workflow in a MEAN fullstack app by rendering boards page, using a reactive inline form, posting to /boards via the board service, and updating the list.

Add a shareable top bar module and logout functionality to the MEAN Trello clone, wiring components, services, and router navigation to remove the token and update current user.

Introduce a dedicated board module and component for a single board page, add a dynamic /boards/:id route guarded by canActivate, and fetch the board data on init.

Implement a backend endpoint to fetch a single board by id, exposing an endpoint at /api/board/:boardId, using find by id and returning the board’s id, title, and userId.

Create a board service with a board stream that shares boards, columns, and tasks across components using a BehaviorSubject and a setBoard method.

Create a socket service to establish a socket.io client connection with the backend using environment variables, transmit the current user token, and disconnect on logout.

Authenticate users in socket.io by validating the token in a middleware, attaching the user to the socket, and ensuring subsequent socket actions run under authentication.

Implement columns for a Trello-like board by adding a column model, interfaces, and a get columns endpoint that retrieves columns by board ID for authenticated users.

Create a column via websockets with socket.io, using start, success, and failure events, and broadcast the saved column to all clients in the board room.

Create a columns interface and a columns service to fetch board columns via HTTP get, inject into the board component, and use combineLatest to render the board page.

Implement a client side create column form for MEAN fullstack Trello clone using an inline form, a column input interface, and socket events to update the board in real time.

Learn to build the backend for creating and listing tasks on a Trello-style board, using task interfaces, models, and API routes with socket notifications.

Create a task interface and tasks service on the client, add a task stream to the board service, and update the board component to fetch and render tasks by column.

Implement an inline create task form on the board, using a task input interface and socket.io to emit create task events and update task streams in real time.

Learn to implement an inline form to update a board name, wiring back-end and client with circuit events and socket io to notify all connected clients.

Implement board deletion via websocket events, mirroring update flow with delete, delete success, and delete failure, adding client and server logic and a confirmation redirect to the boards page.

Implement real-time column deletion in a MEAN fullstack Trello clone by adding a delete column action, socket events, and client updates to remove the column across all boards.

Implement an inline form to update a column title, wire backend column updates and circuit events, and update the board's columns for all connected clients.

discover how to manage angular subscriptions by creating an unsubscribe stream and using take until to auto-complete on component destroy, while comparing subject and behavioral subject.

Build a task model as a nested route inside a board to render a task modal via the url /boards/:boardId/tasks/:taskId, reusing board streams for data.

Inject the board service with state to stream and map tasks into a single task, then build a reactive form to edit title, description, and column.

Implement end-to-end task updates in a MEAN Trello clone using web sockets, socket io, and reactive forms. Notify all clients via circuit events and ensure real-time syncing across boards.

Implement end-to-end delete task using socket and circuit events to remove a task by id, update the board task stream, and notify all clients of delete success.

Deploy a mean fullstack Trello clone by renting a server, setting up ssh access, pushing code to git, building the client, and running the backend with PM2 and MongoDB.

Complete this homework by extending a mean full-stack trello-like app with node.js backend and express, using angular typescript and reactive state, and implement admin roles and drag-and-drop tasks.