現在URLは停止しています。
クレジットカード決済型のECサイトです。
user側とadmin側の機能があり、user側は/以降、admin側は/admin以降からアクセスします。
admin側ではroleとpermissionを用いて権限設計をしました。
バックエンドは軽量DDD(実際使ったのはrepository程度)、
フロントエンドはEntity、Repository、UseCase含めて、完全にcoreの機能とreactを分離して書いています。
ただvalidationはreact-hooks-form任せにしています。
responsive対応でスマートフォンからでも見やすくなっています。
-home
-product
-cart
-checkout
-address
-card
-responsive_home
-adminSideBar
-admin_error,permissionがないことによりURLへのアクセスエラー
現在URLは停止しています。
http://lax-ex.net
(admin側)
http://lax-ex.net/admin
email:test@email.com
password:password
email:superadmin@email.com
password:password
email:admin@email.com
password:password
email:staff@email.com
password:password
4242 4242 4242 4242 09/40 555
user側では
-商品の複数条件による検索
-クレジットカードを用いた決済
-カートへの一時的保存
-注文した商品の確認
-ユーザーの情報のアップデート
などができます。
admin側では
-商品やユーザー、注文,パーミッション、ロールなどの追加、削除、更新ができます。画像を見ていただいた方がわかりやすいと思います。
-初期ロールとしてsuper_admin、admin、staffの三つがあり、あらかじめそのロールごとにパーミッションを割り当てています
-必要なパーミッションがないと特定のurlにはアクセス不可,apiを飛ばせたとしてもAuthenticationErrorが出るようにしています。
| super_admin | admin | staff |
|---|---|---|
| createCategory | createCategory | createCategory |
| createProduct | createProduct | createProduct |
| createDiscount | createDiscount | createDiscount |
| createShipping | createShipping | createShipping |
| updateOrder | updateOrder | updateOrder |
| createOrderStatus | createOrderStatus | createOrderStatus |
| createNews | createNews | createNews |
| changeUser | changeUser | changeUser |
| attachRoleAndPerm | attachRoleAndPerm | - |
| createAdmin | createAdmin | - |
| createRoleAndPerm | - | - |
-パーミッションレベルで権限を管理しています。ロールもパーミッションも好きに作れますが、その権限(createRoleAndPerm)を持っているのはsuper_adminだけです。
-もし時間を割いていただけるのであれば、下記のurlから見れるFeatureTest,フロント側のpermission制御、バック側のAPIの制御を見ていただいてもいいかもしれません。
-FeatureTest
https://github.com/stone-like/Lax/tree/master/tests/Feature
-フロント側のpermission制御
https://github.com/stone-like/Lax/tree/master/resources/ts/ui/feature/admin/authenticatedRoute
-バック側のAPI
https://github.com/stone-like/Lax/blob/master/routes/api.php
-フロントエンド
typescript,フレームワークとしてreact
-バックエンド
php,フレームワークとしてlaravel
-クレジットカード決済
stripe
-php,laravel
初めてbackendで触った言語であることと、laravelの強力なDI、validationがとてもやりやすく感じた。
-react
vueと比べてよりjsに寄っていてtypesciptを使うなら個人的にはreactのほうが書きやすく、hooksの登場でコードの可読性、再利用性も上がっているので。
-stripe
公式Document、API、Testがとても充実していて導入する際にとても助けになった。
重要な情報を扱うからこそとても丁寧なガイドラインが存在するstripeを採用
-DTO
コントローラーからの出力、コントローラーへの入力の際に使用しています。
-コントローラー
Repositoryとのデータの入出力を担っています。(バックエンド側ではUseCaseすら使用していないです。)
-ModelAndRepository
ModelとRepository、Requestが入っています。
Repositoryはコントローラーから受け取ったデータをもとにmodelから必要な情報を取り出します。
Requestはコントローラーでのバリデーションにつかっています。
-Test
バックエンドのTestです。
UnitTestではRespositoryの機能を、
FeatureではAPI～コントローラーのPermission、Validation、結合テストをしています。
フロントエンド側はまずcoreとuiに分かれています。
coreはframework等に依らない独立しているものです。(reactでもvueでも使える)
uiはreact,reduxが入っています。こちらはフレームワークの領域となっています。
-core
dto,entity,repository,usecaseなどが入っている部分です。
-DTO
主にバックエンドからのデータをEntityに変換しています。
-Entity
Entityです。Validationはreact-hooks-formに任せているので、完全とは言えません。
-errorType
バックエンドから返ってくることが想定されるerrorの型を定義してあるファイル群です。
Error処理も気を配ってみたので良ければ見ていただきたいです。(Result<Success,Failure>みたいに定義していて、Repositoryから見た方がわかりやすいかもしれないです。)
-Repository
Repositoryです。バックエンドとのやり取りに使います。
-UseCase
主にここはつなぎとしてのみの役割。
-ui
uiはreactが入っているところです。AppとFeatureに分かれていて、Appには共通で使うようなpagination、loader、css等が入っていて、atureには普通のReactComponent群が入っています。
-app
-feature
-util
utilはreactHooksとか個々のerrorをまとめて使うためのErrorHandlerなどが入っています。
-StoreAndReduer
定番のやつです。
