kino-ma / kyuban Goto Github PK

Adjust UI design of /user/:id page

Currently, endpoints are named in the singular form (e.g., /user/123).

But it is better to name APIs in the plural form in general, so we need to rename them.

Maybe the SSR causes

pages/home.tsx (112:10) @ _callee$

  110 | 
  111 |     // Unknown errors
> 112 |     throw new Error("エラーが発生しました");
      |          ^
  113 |   }
  114 | 
  115 |   const threadsResp = await get("/thread");

We want to publish this service on the internet.

The main and initial purpose of this software is to be my (@kino-ma 's) portfolio for job hunting, and I live in Japan, so currently almost all UI texts are written in Japanese.

But I hope to support English, too.

• 作る画面を共有する
• 一通り作ってもらう
• フロントの人たちの実装が進んだらまた調整する

• 現状のプログラムを把握する
• 手元で動かせるようにする

画面

• 登録画面
  • 名前の入力欄
  • パスワードの入力欄
  • メールアドレス
  • 送信ボタン
    • 押すとサーバにリクエストを送って，ホームに飛ばす
• ホーム画面
  • フォローしている人のレスポンスが最新順に流れる
    • 送信先スレッドのタイトル
      • 送信先スレッドに飛べる
    • 投稿者
      • プロフィールに飛べる
    • 投稿日時
    • 内容
  • スレッド一覧
    • タイトル
      • そのスレッドの画面に飛べる
    • 最初のレスポンス
      • 投稿者
        • プロフィールに飛べる
      • 投稿日時
      • 内容
• スレッド画面
  • タイトルが一番上に表示される
  • レスポンスが古い順に一覧表示される
    • 投稿者
      • プロフィールに飛べる
    • 投稿日時
    • 内容
  • レスポンス送信欄
    • 内容の入力欄
    • 送信ボタン
      • 押すとサーバにリクエストが飛ばされる
      • そのあと同じ画面が再描画される
• スレッドを作る画面
  • スレッドタイトルの入力フォーム
  • 確定（作成ボタン）
• ユーザのプロフィール画面
  • ユーザ名
  • フォローボタン
    • 押すとサーバにリクエストが飛ばされる
    • 既にフォローしていれば「フォロー中」
    • フォローしていなければ「フォローする」
  • レスポンスの一覧（最新順）
    • 送信先スレッドのタイトル
      • 送信先スレッドに飛べる
    • 投稿者
    • 投稿日時
    • 内容
• サインイン画面

API を叩く

• 登録画面
• ホーム画面
• スレッド画面
• スレッド作成
• プロフィール画面
• サインイン画面

デザインを調整する

Figma

• #22
• #23
• #24
• #25
• サインイン画面

Issues

• session
  • auth
  • create thread
  • create response
• switch follow button view
• link to /thread/create
• link to thread in card

Adjust UI design of /home page

Add an API endpoint to update a user's information

Add an API endpoint to update a response's information

Adjust UI design of /register page

Add an API endpoint to update a thread's information

Adjust UI design of /thread/:id page

• 現状のプログラムを把握する
• 手元で動かせるようにする

API

• /user
  • GET: ユーザ情報の取得
  • POST: 新規作成
  • GET /user/:id 特定のユーザ
  • フォームからパスワード
  • #19
• /thread
  • GET: スレッド情報の取得
  • GET /thread/:id: 特定のスレッド
  • POST: 新規作成
  • #20
• /response
  • GET: レスポンス内容の取得
    • GET /response?sender={id}: 特定のユーザのレスポンス
    • GET /response/feed フォローしている人たちの投稿
  • GET /response/:id: 特定のレスポンス
  • POST: 新規投稿
  • #21
• /follow
  • GET: ユーザをフォローしているかどうか
  • POST: ユーザを新しくフォローする
  • DELETE: フォローを消す
• /signin
  • POST: ログイン

database

• ユーザ
  • ID
  • 名前
  • 登録日時
  • （プロフィール）
• ユーザの認証情報
  • ユーザID
  • パスワード
• スレッド
  • ID
  • タイトル
  • 作成者
  • 作成日時
• レスポンス
  • ID
  • 送信先スレッドID
  • 送信元ユーザID
  • 内容
  • 作成日時
• フォロー
  • ID
  • フォロー元ユーザID
  • フォロー先ユーザID

auth

• cookie

issues

• first response on POST /thread
• no redirect when not signed in