Skip to content

フルスタックWebアプリケーションの開発。リアルタイム卓球ゲームを中心に、WebSocketを利用してチャット機能、API、フロントエンド開発。

Notifications You must be signed in to change notification settings

Joo-hyun-Kang/42_Transcendence_Frontend

 
 

Repository files navigation

概要

42のカリキュラムにおける修了制作であり、フルスタックのウェブアプリケーション開発を通じて、バックエンドからフロントエンド、データベース設計、リアルタイム通信まで幅広いスキルを習得することを目的としています。

リアルタイムで対戦可能なオンラインゲーム「Pong」をユーザプレイでき、そのためにチャットルームでチャットやユーザのプロフィル管理、友達登録、ランダムゲームマッチングなど構築しました。



サービス内容

  • チャット機能
    • 公開・非公開設定が可能なチャットルーム生成
    • WebSocketを利用したチャット機能
    • チャットルームで招待、退出、ミュートなど管理機能
  • ユーザー機能
    • マイページでニックネーム、プロフィール写真の変更が可能
    • 他のユーザーと友達登録、ブロック機能
    • 認証:OAuth, Jwtトークン、メールを用いた二次認証
  • ゲーム機能
    • WebSocketを利用したリアルタイムのポンポンゲームプレイ
    • ゲームマッチング**:待機中のユーザー同士をマッチング**
    • ゲーム観戦と戦績紹介機能


サービス詳細(画像) 🐣 ~

1。ログイン

OAuthを使用して、安全なログイン機能を提供します。

  • 二次認証:ログイン時にメールを用いた二次認証プロセスを提供しています。


2。チャットリスト

  • チャットルーム生成:新しいチャットルームを作成できます。
  • 公開/非公開チャット:チャットルームの公開・非公開設定を選択可能です。
  • パスワード設定:非公開チャットでは、パスワードによるアクセス制限を設定できます。


3。チャットルーム

  • リアルタイムチャット:WebSocketを利用した機能を実装しています。
  • チャットルーム設定変更:チャットルーム名や公開・非公開の設定を変更可能です。
  • ルームのユーザー管理機能
    • ユーザーを招待または退出させることができます。
    • ユーザーを黙らせる(ミュート)機能を備えています。
  • 管理者権限:チャットルームの管理者権限を他のユーザーに付与可能です


4。友達リスト

4。友達機能
  • ユーザー検索および友達登録:他のユーザーを検索して友達として登録できます。
  • 友達ブロック機能:特定の友達をリストからブロックすることが可能です。


5。チャットプロファイル

5。チャットプロフィール
  • 一対一のチャットおよびゲーム申請ができます。
  • 友達リストから特定のユーザーをブロック(Ban)できます。


6。ユーザープロファイル

  • プロフィール変更機能
    • あだ名(ニックネーム)を変更可能です。
    • プロフィール写真をアップロードまたは更新できます。
  • ゲーム戦績の表示:過去のゲーム戦歴をプロフィール画面で確認できます。


7。ゲームショップ&ゲームプレイ

  • Web上でリアルタイムにピンポンゲームをプレイできます。


8。ゲーム戦績

9。ゲーム戦績ページ
  • これまでにプレイしたゲームの戦績を確認できます。


9。ゲーム観戦ページ

2。チャットリスト
  • 現在進行中のゲームをリアルタイムで観戦できます


開発方法&チーム構成

  • 開発方法
    • デザイン、API設計、エンティティデザインの後、6週間のスプリント開発
    • 毎週、チーム内で維持する文化(Keep)、問題点(Problem)、試みること(Try)のKPT振り返りを実施
  • メンバー: フロント&バックエンド:4名


主な技術スタック 🛠️

  • バックエンド: TypeScript, NestJS, PostgreSQL, Prisma
  • プロントエンド:TypeScript, React, ReactQuery, Recoil
  • インフラ・ツール: Docker, Git
  • プロジェクト管理: Git Issue、Git Wiki(ドキュメント管理)


デザイン🔥

ウェブモバイルサーイズで開発

About

フルスタックWebアプリケーションの開発。リアルタイム卓球ゲームを中心に、WebSocketを利用してチャット機能、API、フロントエンド開発。

Resources

Stars

Watchers

Forks

Languages

  • TypeScript 97.5%
  • JavaScript 1.6%
  • Other 0.9%