Angular and Django: A Rapid Guide - Advanced

Follow the quickstart to install the Jungle framework, create a new project with Jungle admin start project, and run the server to see the Jungle project running.

Build and run a Django backend with Docker by creating a Dockerfile and docker-compose.yml, installing Python 3.9, Django, and Django REST framework, with volumes and port mappings.

Define a custom Django user model and connect to a dockerized my school database, enabling email-based login, rest framework integration, and migrations for containerized MySQL.

Configure a MySQL 5.7 database in docker compose, with environment variables, volumes, and ports, then run migrations inside the backend container to initialize the Django database.

Create a custom wait-for-db Django command to loop until the database is reachable. Learn how to implement the base command, handle operational errors, and synchronize docker compose with server startup.

learn to implement a custom Django user manager, create and configure a super user in a dockerized backend, enable Django admin access, and prep for rest api development.

Implement admin authentication endpoints, including register, login, get authenticated user, logout, and update own information and password as part of a 16-point workflow.

Set up two Django apps, admin and ambassador, sharing core models and common routes, implement a register endpoint via an API view, and test it with Postman.

Register a user with a serializer that hashes the password and validates confirmation; for admin, set is ambassador to zero; api returns id, first name, last name, email, password, is ambassador.

Develop a login API view with a post method that authenticates users by email and password, validates existence and password, and prepares a user serializer for future JWT token.

Refactor your login flow by converting a function into a static method, allowing direct calls on the class without initialization, while keeping existing authentication actions intact.

Define a get endpoint that returns the authenticated user via a custom cookie-based JWT authentication, using the is_authenticated permission and a user serializer.

Log out the authenticated user by calling the logout API view with a post request, delete the JWT cookie, and return a success response to end the session.

Learn to update your own profile and password using Django REST framework APIs, validating password and confirmation before saving, and performing partial updates for first name, last name, and email.

Create shared admin and ambassador endpoints, implement product CRUD actions (get, create, update, delete), and add endpoints to fetch user-linked links, all orders, and all ambassadors.

Create an ambassadors endpoint by extending the API view to return users with the ambassador flag using the user serializer.

Learn how to use the faker library to populate ambassadors in a Django project by creating a manage.py command that generates 30 ambassadors with random names and emails.

Define a product model with title, description, image, and price fields, create migrations, and expose CRUD endpoints via a rest framework generic API view, then seed 30 sample products.

Define a links model with a code and a user foreign key, many-to-many relation to products, then implement a links API view to handle GET requests with the link serializer.

Explore implementing a full order system with order and order item models, including transaction id, ambassador and customer data, and a total computed via serializer methods for admin views.

Develop ambassador authentication endpoints by contrasting them with admin authentication, starting with api ambassador instead of api admin, and adjusting endpoint functionality to reflect the differences.

Set up the ambassador project, configure common routes and API views for administrator and ambassador roles, and implement a request path that distinguishes ambassador status for login flows.

Implement scope-based authentication in a JWT system to distinguish ambassador and admin users, store scope in the token, and enforce access restrictions on admin and ambassador routes.

Add a revenue field to the application programming interface by calculating ambassador revenue from completed orders and items, and expose a name property combining first and last name.

Explore ambassador endpoints, including two product retrieval methods on front-end and back-end, link creation, and studies on own and general stats shared by all ambassadors.

Develop front-end and back-end product endpoints using api view, configure a shared product serializer with rest framework, and compare their caching behavior.

Connects Redis caching to a Django app via Docker Compose, using the default cache, cache get/set in a view, and a page-wide decorator to speed responses.

Add search functionality to filter products by a query string parameter S, performing case-insensitive matching against product titles or descriptions, using cached product data and demonstrating a backend filter example.

learn to sort products with a query string parameter, choose ascending or descending order by price using a sort key and reverse option to control the results.

Learn to implement pagination for products by setting per page and page parameters, calculating start and end indices, and returning data with total and last page information.

Log in as admin to change a product and observe the cached title. Then clear the cache for both front-end and back-end, inspecting Redis keys as needed.

Create links using the link API view with a post request, authenticating as an ambassador, assigning the current user, generating a six-character random code, and linking selected products.

Build a stats API view that authenticates the user, retrieves their created links, and formats per-link order counts and revenue. Verify the endpoint to see how links influence revenue totals.

Create a rankings api view that authenticates requests, retrieves all ambassadors, and returns a list of name and revenue sorted in reverse order by revenue.

Use Redis sorted sets to rank ambassadors by revenue, update rankings with zadd, and retrieve descending results for the front end.

Explore three endpoints for a checkout flow: fetch data to create an order, create the order with completion pending Stripe verification, and update the status from incomplete to complete.

Build a link data API by wiring a link serializer with products and a user, then fetch the unique code and expose the result via the checkout link view.

Create an order via post in the api view, validate the link, assemble order data and items, set code and user details, handle decimals for revenues, save, and return success.

Wrap orders and order items in an atomic transaction to ensure all-or-nothing saves; on error, rollback restores the database, keeping only successful inserts.

Integrate Stripe checkout by creating a checkout session with line items, success and cancel URLs, and card payments, then set the transaction id and test keys to finalize the order.

Send emails to the admin and ambassador when an order is completed by configuring mailhog, updating the checkout confirm API view, and testing via Postman in a Docker environment.

Install and run Angular, install npm globally, set up a new project with Angular routing, and launch the app on port 4200 to see the running app.

Adapt the Bootstrap template by adding its CSS link to the index, then split email, header, and dashboard into Angular components using schematics while skipping tests.

Split the application into public and secure modules, generating corresponding components such as login and register, and use router outlet to render routes based on login status.

Create a reactive register form in Angular with first name, last name, email, password, and confirm, post to the API register endpoint, and navigate to login on success.

Build a login form with email and password, submit to the API login endpoint, move the endpoint to environment variables, and secure HTTP-only JWT cookies.

Establish a centralized authentication service to manage registration and login requests, move the EDP client into the service, and reuse it for both flows with shared data handling and credentials.

Learn how to fetch the authenticated user in an Angular and Django setup, configure the user interface, and understand how credentials enable the authenticated user.

Implement and test a logout flow in an Angular and Django app by sending a logout request with credentials, clearing cookies, and redirecting users to login while protecting routes.

Learn how to use an interceptor to automatically attach credentials to all HTTP requests, by cloning requests and applying a credentials interceptor globally through providers, improving authentication flow.

Create and connect a profile page with editable user data and password forms using reactive forms, form builder, and two update endpoints for info and password.

Explore how to implement event emitters in an Angular and Django advanced setup to share user data between components, reduce server calls, and update profiles in real time.

Configure Angular routing to redirect the main page to the users table, apply routerLinkActive to highlight the active link, and fetch users from environment API/users to display names and emails.

Learn to install Angular Material, choose a style, and convert a user table to an Angular Material mat-table by configuring data source and defining columns for name, email, and actions.

Add pagination to a material table using mat paginator, wire a view child, implement after view init, and bind a data source to paginate and display users across pages.

Build a links page in Angular using router links, a links component, and a link service to fetch links by user id and calculate revenue from orders.

Build a product component linked to a product service to fetch all products, define fields (id, title, description, image, price, action), and enable 10-item pagination.

Create a product form component linked to the products table and routes, and submit via the product service to post to the endpoint, then navigate to the products list.

Create a single angular product form that handles both create and update via route data, fetch by id when editing, call the service for create or update, then redirect.

Delete a product by confirming the action, sending a delete request through the product service, and updating the data source upon confirmation to reflect removal.

Develop an orders component with a dedicated order service and interface to display orders and their items in an expansion panel, showing the name, email, total, and item details.

Set up and configure an angular project for the Angola ambassador by updating ports from 4200 to 4300, integrating a bootstrap template, and refreshing the index and component for development.

Import data, interfaces, interceptors, and services from the Angular admin project into a public module with login and register flows, and configure environment endpoints and routing for authentication.

Create a dynamic navigation bar in an Angular app, using a JWT cookie to toggle login, signup, profile, and logout links via routing and ngIf.

Implement a secure profile page in an advanced angular and django rapid guide by organizing main and shared models, wiring reactive forms and router outlet for authenticated access.

Create a dynamic header component that toggles between welcome messages and user revenue, using title and description variables, login and register links, and route-based conditions.

Create secured stats and rankings views in an Angular Django app by adding components, services, and routes to fetch links, users, and revenue data.

Set up frontend and backend products components with router links and active states. Use exact matching via routerLinkActive options to distinguish between front-end and back-end routes.

Develop and display backend products by consuming the /backend endpoint to fetch data, then bind product data, images, titles, and prices to the user interface, paginating to nine items.

Implement lazy loading with a load more button that fetches pages via a query param, concatenates new products, and updates on query changes while handling last-page and refresh.

Learn to manage pagination with http params in an Angular and Django setup by implementing last-page handling, show button logic, and refresh-friendly navigation.

Implement a search feature in the products component by wiring a query parameter and backend filter, and ensure pagination merges with search by resetting to page one on new queries.

Learn to sort products by price with a select input, trigger a sort on change to toggle ascending or descending, pass the value to the backend, and reset the page.

Implement a product selection feature by clicking items to apply a selected class, border, and color, using a selected array and isSelected checks to toggle selection.

Select products to reveal a generate links button; then invoke the backend links service to create a checkout URL, display it, and handle login errors.

Advance the frontend by wiring the product service to fetch products from environment api / products, store results, rename thought to source, and prepare for filters with pipes.

Learn to create and register Angular pipes for filtering, paginating, and sorting a product array, using page and per page parameters and a search filter in the UI.

Set up an angular checkout project, run server on port 5000, and integrate a bootstrap checkout template while tailoring form to include first name, last name, email, address, and zip.

Create a form with success and error pages, wired to a link service that fetches data from the backend using a route code. Display the ambasador's name and email.

Angular universal renders the app on the server side, delivering pre-rendered html for Google to index and making the view source show the rendered content for search engine optimization.

Learn to fetch and render products in an Angular and Django setup by looping through products to show title, description, and price, with a quantity input.

Calculate the order total by summing product prices times quantities using a quantities array and reduce, with zero initialization and automatic updates as inputs change.

Submit the form by creating a reactive form group with the form builder and binding inputs like first name, last name, email, country, city, zip, post to the orders API.

Learn to integrate stripe checkout in an Angular and Django app by using publishable keys, including Stripe.js, creating a session, and handling redirects and confirmations.