Vue & Django Full Stack: web app, backend API

Discover Django, a mature full-stack web framework for Python that handles backend and frontend, and learn why it's favored for projects with deadlines.

Create your first Django project by setting up a virtual environment and installing Django. Run the project with Python manage.py runserver to view it at port 8000.

Create a django project with a single app, understand project vs application, and review core files like manage.py, settings, urls, wsgi, admin, and sqlite database.

Learn how Django migrations create and apply database schema changes, use makemigrations and migrate, and add apps to installed apps while modeling a book with a title.

Learn to access the Django admin to view and manage the database, including creating a super user and registering models like books for admin CRUD operations.

Explore Django model field options, including max_length, null, blank, unique, default, and choices, with practical examples and migration steps to apply schema changes.

Explore Django field types from char and text fields to date, decimal, and image fields, with blank, default, upload paths, migrations, and admin inputs.

Explore class-based views in Django by defining a class with get method and wiring it in urls. Compare function-based and class-based views, noting how self and as_view enable flexible responses.

Explore Django model objects methods by importing the book model, retrieving all or filtered books with Book.objects.all(), filter(), or get(), and rendering results in views.

Learn how to use Django templates to render full web pages, configure template directories, and serve both static and dynamic pages from views in a full-stack Django app.

Pass dynamic data from a view to a Django template, render a books queryset, loop with for, access titles, and conditionally display published items in a dynamic web page.

Extend the built-in Django admin by registering models with an admin class and customizing list display, filters, and search fields for a more usable interface.

Install and configure Django rest framework to serve backend data via representational state transfer for a Vue and Django full stack app, including adding rest_framework to installed apps and migrations.

Learn how to use postman for api development and perform get, post, put, and delete requests against a django backend, including filtering by id on a books api.

Learn how to generate and use tokens to authenticate users in Django REST framework, including login with username and password, obtaining a token, and using it to access the API.

Secure a Django REST framework app using token authentication, set a default permission, and selectively override it with per-view permissions to control access to resources.

Learn to implement a one-to-one relationship between a book and its number using Django models, including ISBN 10 and ISBN 13 fields, migrations, and admin registration.

Learn to implement a one-to-many relationship by adding a character model linked to books via a foreign key, using related_name, serialization, and migrations.

Launch the movie writer api with Django REST framework by creating a project, an api app, configuring migrations, and running the local server to power frontend communication.

Create and organize django routing by defining api urls and including the api app with admin routes. Migrate and create a super user.

Create the movie and rating models in Django, with movie title and description fields, rating linked to movie and user, cascade delete, unique together, 1–5 validators, and migrations.

Create and wire serializers for movie and rating models using Django REST framework, build model viewsets, register routes, and test the movie and rating APIs with Postman.

Test a Django api by posting, getting, updating, and deleting movies and ratings, while validating inputs, enforcing minimum and maximum values, integers, and unique together constraints.

Create a custom method for rating a movie in a Django REST framework viewset by adding an @action decorated method (detail=True, methods=['post']), returning a Response with a message and status.

Validate request data by checking for stars and respond with a status when missing. Retrieve the target movie by its primary key and display its title.

Implement a Django rating endpoint that creates or updates a rating by movie and user, using a static user when authentication is absent, validating input, and returning a serialized response.

Learn to enhance a Django backend by computing per-movie ratings: number of ratings and average rating, via model and serializer functions, tested with Postman for an optimized single-query API.

Enable token authentication in a Django REST framework app, generate and use tokens for login, protect the rating API, and verify users via authorization headers.

Create per-user tokens for Django REST framework authentication and enforce authenticated access across the app, then customize model viewset methods to return messages and restrict updates and creates.

Discover the vue.js front-end framework, its easy learning curve and speed, and its rising popularity beside react and angular, plus setup basics with node, npm, vscode, and chrome extension.

Learn to set up a simple Vue app by creating an index.html skeleton, mounting a Vue instance to #app, and binding dynamic data with mustache syntax for reactivity.

bind data from the view to the template using v-bind and dynamic attributes to render links and images. explore static versus dynamic binding with square bracket syntax and attribute binding.

Explore how to render content conditionally in Vue using v-if and v-show, with booleans and age-based conditions, and compare the performance of show versus v-if.

Master dynamic list rendering in Vue by looping through an array of books with v-for, displaying titles and years in list items, and using a unique key for efficient updates.

Learn how to handle user events in Vue using v-on, including click and mouseover, trigger functions with concise syntax, and explore dynamic binding and arrow functions.

Master dynamic styling in Vue by binding style objects with v-bind, using camelCase properties like color and fontSize driven by data and conditions, and apply classes conditionally.

Learn how computed properties in Vue optimize apps by caching results based on dependencies, replacing method logic in templates, and formatting data without directly mutating state.

Learn to capture user input and implement two-way data binding in Vue with v-model across text, textarea, checkbox, radio, and select inputs, binding to data and computed properties.

Explore how components split an app into reusable chunks with their own data and templates, register them, and render multiple instances to reuse the same structure.

Explore how to pass data into Vue components using props, bind data from a parent to child, and render titles and book objects to build reusable, data-driven UI.

Learn how a child component in Vue emits events to its parent, passing back data with emitted payloads via on click actions using props and templates.

Learn how to create and apply filters in Vue views to transform data, including building local and global filters, handling strings, numbers, and currency formatting.

Learn how mixins share code across Vue components by creating a mixin object with props, data, methods, and lifecycle hooks, then register it to reuse logic.

Learn to scaffold a modern Vue app using the command line interface, install globally via npm or yarn, and run a local server, exploring single-file components (template, script, style).

Create a real project using both the Vue CLI and the Vue UI, then compare creating via terminal with using the browser interface to manage dependencies, configs, and plugins.

Build a simple vue component: create a header, import and render it in the main app, and compare scoped versus global styles with auto refresh on save.

Create a reusable layout with a new movies view component, splitting the app into header, list, and details, using a two-column grid (template columns: 1fr 1fr).

Learn to fetch a dynamic list of movies from a Django API in a Vue component using fetch or axios, with token authorization, JSON parsing, and error and CORS handling.

Create a reusable movie item component, render each movie by passing data via props from the parent movies component, and style for a clickable, dynamic list.

Learn to pass data between components by emitting a click from a movie item, selecting a movie in the parent, and rendering its details via props.

Learn to display Font Awesome icons in a Vue and Django full stack app, show movie ratings with star icons, and install and configure icons via npm and package.json.

Build a five-star movie rating widget in the front end, using purple stars, a loop rendering five icons with dynamic classes, and hover-to-highlight plus click-to-rate interactions.

This lecture explains implementing on-click rating for star icons in a Vue and Django full stack app, posting a json body to rate movie with 1-5 stars and updating ui.

Explores managing local state in Vue by avoiding mutation of props, creating a local copy or computed local state, and syncing with the parent via emitted events and parent updates.

Enable full CRUD in the movie list by adding edit and delete icons for each item, implementing navigation and action handlers to read, update, and remove movies.

In Vue & Django full stack, learn to implement a delete request that removes a movie from the database via a trash icon, using fetch with a token.

Toggle between movie details and a dedicated edit view by creating a movie edit component, wiring props and imports, and managing a selected and edited movie state.

Update and create movie records via a Vue and Django full-stack API by editing titles and descriptions, posting new movies, and handling tokens for login.

Learn to add routing in a Vue app with Vue Router, configure home and about routes, and enable lazy loading for efficient navigation.

Implement cookies in a Vue app to store a login token, persist user sessions, and redirect to the movies page using a popular cookies plugin.

Implement a dynamic token flow in a Vue and Django full-stack app by reading the token from cookies, conditionally loading movies, and injecting the token into data for API calls.

Manage a dynamic token across components and pass it as props. Add a logout button that clears the token cookie and restores the login state.

Register a new user by posting username and password to the API users endpoint, then log in to obtain a token stored in cookies; toggle login/register in the UI.

Master styling for the Vue and Django full stack app by applying global and local styles to layout, typography, colors, buttons, inputs, and icons.

Deploy a Django app to production for free on Heroku with the CLI. The free plan sleeps after 30 minutes, so media may be lost unless stored externally like AWOL.

Prepare Django for Heroku by loading the secret key from an environment file, configuring databases with dj-database-url, wrapping WSGI with dj-static, and creating Heroku-specific requirements.

Deploy a Django and Vue full stack app to Heroku by configuring a Procfile and runtime, linking a Git remote, pushing, and running migrations on the Heroku production Postgres database.

Deploy your front end on a free spark plan with Firebase hosting. Create a new Firebase project, install Firebase tools, and initialize hosting for your app.

Deploy a Vue & Django web app to production with firebase hosting. Learn to build the app, generate the distribution folder, run firebase init, and deploy to a production URL.

Replace local API endpoints with the Heroku live API, build and deploy a new version, and whitelist the live origin to enable cross-origin requests in production.