Scribd
Upload
6 views2 pages

Task Manager App: Mobile UI & Notifications

The document outlines the development of a Task Manager app with a focus on frontend and backend connectivity, including a notification workflow for task deadlines using JavaScript and Firebase. It describes a mobile-friendly UI layout and provides a folder structure for the project, detailing the technologies used such as Flask for the backend and HTML/CSS/JS for the frontend. The connection between frontend and backend is established through HTTP requests, allowing for dynamic updates of tasks and notifications.

Uploaded by

titli89727
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views2 pages

Task Manager App: Mobile UI & Notifications

The document outlines the development of a Task Manager app with a focus on frontend and backend connectivity, including a notification workflow for task deadlines using JavaScript and Firebase. It describes a mobile-friendly UI layout and provides a folder structure for the project, detailing the technologies used such as Flask for the backend and HTML/CSS/JS for the frontend. The connection between frontend and backend is established through HTTP requests, allowing for dynamic updates of tasks and notifications.

Uploaded by

titli89727
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

Task Manager App – Frontend &

Backend Connection (Mobile Friendly)


1. Notification Workflow
To implement notifications (like mobile apps), the app must include a mechanism to check
task deadlines and trigger alerts. This can be done using JavaScript Notification API in
frontend or push notification service for mobile (like Firebase Cloud Messaging).

Steps:
1. User creates a task with a deadline.
2. Backend stores the task and deadline in the database.
3. Frontend regularly checks current time vs. task deadlines using JavaScript.
4. If deadline is near or missed, trigger `[Link]()` in browser.
5. Show alert to the user via native notification.

2. Mobile UI Layout (Described)


The mobile layout is responsive and clean:
- Top: Header (Task Manager title)
- Middle: Task List with deadline indicators (like cards)
- Bottom: Add Task button (floating or fixed)
- Notifications: Appear as pop-ups or top bars
- Optional: Tab bar with Dashboard | Add Task | Completed

3. Folder Structure for Task Manager Project


project/
├── [Link] # Main Flask backend
├── templates/ # HTML files (Jinja templates)
│ ├── [Link]
│ └── [Link]
├── static/ # JS, CSS, icons, images
│ ├── [Link]
│ └── [Link]
├── database/ # SQLite or DB scripts
│ └── [Link]
├── utils/ # Notification scheduler or helper functions
├── [Link] # Project dependencies
└── [Link] # Project instructions
4. Technologies Used and Their Connections
Frontend:
- HTML/CSS/JS: For creating forms and showing tasks
- JavaScript Fetch API: To interact with backend using AJAX
- Notification API: For showing task alerts

Backend:
- Flask (Python): Handles routes like /add-task, /dashboard
- SQLite: Stores tasks and deadlines

Connection:
- HTML forms or JS fetch() send HTTP requests (POST/GET)
- Flask receives, processes, updates DB
- Flask sends back updated data (HTML or JSON)
- Frontend updates UI accordingly

You might also like