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

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.

alt text

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é! ⭐️

Thanks for reading :-D

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Đinh Viễn

3 bài viết.
18 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
17 3
(Link) (Link) — tracks device battery state. (Link) (Link) — tracks geo location state of user's device. (Link) (Link) — tr...
Đinh Viễn viết hơn 1 năm trước
17 3
White
3 0
Nếu team cắt HTML/CSS của bạn chưa có một tiêu chuẩn chung nào để làm việc hợp rơ với nhau thì hãy thử qua (Link) (Block, Element, Modifier). Nếu ...
Đinh Viễn viết hơn 1 năm trước
3 0
Bài viết liên quan
White
17 3
(Link) (Link) — tracks device battery state. (Link) (Link) — tracks geo location state of user's device. (Link) (Link) — tr...
Đinh Viễn viết hơn 1 năm trước
17 3
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
3 bài viết.
18 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!