Proszę o code review :)

pytanie zadane 21 lipca 2022 w JavaScript przez mj23 Nowicjusz (150 p.)

Hejka, jeśli ktoś znajdzie sekundę na spojrzenie na mój projekt do portfolio i udzielenie kilku rad to będę niezmiernie wdzięczny. Pozdrawiam!

Strona: https://cal-calculator-portfolio-project.netlify.app/

GitHub: https://github.com/BartlomiejRuson/cal-calculator

komentarz 21 lipca 2022 przez Pawel1995 Gaduła (3,810 p.)

Po rejestracji żadnego komunikatu.

Brakuje mi tych "typowych nazw" produktów, nie wiem co jest a czego nie ma.

Na pewno chciałbym stworzyć swój własny produkt i wpisać ile ma kalorii.

Troche muli, znaczy długo mysli nad decyzjami ;)

Po próbie zalogowanie "FirebaseError: Firebase: Error (auth/user-not-found).", wiec moduły rejestracji i logowania nie działają.

Ale jako wizytówka (troche uboga) ale jest oki, myślę że i tak zwiększy szanse na zatrudnienie jako junior ;)

komentarz 21 lipca 2022 przez PramatycznyJunior Początkujący (420 p.)

https://forum.pasja-informatyki.pl/569349/json-napis-jako-wartosc-ale-nie-string
zadajesz pytanie, a wypowiadasz się o zatrudnieniu, jakbys miał doświadczenie :D ... nie sądzę

komentarz 21 lipca 2022 przez Pawel1995 Gaduła (3,810 p.)

Jak nabierzesz więcej doświadczenia to i w sądzeniu będziesz lepszy ;)

A wracając do tematu wątku @mj23 fajny projekt, co mi sie nie podobało napisałem, ale w mojej firmie szanse na zatrudnienie miałbyś.

komentarz 22 lipca 2022 przez mj23 Nowicjusz (150 p.)

@Pawel1995, Dzięki!!

1 odpowiedź

odpowiedź 22 lipca 2022 przez Tnifey Pasjonat (24,190 p.)
wybrane 22 lipca 2022 przez mj23

Najlepsza

Rozdziel pages na mniejsze komponenty. Taki pages/index.js jest za ciężki do czytania. Tyle tam stanów, że łatwo się pogubić. Możesz zrobić context do zarządzania logiką, lub ogarnąć własny hook, który po prostu przeniesie logikę poza wygląd.

Jest też sporo <svg>, może warto by było ogarnąć z tego osobne komponenty jako ikonki ;)

Używasz array.map i w środku jest tona jsx'a, a mógłby być to osobny komponent.

pages/components/Nav.js chyba wygeneruje Ci route (https://cal-calculator-portfolio-project.netlify.app/components/nav), czyli przeczytaj o routingu w nextjs, i przenieś components poza pages

Masz tam: typeof window === !"undefined", to chyba miało sprawdzać, czy jest uruchomiony na kliencie, ale typeof window zawsze zwraca string, a !"undefined" zwróci boolean - false, czyli w złym miejscu jest wykrzyknik, teraz wynik tego porównania zawsze zwróci false, przez co hideButton się nie wykona na scroll. Fajnie jakby to był const, którego możesz zaimportować, np:

// np utils/runtime.js
export const isServer = typeof window === 'undefined';
export const isClient = !isServer;

funkcja hideButton nie powinna używać document.querySelector. Elementy w react/next chwytamy za pomocą ref (np z useRef). Zamiast używać domElement.classList, powinieneś ogarnąć to przez className danego elementu. Staramy się nie zmieniać bezpośrednio elementów DOM.

To pierwsze z rzeczy z pages/index.js, które możesz poprawić. Powodzenia

offtop:nie jestem fanem tailwind, do szybkiego protypowania to spoko, ale tak na co dzień wolę styled-components,