yethranayeh / idealist

ideaList is a to-do list web application that is designed with a mobile first approach

ideaList

Welcome to ideaList repo! 🙋‍♂️

ideaList is my to-do list project for The Odin Project Todo List assignment. The application is designed with a mobile first approach, so there may be visual discrepancies on larger screens, which will be updated in due time.

Technologies Used

• pubsub-js
• date-fns
• Flatpickr
• webpack

Features

Lighthouse Mobile Report

1. 📱 Progressive Web Application: ideaList is designed primarily for mobile devices,
   • It can be installed to the home page of your device like a native application downloaded from the store.
   • In addition, once the app is installed to the home screen, it can be used without any internet connection.
2. Each to-do can have details like description, additional notes and tags, which can be revealed with the Details button on each to-do
   • Since there is currently no confirmation prompts, the delete buttons for each to-do are also hidden in detailed view to prevent accidental deletion.
3. The application has a detailed filtering system that can deliver to-do items based on both general and very specific filter combinations.

App Limitations

• Though it is natural for any time-based applications to have notifications to remind the user of the upcoming events, this is a tricky problem to solve for Progressive Web Applications as they are not native mobile applications. At this time, push notifications for desktop browser and Android seem achievable, however for iOS devices it does not seem possible.
• Max amount of tags that can be selected for a Todo is 3.
• Max character length for a new tag is 16.

Possible Feature Additions

These features may or may not be implemented in the future versions of the app.

• Checklists for todos
• Sorting by date/priority/alphabetical order.
• Push notification reminders for Desktop browsers and Android devices

Known Issues

1. Though no earlier days before today are allowed in due dates, it is possible to create a to-do at an hour that has already passed.
2. Once the Flatpickr is instantiated on New Todo form, the calendar language will be unaffected by live language switches. Though Flatpickr provides a redraw() method, this unfortunately does not rewrite month names in the switched local language.

   A possible solution might be to destroy() the current instance and replace it with another that has the active locale language.

Credits

• App Brand:
  • Font - Quicksand-Regular by Andrew Paglinawan
  • Icon - Tick by Kenneth Chua from NounProject.com
• Font Awesome license
• Hamburger Menu by ainalem
• Search Button by ShortCode
• i18n:
  • JavaScript code snippets from Mohammad Ashour's article.
  • CSS code for the language switcher by magnificode
• Todo Filtering:
  • Code snippet for checking if arrays are equal by enyo
• Todo Create Form:
  • pseudo-table trick by hennson to visually place label above input while allowing CSS sibling selectors to work behind the scenes.
  • Input field character length limiting code snippet by will
• Todo Display:
  • Todo completion checkbox code snippet by aaroniker
• PWA:
  • Article by sheshanth to make the App installable.