Incearca sa aplici in locuri unde poti invata ceva, in rest pare ca stii bazele. Ai grija ca daca dai proiectele astea cuiva o sa ti se puna intrebari cat mai grele ca sa vada ca tu le-ai facut ca sunt multe cursuri ca sa faci proiecte de genul, dar e usor ca cineva sa zica ca sunt luate de undeva.
Cateva lucruri pe care le-am observat in codul tau:
<Button onClick={() => {handleShowVerdict(); resetGame()}} bg='green.400' color='gray.50'>OK</Button>
Asta e intrebare de interviu la React, daca ii dai componentei tale handler-ul cu arrow function mereu va fi redeclarat, modul mai optim este e sa iti faci un handler cu useCallback la fiecare functie ca sa eviti sa ai referinte care se schimba. In multe locuri nu conteaza, dar e bine sa ai grija la asta.
Aici sunt mai multe locuri in care poti adauga un useMemo/useEffect
morple/App.js at master · yattsu/morple (github.com)
Aici ai un fel de memory leak, iarasi posibila intrebare de interviu
useEffect(() => {
if(!verdict) {
document.addEventListener('keydown', e => handleKeyDown(e), {once: true})
}
}, [progress, currentRow])
Aici de fiecare data cand nu ai un verdict creezi un eventListener nou, la useEffect ai un return pentru cleanup, aici e util pentru a scoate listener-ul dupa ce l-ai creat. Totusi daca dai un array gol la useEffect o sa iti ruleze doar la primul render. Poti crea un hook de useKeydown ca sa fie si mai elegant. Chiar si cu {once: true} bate putin la ochi.
Imi place ca folosesti setState corect cu prev value la arrow function.
Inca ceva ce bate la ochi:
useEffect(() => {
(async () => {
setData(await getPokemonDataById(id))
})()
}, [useParams().id])
Daca vrei sa fii mai lenes si sa faci asta elegant foloseste React Query, daca vrei ceva mai elegant ce nu bate la ochi fara o librarie solutia e sa scoti luarea datelor intr-un hook de usePokemonData() care sa iti dea data, isLoading, isError, isSuccess. useParams()-ul ala e redundant cand il ai mai sus si grija mare cu el, e greu de testat, daca scoti logica de luat datele in hook o poti testa separat, cand intervine useParams trebuie sa mock-uiesti useParams (toata calea la componenta din Router sau cu spy)
In acelasi fisier
if(loading) {
return 'loading...';
}
return(
<Flex
Asa ceva nu prea faci cu React inainte de render, daca ai avea TypeScript s-ar plange ca nu returnezi un React.JSXElement/React.Element, adica nu returnezi un element ci string.
In cateva locuri poti refactura (encapsula) putin codul in hook-uri custom. De exemplu folosesti setCeva(ceva => !ceva), poti crea direct un useToggle pentru cazurile de genul ca sa fie clar ca e toggle.
O alta recomandare ar fi sa incerci sa scrii un minim de teste cu react testing library, nu e deloc greu.
In rest am vazut doar Chakra, nu am vazut de exemplu tailwind cu ceva componenta headless utilizata pe undeva, acum se cauta foarte mult.
Ceva practic ar fi sa iti setezi un github action la fiecare repo ca sa iti publice fiecare proiect pe un github pages, poti sa zici ca te-ai jucat cu CI/CD. 
Un alt tip pentru cautat proiecte:
S-ar putea sa fie mult mai usor sa gasesti ceva front-end pe React Native, decat pe React pe web ca si incepator. E cumva si mai usor ca totul e in stil Chakra.
.