You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
It combines a focus timer, Pomodoro workflows, a Kanban board, and wellness-aware break suggestions in a frontend-only PWA that works well on desktop, tablet, and mobile.
18
+
</div>
19
+
20
+
---
6
21
7
22
## Overview
8
23
9
-
FocusFlow is built around a simple idea: productivity tools should support attention without ignoring recovery. The app helps users plan tasks, run focused sessions, track meaningful daily progress, and take small movement or wellness breaks without adding noise to the workflow.
24
+
FocusFlow is a frontend-only productivity app designed for people who want structure without extra noise. It helps users plan tasks, run focused sessions, follow Pomodoro rhythms, and take short recovery breaks without leaving the workspace.
25
+
26
+
The product philosophy is simple: focus and recovery belong in the same workflow. FocusFlow keeps productivity metrics practical, wellness prompts lightweight, and all user data local to the browser.
27
+
28
+
## Why FocusFlow
10
29
11
-
The application is fully client-side and offline-first. User preferences, sessions, tasks, wellness exercises, language settings, and productivity state are persisted locally with safe restoration and fallback behavior.
30
+
-**Focused by default:** start sessions quickly, track meaningful progress, and keep the active task visible when needed.
31
+
-**Wellness-aware:** use Wellness or Hybrid mode for movement-friendly breaks and concise exercise suggestions.
-**Installable:** runs as a desktop or mobile PWA after the production build is deployed.
34
+
-**Portfolio-ready:** built as a polished Angular application with realistic product constraints.
12
35
13
36
## Features
14
37
15
-
- Focus timer with completion tracking and daily productivity stats
38
+
### Productivity
39
+
40
+
- Focus timer with completion, skipped-session, streak, and focus-minute tracking
16
41
- Pomodoro mode with configurable focus, short break, and long break durations
17
-
- Wellness mode for movement-friendly work sessions
18
-
- Hybrid mode that blends focus sessions with active recovery prompts
19
-
- Kanban workspace with task creation, editing, completion, archiving, restore, filtering, sorting, and drag/drop-ready workflows
20
-
- Custom wellness exercises by category, including stretching, mobility, cardio, strength, and Pilates
21
-
- Sound personalization with volume, preset, and repeat alert settings
22
-
- Runtime internationalization for English, Spanish, and French
23
-
- Installable PWA support with manifest, service worker, offline asset caching, and app-like standalone behavior
24
-
- LocalStorage-backed offline persistence with defensive normalization for legacy or malformed data
25
-
- Responsive layouts for desktop, installed PWA windows, tablets, and mobile screens
26
-
- Accessibility-minded interaction design with keyboard navigation, focus handling, labels, and live announcements
42
+
- Kanban workspace with create, edit, complete, archive, restore, filter, sort, and drag/drop-ready task flows
43
+
- Daily productivity stats derived from canonical task and session history
44
+
- Sound presets, volume control, and optional repeating completion alerts
45
+
46
+
### Wellness
47
+
48
+
- Wellness mode for recovery-oriented sessions
49
+
- Hybrid mode for focus sessions with active break suggestions
50
+
- Custom wellness exercises grouped by stretching, mobility, cardio, strength, and Pilates
51
+
- Recovery Rhythm insights for completed and omitted recovery interactions
52
+
- Mode-aware session notifications with concise recovery suggestions
53
+
54
+
### PWA & Offline
55
+
56
+
- Angular service worker integration
57
+
- Installable standalone app behavior
58
+
- Offline asset caching after first visit
59
+
- LocalStorage persistence with defensive restore logic
60
+
- Desktop, tablet, mobile, and installed PWA responsive polish
61
+
62
+
### Accessibility & i18n
63
+
64
+
- Keyboard-friendly primary flows
65
+
- Visible focus states and focus restoration
66
+
- ARIA labels and live announcements for meaningful state changes
67
+
- Runtime language switching for English, Spanish, and French
68
+
- Responsive controls designed to remain usable on small screens
27
69
28
70
## Tech Stack
29
71
30
-
- Angular
31
-
- TypeScript
32
-
- RxJS
33
-
- SCSS
34
-
- Angular CDK
35
-
- Angular service worker / PWA support
36
-
- ngx-translate
37
-
- Vitest / Angular test runner
38
-
- Cypress
72
+
| Area | Tools |
73
+
| --- | --- |
74
+
| Framework | Angular |
75
+
| Language | TypeScript |
76
+
| State & async | RxJS |
77
+
| Styling | SCSS |
78
+
| UI behavior | Angular CDK |
79
+
| PWA | Angular service worker, web app manifest |
80
+
| i18n | ngx-translate |
81
+
| Testing | Angular test runner, Vitest, Cypress |
39
82
40
83
## Architecture
41
84
42
-
FocusFlow uses a frontend-only Angular architecture with feature modules for the timer and Kanban workspace. State is owned by focused Angular services and exposed through RxJS streams so UI components can stay mostly presentational.
85
+
FocusFlow uses a modular Angular structure with service-owned state and focused UI components.
43
86
44
-
The app does not require a backend. Persistence is handled through localStorage with validation and normalization on restore. Productivity metrics are derived from canonical session and task history instead of separate drifting counters.
87
+
```text
88
+
src/app/
89
+
features/
90
+
kanban/
91
+
components/
92
+
models/
93
+
services/
94
+
timer/
95
+
components/
96
+
models/
97
+
services/
98
+
models/
99
+
services/
100
+
```
45
101
46
-
Core architectural choices:
102
+
Architecture highlights:
47
103
48
-
-Client-side only, deployable as static assets
49
-
-Offline-first PWA behavior after the first visit
50
-
-Service-owned state for timer, session history, tasks, wellness preferences, shortcuts, language, and workspace mode
51
-
-Derived productivity stats for completed sessions, skipped sessions, focus minutes, streaks, completed tasks, and recovery rhythm
52
-
-Lightweight persistence with safe fallbacks instead of sync infrastructure
104
+
-Frontend-only application deployable as static assets
105
+
-LocalStorage persistence with validation and normalization on restore
106
+
-Canonical session and task history for productivity metrics
107
+
-RxJS streams for timer, session, task, shortcut, language, wellness, and workspace-mode state
108
+
-No backend, native wrapper, external store, or sync requirement
53
109
54
110
## Installation
55
111
@@ -59,13 +115,13 @@ Install dependencies:
59
115
npm install
60
116
```
61
117
62
-
Run the development server:
118
+
Run the local development server:
63
119
64
120
```bash
65
121
npm start
66
122
```
67
123
68
-
Open the app:
124
+
Open:
69
125
70
126
```text
71
127
http://localhost:4200/
@@ -77,86 +133,88 @@ Create a production build:
77
133
npm run build
78
134
```
79
135
80
-
Run the unit test suite:
136
+
Run unit tests:
81
137
82
138
```bash
83
139
npm test -- --watch=false
84
140
```
85
141
86
-
Run Cypress E2E tests:
142
+
Run Cypress:
87
143
88
144
```bash
89
145
npm run e2e
90
146
```
91
147
92
148
## PWA Support
93
149
94
-
FocusFlow includes Angular service worker support and a configured web app manifest.
150
+
FocusFlow is configured as an Angular PWA for production builds.
95
151
96
-
The production build supports:
152
+
Supported behavior:
97
153
98
-
- Desktop installation in Chromium-based browsers such as Chrome and Edge
99
-
- Android installation through supported mobile browsers
154
+
- Desktop install in Chrome and Edge
155
+
- Android install in supported mobile browsers
100
156
- Standalone app display mode
101
157
- Offline reload after the first successful visit
102
158
- Cached application shell and static assets
103
-
- Local persistence for tasks, settings, wellness exercises, language, theme, and productivity history
159
+
- Local persistence for tasks, sessions, settings, language, theme, sounds, and wellness exercises
104
160
105
-
Because the app is frontend-only, offline support is intentionally local-first. There is no account system or cloud sync layer.
161
+
The app intentionally remains local-first. There is no account system, backend sync, or server dependency.
106
162
107
163
## Accessibility
108
164
109
-
Accessibility is treated as part of the product surface, not as a separate mode.
110
-
111
-
The app includes:
165
+
FocusFlow includes accessibility support across the main interaction paths:
112
166
113
-
- Keyboard-accessible primary flows
114
-
- Visible focus states
115
-
- Focus restoration for settings and dialog-like interactions
167
+
- Keyboard navigation for settings, task controls, timer actions, and modal-like flows
168
+
- Focus restoration after settings interactions
116
169
- Escape handling where appropriate
117
-
- Form labels and accessible control names
118
-
- ARIA live announcements for important timer and task state changes
119
-
- Responsive layouts that preserve readable controls on small screens
120
-
- Reduced-motion considerations in the UI layer
170
+
- Screen-reader labels for controls and form fields
171
+
- ARIA live regions for timer, task, and wellness announcements
172
+
- Reduced interruption design for wellness prompts and completion states
121
173
122
174
## Screenshots
123
175
124
-
Screenshots are intentionally left as placeholders so they can reflect the final deployed build.
125
-
126
-
### Desktop
176
+
Screenshots should be captured from the deployed production build so they reflect the final PWA behavior.
127
177
128
-
Add a desktop screenshot here.
178
+
| View | Placeholder |
179
+
| --- | --- |
180
+
| Desktop workspace | Add desktop screenshot |
181
+
| Mobile layout | Add mobile screenshot |
182
+
| Wellness mode | Add wellness mode screenshot |
183
+
| Kanban workspace | Add Kanban screenshot |
184
+
| Installed PWA | Add installed PWA screenshot |
129
185
130
-
### Mobile
186
+
##Deployment Notes
131
187
132
-
Add a mobile screenshot here.
188
+
FocusFlow builds to static assets and can be hosted on platforms such as GitHub Pages, Vercel, Netlify, or any static hosting provider.
133
189
134
-
### Wellness Mode
190
+
Recommended release checks:
135
191
136
-
Add a wellness mode screenshot here.
137
-
138
-
### Kanban Workspace
192
+
```bash
193
+
npm ci
194
+
npm run build
195
+
npm test -- --watch=false
196
+
```
139
197
140
-
Add a Kanban workspace screenshot here.
198
+
For PWA behavior, validate installability and offline reload from a production build over HTTPS or localhost.
141
199
142
200
## Future Improvements
143
201
144
-
FocusFlow is intentionally complete as a local-first PWA, but a few realistic extensions would fit the product:
202
+
The current app is complete as a local-first PWA. Realistic future additions could include:
145
203
146
-
- Optional cloud sync for users who want multi-device continuity
204
+
- Optional cloud sync for multi-device continuity
205
+
- Import/export for local data portability
147
206
- Richer productivity and recovery analytics
148
207
- More built-in wellness exercise presets
149
-
- Optional import/export for local data portability
150
208
- Additional language packs
151
209
152
-
## Release Notes
210
+
## Project Notes
153
211
154
-
FocusFlow is designed as a polished portfolio project that demonstrates production-minded Angular development:
0 commit comments