Full-Stack Web Development

Create and run a React application using Vite and npm scripts.

Express a user interface as reusable React components using JSX.

Pass data and callbacks between components using props.

Update component state in response to user events with useState.

Render conditional content and keyed collections from application data.

Build a controlled React form with client-side validation.

Fetch API data in a component with useEffect while representing loading and error states.

Inspect component props and state with React Developer Tools.

Design a component hierarchy and assign state to the nearest appropriate owner.

Configure client-side routes and route parameters with React Router.

Create a reusable API client that uses an environment-supplied base URL and consistently handles JSON responses and failures.

Implement an authentication context that restores current-user state from an API without storing passwords or hard-coded credentials.

Implement an accessible file-upload interface with progress and failure feedback.

Extract repeated stateful behavior into a custom React hook.

Test component behavior with React Testing Library and user-event.

Diagnose unnecessary renders with the React Profiler before applying an optimization.

Design a normalized PostgreSQL schema for users, videos, processing jobs, and permissions.

Enforce data integrity with primary keys, foreign keys, unique constraints, and check constraints.

Retrieve related application data using inner joins, outer joins, and aggregations across joined tables.

Structure a multi-step analytical query using a common table expression.

Calculate ranked or cumulative results with a window function.

Execute related writes safely within a database transaction.

Create an index suited to a specific query pattern.

Use EXPLAIN ANALYZE to identify a query bottleneck and evaluate the effect of an index.

Create a Django project connected to PostgreSQL, separate it into applications, and trace a request through URL routing and a view.

Configure a custom user model before creating authentication-dependent migrations.

Define Django models that represent the video platform's entities and relationships.

Generate, inspect, and apply a Django schema migration.

Query and update related records with the Django ORM.

Eliminate a demonstrated N+1 query using select_related or prefetch_related.

Register and customize models in the Django administration site.

Implement a Django management command for a repeatable maintenance task.

Serialize model instances and validate incoming data with a DRF serializer.

Implement create, list, update, and detail endpoints with generic DRF views.

Expose a coherent resource API using a DRF viewset and router.

Represent nested relationships without introducing uncontrolled database queries.

Implement filtering, search, ordering, and pagination on a collection endpoint.

Return consistent HTTP status codes and structured API errors.

Validate video-upload metadata and create a pending processing record through DRF.

Generate an OpenAPI schema and use it to exercise the API.

Compare session and JWT authentication for browser and non-browser clients, then select a strategy for each client type.

Implement registration and password-change behavior using Django's password hashing and validation facilities.

Implement and test session login, logout, and current-user endpoints for the React client.

Issue, refresh, and revoke JWT credentials for an API client.

Restrict an endpoint with authenticated and role-based DRF permissions.

Enforce object-level authorization for privately owned videos.

Apply CSRF, CORS, secure-cookie, and security-header settings to the selected deployment architecture.

Demonstrate and mitigate SQL injection and cross-site scripting risks in the Django and React stack.

Write a Django model test that verifies a business rule.

Create reusable Django test data with factories.

Test a DRF endpoint's success, validation, authentication, and permission behavior.

Mock object-storage and media-processing boundaries in an API test.

Measure endpoint query counts to detect an ORM performance regression.

Implement a typed FastAPI endpoint with request and response validation.

Implement FastAPI dependency injection for authentication or database access.

Compare equivalent DRF and FastAPI endpoints in terms of validation, async support, and framework conventions.

Use ffprobe to identify a media file's codecs, dimensions, frame rate, bitrate, and duration.

Transcode a source video to a specified codec, resolution, and bitrate with FFmpeg.

Package a video as an HLS playlist and segmented media files.

Create multiple HLS renditions suitable for adaptive bitrate playback.

Validate an HLS manifest and diagnose a missing or invalid segment.

Invoke FFmpeg safely from Python without shell interpolation and parse its progress output.

Configure Celery with Redis and enqueue FFmpeg processing outside the HTTP request-response cycle.

Persist queued, processing, progress, completion, and failure states in Django and expose job status through DRF.

Play an HLS stream in React using native HLS where supported and Video.js streaming support elsewhere.

Expose playback state and errors through an accessible custom player interface.

Organize source files, HLS renditions, thumbnails, and manifests with a stable object-key strategy.

Run an S3-compatible local object store for development and connect it to Django.

Implement a presigned direct-upload flow for an authorized React client.

Configure bucket CORS rules for the React application's required upload and media requests.

Choose cache-control settings for immutable segments and replaceable manifests.

Design CDN delivery for public and private HLS using cache keys, invalidation, and signed access.

Write a multi-stage Dockerfile to compile and serve the React frontend with Nginx.

Write a production Dockerfile for the Django backend using a WSGI server.

Configure application behavior with validated environment variables rather than committed secrets.

Run the complete stack with Docker Compose, including PostgreSQL, S3-compatible storage, Redis, and a Celery worker.

Navigate a Linux server and inspect files, permissions, processes, ports, and logs.

Execute migrations and static-file collection safely during a release.

Apply container health checks, restart policies, and non-root execution.

Diagnose a failing container using runtime status, resource usage, and application logs.

Map the frontend, API, worker, task broker, database, object-storage, and CDN components onto a cloud architecture.

Provision a Docker-capable cloud host and restrict inbound traffic with firewall rules.

Point a domain's DNS records to the deployed application.

Configure a reverse proxy for frontend and API traffic while keeping video delivery on object storage and the CDN.

Enable HTTPS with an automatically renewed TLS certificate.

Configure GitHub Actions to test the application and build and publish versioned container images.

Deploy a versioned container release and perform a rollback.

Run a production-readiness drill that verifies health checks, logs, a restorable database backup, monitoring, and security settings.