ネオtopaz

概要

リアルタイムで仲間と記事を作り上げる、共同編集プラットフォーム。 Markdown対応のエディタで、メンバーと一緒に記事を同時編集できます。

開発背景

• どんな機能があるアプリを作ってみたいかという話になったときに、リアルタイムで共同編集できる機能が付いているアプリを実装してみたいとなった。
• ハッカソンのキックオフの際にどりーさんがtopazの紹介をしていて、共同編集の機能は実装していないという話から共同編集ができるt〇pazみたいなアプリをつくれたらいいんじゃないか！という話から作ることになった。

どんなアプリか

リアルタイム共同編集

• 複数人で同時に同じ記事を編集可能。
• 誰かが加筆・修正した瞬間、全員にリアルタイム反映されます。
• 複数人で記事を書くことができるので、ハッカソンで作ったプロダクトをまとめるときにぴったり！

簡単に仲間を追加

• 部屋番号をシェアするだけで共同編集者を招待可能。チーム執筆がぐっとラクに。

Markdown対応

見出し、リスト、コードブロックもサクサク書ける。

使用した技術

• フロントエンド
  • React
  • React Router
  • tailwind
  • tiptap:マークダウンエディタ
  • Yjs: 複数人が同時に編集操作をしたときにそれを自然にマージしてくれるフレームワーク
  • zustand: 状態管理
  • axios: api通信
• バックエンド
  • express
  • firebase
  • websocket

開発の進め方

• 必要なタスクはgoogle docsにて共有
• github projectsを使用して進捗確認

AI活用ポイント

• ずんだもんcopilot!
  • 困ったときはずんだもんが優しく教えてくれるので、沢山質問できた！