https://github.com/mscbuild/todo-listapp
A React.js Todo app with a wealth of features, including sharing tasks via link, P2P syncing via WebRTC, theme customization, and offline use as a PWA.
https://github.com/mscbuild/todo-listapp
ai-agents assistant design design-system developer manager modern responsive task-manager todo-app todolist todolist-application website windows
Last synced: 28 days ago
JSON representation
A React.js Todo app with a wealth of features, including sharing tasks via link, P2P syncing via WebRTC, theme customization, and offline use as a PWA.
- Host: GitHub
- URL: https://github.com/mscbuild/todo-listapp
- Owner: mscbuild
- License: mit
- Created: 2025-10-17T18:48:21.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-10-18T13:15:23.000Z (8 months ago)
- Last Synced: 2025-10-18T21:31:58.203Z (8 months ago)
- Topics: ai-agents, assistant, design, design-system, developer, manager, modern, responsive, task-manager, todo-app, todolist, todolist-application, website, windows
- Language: TypeScript
- Homepage: https://todo-listapp-indol.vercel.app
- Size: 167 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
# Todo list App
**A fast and modern Todo app built with React, featuring task sharing via link, P2P Task Sync with WebRTC, theme customization, offline usage as a PWA, and caching for smooth performance.**
## [Todo app Link](https://todo-listapp-indol.vercel.app/ )
## 💻 Tech Stack
-
React
-
Typescript
-
Vite
-
Vitest
-
Emotion
-
Material UI (MUI)
## ⚡ Features
### 🔗 Share Tasks by Link or QR Code
Easily share your tasks with others using a link or QR code.
**[Example Link](https://react-cool-todo-app.netlify.app/share?task=N4IgJg9gdgpiBcAzAhgGwM4wDQgA4EspYwEAXAJwFdsQpkBbOeEAdRgCN19SYACAERgA3GKgi5GUUiBxgY6AMbl8uUvmgIQAYXIxkPXsl6pkUMIQDmvXMgt8A7twAWvAEp6FpAHQArdL0QIcl4FVHwYKS9eJ1JSXHR4AHpE+1SvAE8ISlJKdhgvBQh6FP0FJwB+IQBedgBZAGsoRABpAA0ASQAxAEEADgAyUiqAJgBmdH7kdgB9MtNYVCrEXRgtCDktBlwvIIsZEBh6CB98TQBGRABOMDOAWgvRxAVb4YAGV7B7xAAWdnZ9wpiciaADE7AAbMNvohEPswPomCA3sMAKy3V7fF6vAAqrzO8DOl3gr3BXleAHZRgAtOF6MBhWCaZFojEvUa4-FnXrE15k940nAKBEWILpBAAbVA+BIzFew0uwwU7GQaMQ4Jgw1u3zOCkx7BRyHJtwUKMuyFeyGQMAUiBgo32dEYmhYQXq+0Ox1OzAeGoBECBoKhvRgMJAAF8sFKZWdwb1yWdUdryd9waMyaMcI7EWtzFA9jgPSdzogDaqYK9YYL-UFQeCbsNQ2GALo4EzoUgAZWQIiZcpZmLeHPgb3go15oxR1PDQA&userName=Maciej)**
### 🤖 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](https://docs.google.com/document/d/1VG8HIyz361zGduWgNG7R_R8Xkv0OOJ8b5C9QKeCjU0c/view?pli=1&tab=t.0#heading=h.witohboigk0o)
Code: [src/components/EmojiPicker.tsx](https://github.com/maciekt07/TodoApp/blob/main/src/components/EmojiPicker.tsx#L116)
### 🔄 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](https://github.com/maciekt07/TodoApp/blob/main/example-import.json)
### 📴 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:
```bash
npm run generate-splash
```
Code: [scripts/splash-screens](https://github.com/maciekt07/TodoApp/blob/main/scripts/splash-screens)
## 👨💻 Installation
To install and run the project locally, follow these steps:
1. Clone the repository:
```bash
git clone https://github.com/mscbuild/todo-listapp.git
```
2. Navigate to the project directory:
```bash
cd todo-listapp
```
3. Install the dependencies:
```bash
npm install
```
4. Start the development server:
```bash
npm run dev
```
The app will now be running at [http://localhost:5173/](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
## License
Licensed under [MIT](https://github.com/mscbuild/todo-listapp/blob/main/LICENSE).