Vue 3, Nuxt.js and Django: A Rapid Guide - Advanced

Set up the jungle framework via quickstart, install jungle tooling, create a new project with jungle admin start project, and launch the development server with Python.

Learn to build a django rest framework api project with docker by creating a dockerfile and docker-compose.yml, install django rest framework, configure volumes and port mapping for local development.

Connect the database via docker using the campus yaml file, then build a django user model with email as login, including first name, last name, password, and is ambassador.

Set up a dockerized database service with a volume and port 3306, configure environment variables for the database name, user, and password, and run migrations in the backend container.

Create a wait-for-db management command to wait for the database in a docker compose Django-like setup. Implement a polling loop that reports status and proceeds when the connection succeeds.

Implement a custom Django user manager with email-based authentication and a superuser for dockerized admin access, then shift toward building rest APIs in the next tutorial.

Implement admin authentication endpoints, including register, login, get authenticated user, logout, and update personal information and password.

Implement authentication for admin and ambassador apps in a Django-based project, share common routes and models, configure API endpoints, and test the register endpoint with Postman.

Register a new user by using a Django REST framework serializer with password hashing and confirmation validation, plus an API view that sets is_ambassador to zero.

Create a login api view that handles requests with email and password, validates the user, and raises authentication errors for not found or incorrect password, preparing for jwt token generation.

Generate a jwt token by creating a payload with user id and timestamps, sign with a secret key using hs256, and return it as an httpOnly cookie with cors credentials.

Refactor the login process to use a static method, allowing direct class calls to GwG authentication plus and Gennari JWT without initializing the class, keeping login tests functional.

Create an API view that returns the authenticated user using a custom JWT cookie authentication class, verifying the token and retrieving the user by ID.

Log out an authenticated user by posting to the logout API view, deleting the JWT cookie, and returning a success response to complete the logout flow.

Demonstrates updating user data via a profile info api view with partial updates for first name, last name, and email, and a profile password api view to change passwords.

Develop shared admin and ambassador endpoints, implement product CRUD (get, create, update, delete), and add endpoints to fetch links by user id, all orders, and all ambassadors.

Explore building an ambassadors endpoint with an api view to fetch ambassador users by the ambassador flag using the user serializer, exposing a get route under admin routes.

Learn how to use the Faker library to populate ambassador users, define is_ambassador flags, and run a manage.py command to create 30 fake ambassadors for core users.

Define a product model with title, description, image, and price, create migrations, implement a generic api view with full CRUD and authentication, and populate 30 sample products for testing.

Define the Link model with a unique code and a user foreign key, add a many-to-many with products, and implement a GET endpoint to fetch a user's links.

Build a complete Django order system with order and order item models, API views, and serializers, including transaction id, customer and ambassador data, totals, and revenue splits.

Explore ambassador authentication endpoints within the Vue 3, Nuxt.js and Django rapid guide, comparing API ambassador with API admin. Learn how to modify endpoints to reflect the ambassador workflow.

Set up the ambassador app in Python, clean unused migrations and models, and configure urls and api ambassador handling to distinguish ambassador from administrator via endpoint paths.

Enable scope-based access control by distinguishing ambassador and admin users in JWT payloads, validating scope per role, and preventing cross-role login across admin and ambassador routes.

Add a revenue field to the user api view and compute ambassador revenue from orders and order items for inclusion in responses.

Explore ambassador endpoints alongside admin basics, learn two methods to retrieve products on the front and back ends, and study link creation, plus ambassador statistics and general rankings.

Define ambassador and product endpoints in a Django REST framework app, reuse the product serializer across front-end and back-end views, and prepare for caching in the next steps.

Install and configure redis with django using docker compose, enable backend and frontend caching of products, and demonstrate the performance benefits with cache hits reducing delays.

Implement search for products by a query string parameter S, filtering cached products by case-insensitive matches in the title or description, and demonstrate backend filtering with an example.

Sort products by price using a query parameter, choosing ascending or descending order with an optional reverse flag to place higher-priced items first.

Master product pagination in a Vue 3, Nuxt.js and Django stack by setting per-page and page, calculating start and end, filtering results, and returning total and last page.

Learn how to clear both backend and frontend caches when updating products, using redis keys, docker compose, and a loop to delete frontend cache entries to reflect new titles.

Create links by posting to the link API view, authenticate with JWT for ambassadors, and use the link serializer to attach products with a random code.

Build a stats API view to fetch a user's created links, count their completed orders, and compute revenue per link while formatting the response for clear delivery.

Rank ambassadors by revenue using the rankings API view, apply authentication, fetch all ambassadors, build a response with name and revenue, and sort in reverse order.

Enable fast, descending revenue-based ambassador rankings with Redis sorted sets. Build an update ranking workflow using zadd and zrevrange to sort by revenue and deliver name-score pairs to the frontend.

Describe three endpoints for the checkout flow: fetch data to create an order, create the order with complete false for Stripe verification, and finalize by setting complete to one.

Retrieve link data by code through a link api view, using serializers for link, user, and products to assemble checkout data with associated products and the ambassador who created it.

Create a post endpoint to add orders via the api view, validate the link data, save the order fields and items with decimal handling, and return success.

Learn how atomic transactions protect orders and order items in the database, rolling back on errors to ensure all inserts succeed or none.

Guides integrating Stripe to complete orders by creating a checkout session with card payments, line items, and success and cancel URLs, using test keys for authentication.

Learn to send order completion emails to the ambassador and admin via mailhog, configure docker localhost, and call the order confirm API view to finalize orders.

Bootstrap a template, integrate the thesis link, and streamline the dashboard by removing unused assets and components, then add nav and menu components in a Vue/Nuxt structure.

Add login and register routes within a layout, wrap content in a router view, import the layout, and create login and register views with a basic form and styling.

Implement the register function by wiring inputs for first name, last name, email, password, and password confirm, then post to admin/register endpoint with axios and redirect to login on success.

Learn to implement a login flow with Vue 3, Nuxt.js and Django by posting email and password to login endpoint with axios, using withCredentials for cookies, and redirecting after authentication.

Click logout to initiate sign-out, await post-logout actions, and redirect to the login page; a profile router link will be created later, with unauthenticated users redirected to login.

Fetch ambassadors as users from an endpoint, concatenate first and last names, display their full name and email in a table with actions, and configure router links with active states.

Create a simple Vuetify table, duplicate data for name, email, and actions, add a primary button linking to a user page using the id, and plan pagination later.

Implement pagination by wrapping items, configuring per page, calculating the last page from data length, and displaying up to seven items across pages.

Create a links component that shows each user's links, fetch data from the backend endpoint, and compute revenue by summing order totals with reduce.

Create a products view by wiring the products component into the router, fetch and paginate products, render image, title, description, price, and actions, and enable delete with confirmation.

Create a product via a dedicated product form component with title, description, image, and price, posting to products and redirecting to the product list.

Update products by reusing a single form component for create and edit, with a toggle edit button, prefill data on mount via get requests, and switch to put for updates.

Build an orders component, fetch orders from an API, and display each order’s name and total with an expansion panel showing order items with product title, price, and quantity.

Create the profile page and add it to the roster with account information and password forms. Preload user data, submit updates with axios, plan a Vuex fix for live updates.

Configure a Vuex store with an initial user state, define mutations and a set user action that commits the user, and bind updates via computed properties to the profile.

Set up a Vue 3 app using the composition API, with optional TypeScript and Vuex, adjust the port to 4000, and simplify the template by removing assets and views.

Create a reusable template with a single-column layout, add navigation and header components, route the e-mail via router, and configure axios for api/ambassador to support login and register flows.

Implement navigation that shows the authenticated user by integrating Vuex with the composition API, fetching the user via Axios, and conditionally displaying login, signup, or the user name and logout.

Explore building a reactive header in Vue 3 with ref for title and description, updating content over time and showing user data and revenue from the store with login links.

Use watch in Vue 3 to react to changes in the user variable, handling undefined initial values, and coordinate login, logout, and navigation with store dispatch and router links.

Create a profile view and a products component, wire them to the router, and control header visibility with a computed value showHeader based on the current path.

Create and manage reactive form data for profile and password in Vue 3, auto-fill from the authenticated user, watch for user changes, and submit via axios to the backend.

Generate and display link statistics in a Vue app by fetching links, typing them in TypeScript, and rendering a stats table with checkout URLs, codes, counts, and revenue.

Learn to build a rankings view in Vue 3 and Nuxt.js, including a TypeScript ranking model, getting rankings data, and a table showing name and revenue with indexing from one.

Create a shared products component for front end and back end, define a TypeScript product model, fetch products from an API, and render image, title, and price with simple filtering.

Implement a dynamic product search in Vue 3 with reactive filters, emitting set filters events, and loading results from the backend via axios using constructed query parameters.

Filter products on the frontend using a search value to match titles and descriptions, without backend requests, by maintaining all products and a filtered subset.

Implement backend sorting and filtering in a product list using Vue components, with price ascending or descending and search term preservation across interactions.

Implement frontend sorting for a price-based list with ascending and descending options, using a compare function and a sign from the price difference to produce -1, 0, or 1.

Add a load more button with a page parameter, merge new products with existing ones via the spread operator, and reset the page to one on search to preserve filters.

Explore frontend lazy loading of products with a load more button, using slice from zero to filters page times per page, while filtering and searching together.

Learn to implement product selection by clicking items to toggle a selected state, highlight with a border, and manage the selected array using a select function and toggle logic.

Generate a checkout link by sending selected products to the backend with Axios post, display an email, and show a login warning, then reset after five seconds.

Set up a checkout with a view framework offering automatic routing and server side rendering, create a Next.js TypeScript project, and configure bootstrap and axios.

Apply a template to a Vue 3, Nuxt.js and Django project, refine checkout with Bootstrap and tailor form fields like first name, last name, and email for a clean UI.

Learn routing by rendering named success and error pages, and console log the checkout code to reveal the form.

Master server-side rendering by fetching data with axios and a base url, rendering user details on the server for improved Google indexing and pre-rendered content via think data.

Display products by looping data with a template, showing title, description, and price, initialize per-product quantities to zero, and compute a total.

Submit the form by binding inputs with v-model and sending a request that includes first name, last name, email, country, city, zip, and a products array with id and quantity.

Integrate Stripe payments by configuring the publishable key, creating a checkout session, and redirecting users to Stripe checkout, then confirm orders after payment.