Frontend Vývojář - Praktický Úkol 2

Popis úkolu

Tento projekt obsahuje 3D model s lip sync animací synchronizovanou s přehrávaným audio souborem, ale je tu jeden problém s výkonem, dokážete ho najít?

Vaším úkolem je:

1. Identifikovat problém
2. Najít příčinu - co přesně způsobuje tento problém
3. Bonus: Opravit nebo navrhnout řešení - popsat, jak by se problém dal vyřešit

Poznámka: Není nutné problém programaticky opravit. Pokud najdete a popíšete problém a jeho příčinu, případně navrhnete řešení, je to plně dostačující.

Spuštění projektu

npm install
npm run dev

Po spuštění klikněte na tlačítko "Play audio" a pozorujte animaci modelu.

Co očekáváme

Minimálně:

• Identifikaci problému s výkonem

Ideálně:

• Popis toho, co přesně způsobuje problém
• Návrh řešení (slovní popis jak problém vyřešit)

Nad rámec:

• Implementaci opravy

Technologie použité v projektu

• React 19
• TypeScript
• React Three Fiber (3D rendering)
• React Three Drei (pomocné 3D komponenty)
• Vite

Struktura projektu

Klíčové soubory:

• src/App.tsx - hlavní komponenta aplikace
• src/components/Model/Model.tsx - komponenta 3D modelu s animací

Hodnotící kritéria

Budeme hodnotit:

1. Identifikace problému (povinné) - Dokážete najít problém v aplikaci?
2. Analýza příčiny (bonus) - Dokážete identifikovat, co přesně způsobuje problém?
3. Návrh nebo implementace řešení (bonus) - Dokážete popsat nebo implementovat opravu?

Časový odhad

Předpokládaná doba na vypracování: 1 hodina

---

Hodně štěstí! 🚀