david_bai
761921684c
- Hook (useConnectionFeedback):
- Add SLOW_RTC_MS=8000 timer when entering negotiating
- Foreground-only; pending while hidden; show once per negotiation attempt
- Clear timers on connect/disconnect; reset attempt flags when leaving negotiating
- Cleanup timers on unmount
- i18n:
- Add required key ClipboardApp.rtc_slow to types
- Provide translations for zh, en, ja, es, de, fr, ko
- Docs:
- flows.zh-CN: add UI connection feedback state machine covering
join_inProgress (immediate), join_slow (3s), join_timeout (15s),
rtc_negotiating, rtc_slow (8s), rtc_connected, rtc_reconnecting, rtc_restored;
document equivalent success signals and visibility gating
- code-map.zh-CN: outline responsibilities/locations for useRoomManager (join slow/timeout)
and useConnectionFeedback (negotiation slow, reconnect/restored)
PrivyDrop - Frontend
This is the frontend for PrivyDrop, a privacy-focused file sharing application built with Next.js and based on WebRTC.
🛠️ Tech Stack
- Frontend Framework: Next.js 14 (App Router)
- UI Framework: React 18 + TypeScript
- Styling: Tailwind CSS + shadcn/ui
- P2P Transport: WebRTC
- Signaling Service Client: Socket.IO Client
- Internationalization: next-intl
🚀 Local Development
Before you start, please ensure you have installed and started the backend service according to the instructions in the project's root README.md.
-
Navigate to the Directory
# Assuming you are in the project's root directory cd frontend -
Install Dependencies
pnpm install -
Configure Environment Variables First, copy the environment variable configuration from the template file:
cp .env_development_example .env.developmentThen, open and edit the
.env.developmentfile, ensuring thatNEXT_PUBLIC_API_URLpoints to your locally running backend service. -
Start the Development Server
pnpm dev -
Open
http://localhost:3002in your browser to see the application.
📚 Detailed Documentation
- To understand the complete project architecture and how components collaborate, please see the Overall Project Architecture.
- To dive deep into the frontend's code structure, Hooks design, and state management, please read the Frontend Architecture Deep Dive.
- For instructions on deploying in a production environment, please refer to the Deployment Guide.
🤝 Contributing
We welcome all forms of contributions! Please read the Contribution Guidelines in the root directory to get started.