Firetask : a shared todolist PWA

Summary

• Installation
  • Requirements
  • Running
• Application preview
• Basic features
• Advanced features
  • UI
  • Settings
  • Profile
  • Lists and Tasks
  • Others
• Plugins used
  • Mapbox
  • Capacitor official plugins
  • Capacitor community plugins

1 - Installation

Requirements

npm install -g @angular/cli
npm install -g ionic
npm install @capacitor/core @capacitor/cli

Running

git clone https://github.com/chouaibMo/ionic-todolist-app.git
cd todoList
npm install 
ionic serve

2 - Preview

Live demo

   click here   or   here

First launch

Login/Register

Lists/Tasks

Others (profile, settings ...)

3 - Basic features

- Email sign in and registration
- Email verification
- Password recovery
- Google authentication
- Facebook authentication
- Form errors validation
- Form errors handling (with toasts)
- Firestore security rules
- Create/Delete a list
- Create/Delete a task
- searchbar for lists and tasks
- Share lists (permissions : readonly, read and write, share)
- List progress with animation
- Profile page : show & update user informations
- Settings page : enable/disable provided functionalities
- Routing guards

4 - Advanced features

UI :

- Progressive web app 
- Erogonomic UX/UI design
- Custom first launch tutorial 
- Custom application icon
- Custom plashScreen (splash-screen plugin)
- Status bar updated when mode changes (dark/light)
- Show toast when network status changes (network plugin)
- Loading indicator (spinner) during auth operations 

Settings :

- Enable/disable dark mode
- Enable/disable delete confirmation (for lists and tasks)
- Enable/disable Haptics/Vibrations (haptics plugin)
- Enable/disable text to speech (text-to-speech plugin)
- Select speech speed (text-to-speech plugin)
- Select speech language (supported only on web platform, english for iOS and Android)
- Settings stored in local storage (local storage plugin)

Profile :

- Update user information.
- Update user picture : take picture - choose from galery - remove (camera plugin + action-sheet)

Lists and Tasks :

- Offline mode (create/delete lists or tasks)
- Show contributors (readers and writers) of each list
- Add tasks with address ( address search bar with autocompletion)
- Cast address to long/lat using geocoding (mapbox package)
- Speak if text-to-speech enabled in settings (text-to-speech plugin)
- Show address in a mapbox with a marker (if address provided in task)
- Show user localisation if available (geolocation plugin)

Others :

- Call members with provided phone number (call-number plugin)
- Open in-app browser (browser plugin)
- Share message with other apps (share plugin)

5 - Plugins used :

Mapbox (mapbox)

- ✅ mapbox-gl-js
- ✅ mapbox-gl-directions

Capacitor official plugins (capacitor-plugins)

- ✅ @ionic/pwa-elements
- ✅ @capacitor/storage 
- ✅ @capacitor/local-notifications    
- ✅ @capacitor/share                         
- ✅ @capacitor/camera                      
- ✅ @capacitor/network  
- ✅ @capacitor/haptics
- ✅ @capacitor/geolocation               
- ✅ @capacitor/browser                    
- ✅ @capacitor/action-sheet      
- ✅ @ccapacitor/splash-screen
- ✅ @capacitor/status-bar
- ✅ @ionic-native/call-number
- 🆘 capacitor-biometric-auth (Not working)

Capacitor community plugins (capacitor-community)

- ✅ @capacitor-community/text-to-speech      
- ✅ @capacitor-community/facebook-login