UI-first development - Build the frontend to discover real user requirements, then add backend as needed with lightweight interface contracts. This allows for agile iteration and rapid prototyping.
10 Daily Habits: Maximum habits for focused tracking
10-Day Streaks: Milestone-based achievement system
Application Overview
10 to Win is a React Native mobile productivity application built with Expo. It unifies task management ("10 to Win" module) and habit tracking ("10 for Life" module) within a single, intuitive interface.
Architecture
Component
Technology
Frontend Framework
React Native + Expo SDK
Navigation
React Navigation 7+ (Bottom Tabs + Stack)
State Management
React Context API
Animations
React Native Reanimated
Local Storage
AsyncStorage with AES-256 encryption
Server Database
PostgreSQL with Drizzle ORM
Payments
Stripe (web), Apple/Google IAP (mobile)
Navigation Structure
The app uses a MainTabNavigator with six core tabs, each containing its own stack navigator:
Home - Main dashboard with action buttons
Top 10 - Highest priority tasks
Tasks - Full task list management
Habits - Daily habit tracking
Modes - Task mode selection
Settings - App configuration
A Floating Action Button provides quick task creation access from any screen.
Task Management System (10 to Win)
Priority Algorithm
The core algorithm calculates task priority scores based on:
Urgency (1-5): How soon the task needs attention
Deadline Proximity: Time remaining until due date
Importance (1-5): Task significance level
Future Impact: Divest-Invest spectrum for long-term value
Referral Tracking: Monitor referral program performance
RBAC Roles
Role
Permissions
Master
Full system access, including RBAC management
Admin
User management, content, analytics
User
Limited admin access
Viewer
Read-only access to dashboards
Access Note
Admin dashboard must be accessed via Express server (port 3001) for API functionality to work properly.
User Dashboard
User-facing dashboard at /dashboard/index.html provides:
Account settings
Password management
Session management
Personal statistics
Technical Decisions
Data Storage
Local: AsyncStorage with optional AES-256 encryption
Server: PostgreSQL with Drizzle ORM
Security: Encryption keys stored in expo-secure-store
Migration: Automatic migration from legacy encryption
State Management
React Context API chosen for simplicity and maintainability:
TasksContext - Task state and operations
HabitsContext - Habit state and operations
SettingsContext - User preferences
AlertContext - Modal alerts
Navigation
React Navigation 7+ with nested navigators
Bottom tabs contain Stack navigators per tab
Floating Action Button overlay for quick task creation
Theming
Hook-based provider (useTheme)
System/Light/Dark mode selection
Color definitions in constants/theme.ts
API URL Handling
Config.getApiUrl() rewrites URLs to handle VS-REP environment quirks (replaces -00- with -8008- in Replit hostname).
Key Files Reference
Screens
Main Dashboard
HomeScreen.tsx
Task Management
TasksScreen.tsx
Habit Tracking
HabitsScreen.tsx
Priority Tasks
Top10Screen.tsx
Task Modes
ModesScreen.tsx
Settings
SettingsScreen.tsx
Data Import
ImportScreen.tsx
App Info
AppInfoScreen.tsx
Contexts
Task State
TasksContext.tsx
Habit State
HabitsContext.tsx
User Preferences
SettingsContext.tsx
Modal Alerts
AlertContext.tsx
Server
API Endpoints
server/routes.ts
Database Schema
shared/schema.ts
Public Assets
Admin Dashboard
/admin/index.html
User Dashboard
/dashboard/index.html
Import Templates
/templates/
User Documentation
/docs/
Change Log
Complete development history from Day 1 with exact timestamps (UTC). Click on any entry to see details including the initial prompt and response.
Interactive Change Log
Each entry below is clickable. Click to expand and see the original prompt/request, the response/implementation details, and files changed.
Loading live stats...
Static Archive (Pre-Database)
The entries below are the static changelog archive from before the real-time tracking system was implemented. New entries appear in the dynamic section above.
Day 13: December 4, 2025
UI Fixes, Mobile URL Routing & Drag-and-Drop Reordering
Expand/Collapse All
10:00Fixed checkbox overflow in "How it Works" modal on HomeScreen
Initial Prompt
The checkbox in the "How it Works" modal was running off the edge of the screen on smaller mobile devices.
Response / Implementation
Fixed checkbox overflow with proper flex constraints:
modeHeader: Added flex: 1 to constrain content width
modeHeaderWithCheckbox: Added gap: Spacing.md for consistent spacing
checkbox: Added flexShrink: 0 to prevent shrinking
Result: Header now flexes to available space while checkbox maintains fixed size
Files Changed
screens/HomeScreen.tsx
11:00Fixed Action Button Library not loading on iPhone via Expo Go
Initial Prompt
button library not loading on iphone
Response / Implementation
Fixed iPhone URL routing for Action Button Library:
Problem: Hardcoded production URL didn't work in development
Solution: Use getStaticUrl('/actionbuttonlibrary.html') helper
On web: Returns relative path
On mobile: Builds correct URL from Expo Constants
Works in both development (Expo Go) and production environments
Files Changed
screens/HomeScreen.tsxconstants/config.ts
12:00Implemented drag-and-drop reordering for Action Button Library
Initial Prompt
In the Action Button Library page: the Button Library section: Allow users to drag and the drop cards in the button library to change the order that buttons are displayed on the Home Screen.
Response / Implementation
Comprehensive drag-and-drop functionality for button reordering:
Visual Feedback:
Reorder hint when 2+ buttons selected
Drag handle icons with "Drag to reorder" text
Dragging state: opacity fade, scale down
Drop zone: blue border and background highlight
Desktop Support (HTML5 Drag API):
Events: dragstart, dragend, dragover, dragleave, drop
Swap mode for filled slots, move mode for empty slots
Success message prompts user to save
Files Changed
public/actionbuttonlibrary.html
14:00Updated conversation log and development log for December 4, 2025
Initial Prompt
Please submit all of our latest conversations to the conversation log. Please review the conversation log and update the change log on the development log page.
Response / Implementation
Updated all logs for December 4, 2025 session:
New Conversation Log: Created 2025-12-04-conversation-log.html
Session Focus: UI fixes, mobile URL routing, drag-and-drop
Conversation Index: Added December 4 entry at top
Development Log: Added Day 13 section with 4 changelog entries
17:30Updated conversation logs and development log with December 3 session
Initial Prompt
Please submit all of our latest conversations to the conversation log. Please review the conversation log and update the change log on the development log page.
Response / Implementation
Updated all logs with December 3, 2025 session:
New Conversation Log: Created 2025-12-03-conversation-log.html
18:00Completed comprehensive competitive analysis and industry market research
Initial Prompt
Research competitive analysis and industry market research for the productivity app space. Document market size, growth rates, key trends, and positioning opportunities.
Fixed styling: toggleSegmentLeft on Critical, toggleSegmentRight on Balance
Resolved VoiceCommandButton import error and handleActionButtonPress consistency
Files Changed
screens/HomeScreen.tsxtypes/task.tsreplit.md
20:00Fixed logo path error on Call Transcriber page
Initial Prompt
Fix the logo path error on calltranscriber.html page - the logo is not displaying.
Response / Implementation
Fixed logo path error:
Issue: Navigation logo was referencing /icon.png which doesn't exist
Resolution: Updated logo path from /icon.png to /static/logo.png
Logo now displays correctly in navigation header
Files Changed
public/calltranscriber.html
20:30Final conversation and development log updates for December 3
Initial Prompt
Please submit all of our latest conversations to the conversation log. Please review the conversation log and update the change log on the development log page.
20:50Redesigned feedback system into three separate admin areas with status tracking and conversation notes
Initial Prompt
Redesign the feedback system to separate bugs, suggestions, and general feedback into three distinct admin areas with no intermixing. Add status tracking, priority indicators, edit capability, expandable details, and conversation notes for each type.
Response / Implementation
Comprehensive feedback system redesign with three separate admin pages:
Database Schema Extended:
Added columns to feedback table: status, priority, resolved_at, resolved_by, updated_at
Created feedback_notes table for conversation threading
Status values: open, in_progress, fixed, wontfix, closed
20:55Updated conversation logs and development log with December 2 session
Initial Prompt
Please submit all of our latest conversations to the conversation log. Please look at the conversation log to update and refresh the change log area on the development log page.
Response / Implementation
Updated all logs with December 2, 2025 session:
New Conversation Log: Created 2025-12-02-conversation-log.html
Session Focus: Feedback system redesign with 2 prompts documented
Conversation Index: Added new December 2 entry at top
Development Log: Added Day 11 section with detailed changelog
Card Replacement: Removed "App Test Results" card from Admin & Enterprise section
New Card: "Screenshot Gallery" with camera icon (📷)
Description: "Complete visual documentation with 118+ screenshots: Admin Dashboard, Mobile App, User Dashboard, and Public Pages."
Badge: "Gallery" with primary (blue) color
Quick Links: Updated navigation link to point to /screenshot-gallery.html
Files Changed
public/DocumentLibrary.html
14:00Create comprehensive Screenshot Gallery with 118+ screenshots
Initial Prompt
Capture a screenshot for each page in the Admin Dashboard and then add these into a screenshot gallery along with all of the mobile app screenshots. Then also capture screen shot from each screen in the user dashboard. Then take all of these image and organize them into a screenshot gallery.
Response / Implementation
Created comprehensive screenshot capture and gallery system:
10:00Create conversation logging system with daily log files
Initial Prompt
Create a folder named "convo". Create a log file of our entire conversation, verbatim, the prompt I typed in and the complete response that was returned. Each prompt request is in a list, and each request can be expanded to the full results of that request. Add the end of each day create a html log file that shows every prompt and every response returned for the entire day. Have the date as part of the file naming scheme.
Response / Implementation
Created conversation logging system with the following structure:
Folder Structure:
public/convo/README.md - Instructions for using the logging system
public/convo/template.html - Template for creating new daily logs
public/convo/index.html - Index page listing all conversation logs
09:00Add User Role Guides and Subscription Tier Guides to Document Library
Initial Prompt
Add User Role Guides section to Document Library with dedicated cards for Master, Admin, User, and Viewer guides. Add Subscription Tier Guides section with cards for Free, Basic, Pro, Lifetime, and Enterprise guides.
Response / Implementation
Updated Document Library and Admin Dashboard with comprehensive guide sections:
User Role Guides Section (4 cards):
Master User Guide (Permission Level 4) - badge-danger
Admin User Guide (Permission Level 3) - badge-warning
Standard User Guide (Permission Level 2) - badge-primary
Created migration file at server/migrations/0001_enterprise_indexes.sql with IF NOT EXISTS checks for safe re-runs. Added README.md with migration documentation.
Update the project to include a comprehensive change log showing all development history with timestamps.
Response / Implementation
Added a condensed development log to replit.md with timestamp ranges for each day. Created cross-references between the web documentation and internal project files.
Files Changed
replit.md
07:34Add report bug and feedback links to import screen
Initial Prompt
Add links to report bugs and provide feedback on the import screen.
Response / Implementation
Added "Report Bug" and "Feedback" links to the Import Screen footer. Links open the feedback page in the browser using expo-web-browser for in-app experience.
Files Changed
screens/ImportScreen.tsx
07:26Add ability to import tasks and habits from other apps
Initial Prompt
Add a feature to import tasks and habits from other productivity apps like Todoist, Habitica, or spreadsheets.
Response / Implementation
Created comprehensive import system supporting:
CSV file import for tasks and habits
TXT file import with comma-separated values
Standardized field mapping (title, due date, category, urgency, duration, importance, future impact)
This change log should be updated whenever significant features are added or major changes are made to the application. All timestamps are in UTC.
Future Considerations
Planned Features
AI-powered task suggestions (Power Boost add-on)
NLP task entry: "Call dentist tomorrow at 2pm"
Smart task breakdown: Auto-split complex items
Widget support: iOS/Android home screen widgets
Technical Debt
Consider migrating to Zustand for simpler state management
Evaluate React Query for server state
Add comprehensive E2E testing with Detox
Project Cost Estimator
Estimated Programmers
10
Specialized roles across frontend, backend, UI/UX, integrations, and QA
Estimated Hours
480
480 baseline + tracked updates from changelog
Estimated Days
10
Based on 8-hour workdays
Hourly Rate
Select developer hourly rate
Estimated Project Total
$48,000
Based on 480 hours at $100/hour
Team Breakdown
React Native Developer~140 hrs
Backend Engineer~100 hrs
UI/UX Designer~80 hrs
Integration Specialist~90 hrs
QA & Documentation~70 hrs
Estimated Fair Market Value for Hourly Programming Rate
Based on the complexity of this mobile app and web pages, the recommended hourly rate range is $100 - $150/hour. This valuation considers the following complexity factors:
Mobile App Complexity
React Native cross-platform development (iOS + Android + Web)
Custom priority ranking algorithm with 5+ weighted factors
Real-time gesture-based task management with animations