david_bai
8ef43029d5
- generate-config.sh: add --with-nginx flag handling; when enabled, set NEXT_PUBLIC_API_URL empty to use same-origin /api and /socket.io; add BACKEND_INTERNAL_URL for SSR/internal fetch; adjust lan-tls HTTPS (8443) and TLS generation policy - deploy.sh: show only valid access URLs when Nginx is enabled (gateway URLs), avoid misleading :3002/:3001 entries - frontend (env/webrtc): return mutable transports [websocket,polling]; use empty signaling server for same-origin; comments in English - frontend (next.config): support NEXT_IMAGE_UNOPTIMIZED to turn off image optimization in Docker - frontend (health): prefer BACKEND_INTERNAL_URL for internal health checks, fallback to public URL/localhost - docker-compose + Dockerfile(frontend): pass NEXT_IMAGE_UNOPTIMIZED and BACKEND_INTERNAL_URL envs
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.