Ofishally Organized

Ofishally Organized is a React, TypeScript, and Vite single-page app for organizing tasks, journal entries, and calendar views. It runs entirely in the browser during development and currently stores todo board data in localStorage.

Runtime Environment

• Node.js ^20.19.0 or >=22.12.0
• npm, using the committed package-lock.json
• A modern browser with support for standard Web APIs such as localStorage and crypto.randomUUID

Vite provides the local development server, build tooling, and production preview server.

Setup

Install dependencies from the repository root:

npm install

Start the local development server:

npm run dev

Vite prints the local URL in the terminal, usually http://localhost:5173/.

Available Scripts

• npm run dev starts the Vite development server with hot module replacement.
• npm run build runs TypeScript project checks and creates a production build in dist/.
• npm run lint runs ESLint across the repository.
• npm run preview serves the production build locally for verification.

Testing And Verification

There is no dedicated test runner configured yet. Before opening or merging changes, run:

npm run lint
npm run build

For UI changes, also run the app with npm run dev and manually verify the affected route:

• / and /todo for the todo board
• /journal for journal entries
• /calendar for calendar views

Deploying

Create a production build:

npm run build

The deployable static assets are written to dist/. Deploy the contents of dist/ to any static hosting provider that supports client-side React apps, such as Netlify, Vercel, GitHub Pages, or an S3/static web hosting setup.

To check the production bundle locally before deploying:

npm run preview

Because this app uses client-side routing through react-router-dom, configure the hosting provider to fall back to index.html for unknown paths such as /todo, /journal, and /calendar.

Dependencies

Primary runtime dependencies:

• react and react-dom provide the UI runtime.
• react-router-dom provides client-side routing.
• @hello-pangea/dnd provides drag-and-drop behavior for the todo board.
• @tiptap/react and related TipTap extensions provide rich text editing features.
• usehooks-ts provides reusable React hooks.

Primary development dependencies:

• vite and @vitejs/plugin-react-swc provide development and build tooling.
• typescript provides static type checking.
• eslint, typescript-eslint, and React ESLint plugins provide linting.

Integrations And Data Storage

The app currently has no backend service, external API, authentication provider, or database integration.

Current browser integrations:

• Todo columns and tasks are persisted in localStorage under the columns and tasks keys.
• Journal state is managed in frontend state and is prepared for future persistence.
• Calendar behavior is implemented locally in TypeScript utilities and React components.

When adding an external system, document the service name, required environment variables, local setup steps, and deployment configuration in this README.

Changing The Codebase

Source code lives under src/ and is organized by feature:

• src/todo/ contains todo board pages, components, state, and types.
• src/journal/ contains journal pages, editor components, state, and date utilities.
• src/calendar/ contains calendar pages, components, constants, types, and utilities.
• src/shared/ contains components shared across multiple features.
• src/AppRoutes.tsx defines the app's client-side routes.
• src/AppLayout.tsx defines the shared layout around routed pages.

Use the @ import alias for paths rooted at src/; it is configured in vite.config.ts.

Recommended change workflow:

1. Create or update code in the relevant feature folder.
2. Keep shared components in src/shared/ only when more than one feature uses them.
3. Add or update TypeScript types near the feature that owns them.
4. Run npm run lint and npm run build.
5. Manually verify the changed route in the browser.