david_bai
27375c1a4d
- Replace hardcoded Tailwind colors (bg-white, bg-gray-50/100, text-gray-, border-gray-, divide-gray-*, text-blue-600/800, bg-blue-50) with design tokens (bg-card, bg-muted, text-foreground, text-muted-foreground, border-
border, text-primary, hover:bg-accent, bg-primary/10).
- ClipboardApp: update RichTextEditor toolbar/editor, FileUploadHandler, ShareCard, FileListDisplay, SendTabPanel, RetrieveTabPanel, FileTransferButton.
- Blog UI: unify styles in list page, tag page, post page, ArticleListItem, and TableOfContents.
- MDX/prose: normalize pre/code/table/blockquote/lists and figure captions; switch rehype table divider to theme token.
- Misc: adjust HomeClient and HowItWorks copy colors to tokens.
- No functional changes; light mode parity; improved contrast and consistency in dark mode.
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.