VueJS and NodeJS: A Practical Guide with Typescript

Set up a Node.js project by installing Node.js, choosing an editor, initializing npm, creating an index.js, and running npm start, with plans to add TypeScript.

Install TypeScript as a dev dependency and globally, create a tsconfig.json, and convert index.js to index.ts while setting up nodemon to watch source files for automatic restarts. Then install express.

Learn to set up express with TypeScript, install and import express, configure json handling, define a simple get route, and run the server on port 8000 with hello world.

Learn to define and export routes in a TypeScript Express app, wire a register controller, and test the endpoint with a JSON body sent to /api/register using Postman.

Learn to validate inputs with express validation by creating a validation folder and a register validation, validating first name, last name, email, password, and password confirm, and handling 400 errors.

Set up a MySchool database with TypeORM, configure a connection, define user entities, and auto-create tables to register users in a Node.js API.

Define a user entity as a database table with id, first name, last name, email, and password; enforce a unique email and hash the password during registration.

Implement a login function that authenticates a user by email and password, handles not-found and invalid-credentials cases, and returns a JWT while omitting the password.

Learn to generate a jwt by signing a payload with a secret, store it in a backend-only cookie, and enable cross-origin credentials for secure authentication.

Retrieve the authenticated user from a JWT cookie, verify the token with a secret, fetch the user by id, remove the password, and return the user or 401 if unauthorized.

Implement a logout function as a post request that expires the JWT cookie to remove authentication, returns a success message, and handles unauthenticated errors.

Store secrets in an EMV file and load it at startup using a package, enabling environment-specific values for development and production, while decoding a JWT for authentication.

Implement an authentication middleware that validates the jwt and attaches the user to the request. Call next to proceed; guard logout with this middleware and remove the password.

Implement authenticated profile updates by adding routes to update user info and password, validating input, persisting changes via a repository, and returning updated user data.

Create a dedicated user controller for admin operations and a separate controller for the authenticated user, enabling CRUD on users via a TypeORM repository, and return users with passwords removed.

Establish a role entity and connect it to users via a one-to-many relationship, then retrieve users with their assigned role data to support create, update, and query flows.

Create a permission entity with an auto-generated id, a number, and a name, and implement a many-to-many link with roles via a join table called url_permissions.

Seeders walkthrough shows creating seed scripts to populate permissions and roles, including admin, editor, and viewer, with view/edit rights for users, urls, products, and orders.

Learn to build roles and permissions management with node and typescript: implement permission and role controllers, handle get, post, put, and delete operations using repository patterns and many-to-many relations.

Learn to build a product entity with title, description, image, and price, expose CRUD APIs via a product controller and repository, and test create, read, update, and delete operations.

Implement pagination for product data using take and skip, and compute total and last page to return a paginated data set with a meta object.

Build an image upload feature using a multer middleware, storing files in uploads with a random name, and expose an /api/upload route that authenticates user and returns the image url.

Learn to expose uploaded images by configuring express.static for an uploads folder, so static files are served at the /uploads route and returned directly.

Define order and order item entities with a one-to-many relation, including a primary generated id and create date, then seed orders with items using repositories and add an order controller.

Create a TypeScript order controller with a get orders function returning paginated data from API /orders, a name getter concatenating first and last names, and a total getter using reduce.

Build a post /export endpoint in Node.js to export orders and order items to a CSV using a parser, returning a text/csv file for download.

Learn to generate sales totals with raw sql by joining orders and order_items, summing item totals, grouping by date, formatting dates, and exposing the results via a chart-ready api endpoint.

Learn how to implement a permission middleware in nodejs with typescript, linking user roles to permissions, validating view and edit access for product and user routes, returning unauthorized when needed.

Install Node.js, install Vue globally, create a new Vue project named view admin, manually select features TypeScript, Router, and Vuex with Vue 3, then run the dev server on localhost.

Modify the template by integrating Bootstrap, copying thesis content into the dissertation view, simplifying components from scratch, and preparing a lean update view with a responsive dashboard and slides.

Create and organize Vue 3 components, including a navigation and a menu, each with a template, script, and style, and render them in templates to show component-based design.

Define routes to render the dashboard and users components by configuring paths. Update the navigation menu with links and active styles to reflect the current route and URL changes.

Explore how Vue 3 uses the setup function and ref to bind a count to an input and auto render the template on changes in the register page.

Build a registration form with first name, last name, and password confirm in a VueJS and NodeJS project, and use a wrapper component to render routes like dashboard and users.

Submit a Vue.js form with TypeScript by wiring inputs for first name, last name, email, password, and password confirm with refs, binding via v-model, and logging values while preventing default.

Register a user by posting data to the server with axios, installing TypeScript version and importing it, then handle response or use an async function to destructure and access data.

Create a logging component and redirect after registration to the logging view using the router, then push to the log in component to complete the flow.

Create a login form using Vue's reactive to group email and password, compare reactive to ref, log values on submit, and apply styles copied from the register.

Learn to implement login with credentials in a VueJS and NodeJS app by posting to localhost:8000/api/log in, handling cookies with credentials, and configuring axios defaults for authenticated requests.

Fetch the authenticated user in the Vue component via onMounted, verify the JWT, and render the user's name with a profile link and sign-out.

Implement a logout flow that redirects to the login page and protects routes by checking authentication with a try-catch, redirecting unauthenticated users back to login.

Organize user components in a dedicated folder and load all users with onMounted and axios, storing results in a ref and displaying name, email, and role, with pagination ahead.

Implement pagination to navigate users with next and previous controls. Track the page with a ref, load data via a load function, and fetch users by page parameter.

Watchers in Vue 3 trigger data loading when a watched page variable changes. Update the page on next or previous actions and let the watcher fetch new data automatically.

Implement delete functionality for the user table by confirming deletion and removing the user by id, updating the front-end list with a filtered user model (id, firstName, lastName, email, roll).

Create a user workflow by adding a users create component, wiring it to the router at /users/create, and presenting a form for first name, last name, email, and role. Submit the form with a reactive TypeScript setup, fetch available roles, post the user data, and redirect to the users list upon success.

Reuse the user creation component as a user edit, prefill the form with existing data, and submit a put request to update the user via the edit page.

Implement and manage roles in a VueJS app using TypeScript, wiring URLs, populating a roles table with name and actions, and handling create and delete operations.

Create and manage roles in a VueJS app by building a permissions form, fetching permissions from an API, and wiring checkboxes to a reactive form data model.

Update roles by fetching roles, mapping permissions to IDs, and building a form with checked permissions; implement a put update endpoint and test deletion.

Create and display a products page by fetching product data in TypeScript, rendering image, title, description, and price in a table, with delete functionality and pagination.

Create a reusable paginator component in VueJS and NodeJS using TypeScript, with last page as a prop and page changed emitted for products and users.

Create a product in a Vue app with TypeScript by building a form for title, description, image, and price, then post to products and navigate to the list.

implement image uploading in the product creation flow using a hidden file input, sending the file via form data to the server, and applying the returned url.

Update products by fetching existing data on mount, populating the form, and sending a put request to update the product, including image upload and price changes.

Fetch and display orders in a VueJS and NodeJS TypeScript app, using axios on mount to populate a paginated table of orders with item details and a view action.

Explore practical animations in a VueJS and NodeJS course, wiring a selectable order detail panel with show and hide transitions, max-height animating to reveal items using class toggles.

Add a CSV export option by creating a function, configuring the response as a blob, and triggering a download through a temporary link.

Assemble a time-series bar chart in a VueJS dashboard using C3 and TypeScript, fetch and map data by date to daily sales, and bind to a chart element on mounted.

Create a profile page with two forms to update first name, last name, email, and password using TypeScript, Vue reactive data, and Axios, syncing with the authenticated user.

Build and manage a user state in Vuex by defining initial state, actions, and mutations, and access it in components with use store, computed, and dispatch.

Organize vuex state by introducing models and namespaces, create a user model, and separate user mutations and actions to keep the store scalable as the app grows.