100 Technical Interview Questions & Answers for HelioVision

This guide covers the intersection of modern web development (React/Next.js), edge/IoT devices (Raspberry Pi/Arduino), backend integrations (FastAPI/Node), and Cloud infrastructure (Supabase/PostgreSQL).

Part 1: React, TypeScript, & Frontend (1-25)

1. What is the difference between client-side rendering (CSR) and server-side rendering (SSR) in Next.js? CSR ships Javascript to the browser, which then fetches data and renders the HTML. SSR generates the HTML on the server per request, sending a fully formed page to the client. SSR is better for SEO and initial load times, which is highly beneficial for static dashboards.

2. How do WebSockets differ from REST APIs? Why use them? REST is stateless and unidirectional (client requests, server responds). WebSockets maintain a persistent, bidirectional connection. For a factory floor dashboard needing real-time defective product alerts from a camera, WebSockets (or Server-Sent Events/Supabase Realtime) are necessary to push data instantly without long-polling.

3. What is the Virtual DOM in React? The Virtual DOM is an in-memory representation of the real DOM. When state changes, React updates the Virtual DOM, compares it with the previous version (diffing), and then applies only the changed elements to the real DOM. It minimizes expensive browser repaints.

4. How does the useEffect hook work? It manages side effects in functional components, operating after the render phase. It takes a callback and an dependency array. If dependencies change, the effect re-runs.

5. How would you handle state management across a complex operator UI? For local component state, useState/useReducer. For avoiding prop drilling, the Context API. For complex, rapidly updating real-time data across the whole app, Zustand or Redux Toolkit, or simply passing Supabase Realtime subscription data down via Context.

6. Explain TypeScript generics. Generics allow you to create reusable components/functions that can work over a variety of types rather than a single one. Example: <T>(data: T) => T. It ensures type safety when fetching a payload from the edge device without hardcoding the interface.

7. How do you optimize a React app that updates 60 times a second from sensor data? Avoid putting rapidly changing data in the React state of high-level components to prevent cascading re-renders. Use useRef to hold mutable values without triggering re-renders, or utilize a canvas/WebGL representation for high-frequency data instead of updating DOM nodes.

8. What are React Server Components (Next.js App Router)? Components that render exclusively on the server, resulting in zero JS sent to the client. This reduces bundle size. Client interactivity (like onClick) requires turning them into Client Components via "use client".

9. Explain the purpose of useMemo and useCallback. useMemo caches the result of an expensive calculation between renders. useCallback caches a function definition to prevent unnecessary re-creations, useful when passing callbacks to optimized child components to avoid triggering their re-renders.

10. How do you fetch data on the server in Next.js 14/15? Instead of getServerSideProps, you can simply await native fetch() calls inside an async Server Component. Next.js extends fetch to enable caching and revalidation behaviors natively.

11. What is Prop Drilling and how is it solved? Prop drilling is passing data down through multiple nested components that don't need the data themselves. It's solved using the Context API, state management libraries (Zustand), or improved component composition (passing children).

12. How do you implement authentication in a Next.js application? Using NextAuth.js (Auth.js) or Supabase Auth. It involves setting up OAuth providers or magic links, and wrapping the app in a Session Provider, while using middleware to protect specific routing paths.

13. What is the difference between interface and type in TypeScript? They are very similar. interface is specifically for declaring shapes of objects and can be merged (declaration merging). type is an alias that can be used for primitives, unions, intersections, and mapped types.

14. Why use Tailwind CSS instead of traditional CSS for a dashboard? Tailwind is utility-first, meaning you use pre-existing classes to style directly in the markup. It guarantees a consistent design system, eliminates unused CSS through PostCSS purging, and avoids specific naming conventions (BEM) and CSS scope collisions.

15. How do you handle CORS errors? CORS (Cross-Origin Resource Sharing) is a browser security measure preventing cross-origin requests. It is solved on the backend by sending appropriate headers (Access-Control-Allow-Origin: * or specific domains) in the OPTIONS preflight and response.

16. What is the Event Loop in Javascript? JS is single-threaded. The event loop constantly checks the Call Stack and the Callback Queue. If the Call Stack is empty, it pushes the first event from the Queue to the Stack to execute. It handles asynchronous operations like timers and network requests.

17. Explain strict mode in React. <React.StrictMode> is a development tool that intentionally double-invokes certain lifecycle methods and effects to help catch impure functions, unsafe lifecycles, and deprecated API usage.

18. How do you build a real-time dashboard with React and WebSockets? Open a new WebSocket(url) inside a useEffect on mount. Listen to onmessage events to update React state. Render the state in tables or charts. Close the connection in the useEffect cleanup function.

19. What is Hydration in Next.js? Hydration is the process where a server-rendered HTML string becomes interactive on the client side. React attaches event listeners to the existing DOM nodes created by the server.

20. What is a React Custom Hook? A JavaScript function whose name starts with "use" and that may call other Hooks. It’s used to extract complex stateful logic out of a component (e.g., useSensorData(sensorId)).

21. How do you structure a massive frontend enterprise application codebase? Feature-based folder structure (e.g., grouping components, hooks, api calls related to "Dashboard" together), using atomic design principles, absolute imports (e.g. @/components/Button), and strict linting.

22. How do you handle form validation in React? Using a library like React Hook Form integrated with Zod for schema validation. This ensures controlled inputs re-render efficiently and guarantees complex client-side type-checked validation.

23. What are CSS Modules in React? Files ending in .module.css. They locally scope CSS class names by generating unique hashes, preventing global style conflicts.

24. How do Error Boundaries work in React? Classes that implement componentDidCatch to catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of crashing the whole tree. In Next.js App Router, error.tsx acts as an error boundary.

25. Define "Closure" in Javascript. A closure is a function bundled together with references to its surrounding state (lexical environment). It gives a function access to its outer scope even after the outer function has returned.

Part 2: Edge, IoT, & Hardware (26-50)

26. What is the difference between SPI, I2C, and UART?

• UART: Asynchronous serial, 2 wires (TX/RX), point-to-point. No clock.
• I2C: Synchronous, 2 wires (SDA/SCL), multi-master/multi-slave using addresses. Slower.
• SPI: Synchronous, 4 wires (MOSI/MISO/SCK/CS), single-master/multi-slave via hardware pin selection. Very fast, good for high-bandwidth sensors.

27. A Raspberry Pi runs Linux. An Arduino runs bare-metal. What does this mean for Machine Vision? Machine Vision needs an OS with heavy computational libraries (OpenCV, PyTorch) and RAM, making the Pi suitable. An Arduino lacks an OS and has KB of RAM; it's best for strict, real-time deterministic tasks like reading a simple hardware distance sensor or toggling a relay.

28. How do you handle internet connection drops on an edge device in a factory? The edge device must have a local state/database (like SQLite) to cache data. When the connection drops, it buffers telemetry. When the connection restores, a worker process flushes the buffered data to the cloud via a queue to ensure no data loss.

29. What is a Watchdog Timer? A hardware timer that automatically resets the microcontroller or device if the software fails to "kick" (clear) the timer periodically due to a freeze or infinite loop, ensuring the device recovers from crashes.

30. Explain PWM (Pulse Width Modulation). A technique for simulating an analog output using a digital signal by varying the duty cycle (the ratio of high/on time to the total period). Commonly used for motor speed control or LED dimming.

31. How would you structure a Python app reading hardware data and sending it to the cloud? Two threads/processes: one infinite loop tightly bound to reading I2C/UART sensors and pushing data into a thread-safe Queue. The second accesses the Queue and manages JSON formatting, batching, and async HTTP/MQTT pushing to the cloud.

32. What is Docker, and why use it on a Raspberry Pi? Docker standardizes the runtime environment using containers. On a Pi, installing Python OpenCV, ML libraries, and specific Node versions globally is a dependency nightmare. Docker ensures the edge app relies on an isolated, deterministic image that works anywhere.

33. What is an interrupt on a microcontroller? A hardware signal that momentarily pauses the main program execution to run an Interrupt Service Routine (ISR) immediately. It is vital for catching real-time events (like a button press or encoder tick) without relying on heavy polling loops.

34. Why is Python heavily used in Machine Vision despite being slow? Python acts as glue code. The heavy lifting for OpenCV or PyTorch is written in highly optimized C or C++. Python just provides a rapid, high-level API to combine models, file operations, and web requests.

35. What is the difference between TCP and UDP?

• TCP ensures ordered, reliable delivery of packets (with handshakes and acknowledgments). Used for file transfers, databases, REST APIs.
• UDP is connectionless and does not guarantee delivery. It’s faster and used for streaming video feeds from edge cameras.

36. Explain MQTT. A lightweight, publish-subscribe messaging transport protocol designed for IoT. Devices connect to a "Broker" and publish/subscribe to "topics" (e.g., factory1/camera2/defect). It has low overhead and QoS (Quality of Service) guarantees for weak networks.

37. How would you remote SSH into a factory Pi if it's behind a NAT/Firewall? Use a reverse proxy or VPN tunnel. Tools like ZeroTier, Tailscale, or establishing a reverse SSH tunnel from the Pi to a public cloud server.

38. What is edge computing? Processing data close to where it's created (on the Pi) instead of sending all raw data to the cloud. For a 4K 60FPS vision loop, the cloud would drown in latency and bandwidth; the edge runs the AI and only sends "Defect Found = True" to the cloud.

39. How do you debounce a hardware button or sensor input? Mechanical contacts bounce rapidly before settling. Debouncing uses a short time delay (software) or an RC filter (hardware) to ignore subsequent transitions for a few milliseconds after an initial state change.

40. What is an ADC (Analog-to-Digital Converter)? Transforms a continuous analog voltage into a discrete digital number that a processor can understand. An Arduino has built-in ADCs; a Raspberry Pi does not and requires an external ADC chip over SPI/I2C.

41. How would you deploy code updates to 100 Raspberry Pis in different factories? Use an IoT device management platform (like Balena) or a custom bash script / systemd service that pulls updated Docker Images from a private registry every night, restarts the container, and reports the new version to a central API.

42. What is a High-Side vs Low-Side switch? In embedded systems, high-side switching connects the power supply (VCC) to the load, meaning ground is always connected. Low-side switching connects the load to ground. High-side is safer for automotive to avoid shorts to chassis ground turning devices on.

43. How does I2C use pull-up resistors? I2C communication lines (SDA and SCL) are open-drain. Devices can only pull the line low (to ground). A pull-up resistor is required to return the line to VCC (high) when no device is pulling it low.

44. What happens when a Raspberry Pi SD card gets corrupted from frequent writing? SD cards wear out. To prevent this in edge environments, minimize logging/database writes directly to the SD card. Mount /var/log on a RAM disk (tmpfs), or use high-endurance SD cards or eMMC/SSD upgrades.

45. Explain how a State Machine is used in embedded firmware. Instead of procedural code with delay(), a state machine defines states (INIT, READ_SENSOR, ERROR, REPORT) and transition conditions continuously evaluated in the main loop, allowing non-blocking multitasking.

46. Can you run React directly on a Raspberry Pi? Yes, a Raspberry Pi can run a Node.js server holding the Next.js/React app, or host statically built HTML files that a local browser (in Kiosk mode) fetches to display a local operator dashboard without requiring the internet.

47. What is CAN bus? Controller Area Network. A robust vehicle bus standard. Although HelioVision focuses on web/IoT, acknowledging your Marelli experience via CAN shows you understand high-reliability differential signaling networks.

48. Why would you use a Fast API vs Express.js for the edge device backend? FastAPI uses Python, making it trivial to seamlessly import and serve data from OpenCV/PyTorch machine vision scripts. Express.js (Node) would require complex IPC (Inter-Process Communication) to talk to the Python AI script.

49. How do you guarantee an edge Python script runs on boot? Create a systemd service file with Restart=always and WantedBy=multi-user.target. This ensures Linux starts the script automatically and restarts it if it crashes.

50. What is an RTOS (Real-Time Operating System)? An OS designed to serve real-time applications that process data as it comes in, typically without buffering delays and with deterministic execution times (e.g., FreeRTOS on an ESP32). Linux is generally not an RTOS.

Part 3: Backend, Next.js API, & Databases (51-75)

51. How does Next.js handle API routes? In the App Router, you create route.ts files inside the app/api/... directory containing exported async functions for HTTP verbs (e.g., export async function GET()).

52. Explain Supabase. An open-source Firebase alternative built on top of Postgres. It provides a database, authentication, storage, and real-time subscriptions natively over WebSockets out-of-the-box.

53. What is PostgreSQL logical replication and how does Supabase Realtime use it? Logical replication allows streaming database changes row-by-row. Supabase hooks into Postgres's WAL (Write-Ahead Log) to listen for INSERT/UPDATE events and broadcasts them via WebSockets to authenticated React clients.

54. What are ACID properties in a database? Atomicity, Consistency, Isolation, Durability. It guarantees database transactions are processed reliably, critical for ensuring a recorded transaction (like a shipped defect part) is fully saved or completely rejected.

55. Explain the difference between SQL and NoSQL. SQL (PostgreSQL) is relational with structured schemas and tables. NoSQL (MongoDB) is non-relational, document-based, and schema-less. Since industrial data has strict, predictable telemetry formats, SQL is usually preferred for long-term aggregations.

56. How do you prevent SQL Injection? By using prepared statements or parameterized queries provided by ORMs (Prisma, Drizzle) or database drivers (pg). Never concatenate raw strings directly into SQL statements.

57. What is Prisma? A modern Next-generation ORM for Node.js and TypeScript. It offers an intuitive data model schema, type-safe database queries, and automatic migrations.

58. How would you design a database schema for factory IoT sensors?

• factory table: id, name, location.
• camera table: id, factory_id, status.
• defect_log table: id, camera_id, timestamp, defect_type, image_url. Ensure foreign keys map correctly and index the timestamp column since you will heavily query by time.

59. How does authentication work in a REST API? Through tokens, typically JWTs (JSON Web Tokens). The client sends login credentials, the server signs a JWT and sends it back. The client includes the JWT in the Authorization: Bearer <token> header for subsequent requests.

60. What is Middleware in Next.js? A function in middleware.ts that runs before a request is completed. It intercepts the request to perform redirects, route protection, or cookie modification based on auth status.

61. What is the N+1 query problem? Occurs when an application queries a database for a list of items (1 query) and then loops through them, executing a new query for each item to fetch related data (N queries). Solved via JOINs or data loaders.

62. How do you handle large file uploads (like defect images from a machine vision rig)? The edge device shouldn't push the heavy image base64 through the REST API payload. Generate a pre-signed URL from AWS S3 or Supabase Storage, have the edge upload the image directly to storage, and then send the REST API the returned URL.

63. What are Webhooks? User-defined HTTP callbacks triggered by an event. A cloud service could send an HTTP POST webhook to a factory dashboard application automatically when an external event happens.

64. Explain Indexing in PostgreSQL. An index is a data structure (like B-Tree) that improves data retrieval speed on a table at the cost of additional storage and slower writes. Critical for IoT tables that store millions of rows.

65. What is the difference between OAuth and JWT? OAuth is a protocol framework for authorization (e.g., logging in via Google). JWT is a compact token format used to transmit information. OAuth workflows often result in a JWT.

66. How do you ensure high availability for a cloud backend? Load balancing across multiple server instances spread across different availability zones, using managed databases with failover replicas, and container orchestration (Kubernetes/Docker Swarm).

67. What is a RESTful API? An API adhering to REST architectural constraints: using standard HTTP methods (GET, POST, PUT, DELETE), statelessness, uniform interfaces, and typically relying on JSON.

68. Explain Rate Limiting. Restricting the number of requests a user or edge IP can make to an API within a timeframe to prevent DDoS attacks and database overload from runaway scripts.

69. How do you handle background jobs (like generating end-of-day factory reports)? Use a message broker and queue (Redis + BullMQ, RabbitMQ, or Celery in Python) to offload heavy asynchronous processing from the main Next.js/FastAPI request cycle.

70. What is Docker Compose? A tool for defining and running multi-container Docker applications via a single yaml file. Excellent for spinning up a Next.js frontend, Python FastAPI backend, and Postgres DB simultaneously locally.

71. How do you handle secrets and API keys? Store them in .env files locally. Never commit them to Git. In production, use Vercel Environment Variables, AWS Secrets Manager, or Docker Secrets.

72. What is GraphQL? An alternative to REST that allows clients to request exactly the data they need in a single query from a single endpoint, reducing over-fetching and under-fetching.

73. What is optimistic UI handling? When the frontend updates the UI immediately as if the API network request succeeded, providing instantaneous feedback. If the API eventually returns an error, the UI state is rolled back.

74. What is a transaction in PostgreSQL? A block of SQL operations that must entirely succeed (COMMIT) or entirely fail (ROLLBACK). For example: debiting an account and crediting another.

75. How does Node.js handle concurrency if it's single-threaded? Using the non-blocking I/O event loop. Heavy computational CPU tasks block it, but I/O operations (network, file system, DB queries) are offloaded to C++ worker threads by libuv, triggering a callback when done.

Part 4: Integration, Architecture, & Problem Solving (76-100)

76. How would you design a system to detect a scratch on a car door and display it on an operator iPad in 1 second? Raspberry Pi takes a camera frame. Local Python script runs an optimized PyTorch/OpenCV ONNX model in ~100ms. If a defect is found, it POSTs an alert to a local FastAPI server on the Pi. The FastAPI server broadcasts a WebSocket event to the Next.js frontend running locally or in the cloud, which displays it instantly on the iPad.

77. Your factory dashboard React frontend is rendering sluggishly. How do you debug it? Use React DevTools Profiler to identify which components are re-rendering unnecessarily. Check if state updates are cascading too broadly. Look for large arrays being mapped without unique keys, or expensive operations inside the render block.

78. The Raspberry Pi stops reporting data to the cloud. How do you debug?

1. Check Cloud API logs (did the Pi throw an auth error?). 2. SSH into the Pi. 3. Check dmesg or journalctl for Linux kernel errors or Python script stack traces. 4. Verify network connectivity on the Pi. 5. Verify the sensors haven't electrically disconnected.

79. What is a CI/CD pipeline? Continuous Integration / Continuous Deployment. Automating tests and builds. Example: Pushing Next.js code to GitHub triggers GitHub Actions to run ESLint, build the project, and automatically deploy to Vercel/Docker Hub.

80. What is an ONNX runtime? Open Neural Network Exchange. A format to represent deep learning models. It standardizes models trained in PyTorch or TensorFlow so they can be run extremely fast on edge devices using hardware accelerators.

81. You have 10 cameras sending 4K video feeds. Do you send this to the cloud? No, bandwidth would be exhausted and cloud costs astronomical. Perform inference directly on the edge (the Pi or Jetson Nano) and only upload highly compressed image crops of the defects and the timestamp telemetry.

82. How would you implement dark mode in a Tailwind & Next.js app? Use standard Tailwind dark:bg-slate-900 prefixes. Use next-themesProvider to automatically toggle the .dark class on the HTML runtime element based on user preference or OS setting.

83. The CTO asks you to implement a firmware update on a high-side switch module safely so you don't stall the automotive line. How? Use An A/B partition. The Microcontroller boots from Bank A. OTA code downloads to Bank B. On reboot, the bootloader verifies Bank B's checksum and points to it. If it crashes, it safely rolls back to Bank A.

84. Why are pure functions important in React? A pure function given the same inputs always returns the same output without side effects. React relies on this predictability to understand when to re-render. Mutations break dependency arrays.

85. Explain how gRPC differs from REST. gRPC uses HTTP/2 and Protocol Buffers (binary data) instead of JSON. It defines strict service contracts. It is significantly faster and more strongly typed than JSON APIs, excellent for microservice or edge-to-cloud telemetry.

86. What is dependency injection? Supplying an object/variable with its dependencies from the outside rather than creating them internally. It makes code modular and vastly easier to Unit Test since dependencies can be mocked.

87. How do you validate an API payload structure in Python/FastAPI? Using Pydantic models. You define Python classes with types, and FastAPI automatically throws 422 errors if the incoming JSON doesn't precisely map to the model.

88. Your I2C sensor works on a breadboard but fails on the factory floor. Why? I2C is designed for short distances on PCBs (inches). Factory environments have massive Electromagnetic Interference (EMI) from motors. Using unshielded long cables for I2C acts as an antenna. You must use differential signaling (like RS-485 or CAN) for factory transmission.

89. Your deployment failed because "it works on my machine". How to avoid this? Use Docker. Define exact versions in package.json package locks and requirements.txt. Build images in an automated CI environment, never from local machines.

90. How do you scale a Node.js web server? Using the PM2 module or Node's native cluster to launch multiple instances handling requests across multiple CPU cores. Using load balancers like Nginx to route traffic across multiple physical servers.

91. What is Server-Side Request Forgery (SSRF)? A vulnerability where an attacker forces your backend server to make outward HTTP requests. In a dashboard that lets users input webhooks, it could force the backend to fetch sensitive internal AWS metadata.

92. How do you implement infinite scrolling in a React defect log table? Use IntersectionObserver on the last item. When visible, trigger a function that paginates to the Next.js API, fetches offset=N, and merges the new data into the React state.

93. What is event delegation in Javascript? Attaching a single event listener to a parent element to handle events for all its children instead of adding an event listener to every individual child. This saves memory.

94. Your Docker container exits immediately after running on the Pi. Why? Docker containers exit if their main foreground process finishes. If your Python script runs to the end and exits, the container dies. You must ensure the script has an infinite event loop (like while True or an active web server).

95. Explain Cross-Site Scripting (XSS). Injecting malicious Javascript into a web page viewed by others. React natively prevents most XSS by auto-escaping strings in JSX, unless you explicitly use dangerouslySetInnerHTML.

96. A React application needs a user setting available strictly when an operator views it on a specific physical machine. How do you store it? Using localStorage or sessionStorage. Since it pertains to the physical browser instance and not the global cloud user account, storing it directly on the browser solves the requirement locally.

97. Your Next.js build throws "Window is not defined". Why? You tried to access browser-specific APIs (like window.localStorage or document) during the Server-Side Rendering phase. Solution: Check if (typeof window !== 'undefined') or wrap it inside a useEffect.

98. How do you optimize images displaying defective parts so the cloud dashboard doesn't lag? Utilize the Next.js <Image /> component. Under the hood, it automatically serves correctly sized, modern formats (WebP/AVIF), and lazy loads them only when they enter the viewport.

99. How does an embedded C developer transition to React easily? By understanding that State Machines in embedded C behave identically to React's useEffect and useState paradigms. The UI is just a deterministic representation of the current application state.

100. HelioVision asks: "Why do you want to work here?" Your answer: "I am an engineer who thrives at the intersection of tangible hardware and modern scalable web interfaces. At Marelli/EEINS I mastered strict, embedded hardware reliability. At Prezent I scaled beautiful Next.js user interfaces. HelioVision represents the exact convergence of my skill sets—I want to be the React & Raspberry Sorcerer who builds the robust edge code and the beautiful dashboard that brings the vision to life."