Super Todo Planner

Super Todo Planner is a shared web and mobile planner workspace with a single task model, shared date utilities, and shared design tokens.

The repository contains:

• A web client built with Vite, React, TypeScript, and Tailwind CSS
• A mobile client built with Expo and React Native
• Shared planner data, types, and date helpers consumed by both clients

Current Product Scope

Both clients now support the same core planner model:

• Calendar view
• List view
• Day view with a live current-time ticker
• Week view
• Month view
• Compact view
• Timed tasks with due date and time
• Search, sorting, and category filters
• Add, edit, delete, and complete task flows
• Shared categories, priorities, assignees, and recurring task metadata

The mobile app mirrors the desktop planner behavior using the same shared task types and helper utilities from src/.

Requirements

• Node.js 20+
• npm 10+
• Xcode for local iOS simulator work
• Android Studio for local Android emulator work

Install

Install root dependencies:

npm install

Install mobile dependencies:

npm --prefix mobile install

Development

Run the web client from the repository root:

npm run dev

Build the web client locally:

npm run build

Preview the production web build:

npm run preview

Start the Expo mobile dev server:

npm run mobile

Start Expo directly on web:

npm --prefix mobile run web

Launch the mobile app on a simulator or device:

npm run mobile:ios
npm run mobile:android

Validate the mobile TypeScript app:

npm run mobile:typecheck

Production Workflow

Web Production

1. Install dependencies.
2. Run the production build.
3. Deploy the generated dist/ folder to your hosting provider.

Commands:

npm install
npm run build

Production output:

• dist/index.html
• dist/assets/*

Recommended release check before deploy:

npm run build
npm run preview

If the preview looks correct, deploy dist/ to a static host such as Vercel, Netlify, Cloudflare Pages, GitHub Pages, or an Nginx-backed server.

Mobile Production

The repository is ready for shared mobile feature development and runtime validation, but native production packaging is not fully configured yet.

What is already in place:

• Expo app entrypoint in mobile/
• Shared task/data/type imports from the root app
• Mobile typechecking
• Expo web runtime validation
• iOS and Android local simulator start commands

What you still need before shipping to the App Store or Play Store:

• App identifiers and signing configuration
• Store assets and metadata
• Expo Application Services configuration or another native release pipeline
• Final device QA on iOS and Android hardware

Current mobile release-prep commands:

npm --prefix mobile install
npm run mobile:typecheck
npm --prefix mobile run web
npm run mobile:ios
npm run mobile:android

If you want true production mobile builds next, the next step is to add Expo app config and EAS build/release setup.

Recommended Release Checklist

Before starting production rollout:

1. Run npm run build and verify the web bundle succeeds.
2. Run npm run mobile:typecheck and verify the mobile app compiles cleanly.
3. Open the web app locally with npm run preview and smoke-test all six planner views.
4. Open the mobile app with Expo web or simulator commands and verify add, edit, delete, filters, and day timeline behavior.
5. Deploy the web dist/ build.
6. Add native mobile release configuration if you are shipping iOS and Android binaries.

Shared Architecture

The mobile app intentionally reuses shared sources from the web project:

• src/types.ts for task and view types
• src/data.ts for mock categories, assignees, and sample tasks
• src/utils/dateTime.ts for shared date and time helpers
• src/shared/designTokens.ts for shared visual tokens

This keeps the data model, time handling, and product behavior aligned between web and mobile.

Project Layout

.
├── mobile/                # Expo React Native app
├── public/                # Web static assets
├── src/                   # Web app and shared source modules
│   ├── components/        # Web planner UI
│   ├── shared/            # Shared design tokens
│   ├── utils/             # Shared date and time helpers
│   ├── data.ts            # Shared planner data
│   └── types.ts           # Shared planner types
└── README.md