React18 でDynamoDBをGraghQLで操作してみる

React18 で DynamoDBを GraghQLで操作してみる

目次

作成したアプリケーション

デモ

React18 & MaterialUI で作成しており、TailwindCSS も利用しています。
インフラは、Amplify (Cognito/AppSync/DynamoDB) で構築していて、
GraghQL でデータの取得・更新をしています。
Storybook も導入してみました。

https://dev.d28qg1769uc44q.amplifyapp.com

主な機能

  • ログイン/ログアウト
  • 会員登録
  • 投稿一覧
  • 投稿詳細
  • マイページ(一覧・登録・更新・削除)

プロジェクトの概要

React18 を利用した学習用のサンプルアプリケーションです。

Hooksを利用して作成しています。

利用している技術

  • React18
  • Typescript
  • MaterialUI
  • TailwindCSS & Sass
  • Amplify (Cognito/AppSync/DynamoDB)
  • GraghQL
  • Storybook

開発環境の構築

# amplify コマンドをインストールする
$ npm install -g @aws-amplify/cli
$ amplify -v
4.16.1

# amplify を利用する為の設定
$ amplify configure
? user name:  amplify-xxxx

# AWS から amplify の状態をローカルに取り込む
$ amplify pull --appId xxxxxxxx --envName dev

ソースコード

MITライセンスにて公開しています。ご利用の方は以下のリポジトリからFork してご利用下さい。

https://github.com/isystk/amplify-reactjs-sample

ディレクトリ構造

.
├── LICENSE
├── README.md
├── amplify
│   ├── #current-cloud-backend
│   ├── backend
│   ├── cli.json
│   ├── hooks
│   └── team-provider-info.json
├── node_modules
├── package.json
├── public
├── src
│   ├── App.tsx
│   ├── __test__
│   ├── assets
│   ├── auth
│   ├── aws-exports.js
│   ├── components
│   ├── constants
│   ├── index.tsx
│   ├── pages
│   ├── react-app-env.d.ts
│   ├── reportWebVitals.ts
│   ├── services
│   ├── setupTests.ts
│   ├── stores
│   ├── styles
│   └── ui-components
├── tsconfig.json
├── tsconfig.paths.json
└── yarn.lock

起動方法

$ yarn
$ yarn start

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。