Shopping Cart được build bằng TypeScript, NextJS, React, Redux, GraphQL, ... và Material UI.

06 tháng 08, 2019 - 3204 lượt xem

Chào các bạn!

Mình vừa mới làm một side project để cập nhật công nghệ mới nhất về React stack. Shopping Cart của mình được build bằng TypeScript, NextJS, React, Redux, Apollo Client, Shopify Storefront GraphQL API, ... và Material UI.

Sau đây là kinh nghiệm mình thu được sau khi làm dự án này:

  • Sử dụng React Hooks thay vì of React.Component để tạo stateful components.
  • Sử dụng Redux Starter Kit để đơn giản hóa việc cấu hình Redux và làm được nhiều việc hơn với ít code hơn.
  • Làm cho Redux chạy ngon với NextJS bằng withRedux.tsx higher order component.
  • Sử dụng react-redux hooks thay vì react-redux connect để đọc và cập nhật trạng thái (state) của store.
  • Sử dụng kiểu dữ liệu tĩnh của TypeScript cho Component Props, Reducers, Actions và các Services.
  • Sử dụng GraphQL Code Generator để tự động tạo models cho TypeScript.
  • Làm việc với GraphQL tags nhanh hơn với Apollo GraphQL for VS Code extension.
  • Làm cho Apollo Client chạy ngon với NextJS bao gồm cả server side và client side.
  • Có thêm kinh nghiệm khi làm việc với Shopify Storefront GraphQL API.
  • Làm cho Material UI chạy ngon với NextJS với withMui.tsx higher order component.
  • Cấu hình Eslint & Prettier để lint và format mã nguồn.
  • Triển khai các ứng dụng NodeJS trên Heroku.

GitHub Repository: https://github.com/Maxvien/next-shopify-storefront

Nếu bạn thấy dự án thú vị thì thả cho mình một star nhé! ⭐️

Bình luận

avatar
Hoàng Minh 2021-04-28 02:42:08.71701 +0000 UTC
bạn ơi github còn thiếu cấu hình .env. Bạn cho mình xin để view project được không ạ?
Viễn Đinh
Viễn Đinh 2021-05-18 02:11:52.319787 +0000 UTC
Thông tin cấu hình trong file này bạn nhé! Tương lai mình sẽ chuyển thành file env. https://github.com/maxvien/next-shopify-storefront/blob/master/graphql.config.json
Avatar
avatar
Viễn Đinh 2021-05-18 02:10:10.539936 +0000 UTC
🛍 Bootstrap Shopify Theme: https://github.com/maxvien/bootstrap-shopify-theme Đây là dự án Shopify Theme mới nhất của mình. Đây là một free theme được code bằng Bootstrap, BEM, Theme Tools, Swiper, Gulp, Parcel, Liquid, SASS, PostCSS, ESNext, ... and Passion.
Avatar
* Vui lòng trước khi bình luận.
Ảnh đại diện
  0 Thích
0