david_bai
0621fb27db
- Add generic JSON-LD injector component and builders - components/seo/JsonLd.tsx - lib/seo/jsonld.ts - Inject Organization and WebSite JSON-LD globally in [lang]/layout - Inject WebApplication JSON-LD on the localized home page - Localize description/url/inLanguage and set alternateName ["PrivyDrop", "PrivyDrop APP"] - Inject FAQPage JSON-LD only on /[lang]/faq (not on home) - Build Q&A from messages.text.faqs - Inject BlogPosting + BreadcrumbList on blog post pages - Use frontmatter.cover as image, localized breadcrumbs Notes - Use stable @id anchors (/#organization, /#website, /[lang]#app, /[lang]/blog/[slug]#post) - Respect multi-language setup across en/zh/ja/es/de/fr/ko - SameAs limited to GitHub and X as provided - Site URL resolved via NEXT_PUBLIC_SITE_URL or defaults to https://www.privydrop.app
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.