TodoApp

maciekt07MIT更新放缓

基于 React 的待办应用，支持通过链接分享任务、用 WebRTC 做 P2P 同步，还能自定义主题并作为 PWA 离线使用。

📝 React.js todo app with many features, including sharing tasks via link, P2P synchronization using WebRTC, theme customization and offline usage as a PWA.

暂无版本389star237fork同步于 2026-11-07 07:33 UTC

待办应用 P2P同步 WebRTC PWA离线任务管理

对比 GitHub 官网 mui p2p productivity productivity-app react-todo

怎么上手

由 README 提炼，执行前请确认

原文

git clone https://github.com/maciekt07/TodoApp.git
cd TodoApp
npm install
npm run dev

硬件要求按 README 说明

README 未说明，仅需能运行 Node.js 与浏览器的环境；AI 表情建议功能需 Chrome Canary 128+ 并安装 Gemini Nano 模型

下载：源码 zip·GitHub Releases（安装包）本站不镜像安装包

项目说明

由 README 自动翻译提炼

没人工点评？写下你的经验

React 待办应用，支持链接分享任务、WebRTC 点对点同步和 PWA 离线使用

基于 React 的待办应用，支持通过链接分享任务、用 WebRTC 做 P2P 同步，还能自定义主题并作为 PWA 离线使用。

核心能力

通过链接或二维码分享任务
用 WebRTC 点对点同步设备间数据
支持多套配色主题与深色模式
可安装为 PWA 并离线使用
支持 JSON 文件导入导出任务

容易踩的坑

AI 表情建议依赖 Chrome Canary 128+ 且需单独安装 Gemini Nano 模型；移动端测试需用 npm run dev:host 以 HTTPS 启动才能使用摄像头；开发环境默认端口为 5173，PWA 功能在开发模式下需额外配置

内容由模型根据 README 生成，可能不完整或不准确，以官方文档为准。看原文 README

用户点评

登录用户的真实使用记录，可按版本和硬件筛选

共 0 条

还没有人点评。第一个说出真实体验的人最有价值。

README 原文

未翻译

在 GitHub 打开

📝React.js Todo App

https://react-cool-todo-app.netlify.app/

GitHub code size in bytes GitHub created at GitHub last commit

💻 Tech Stack

⚡ Features

🔗 Share Tasks by Link or QR Code

Easily share your tasks with others using a link or QR code.

Example Link

🤖 AI Emoji Suggestions

This feature uses Chrome’s experimental window.LanguageModel API powered by Gemini Nano — an on-device LLM.

⚠️ Requires Chrome Canary 128+ with the Gemini Nano model installed - Setup guide

Code: src/components/EmojiPicker.tsx

🔄 P2P Task Sync with WebRTC

Securely sync all the data between devices using peer-to-peer WebRTC connections. Devices pair via QR code, and your data is transferred directly between them — only minimal server involvement for connection setup, with no data stored or processed in the cloud.

Tasks and categories are auto-merged based on recent edits or deletions
For settings and other data, you choose which device to sync from

🎨 Color Themes & Dark Mode

Choose from various color themes and toggle between light and dark modes to suit your preferences.

🗣️ Task Reading Aloud

Option to have tasks read aloud using the native SpeechSynthesis API, with a selection of voices to choose from.

📥 Import/Export Tasks

Users can import and export tasks to/from JSON files. This feature allows users to back up their tasks or transfer them to other devices easily. Example Import File

📴 Progressive Web App (PWA)

This app is a Progressive Web App (PWA), which means it can be installed on your device, used even when you're offline and behave like a native app with shortcuts and app badges.

🔄 Update Prompt

The app features a custom update prompt that notifies users when a new version is available, allowing for easy refresh to access the latest improvements.

📱 Custom Splash Screens

The app automatically generates custom splash screens from a single HTML template for various iOS and iPadOS devices in both light and dark modes. These splash screens provide a smooth, native-like launch experience when the app is opened as a PWA.

To generate splash screens:

npm run generate-splash

Code: scripts/splash-screens

👨‍💻 Installation

To install and run the project locally, follow these steps:

Clone the repository:

git clone https://github.com/maciekt07/TodoApp.git

Navigate to the project directory:

cd TodoApp

Install the dependencies:

npm install

Start the development server:

npm run dev

The app will now be running at http://localhost:5173/.

[!TIP] For mobile device testing, use npm run dev:host to preview the app on your local network with HTTPS (required for camera features) and a QR code in the terminal for quick access. To enable PWA features in development, see vite.config.ts.

📷 Screenshots

🚀 Performance

Credits

Made with ❤️ by maciekt07, licensed under MIT.