Angular & Django Full Stack: web, backend API, mobile apps

Explore the Django web framework as a mature, full-stack solution for rapid backend and frontend development, highlighting ready-to-use features, Python integration, and long-standing stability.

Install and verify Python on macOS or Windows, noting Python 2.7 and Python 3.x. Use which or python3 to confirm installation and add Python to the system path.

Learn to create and activate a Python virtual environment to isolate project dependencies, then use pip to install Django inside the env on macOS, Linux, and Windows.

Learn to spin up a Django project from scratch by creating a folder, setting up a virtual environment, installing Django, and starting the development server with manage.py.

Install and set up PyCharm, choose the community or professional version, configure a virtual environment, and run a Django server with manage.py using the IDE's editor and terminal.

Create a Django app inside a project, distinguish project from app, and start an app with manage.py or Django admin, while using sqlite3 for development.

Learn how Django migrations manage schema changes by creating and applying migrations, updating installed apps, and using make migrations and migrate to update the database schema.

Use the Django admin to view and manage database content, including creating a super user and running migrations. Register and edit the book model to manage records in the admin.

Explore Django model field options, including max length, null, blank, unique, default, and choices. Learn how these settings influence data validation and database migrations.

Demonstrate django model field types, from char and text to integer, decimal, date/time, file and image fields, plus migrations and pillow setup.

Explore how Django URLs route requests by wiring project URLs to a demo app, using include for nested URL files, and mapping views to a simple Http response.

Create a class-based view in Django to handle get requests and return http responses. Compare class-based views to function-based ones, wire them in urls, and explore built-in view features.

explains how to use Django models and the admin to query the database with book objects, including all, filter, and get methods, and display results.

Demonstrate rendering a full page with Django templates by creating a templates directory and a first temp html, then using render(request, 'first temp html') for static and dynamic data.

Pass dynamic data from Django views to templates via a context object, render with Django or Jinja templating, and use for loops and if statements on a books query set.

Explore how to customize the Django admin with decorator-based model registration, string representation, list display, filters, and search to build a powerful backend admin interface.

Discover how to integrate Django REST framework to serve backend data as JSON for front-end apps, including installation, adding rest_framework to installed apps, and migrations.

Create a Django rest framework model serializer for the book model and its title. Expose a books endpoint via a default router with a viewset and API browser support.

Discover how to use Postman for API development, install the standalone tool, and test endpoints by performing get, post, put, and delete requests against a books API returning JSON data.

Learn how to generate and use tokens to authenticate users in a Django REST framework API, enable token authentication, and protect API endpoints with username and password.

Learn to secure a django rest framework app by configuring default and per-view permissions with token authentication, applying is_authenticated, and testing with postman to protect resources.

Explore how to create a one-to-one relationship between models, linking a book to its number with a one-to-one field, isbn attributes, migrations, admin registration, and nested serializers.

Implement a one-to-many relation by linking characters to a book with a foreign key, expose characters on the book via related_name, and serialize many characters to display in the api.

Explore implementing many-to-many relationships between authors and books in Django, using models, migrations, admin, and serializers; learn to customize serializers and viewsets for efficient API data.

Set up a Django backend API for the movie rater app by creating a project and an API app, installing Django and Django REST framework, and applying migrations.

Create and organize Django URLs and API routes by editing urls.py, including API URLs, registering apps, enabling REST framework routers, migrating, and creating a super user.

Define two Django models, Movie and Rating, with a foreign key to Movie and user, enforce star validators 1–5, and unique together for user and Movie, plus admin registration.

Set up DRF serializers and view sets for movie and rating models, configure router URLs, and test API endpoints, preparing to create records via Postman.

Test the api by creating, retrieving, updating, and deleting movie records, then add ratings with validation and unique constraints, and explore authentication and custom methods in django.

Create a custom rate movie method on a detail route in a Django REST framework view set, using the action decorator to handle a post request and return 200 response.

Validate stars from request data to rate a movie, and return a bad request if stars are missing. Fetch the movie by its primary key to display its title.

Learn to update or create a movie rating in Django by combining movie, user, and stars, using a try/except flow and a serializer to return the rating data.

Develop and display a movie's rating metrics by adding model-level functions to compute number of ratings and average rating, exposing them in the serializer for a single optimized query.

Enable token authentication with the rest framework, obtain a token via login, and secure API endpoints such as movies and rating with the token.

Enable user registration in a Django API by adding a user serializer and viewset, hashing passwords on create, and exposing registration endpoints via post methods.

secure a django rest framework backend by enabling token authentication, applying is_authenticated permissions, testing with postman, and overriding model viewset methods to restrict updates and ratings.

Demonstrate how Angular functions as a front-end framework that runs our code, compare it with AngularJS, and outline installing Node, NPM, and Angular CLI to create your first app.

Create your first Angular app with the Angular CLI using ng new, CSS, and git init. Then run ng serve to view the app at localhost:4200.

Explore inspecting an Angular app with Visual Studio Code, install language extensions, and manage dependencies via npm and node_modules, while navigating the project structure, Git, and end-to-end testing with Protractor.

Explore the source folder, run ng serve from the IDE, and use live reloading to view the Angular app on localhost:4200, while reviewing index.html, main.ts, environments, and assets.

Define that a model is a container that groups functionality, such as login/logout, within an Angular app; use Angular CLI ng generate model to create and bootstrap modules and components.

Discover how Angular components structure apps with TypeScript logic, HTML views, and CSS styles, using selectors to render components and choosing between templateUrl or inline templates for modular UI.

Learn how data binding connects the HTML view to TypeScript logic using the two curly brackets in Angular, displaying class properties and ensuring auto-updating values.

Attach a click event to a button to trigger a TypeScript function and update a bound property. Explore data binding, event objects, and a live counter update in the view.

Demonstrates two-way data binding in Angular by combining ngModel with both parentheses and square brackets, showing data flowing between the view and TypeScript through the forms module.

Explore popular built-in angular directives, including ngIf and ngFor, to conditionally display elements and loop through arrays, printing each person's name and age and combining directives for dynamic templates.

Learn how to use Angular lifecycle methods, hook into on init to initialize data, and on destroy to unsubscribe and prevent memory leaks.

Explore how to apply styles and classes in angular using inline styles, style bindings, and dynamic class bindings with color variables to change visuals, while managing component and global styles.

Discover how Angular services provide reusable functionality across components, including fetching API data and exposing methods like all people to supply data.

Learn how to use Angular pipes to format data in templates, including uppercase, date, and currency pipes. Explore predefined formats and the basics of creating custom pipes for display.

Learn how routing loads content dynamically based on the URL in an Angular single-page app, using routes, components, and a router outlet to display views.

Set up a navigation system with a nav tag and router links to switch between first and second components, with a default content shown when the page loads.

Learn to read an id from the URL using activated route and param map, create dynamic paths, and navigate back with location in Angular components.

Create a reactive form in angular using a form group and form controls for name and surname, bind them in the HTML, and handle submit to access the form value.

Learn to implement parent–child communication in Angular by creating a child component, passing data via an input property, and displaying the animal value in the child.

Learn to enable child-to-parent data flow in Angular by using @Output and EventEmitter to emit events, listen in the parent, and update the displayed data.

Learn how to create and use observables as channels, subscribe to data updates, emit new data with next, and keep UI components in sync with API-driven data.

Learn how to build and deploy an Angular application for production by using ng build --prod, understanding environment files, and preparing the dist folder for server deployment.

Apply angular cli to scaffold a movie writer app, create authentication and main modules, generate components for login and main views, and run ng serve with routing later.

Learn to implement modular routing in Angular by defining routes, importing router module for root and child modules, using a router outlet, and setting a redirect to movies.

Create a main container and three components (movie list, movie details, app module), then implement a two-column grid layout with the layout class and app styling.

Build an angular movie list component with a mock array and a loop rendering the titles. Inject an api service to fetch movies from the server and populate the list.

Connect your Angular front end to a Django API by fetching data with HttpClient and a base URL. Return an observable and address CORS restrictions blocking cross-origin requests.

Learn how to enable cors with Django course headers, set origin whitelist, and pass authorization tokens in HTTP headers to securely connect Angular front end to a Django API.

Refactor the movie list into the main component and manage state there, passing movies via input and emitting the selected movie via output to show details on the right.

Pass selected movie from the main component to a movie detail component using input binding, render the title, description, and ratings, and apply a conditional check to avoid null errors.

Display rating stars using font awesome in an angular app, color-coded by the movie's average rating and showing vote counts. Install angular font awesome and import it.

Implement a post method to submit star ratings for a movie, sending the logged-in user rating to the API and updating the average rating.

Acquire a client-side approach to refresh movie details after rating by fetching updated data with a new get movie method, emitting update events, and updating the main view accordingly.

Learn how TypeScript enforces types in a JavaScript project by creating a movie model, importing it, and casting data to a defined type to improve readability and prevent errors.

Build a crud interface for movies in a single-page app, adding edit and delete icons and a new movie button to create, read, update, and delete movie data.

Implement crud events in an angular and django full stack app by wiring edit, new, and delete actions through movie components, using event emitters in a main component.

Build an edit and create movie form with Angular reactive forms, using a form group and controls bound by formControlName, and save to log the form value for API use.

Learn how to implement a post method to create a movie by binding form input to a movie object, sending title and description to the API, and handling the response.

Learn to implement post, put, and delete methods in an Angular and Django full stack app for creating, updating, and deleting movies by ID, with live list refresh.

update the view by wiring delete, create, and update for movies with array filtering, event emitters, and main-component updates (push and replace) in angular.

Apply global and component css to style the app, including button and input styles in style.css, disabled button logic, and a logo-like header using Font Awesome icons.

Implement an authentication module by creating a login form with username and password, wiring a reactive form, and debugging save form to enable user login and token handling.

Link the login form to the API service, post username and password to obtain a token, and store it with a cookie service for persistent authentication.

Authenticate users by logging in, storing the token in cookies, and loading the app with dynamic authorization headers to route to movies or redirect to login.

Learn to implement a logout that clears cookies, toggle login and register with a shared form, and register users via api/users with automatic login.

Explore NativeScript native mobile development by building a single Angular-based app for Android and iOS, compiled to IPA or APK, with one codebase for native performance.

Set up NativeScript for Angular by following docs, using the NativeScript Playground and CLI, and configure emulator and simulator on Mac or alternative Android Studio setups.

Set up your development environment, run emulators or simulators, and create an Angular NativeScript app via the CLI or Sidekick, exploring templates like hello world, tabs, and Firebase implementation.

Explore native script project structure aligned with Angular, configure Android and iOS platforms, and run on emulators or devices with live updates, platform add/remove, and platform-specific settings.

learn how NativeScript uses html-like syntax with label elements, action bar text, and predefined h1/h2 classes, and apply CSS-based margins and padding through built-in classes.

Master NativeScript layouts to control page flow using flexbox, absolute, dock, grid, stack, and wrap layouts; learn nesting, positioning, and styling through practical code snippets.

Discover how to control styles in a NativeScript Angular app using predefined styles, inline and class-based CSS, and component-specific style URLs, with global app.css for app-wide theming and cross-device consistency.

Discover NativeScript components as reusable UI blocks like action bar, date picker, and tabs, and learn to implement and style them across iOS and Android.

Explore data binding by flowing data from the view to the component and back, using square brackets for view-to-component binding and parentheses for component-to-view events, with Angular and NativeScript examples.

Learn to navigate the native script plugin marketplace, install and use plugins like camera or toast, explore templates and samples, and troubleshoot with documentation and GitHub.

Generate and customize Android and iOS icons and splash screens using Sidekick, managing background, logo, and multi-resolution assets to ensure proper display across devices.

Explore how native script themes provide core styles and color schemes, switchable with forest and other themes, and how to customize primary and secondary colors while overriding as needed.

Publish your native app by building a market-ready APK for Android or IPA for iOS, including certificates and provisioning, and navigating Apple store requirements.

Create a native script mobile project with Angular, reusing web patterns to build a movies list and details view with routing.

Replace the item service with a mobile API service, reuse web movie methods, add a models/movie interface, and replace cookies with a static token for mobile and Django backend.

Fetches the movies list from a local server via an observable API service, subscribes to getMovies, handles authorization headers, and configures Android and Django settings for data access.

Import Font Awesome icons into a NativeScript Angular project, configure fonts and CSS, and render star icons with conditional orange coloring and rating counts to match the web version.

Develop a mobile star rating feature with tap-to-rate, highlight selected stars in purple, submit the rating to the backend API via a button, and refresh movie details.

Add an edit button in the details app bar, route to a new movie form component, and implement routing and back navigation for iOS and Android.

Edit a new component by building a form with title and description fields, using Angular two-way data binding. Load movie data on init and save updates with a button.

Guides fixing a movie form in a native script app by enabling the Http client and forms modules, enabling two-way binding, and adding a multi-line description with a text view.

Update the movie using the API service, wire a save form with two way data binding, and navigate back on success while handling errors.

Add a new movie via a button on the list, redirect to the edit form, and distinguish create from update using a minus-one id and conditional logic with navigation.

Add a delete button to the movie form and wire it to a delete movie method using the movie id. Display the delete option only when editing an existing movie.

Implement a mobile authentication flow with a dynamic user token via a reusable out component for login and register, routing to authentication or items based on token.

Implement a login flow using an api service, sending authentication data to login user and navigate on success, then store the dynamic token in application settings for api requests.

Enable a dynamic register method by toggling a register mode on the login form, switching between login and register, and auto logging in after registration to obtain a token.

Add a logout button, remove the token on logout, and redirect to the login screen, while adding a logo image to the main screen to refine styling.

Implement base app css styles, choose a gray background with white text, and apply a page class to components for cohesive styling; introduce a snackbar for user feedback.

Learn to implement user notifications using a NativeScript snack bar for login errors, replacing console logs with user-friendly feedback and dynamic error messages from the API.

Learn to deploy a Django app to production for free on Heroku. The free plan sleeps after 30 minutes and you deploy via the Heroku CLI.

Prepare django for Heroku by moving secret key to a .env file loaded with python decouple, using django database URL with sqlite fallback, and setting up static, wsgi, and gunicorn.

Deploy a Django app to Heroku by creating a proc file and runtime file, linking a git remote, pushing the code, configuring the database, and running migrations.

Learn how to deploy a front-end app for free using Firebase hosting, create a Firebase account, set up a project, enable hosting, and use the Firebase CLI to deploy.

Enable production mode and build the Angular app with ng build to produce a dist folder, then deploy to firebase hosting with dist/movie rater as the public directory.

Prepare for deploying mobile apps by setting up developer accounts, certificates, and market metadata for iOS and Android, and explore NativeScript guided steps for icons, splash screens, and builds.

Learn version control with git to track code history, commit changes, and push to a repository for backup and collaboration. Use local branches and merge feature branches into master.

Learn how continuous integration, delivery, and deployment automate software deployment, reduce manual work, and support team workflows using Jenkins, CircleCI, Travis CI, and GitLab pipelines.

Explore agile methodology as a software development process, with scrum daily standups, two-week sprints, and kanban, and understand how teams plan, deliver, and push updates.

Learn to leverage StackOverflow to find solutions quickly, evaluate solutions critically, and avoid copying snippets. Contribute to the community by asking specific questions, voting, and helping others when you can.

Explore repositories as secure spaces for code, using git, pushing and pulling changes, and managing remotes across GitHub and Bitbucket for private or public projects.

Explore why testing matters in full-stack development, covering unit and end-to-end tests for Django and Angular. Write and run tests to prevent bugs and ensure app reliability.

Turn your knowledge into income by freelancing on platforms like Upwork, building a portfolio, and monetizing apps with ads and in-app purchases.

Gain a big-picture view of full-stack development, covering backend API with Python, Angular frontend, cross-platform mobile apps, and essential practices like version control, CI, and agile methodology.

Clone the repository, install dependencies with npm update, and upgrade from Angular five to six using the Angular CLI, then run and test the locally served app.