Analmom 22 03 10 Alura Jenson — Practical Exam 4 New

| Stage | Time | Deliverable | Key Requirements | |-------|------|-------------|-------------------| | Setup | 10 min | Repo scaffold (Vite/Next.js) | Use the provided starter template; no additional dependencies. | | Feature 1 | 25 min | Dynamic product list | Pull data from the GraphQL endpoint, implement pagination & infinite scroll. | | Feature 2 | 20 min | Real‑time filter bar | Debounced search, multi‑select categories, UI updates without full reload. | | Feature 3 | 20 min | Offline‑first cart | Service‑worker caching, optimistic UI updates, sync on reconnection. | | Testing | 15 min | 80 %+ coverage | Unit tests for reducers, e2e test for “add‑to‑cart → checkout” flow. | | Performance | 10 min | Lighthouse report ≤ 90 pts | Asset optimization, lazy‑load images, code‑splitting. | | Wrap‑up | 5 min | README & deployment link | Deploy to Vercel/Netlify, include a concise README. |

Pro tip: The exam environment disables internet access except for the whitelisted API endpoints. Anything else (CDNs, fonts, external libraries) will cause a hard fail.

For a video titled "analmom 22 03 10 alura jenson practical exam 4 new", let's assume it's an educational video or a practical exam review. Here's a feature concept:

Feature Name: "ExamPrep+"

Description: An interactive feature that allows viewers to engage with the video content more effectively, specifically designed for practical exam preparations. analmom 22 03 10 alura jenson practical exam 4 new

Key Components:

| Pitfall | Why It Happens | Fix / Prevention | |---------|----------------|-------------------| | Hard‑coding API URLs | Forgetting the environment variable (VITE_API_URL). | Use import.meta.env.VITE_API_URL everywhere; test locally with the .env file. | | Missing “key” props in lists | React will warn and your UI may glitch. | Always set key=item.id in map. | | Over‑fetching data | Pulling the whole product catalog instead of paginated chunks. | Implement limit/offset or cursor‑based pagination; verify with network tab. | | Blocking the main thread | Heavy calculations inside a component render. | Move logic to a useEffect or a Web Worker; keep renders pure. | | Incomplete test suite | Rushing to the UI and forgetting tests. | Write a test skeleton first (TDD style) – you’ll end up with coverage automatically. | | Large bundle size | Importing the whole UI library (e.g., import * as MUI from '@mui/material'). | Import only the components you need (import Button from '@mui/material/Button'). |