한국어 README

📱 Transtalk

TransTalk is a real-time translation chat service that helps you communicate without language barriers.

For each chat room, you can choose a target language, and any message you send is immediately translated into that language before it’s delivered.
By chatting with friends using different translation languages, you can naturally gain exposure to and learn new languages.

📂 Project Structure

├── .prettierrc
├── eslint.config.js
├── index.html
├── package.json
├── README.md
├── tailwind.config.js
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts
│
├── public
│    └── transtalk-favicon.svg
└── src
     ├── api
          ├── apiRequest.ts
          └── reissue-access-token.ts
     ├── assets
          ├── logo
          │    ├── google-logo.png
          │    └── transtalk-logo.svg
          └── ui
          │    ├── arrow-down.svg
          │    ├── arrow-left.svg
          │    ├── arrow-up.svg
          │           .
          │           .
          │           .
     ├── components
     ├── constant
     ├── i18n
          ├── language
          └── index.ts
     ├── pages
          ├── ChatRoom
          │    ├── api
          │    ├── components
          │    ├── hooks
          │    ├── utils
          │    └── ChatRoom.tsx
          ├── Home
          │    ├── api
          │    ├── components
          │    ├── hooks
          │    ├── utils
          │    └── Home.tsx
          ├── Login
          │    ├── api
          │    ├── components
          │    ├── hooks
          │    ├── GoogleCallback.tsx
          │    └── Login.tsx
          └── Settings
          │    ├── api
          │    ├── components
          │    ├── hooks
          │    └── Settings.tsx
     ├── querykey
     ├── router
     ├── socket
     ├── styles
     ├── types
     ├── utils
     ├── App.tsx
     └── main.tsx

🛠 Front-end Developer Stack

• Deployment: Vercel
• Build: Vite
• Internationalization: i18next
• Framework & Language: React, TypeScript
• Styling: Tailwind CSS
• State Management: TanStack Query
• Data Fetching: axios
• WebSocket: STOMP.js, SockJS

🔑 Key Technologies

• Real-time communication with WebSocket
  Implemented real-time updates for the chat room list and chat messages using STOMP.js and SockJS.

• Data/state management & infinite scroll with TanStack Query
  Manages server state efficiently with TanStack Query and applies infinite scrolling to both the chat room list and chat history to reduce unnecessary network requests.

• Multilingual support with i18next
  Uses i18next to automatically apply the UI language based on the browser’s language settings, and is structured to make future language expansion easy.

📃 Page Features

[Login]

• The first screen displayed when accessing the service.
• Users can quickly start using the service via Google social login without a separate sign-up process.

[Home (Chat Room List)]

• The main screen shown after logging in.
• Displays the list of chat rooms the user participates in, sorted by the most recent conversation time.
• Each chat room shows the other user’s profile image, name, translation language, timestamp of the latest message, original message, translated message, and the number of unread messages.
• Infinite scroll is applied for efficient data loading.
• When new messages arrive via WebSocket, the chat room list is updated in real time.

[Search]

• Tap the search button in the home header to open the search input.
• You can search chat rooms by the other user’s name.
• A 0.5 second debounce is applied to optimize input handling and data requests.

[Start New Chat]

• Tap the floating button at the bottom-right of the home screen to open the new chat modal.
• You can start a new chat room by entering a registered user’s email and selecting a translation language. (Currently, only Gmail accounts are supported.)
• Supported translation languages: Korean, English, Japanese, Chinese, and Spanish.
• Once the chat room is successfully created, you are navigated directly into that chat room.
• If a chat room with the same information already exists, a new room is not created and you are redirected to the existing chat room instead.

[Chat Room]

• The header displays the other user’s profile information.
• Chat history is sorted by time, with the latest message at the bottom of the screen.
• Each message shows the original text, translated text, and the time it was sent.
• A reverse infinite scroll is implemented so that scrolling upward loads older messages.
• Real-time chatting is enabled via WebSocket, and when a new message arrives, the view automatically scrolls to the bottom.

[Settings]

• Users can view their profile information and perform logout or account withdrawal.
• When the user selects logout or withdraw, a confirmation modal appears to prevent accidental actions.

🎨 UI Design (Figma)

Transtalk - Figma