Full stack Masterclass with Vue.js and Django Rest Framework

Explore Django, the Python web framework, and Django REST framework to build a RESTful API, create a walking skeleton, and prove end-to-end connectivity from database to endpoints, including installing Django.

Set up a project-level python virtual environment on macOS, install Django inside it, create and run a Django API project, and explore migrations and ORM concepts through practical commands.

Learn to set up Django on Windows with a virtual environment, install Django via Python pip, start a project, and run the development server using Visual Studio Code.

Set up Django on Ubuntu by creating and activating a Python virtual environment with venv, then installing Django with pip and running the development server.

Inspect the Django app's structure, noting migrations, apps.py identity, and admin usage; plan to build user management from scratch, and focus on views.py for core behavior.

Install and manage Django Rest Framework dependencies for a Django app by creating a requirements.txt and using pip install -r requirements.txt in a virtual environment.

Create an app-level urls.py with a url pattern for the reporting view, include it under api in the project, and run the server to test a get on port 8000.

Explore how django models map classes to relational database tables using the orm in a code-first approach. Migrate changes with a basic order model including amount, description, and created time.

Learn how to insert data into a database manually using the Django ORM via a Python shell, including importing the Order model, setting time zone, saving, and verifying records.

Create a Django REST framework model viewset to expose all order data over HTTP, overriding get_queryset and ordering by created time descending for Postman testing and a future SPA client.

Explore how Django Rest Framework serializers convert query sets and model instances to JSON, support deserialization and validation, and implement a simple order serializer.

Protect project work with git and GitHub by initializing a repository, staging changes, committing, and pushing to origin main.

Learn to scaffold the frontend with Vue.js, explore its composition API and two code structures across versions two and three, while comparing its lightweight, easy-to-learn approach to Angular and React.

Compare vite and vue cli for new Vue.js projects, weighing build speed, configuration ease, browser compatibility, and community support, to help learners choose a practical, job-ready workflow.

Set up a Vue project using the Vue CLI with global install or npx. Configure TypeScript, Vue Router, Vuex, Sass, and history mode, and choose option API or composition API.

Explore the Vue.js project skeleton, from node_modules and public folder to src components, views, and router, and learn how composition API and project structure influence maintainability.

Explore the RESTful API concept and how HTTP methods: get, post, put, patch, delete, and status codes like 200, 404, 400, and 500 drive client-server interactions in Django Rest Framework.

Learn to set up and use Axios for calling a Django Rest Framework endpoint, compare Axios with fetch, install Axios, and create a simple loadOrders function that returns response data.

Explore life cycle hooks in Vue.js, noting how a view component goes from creation to data observation, template compilation, and DOM mounting, with mounted used for side effects after rendering.

Diagnose a cross-origin resource sharing error using devtools. Enable cors on the Django backend with django-cors-headers by installing it, updating settings, adding middleware, and allowing all hosts in development.

Learn to manage a separated frontend and backend project with git, including adding, committing, and pushing changes to a remote repository, handling renames, and cleaning up locally.

Design your domain with UML diagrams to visualize architecture and business processes. Plan data, HTTP transport, and UI updates for a smooth single-page app.

Model a web shop domain with products, categories, suppliers, and orders using one-to-many and many-to-many relations, foreign keys, and scalable enumerations in Django.

Refactor the order model by adding a date time field and snake_case names, include a customer foreign key with on delete do nothing, and outline linking to product.

Develop the rest of the domain by modeling product, supplier, and category with Python classes, using an integer field for stock and emphasizing class order.

Create and customize serializers for order and customer in Django REST Framework. Preserve the ID and expose related customer and product details, including supplier and category, via to_representation.

Create and customize serializers for product, supplier, and category to expose data to the frontend, using metaclass fields, and explore flexible serializer approaches in an agile workflow.

Create serializers for product, category, and supplier in a Django REST framework backend, enabling category dropdowns and future product trend insights.

Write and customize Django Rest Framework views using model view sets, implement get_queryset, and order data by country and last name to organize customers and categories.

Explore ordering querysets in a Django Rest Framework view, including suppliers by country and name, and products by unit price and nested category; compare methods in the next video.

Explore flexible data handling by integrating models, views, and serializers, use a model’s ordering attribute to specify fields, and apply metaclass techniques to control ordering.

Register view sets in the router for categories, customers, suppliers, and products using base names to create clean urls, then migrate and seed data.

Activate the virtual environment, run the server, and verify the project compiles; update the order date to a date time field, migrate, and load seed data from seed data JSON.

Explore testing a backend with postman by importing the provided collection, performing category CRUD operations (get, details, post, patch, put, delete), and validating field handling and serializer fixes.

Save changes to GitHub by staging all changes, composing a commit message, and pushing updates, including a new gitignore for macOS dsstore.

Explore building a classical dashboard with a sidebar navigation that activates three pages, including a reports section, using a structured template, semantic sections, and router integration.

Learn to configure Vue routing with a dashboard layout, using child routes, router links, and router view, guided by route path.

Design a dedicated customers section with routing in the frontend sidebar, separating customer data from business logic while leveraging the existing API with CRUD operations for staff.

Master scss, a mature css extension language, a preprocessor that compiles to css. Leverage variables, nesting, mixins, and functions for modular partials and dry code in projects and frameworks.

Structure a scalable scss setup by configuring webpack to load css. Create a styles folder with main css, libs, theme, utils, and fonts, then restart the server.

Learn practical icon management in Vue.js: navigate library limits and pro-only icons, or import and adapt svg icons as Vue components, with css tweaks for navigation links.

Boost app interactivity by using icons for visibility, import svg icon templates into your Vue.js view, and rotate the menu toggle with scss to reflect state.

Explore how Vue components receive props from a parent and bind a dynamic color prop for icons with computed values. See defineComponent, script setup, and color-key props with ternary switching.

Explore interactive icons through an exercise assignment, practicing SVG viewBox properties, colors, sizes, and positions while sending props in Vue.js as part of your journey in the full stack masterclass.

Apply a body class to style all views, target the header in dashboard with a flex layout, center items, space-between, and use a mixin for 70px height.

Learn to style buttons as a reusable component in a separate css file, covering hover states, primary variants, and practical sizing, padding, and spacing to avoid code duplication.

Learn practical table styling that emphasizes clarity for business tables by using stripped rows, modest header colors, borders, typography, padding, and hover cues, plus integrating icons with components.

Create a frontend products section by building a new API call with unmounted hook, a product view with an orders subview, header and icons, routed to populate a data table.

Create a new api call in reporting and present data with the product view using existing routes. Align layout, header icons, and the on mounted hook to render the table.

Create a reusable modal component in a Vue.js app to handle create, update, and delete confirmations, using emits for parent communication and slots for flexible content while keeping code DRY.

Build a create order modal layout in Vue.js by scaffolding a create order model view, designing a template with a modal wrapper, and binding form fields with v-model.

Hook up an order creation modal in the orders view by toggling a boolean visible flag with ref, wiring open and close handlers, and integrating a plus icon.

Style a create order modal with modular css and sass, handling a global modal wrapper, centered content, input and select styling, header, footer, and button states.

Create a static product modal with a new product model and customizable styling, focusing on layout only. Align numeric field types and data structure using the postman collection.

Refine the app’s touch and feel by tweaking dashboard styling: adjust margins, borders, and hover colors, and resize the header logo. Prepare changes for GitHub.

Learn agile workflows for saving changes to GitHub by committing after each task, using branches and merges at milestones, and cleaning unused or commented code with a project-wide search.

Learn TypeScript models to enable CRUD operations, create a models folder, convert Python models to TypeScript interfaces, prefix interfaces with I, and organize files for supplier, customer, product, and order.

Create a centralized, scalable API module with Axios, configure default headers and base URL from env vars, and expose get, post, put, patch, and delete methods.

Organize api modules into reporting, relations, and common folders, using a central hub and promise-based load orders for maintainable, testable code.

Bind product and customer IDs to selects via v-model, populate dropdowns by loading customers and products from the API on before mount, enabling order creation.

Learn how to post data with a post request in Vue.js without using forms, build a new order with customer and product IDs, and handle response and debugging.

Explore server-side and client-side validation strategies, leveraging Django Rest Framework, and learn how to inform users, prevent bad requests, and disable the confirm button until all inputs are valid.

Learn how to implement restrictive validation in Vue using watchers with the composition API to disable the confirmation button until all reactive fields are filled, with real-time state checks.

Learn practical frontend debugging techniques using browser developer tools, including console logging, console table, console dir, console info, network tab inspection, and timing tools to trace data and performance.

Master the product post request by building a validated new product model, debugging with console logs and browser tools, and posting data via Postman to a Django Rest Framework backend.

Discover how to implement a product post request, connect supplier and category data, and fix serializer issues and a shadow bug in a Django REST Framework Vue.js project.

Learn to update orders with a Vue.js edit order modal using a patch request, sending the order update to the endpoint and validating inputs to avoid empty values.

Develop a watcher to guard the submit button by disabling it when no data changes and preventing empty records, using boolean operators to craft a concise solution.

Explore how to enable a button only when all form fields contain data and nothing has changed, implemented with chained boolean operators and a disabled property.

Builds a product patch workflow in Vue.js with a dynamic supplier select, reactive binding, and API calls to a Django Rest Framework backend, including null-to-zero handling.

Stage changes, commit with end of chapter six, and sync to GitHub, using VS Code's Git preview to review edits while you update the backend and model header.

Explore state management in Vue.js by comparing Vuex and Pinia, explaining why Vuex remains relevant for learners and legacy apps, while Pinia is the modern standard compatible with Vue 2.

Set up a Vuex structure with a global TypeScript state for orders (IOrder[]), and implement getters, actions, and mutations to load orders via API and store them in app state.

Delegate orders data to Vuex by importing use store, dispatching order management set orders, and using Promise.allSettled; expose orders with a computed getter from the store.

Learn to replace direct product API calls with Vuex state management, keep data in state, and structure the store to master the state management system.

Learn to structure a Vuex global state with a product management module, define types, getters, actions, and mutations, and connect components to the store via getters.

Develop a product details page with Vuex by adapting layout, focus on UX details, and ensure details read from state and redirect back to the product page without API calls.

Build a product details page using Vuex with types, state, getters, actions, and mutations, plus routing and an endpoint to get product details, enabling a clickable details view.

Update an order in Vuex by mutating state with an any payload, bypassing TypeScript for this flow, locating the record, and updating shipped address fields to yield a single database call.

Practice delete and update operations in the product section using Vuex, tackling supplier handling with minimal API calls, exploring refactoring and different solutions to build practical Vue.js skills.

Learn to implement delete and update operations in Vuex for a supplier management app, using actions, mutations, and dispatch, with full object updates and dropdown-based id lookup.

Generate the same post method structure for products, consider how the suppliers list behaves, test the response in the network tab, and explore possible solutions for this Vuex CRUD challenge.

Learn to perform CRUD data handling with Vuex by posting new products through the create product model, dispatching actions, and refining state management to keep the product list accurate.

Populate a Django REST framework backend with Python by using management commands to seed data for testing pagination, filtering, sorting, and searching with orders and products.

Install the django-filter library to enable filtering in the api, then configure the Django filter backend in settings and views, specifying shipped country and shipped city fields for orders.

learn to implement a country filter endpoint by creating a country filter serializer and view set, expose distinct shipped countries for a frontend dropdown, and wire it into URLs.

Implement the filtering cities endpoint by adding a serializer, creating a view, and providing a URL, then move on to the next lesson on searching.

Enable efficient searching in django rest framework by configuring search fields on model view sets, including nested relations via double underscores, showing no sql queries needed, tested with ?search=.

enable sorting of products by unit price in ascending order, followed by units and stock units on order in descending order, with no sort defaulting to id.

Sort products by id, unit price, and units in stock to control display order and verify sorting. Practice ascending and descending orders, and preview pagination in the next lesson.

Learn to enable Django Rest Framework pagination at the app level, set a default page size, and optionally override get_paginated_response to return count, page, num_pages, and results.

Refactor frontend endpoints to match the new pagination format by renaming result to results and switching to the load orders endpoint, adding a response wrapper via a common products file.

Learn practical CSS styling for a filter panel, including relative and absolute positioning, flex row layouts, custom fonts, input and button styling, focus outlines, hover effects, and color theming.

Create a bound search input with an enter key to trigger a filter list, implement update and refresh list functions, and wire two buttons for future functionality.

Enable product filtering and searching by implementing backend support and dropdown structures, then add frontend markup, variables, and functions to interact with API endpoints and UX modules.

Develop a reusable pagination component with a layout showing counts and page controls, plus an items-per-page selector, then integrate it into the orders view for styling in the next lesson.

Learn to implement pagination in a Vue.js component by calculating showing ranges, handling left and right distances, updating pages, and controlling per-page options with a dropdown.

Implement pagination in the orders view with Vue.js and Django Rest Framework, using Vuex to manage current page and per page, and connect update page and update table size.

Implement frontend sorting in a Vue.js app with a sort function. Pass order by value to the backend and update the list.

Implement frontend sorting that mirrors the backend structure, with options to adjust complexity. Consider persisting sorting in vuex state so user preferences survive page reloads; next lesson reveals the solution.

Refactor the pagination to be reusable across product and order views, making the code moldable and adaptable, using life cycle hooks and JavaScript promises.

Explore authentication and authorization concepts in a Django Rest Framework context, compare basic, token, and OAuth methods, and learn how JWT enables secure, scalable access across apps.

Explore JSON web tokens (JWT) as compact tokens for authentication and authorization. Learn the header, payload (claims), and signature, and how secret or public keys verify integrity and trust.

Configure AXES on the backend by adding it to the app and middleware, declare authentication and model backends, set five failure limits and user-only failures with reset on success.

Develop an admin-focused user management app with login and token-based authentication, backend and frontend authorization, and use cases for get all users, add a new user, and update own data.

Create a user serializer using a model serializer to specify fields such as id, username, first name, last name, email, last login, is active, is admin, and required password change.

Develop custom jwt claims with django rest framework simple jwt by building a custom token obtain pair serializer and view, adding is_admin, is_active, requires_reset, username, user_id, and 90-day password change.

Learn how to set up django urls.py, register rest framework routers for users, create new user and token obtain views, and adjust admin paths for a clean API.

Create a superuser and run migrations in a Django project to ensure a clean development database. Drop and rebuild SQLite, seed data, verify authentication, then start the server.

Practice end-to-end API testing in Postman by authenticating with JWT tokens, creating and listing users, and validating admin versus non-admin permissions before integrating with the frontend.

Create a frontend login endpoint with axios to post user credentials to the API token route, using typed login credentials interface and a jwt-enabled backend URL, handling responses and errors.

Explore a sass mixin approach with @content to target all but the last child, applying a margin bottom to inputs and enabling reusable CSS features for scalable styling.

Utilize browser local storage to persist login data (access token, admin flag, username, id) via a generic storage module with save, set, and unset functions, enabling stay logged in functionality.

Implement a remove function for local storage by calling localStorage.removeItem with a key and resolving a promise, and trigger it with a temporary button to demonstrate clearing data after logout.

Authorizing requests based on user login, this lesson demonstrates using a local reactive store and Vue.js watch to attach a bearer token to Axios headers and fetch backend data.

Enforce backend access checks for user roles, protect admin areas, and implement a dedicated administration route with an admin view and dashboard link in Vue.js.

Create a user settings page by copying the admin view, add a route and router link to the dashboard, and display a dummy hello user page, then tackle permissions next.

Add a login workflow by wiring the login view to credentials in a reactive input object, validating with a computed is_valid, and routing users to the orders page after login.

Stage changes, commit, and push to GitHub as you finish chapter nine, reinforcing authentication basics and preparing for the next chapter.

Develop a comprehensive user administration system in this chapter, detailing admin workflows for creating, activating, resetting, and locking users, with first-login password changes and security prompts, starting with the backend.

Compare deleting a user with model view set and API view in Django Rest Framework, covering CRUD, retrieve and destroy methods. Learn delete via postman with permissions and responses.

Create an API view to deactivate a user by updating the active flag via post or patch in Django Rest Framework, returning a deactivation confirmation.

Update a user's own data via a put request, handling username, first name, last name, and email, with non blank validation and username uniqueness for admins and regular users.

Update user data using a simple Django approach: validate each request field, enforce uniqueness via save exceptions, and save directly from the request so users update only their own data.

Learn admin views for resetting login attempts in a Django Rest Framework workflow, including blocking and unblocking users after too many failed logins and a postman-driven process.

Refactor the new user view to add password validation with Django's validate_password, handle validation errors, and return appropriate http status codes while testing the user creation flow.

learn how to implement an admin reset user password API view in a Django Rest Framework project, including permission checks, a POST flow, and updating the target user's password.

Implement a self-service update own password flow with a password change middleware, validating new and confirmed passwords and password format, referencing the user model and providing backend messages.

Create an authenticated, non-admin password reset view that validates new and confirm passwords with a custom rule and returns 403 on errors, saving the user on success.

Create a front-end users overview in a Vue.js admin section, define a user model, fetch users via API, populate a Vuex store, and style an admin view for future development.

Design a tabbed view using Vue.js with a custom tab component, leveraging provide/inject to share data across nested components, and using slots, props, and events to manage tab content.

Build a dynamic tabs layout in Vue.js by creating a Tabs View component with props, slots, and emits, managing the selected tab via ref and provide/inject, with polished styling.

Create a new user layout using bem naming convention in an admin action component. Include username, first name, last name, email, password, and admin status with grid styling.

Hook up a Vue view with form refs, dispatch to Vuex, and post to the admin endpoint to create a new user, while securely handling the password outside state.

Learn to implement a user deletion feature by selecting from a list and using two backend delete views, updating the user interface immediately while preventing self-deletion and empty requests.

Delete a user via a Vuex-backed admin workflow, call the delete endpoint, update the user list from the Vuex store, and ensure the dropdown and UI reflect the change.

Unblock a user blocked after failed logins by building a selectable structure to execute a delete request, update the page immediately, and reset the control.

Implement the remaining admin area features to reset user passwords and deactivate/reactivate user status, refactor to avoid duplicated code and follow the dry principle with thorough testing.

Extracts a reusable utility in a composable to filter non-admin users, reducing code duplication across admin actions, and demonstrates updating password and user status via Vuex and server endpoints.

Create three action components—reset password, update profile, deactivate self—for user settings, move login and settings views into the users folder, and arrange them in a tabbed admin-styled layout.

Enforce first-login password update by gating access with the Vue beforeEach guard and the requires reset flag, redirecting new users to settings and restricting other routes.

Implement a user password update flow using a reset password endpoint, axios calls, and frontend state management to log out on success and redirect to the dashboard.

Tackle a clean, practical warm-up that implements deactivate profile and log out with clear, maintainable code. This exercise sits within a full stack masterclass with Vue.js and Django Rest Framework.

Tackle a front-end profile update in a Vue.js and Django Rest Framework course, updating username, first name, last name, and email while refreshing the navbar and considering backend username uniqueness.

Build a comprehensive user profile management flow by creating endpoints to fetch a single user and update profile, and integrate it with Vuex state, actions, and mutations.

Use axios interceptors to catch 401 unauthorized errors, clear auth data from storage, alert the user, and redirect to login, ensuring seamless handling of short JWT lifetimes.

Implement an abort controller to cancel ongoing axios requests using an abort signal, add cancel logic to logout flows to prevent long-running operations and broken pipe errors.

Save changes to GitHub by finalizing identity and user management work, cleaning the backend, enabling the common password validator, updating the admin header, and committing and syncing chapter ten.