React-Card-UI

TinderのカードUIのようなUIをReactアプリで実装しました。

Setup

node.js, ReactJS

Run

1. Repositoryをクローンする
2. cd react-app
3. npm install
4. npm start
5. http://localhost:3000を開きます

Features

• スマホのブラウザ環境で動作する
• カード数は任意とする
• カードにはユーザーの画像、ニックネーム、年齢を表示する（画像、データは任意）
• カード下の左にスキップボタン、右にいいね！ボタンを表示する
• スキップボタンをタップしたときはカードが左に流れるアニメーションが実行され、次のカードが表示される
• いいね！ボタンをタップしたときはカードが右に流れるアニメーションが実行され、次のカードが表示される
• すべてのカードを仕分けできたらempty画面が表示される
• スワイプでカードを仕分けできる
• カードの下部をタップすると詳細画面が表示される