TWITTY の機能紹介
ポートフォリオ第一弾「TWITTY」が完成したのでブログに起こします。
このアプリではCRUDの基本的な操作は全て網羅しており、
さらにAjaxやFlask-migrationなどの拡張機能の実装にも挑戦しました。
GitHub : TWITTY
https://github.com/lovehakumai/TWITTY
◼️LP画面 :
◼️アクセス画面 :
PurecssのテンプレートにもあるLPレイアウトを参考にLPを作成しました。
SIGN UP - アカウント新規作成
SIGN IN - ログイン
*アクセス画面には桜吹雪が舞っています笑
もし入力値に間違いがあればエラーメッセージが表示されます。
正しいID/PASSであればタイムラインの表示されたホーム画面へ接続されます。
◼️ホーム画面 :
自分と自分がフォローしているユーザーの投稿が一覧として表示されます。
◼️マイプロファイル画面 :
自分のニックネームと自己紹介、そして直近の投稿が一覧として表示される画面です。
「Edit Your Profile」から編集ができます。
(編集画面) :
◼️投稿画面 :
画像とタイトル。そしてその説明文を登録する画面になります。
ここで入力した内容はデータベースに保存されます。
◼️他ユーザ検索画面 :
*検索結果(非同期通信) :
一番苦労した部分。
キーワードを元に他のユーザのプロファイル&投稿内容を検索することができます。
「Users」「Posts」というボタンで、ユーザのニックネームを検索するか投稿タイトルを検索するかを指定できます。
Ajax処理で非同期通信を行うのでTwitterの同じ機能の様な操作感を再現しました。
検索結果から次のユーザープロファイル画面に移行することができます。
◼️ユーザープロファイル画面 :
気に入ったユーザをフォローすることができます。
フォローボタンはデータベースと連動していて、フォローしていたら「Following」。
フォローしていなかったら「Follow」となります。
このボタンもAjaxの非同期処理なのでクリックするたびにデータベースを更新します。
◼️スマホの操作画面 :
gif画像早すぎて恐縮ですが、スマホにも対応しているレスポンシブデザインを適用しています。
(一部はまだ未対応)