Skip to content

Latest commit

 

History

History
134 lines (83 loc) · 7 KB

README.md

File metadata and controls

134 lines (83 loc) · 7 KB

📝React.js Todo App

Netlify Status GitHub code size in bytes GitHub created at GitHub last commit

💻 Tech Stack

💻 Tech Stack

  • react React
  • typescript Typescript
  • vite Vite
  • vitest Vitest
  • emotion Emotion
  • mui 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

Shared Task

🤖 AI Emoji Suggestions

This uses window.ai which is an experimental feature that works only in dev version of Chrome with some flags enabled. More info

Code: src/components/EmojiPicker.tsx

AI Emoji

🎨 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.

Task Reading Aloud

📥 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.

taskbar

🔄 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.

update prompt

📱 Custom Splash Screens

The app automatically generates custom splash screens 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.

Splash Screen Example

To generate splash screens: npm run generate-splash

👨‍💻 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.

📷 Screenshots

🚀 Performance

Credits

Made with ❤️ by maciekt07, licensed under MIT.