【PF-1】管理画面

製作物

React × AWS APIGateway × Lambda × DynamoDBで作成するSPA
ver1.0.0の構成は以下の通り。

機能

なんらかのシステムを利用するユーザデータをCRUD操作できる画面

画面

作成した画面は以下の通り

ユーザ一覧画面(ListUser.tsx)

ソースコードと説明

ユーザ詳細画面(DescribeUser.tsx)

ソースコードと説明

ユーザ登録画面(AddUser.tsx)

ソースコードと説明

その他

メニューバー、サイドナビの実装

App.tsx

ディレクトリ構成

以下のようなディレクトリ構成で作成。
コンポーネント分割はロジック(Container Component)と画面表示(Presentation Component)を簡単に分けたのみ

app/
┗ src/
   ┠ container/     //ロジックに関するファイル
   ┃   ┠ AddUser.tsx
   ┃   ┠ DescribeUser.tsx
   ┃   ┗ ListUser.tsx
   ┠ presentation/  //画面表示に関するファイル
   ┃   ┠ AddUser.tsx
   ┃   ┠ DescribeUser.tsx
   ┃   ┠ ListUser.tsx
   ┃   ┗ Menu.tsx
   ┠ App.tsx
       ┗ index.tsx

バックエンド

API構成

以下のようなAPIの構成で作成

 ▼/
  ▼ /ctrl
   ▼ /users
      GET
      OPTIONS
      POST
    ▼/{user_id}
       DELETE
       GET
       OPTIONS
       PATCH

APIGatewayの構築・Lambdaの実装

【PF-1】APIGateway・Lambda

今後の展望

画面

• storybookの作成
• figmaによるデザイン

バックエンド

• swaggerを利用したAPI設計書の作成
• エラーを返す処理の実装