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.
3 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
6 2
(Link) (Link) — tracks device battery state. (Link) (Link) — tracks geo location state of user's device. (Link) (Link) — tr...
Đinh Viễn viết 11 ngày trước
6 2
White
2 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 2 tháng trước
2 0
Bài viết liên quan
White
59 8
Tăng sức mạnh cho javascript với lodash Lần này mình sẽ giới thiệu 1 thư viện javascript vô cùng bá đạo có tên là "lodash]1]", có thể nói nó là LI...
Huy Hoàng Phạm viết gần 4 năm trước
59 8
White
8 0
_Có mấy chia sẻ nhỏ, mình muốn đưa ra để mọi người cùng thảo luận góp ý. Thread này không tập trung vào Technical nữa mà discuss về Coding Style & ...
Hùng Phong viết 8 tháng trước
8 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


White
{{userFollowed ? 'Following' : 'Follow'}}
3 bài viết.
3 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á!