voinar / mern_photographer-portfolio-ecommerce-site

What's up! 🍪

I started my coding adventure back in '17. My first experiences were with Python and computer vision projects. Later I moved on to JavaScript and focused on building my front-end skills.

Currently focused on developing skills in:

• ⚛️ React
• 📝 Typescript
• 🔺 Next.js
• 🎨 UI design
• 🧪 Testing
• 🤖 APIs

Also passionate about:

• 🇨🇳 Chinese language & tech in China (你会说中文吗？)
• 🎧 Podcasts
• 🚲 Cycling

Thanks for making it this far! 🙌

mern_photographer-portfolio-ecommerce-site's Issues

Few remarks after review frontend part

Nie wiem, na ile jest to in progress, ale Oskar mowil ze bedziesz zadowolony z feedbacku, to daje:

• powtarzaja Ci sie properties dla jednego elementu w stylach np.: display https://github.com/voinar/mern_photographer-portfolio-ecommerce-site/blob/master/photographer-portfolio-frontend/src/components/styles/_Alert.scss;

• dobrze jest miec zamkniete / wyciagniete kolory, rozmiary czcionek etc do zmiennych. Bedzie CI pozniej latwiej edytowac pliczki;

• sporo latwiej mialbys po zainstalowaniu jakiegos linta do stylu np.: stylelint;

• zapiski takie jak:

const About = () => {
  return (

mozesz skracac do:

const About = () => (<div>...);

• zamiast miec duzo importow z jednej sciezki, zrob plik index i tam zaimportuj sobie wszystko z danego katalogu, a pozniej index importuj do poszczegolnych page/components

tutaj masz przyklad, co moze zostac skrocone:

import img0 from '../img/about/about-1.jpg';
import img1 from '../img/about/about-2.jpg';
import img2 from '../img/about/about-3.jpg';
import img3 from '../img/about/about-4.jpg';

• rzeczy takie jak numer telefonu, mail etc (href="mailto:[email protected]") mozesz zamknac w pliku env i tam trzymac, ulatwi Ci to trzymanie jednego source of true i pozniejsze edytowanie, gdyby cos sie zmienilo

export const getError = (error) => {
  return error.response && error.response.data.message
    ? error.response.data.message
    : error.message;
};

w powyzszym kodzie doczytaj sobie o Optional Chaining Operator w JS, moze byc przydatny w tym wypadku i na przyszlosc :)

 useEffect(() => {
    import('react-facebook-pixel')
      .then((x) => x.default)
      .then((ReactPixel) => {
        ReactPixel.init(facebookPixelId);
        ReactPixel.pageView();

        // Routes.events.on('routeChangeComplete', () => {
        // ReactPixel.pageView();
        // });
      });
  });

importy trzymaj zawsze u gory pliku

  //run actions on every state update
  useEffect(() => {
    console.log('store updated');
    localStorage.setItem('cartItems', JSON.stringify(state.cart.cartItems));
  }, [state]);

taki effect moze byc ciezki dla aplikacji, na pierwszy rzut mozesz to zamkna tylko do cartItems

 <Route path="/" element={<SectionWelcome />} />
          <Route path="/witaj" element={<SectionWelcome />} />
          <Route path="/:category" element={<SectionContent />} />
          <Route path="/o%20mnie" element={<About />} />
          <Route path="/sklep" element={<Shop />} />
          <Route path="/album/:album" element={<Album />} />
          <Route path="/experiments" element={<Experiments />} />
          <Route path="/koszyk" element={<Cart />} />
          <Route path="/logowanie" element={<SignIn />} />
          <Route path="/podsumowanie" element={<Checkout />} />
          <Route path="/zamawiam" element={<OrderForm />} />
          <Route path="/twojezakupy" element={<Success />} />
          <Route path="/regulamin" element={<TermsConditions />} />
          <Route path="/cookies" element={<Cookies />} />

takie cos najlepiej zamknac w osobnym pliku, ktory definiuje routing i po prostu mapowac juz w docelowym miejscu

https://github.com/voinar/mern_photographer-portfolio-ecommerce-site/blob/master/photographer-portfolio-frontend/src/components/AlbumCard.jsx - ta destrujkcja propsow moze byc smialo uzyta wyzej, dzieki temu zyskasz na czytelnosci