Sunt pregatit pentru un frontend/react job? Portofoliul meu

Salut! De ceva timp invat React si doresc sa ma angajez ca frontend developer. Asta ar fi primul job ca frontend, am lucrat inainte putin ca fullstack dar nu faceam nimic complex. Nu stiu daca sunt inca pregatit sa aplic pentru aceasta pozitie sau daca portofoliul meu este suficient. JavaScript inca invat si incerc sa fac toate challengeurile pe care le prind, si sunt dispus sa invat orice alt limbaj/tehnologie e nevoie. As fi recunoscator daca v-ati da cu parerea.

Am adaugat doar proiectele pe care le-am facut cu React fiindca doar acestea cred ca au relevanta pentru ce vreau.
Multumesc!

1 Like

Pune și link-uri de github, să vedem cum scrii codul. :slight_smile:

1 Like

Scuze ca a durat atat, acum se gaseste link catre sursa pe pagina fiecarui proiect.

2 Likes

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. :smiley:

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.

5 Likes

Multumesc pentru raspuns!
N-am prea primit feedback pana acum si pot sa spun ca ma ajuta destul de mult. Cumva imi valideaza ideea ca stiu cate ceva. Proiectele sunt facute de mine si domnul Google, nimic nu e copiat. Ce am copiat la inceput de pe youtube ca sa imi fac o vedere de ansamblu despre React nu a ajuns pe lista (mi-ar fi fost putin rusine).

<Button onClick={() => {handleShowVerdict(); resetGame()}} bg='green.400' color='gray.50'>OK</Button>

Aici am folosit un arrow function pentru ca am dat de ceva nou, anume sa dau trigger la doua functii intr-un singur onClick. Cand am vazut ca merge nici ca m-am mai atins de el :sweat_smile:.
La fel si la event listener, inca imi e putin neclar cum si unde sa integrez in React ceva ce as face in vanilla JS. Sunt mandru ca macar eram convins ca e super janky ce am facut acolo.

if(loading) {
    return 'loading...';
  }

Scaparea mea de erori… Nu cred ca le-ar fi convenit la interviu :sweat_smile:.

Cat despre Tailwind, am folosit la inceput si a fost o gura de aer proaspat de la CSS-ul pe care il scriam inainte, dar cumva mi s-a parut ca e messy si am decis sa ma mut pe Chakra (crezand ca e oarecum mai inchegat). Inca nu stiu exact ce ar trebui sa folosesc, dar daca zici ca se cauta atunci e un tip foarte bun.

Ce am facut aici a fost trial and error dar stiu ca o sa-mi fie mai usor pe viitor.
Per total crezi ca as putea sa obtin un job? Nu am aplicat decat la vreo 3-4 si n-am primit raspuns. Mi-a fost frica deoarece nu prea am incredere in mine si nici nu vreau sa pierd timpul angajatorilor.
Multumesc de feedback inca o data!

1 Like

Sa nu uiti pe langa portofoliu sa recapitulezi cunostinte de OOP si niste intrebari generale de web + exercitii de algoritmica de pe leetcode. (easy ar trebui sa fie suficiente, concentreaza-te 90% pe intrebari cu siruri si string-uri sau structuri de date de baza cum ar fi liste). Incepi cu intrebarile de algoritmica din lista asta de la week 1 Best practice questions by the author of Blind 75 | Tech Interview Handbook si continui cu intrebari usoare de leetcode. Bafta la interviuri!

3 Likes

Eu as pune o poza personala mai profi. O costumatie putin mai eleganta daca se poate, un zambet, luminozitate mai mare.
Conteaza si asta la prima impresie. :slight_smile:

Nici nu trebuie sa ai poza, pe CV pe profil, si nici varsta, ca sa nu fii discriminat

Ma bucur sa vad ca ai aplicat sugestia mea de aici la acest proiect

Bafta pe la interviuri!

1 Like

Pentru ca proiectele tale de pe github sa fie relevante pentru oricine le consulta ele trebuie documentate. Momentan este doar o colectie de fisiere grupate sub niste nume generice care nu spun nimic despre ce este acolo, ce face, cum se foloseste acel proiect, licenta, etc.

1 Like

Cam aia a fost inspiratia.

Multumesc

Ma gandesc ca daca ar avea ceva cu mine ar vedea la interviu…