The time blocking app

Time blocking app is made with Flutter,it is a task management tool designed to help users stay organized and productive for personal use. With features inspired by ClickUp, Apple Reminders, TickTick, and Sorted app, users can effortlessly create tasks, set due dates, priorities, and categorize tasks using tags. With a user-friendly interface,this app streamlines task management for individuals, ensuring efficient and stress-free workflow.

• Webiste: https://timeblocking.web.app/
• Widgets book: https://design-timeblocking.web.app/

Desktop	Mobile

---

Table of content

• The time blocking app
• Table of content
  • Key Features
    • TODO Features
  • Working Process
    • A) Planning
      • 1-Opportunity canvas
      • 2-Evaluating idea using Cynefin framework
      • 3-Event Storming and User Stories
      • Competitors analysis
      • => Resources and tools used for planning
    • B) UI/UX Design
      • MVP Wireframes
      • High fedielty design
      • => Resources and tools used for UI/UX design
    • C) Development
      • Architecture
      • Resources and tools used
        • for Front end Development
        • for Backend Development
        • for Testing
        • for Deployment and Hosting
        • Others

Key Features

• Task creation using time blocking method as the calendar is the main view
  • You can create tasks with start date and due date ,add tags to tasks, set task status and set task priority
  • task are inside lists and folders
• Different but simple views
  • Calendar view in schedule page
  • view tasks in single list
  • view tasks that are tagged with a specific tag
• Available for web to access from any device www.timeblocking.web.app

TODO Features

• Error handling
• Recurring task
• Duplicate tasks
• Add attachments to tasks
• Subtasks
• Checklists
• Markdown description
• Add location to task
• Map view of tasks
• Voice input of tasks
• Create tasks with email
• Tasks manager
• Auto scheduler
• Trash page
• Smart complete creating task with shortcuts to select list ,tags, priority and status
• Key shortcuts
• Copy list of tasks as text
• Settings page

Working Process

A) Planning

When planning for this project,I followed idea to MVP Series by Essam Cafe and created this Miro board though the series is more about making a product as a team not solo,I still found it useful

1-Opportunity canvas

An opportunity canvas is a one-pager that helps you think through the problem you're solving, the solution you're proposing, and the impact it will have on your users and your business. It's a great tool for validating ideas and ensuring that you're building the right thing.

It has four key areas:

• Problem: What problem are you solving for your users?
• Solution: What is your proposed solution to the problem?
• Impact: What impact will your solution have on your users and your business?
• Metrics: How will you measure the success of your solution?

Opportunity canvas

2-Evaluating idea using Cynefin framework

Cynefin framework explanation

Cynefin framework

3-Event Storming and User Stories

Features,User stories, Tasks and Spikes are inside github as issues, The time blocking app overview includes all of them ordered

Competitors analysis

	Time blocking app	Sorted	Apple Reminder	Fantastical	Ticktick	Clickup
For personal use	Yes	Yes	Yes	Yes	Yes	too Complicated for personal use and the app is to cluttered
task and events are handled differently	No	Yes	only tasks are available	Yes	Yes	No
Available for Web	Web only	iPhone and Mac only	iPhone and Mac and web only (with iCloud account)	No	Yes	Desktop, iPhone and Android
Pricing	Free	Free and Paid	Free	Paid	Calendar is Paid	Free and Paid

=> Resources and tools used for planning

• Guide: idea to MVP Series by Essam Cafe
• Visual Planning: miro.com
• Chatgpt

B) UI/UX Design

MVP Wireframes

Splash screen

Onboarding

Schedule screens

Add a task

Lists

Tags

Settings screen

High fedielty design

Onboarding

Desktop	Mobile

Schedule

Desktop	Mobile

Add / Edit task

Desktop	Mobile

List/Lists page

Desktop	Mobile

Settings

Desktop	Mobile

=> Resources and tools used for UI/UX design

• Design : Figma
• Design system : Rayna ui design system
• Generate icon data : Flutter-icons.com and iconly

C) Development

Architecture

The archtiecture is based on Uncle bob's archtiecture

Resources and tools used

for Front end Development

• Framework: Flutter/Dart
• State Management : Bloc with equatable and dartz
• Navigation : go router
• Log : logger
• Local storage : shared preferences
• Localization : easy localization
• Analytics : firebase analytics
• Catalog for widgets : widgetbook, available at design-timeblocking.web.app
• timezone : timezone
• Calendar : syncfusion_flutter_calendar

for Backend Development

• Clickup Public API
• Render as proxy server since Clickup APIs has CORS

for Testing

• Test
• Flutter test
• Mochito
• Golden toolkit

for Deployment and Hosting

• Hosting: Firebase for website

Others

• Project Management: Github issues with https://zube.io/