david_bai
7950aec063
nginx(website on server) listens on port 4443 and then forwards to the frontend and backend. nginx main configuration adds a stream block to uniformly listen on port 443, then forwards based on domain to coturn(5349) and website(4443). The TURN port used in WebRTC is changed to 443. The deployment document adds a script action to delete extra configurations generated by certbot.
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.