たくさん！かくさん！Mymemoとは

技術記事を読んで実践したとき、その記事が使えなかったことはありませか？ Mymemoはそんな時にメモを共有してみんなに知らせるだけでなく、他のユーザーのメモを参照することにより、早期に参考にしていた技術記事に見切りをつけることができます 知識のアウトプットにもなることを目指して開発したプロダクトです。

アーキテクチャ図

技術スタック

レイヤー	技術
フロントエンド	React 19.2.0 + Vite 7.3.1
DnD	@dnd-kit/core 6.3.1, @dnd-kit/sortable 10.0.0
バックエンド	Express 5.2.1 (Node.js, ESM)
DB	Supabase (PostgreSQL)
デプロイ	Render.com
配布形式	Chrome Extension (Manifest V3)

完成度 (B)

実装済み機能:

• URL紐づきメモの作成・編集・削除
• ページ上への付箋表示（ドラッグ移動・リサイズ）
• お絵描きキャンバスメモ
• ドラッグ&ドロップによる並び替え
• タグ管理
• ローカル全文検索（テキスト・タグ）
• リモートへのメモ共有
• リモートメモ一覧・キーワード検索
• マイページ（ユーザー登録・ログイン・メモ統計）
• メモのカラー変更

機能説明

・メモ保存機能 書いたメモはGoogle cloud strageで保存されているため、高速で読み込み可能

・メモ貼付機能 書いたメモをサイトのどこにでも張ることが可能。貼付したメモはサイズの変更や削除、非表示、内容の編集を直接できます。

・メモ共有機能 書いたメモをほかの人が見られるように共有することができます。

・タグ＆メモ検索機能 メモにはタグを追加することが可能。検索機能ではタグや本文、またはその両方からメモの検索が可能。ほかの人が書いたメモも検索可能であり、メモからサイトへアクセスすることができます。

・いいね機能 メモにはいいねをすることができ、有益な情報にいいねを付けて後から見返すことが可能です。

・お絵かき機能 お絵かき機能ではキャンバスを設置して好きなものを書くことができます

・マイページ機能 このページでは自身が保存したメモとそのURLを閲覧することができます

推しポイント

chromeの拡張機能で使えるためブラウザのタブを増やすことなくサイトの評価を見ることができる！

マイページにて過去自分が保存したメモと紐づけされたURLを確認できるため、開発中にメモを保存しておくことで後から有用だったサイトを共由しようとしたときにマイページを見るだけで当時参考にしていたサイトが分かる。

つまりchromeのブックマーク機能＋メモでサイトを探すのが楽だしあとから見直したときに楽ができる

大変だったところ

事前開発をしている段階でメインで開発を進めている人が風邪で4日ダウンしてしまった

バックエンドデプロイする用のRenderが一生動かなくて二日ぐらいバックの開発が止まっていた

（原因は参照するgithubのプロダクトが全く同じ名前のものが二つあり、参照を間違っていた）

そのため毎日22時に進捗報告を行っているが進捗が止まっている情報が出るだけの日があってつらかった

メイン画面

オンライン画面

検索画面

マイページ

お絵かき

時間なくて説明できなかった(´・ω・`)