つみあげったー(学習投稿アプリ)

アプリ URL

https://portfolio-albaasu.vercel.app/

アプリ概要

自身の学習内容を他のユーザーと共有しモチベーションを高めあうアプリです。

アプリを作成した背景

一人での学習では、モチベーションが低下し学習する頻度が低くなりがちだったので他の人がどれだけ勉強したかを視認化することでやる気と振り返りが楽になるようにしたいと思ったのがきっかけです。つみあげったーは「とにかくシンプルでわかりやすく、操作性も複雑化しないよう」と意識して作成しました！

テスト用アカウント

• メールアドレス：test@test.com
• パスワード　　：test111

利用方法

トップページ	サインアップ	ログイン
つみあげったー のトップページです。	新規登録ページです。ユーザー名、メールアドレス、パスワードを登録します。	ログインページです。アカウントをお持ちの方はメールアドレス、パスワードを入力しログインします。

マイページ	メニュー	いいねページ
ホームです。自身の投稿や他のユーザーの投稿が表示されています。	プロフィールの編集やログアウトができます。	過去にいいねした投稿が一覧で表示されています。

マイページ	設定	パスワードを忘れた場合
自身が投稿したものを表示しています。	プロフィールの編集画面です。アイコンやユーザーネームを変更できます。	パスワードを忘れた場合再発行ができます。

コメントページ
投稿にコメントを追加することができます。

機能一覧

• 認証（サインアップ/ログイン/ログアウト/パスワードリセット）
• ユーザー編集（アイコン画像/ユーザーネーム）
• 投稿/編集/削除
• いいね機能
• 自身の投稿の絞り込み
• コメント機能
• 画像プレビュー機能

実装予定の機能

• アカウント削除機能
• 画像の拡大表示

開発環境

フロントエンド

• React(v18.2.0)
• Next.js(v13.4.2)
• Typescript
• Recoil
• Material UI

バックエンド

• Firebase (v9.22.0)

デプロイ

• Vercel

工夫した点

• 共通化しやすいよう意識しコンポーネントを作成しました。

• プロフィール編集機能でプロフィールの更新時に自身が過去に投稿したユーザーネームなども変更されるようにしました。

• いいね機能の実装し、自身がいいねしたものを一覧で表示できるようしました。

• 自身が過去に投稿した内容を遡らなくても一覧で表示できるようしました。

苦労した点

• firebase のデータ取得でどこを参照し取得するかに苦労しました。特にいいね機能や画像投稿などの機能は firebase のデータ 構造を考えることに時間がかかりました。

• 投稿時したときのユーザーを保存し、そのユーザーがプロフィールを変更したときにその投稿が更新されるようにするのに苦労しました。