Syedello

Welcome to Syedello

Syedello is a free local-first project command center that runs primarily in your browser. Core offline planning requires no signup, no server, and no accounts. For teams and power users, optional Cloud Sync and real-time collaboration provide multi-device synchronization using a secure Supabase backend.

Your First Board

When you open the app, you'll see a sample board with a few lists (To Do, In Progress, Done) and cards. Here's how to start:

1. Create a project — Click the project name in the top-left corner, then choose "Create New Project". Give it a name like "Website Launch" or "Sprint 4".
2. Pick a template — Click the "Templates" button to browse 16+ pre-built boards. Whether you're running a software sprint, planning a marketing campaign, or organizing personal tasks, there's a starting point for you.
3. Start adding cards — Click "+ Add a card" at the bottom of any list, type a title, and press Enter. Your card appears instantly.
4. Everything saves automatically — Look for the green checkmark that says "Saved to device". There's no Save button — it just works.

Understanding the Interface

Syedello has been designed around a streamlined, high-density layout. The interface organizes 15+ advanced features into a clean, modern design consisting of three primary navigation tracks:

• Consolidated Top Bar (The 3 Menu Hubs) — To avoid layout clutter, all configuration, metrics, and display options are consolidated into three central hubs:
  • 📦 Board Hub — Manages board modes (Standard vs. Scrum), template galleries (16+ pre-built boards), data imports (CSV/JSON/Backups), data exports (Excel/CSV/PDF/Backups), and board clearing.
  • 📊 Dashboards Hub — Consolidates team insights and analytics, including the Project Report (Burndown, Velocity, and Workload charts), Sprint Journals, RAID Logs (Risks/Assumptions/Issues/Dependencies), and support resources.
  • ⚙️ Preferences Hub — Controls look-and-feel preferences including Light/Dark theme toggles, text size scaling, and direct access to WIP limits and parent-child automation rules.
• Symmetrical Twin-Row Navigation — Positioned directly below the top bar, this section consists of two full-width, single-line glassmorphic tracks:
  • Row 1: Search & Filters Bar — Contains the search box, live matches counter badge, framed color label dots, priority selectors, tag dropdowns, and sorting tools in one horizontal layout.
  • Row 2: View Switcher — Provides one-click access to Board, Calendar, Backlog, and Directory views with active highlight indicators.
  On mobile and tablet viewports, both Row 1 and Row 2 scroll horizontally, ensuring all controls remain accessible on a single line without wrapping or breaking the grid.
• Board Canvas — The primary canvas where your lists, cards, visual connection lines, parent progress bars, and column WIP limits are rendered.

Working with Lists and Cards

Lists (Columns)

Lists are vertical columns that represent stages in your workflow. Typical lists include To Do, In Progress, Review, and Done.

• Add a list — Click the "+ Add a list" button on the far right edge of the board.
• Rename a list — Click the list title to edit it.
• Reorder lists — Drag a list by its header left or right.
• Delete a list — Click the trash icon in the list header. All cards in that list will be removed.
• Set a WIP limit — Open the column menu and set a maximum number of cards allowed in that column.
• Mark as Done — Click the green ✓ icon on a column header to mark it as the Done column. Cards moved here are considered complete.

Cards (Tasks)

Cards represent individual work items. They can be tasks, bugs, stories, epics, or subtasks.

• Add a card — Click "+ Add a card" at the bottom of any list, type the title, and press Enter.
• Quick-add with smart syntax — Type commands like !high (priority), #bug (tag), @JD (assignee), due:fri (due date), or 5pt (story points). Colored pills preview what will be applied.
• Move cards — Drag and drop cards between lists. Drag within a list to reorder them.
• Open a card — Click any card to open its detail view with all editing options.
• Delete a card — Open the card and click the trash icon.

Organizing Cards in Families

Cards can be linked in a parent-child hierarchy: Epics → Stories → Tasks → Subtasks. This lets you break down big goals into smaller, actionable pieces while keeping everything connected.

Card Types

• 🏆 Epic (purple border) — A large body of work, like "Build a checkout system". Epics contain multiple stories.
• 📖 Story (green) — A feature from a user's perspective, like "As a customer, I want to pay with a credit card." Stories live inside epics.
• ✅ Task (blue) — A specific actionable item, like "Add Stripe API integration." Tasks can belong to stories or epics.
• 🐛 Bug (red) — A defect that needs fixing.
• 🔹 Subtask — A child card of any other type. Subtasks appear on the board just like regular cards.

Setting Up Hierarchy

1. Open a card and scroll to the "Parent" section.
2. Search for a parent card (e.g., an epic or story) and select it. The current card becomes its child.
3. To add children, go to the "Children" section and click "Add child". Type a title — the child defaults to Task type.
4. Change a child's type by clicking its badge (e.g., ✅Task) and picking a new type from the popover.

Tree Connectors

When cards have parent-child relationships, thin tree lines appear to the left of cards showing the visual hierarchy. Vertical trunks connect siblings (cards at the same level), and horizontal arms connect parents to their children. This makes it easy to see at a glance which cards belong together.

Parent Progress Bars

When a card has children, a thin progress bar appears at the bottom of the card showing how many of its children are done. For example, if an epic has 5 stories and 3 are done, you'll see "3/5 ✓" with a colored bar. The bar uses three colors: blue for in-progress, green for done, and gray for not started.

Automation Rules

Click the gear icon (Settings) in the top bar to open Board Settings. Here you'll find three automation rules that help keep your board in sync automatically. All rules are off by default — turn them on as needed.

Auto-Progress Parent

When you mark a child card as done (move it to a Done column), its parent card automatically moves to the Done column too. This is useful for keeping epics in sync: finish the last story, and the epic moves to Done automatically.

Auto-Close Parent

When all children of a card are done, the parent card moves to the Done column. Unlike Auto-Progress which reacts to any single child, this waits until every child is complete.

Auto-Close Children

When you move a parent card to Done, all its unfinished children move to Done as well. This is useful for cleaning up: mark the epic as done, and all its stories and tasks follow.

Done Column

Click the green ✓ icon on any column header to mark it as a Done column. The app uses this setting to know where completed cards should go when automation rules trigger. Multiple lists can be marked as Done if you have multiple done stages (e.g., "Done" and "Archived").

Modeling Work Order

A card can depend on other cards, meaning it can't start until those cards are finished. This is useful for real-world scenarios like "I can't start designing until the requirements are approved."

Setting Dependencies

1. Open a card and scroll to the "Dependencies" section.
2. Click in the search field and type the name of a card this work depends on.
3. Select the card from the search results. A dependency link is created.
4. The depended-upon card shows a "blocks" indicator in its detail view.

How Blocking Works

• Cards with unmet dependencies show a blocked icon on the board.
• Blocked cards cannot be dragged into "doing" columns (e.g., In Progress, Review). They stay in To Do or Backlog.
• When all depended-upon cards are moved to a Done column, the blocked card automatically becomes unblocked.
• The app checks for circular dependencies and prevents you from creating loops.

Four Ways to See Your Work

Switch between views using the toggle bar above the board area.

Board View

The classic Kanban layout. Lists run vertically, cards sit inside them. Drag cards between lists to change their status, drag lists to reorder columns, and drag cards within a list to prioritize.

Calendar View

Shows cards on their due dates in a month or week grid. Click any day to quick-add a task. Drag a card from the board onto a specific date to reschedule it. Use the left/right arrows to navigate between months.

Backlog View (Scrum Mode only)

A dedicated view with three sections:Product Backlog — a pool of unprioritized work waiting to be pulled into a sprint.Sprint Board — cards currently in the active sprint.Epics Manager — every epic with its progress bar, story count, and key prefix.

Directory View

An organizational chart with four tiers: Company → Department → Team → Member. Add people, assign them to teams, and see which cards each person is assigned to. This is useful for larger organizations or agencies managing multiple client teams.

Scrum Mode

Switch to Scrum Mode using the profile switcher in the top bar (look for the shield icon). Scrum Mode adds sprint management, estimation, charts, and epics to the board.

Sprint Management

• Start a sprint — Use the Sprint Header bar to start a new sprint with a name and date range.
• Add cards to sprint — Drag cards from the backlog into the sprint board.
• Archive sprints — When a sprint ends, archive it. View all past sprints in Sprint History.

Charts

• Burndown Chart — Shows remaining story points each day of the sprint. A trend line shows if you're on track.
• Velocity Chart — Tracks completed story points across sprints. Use this to predict how much your team can deliver next sprint.
• Workload Chart — Shows how story points are distributed across assignees. Spot who's overloaded and who has capacity.
• Mood Dashboard — Track team morale over time based on per-card mood entries (great for retrospectives).

Story Points

Estimate effort using story points. Type 5pt in the card title, or set points in the card detail view. Points are tracked in velocity and workload charts.

WIP Limits

Set a maximum number of cards for any column. When the limit is reached, the column header shows a warning. This prevents too much work from being in progress at once.

Working with Multiple Cards

Select several cards at once to perform actions on all of them together.

Selection Methods

• Shift+Click — Click one card, then hold Shift and click another. Every card between them is selected.
• Ctrl/Cmd+Click — Hold Ctrl (or Cmd on Mac) and click individual cards to toggle them on or off.
• Marquee drag — Click on empty space and drag a rectangle across cards. All cards inside the rectangle are selected.

Bulk Actions

Once cards are selected, a floating toolbar appears with these options:

• Move to List — Move all selected cards to a different list in one action.
• Set Priority — Change the priority of all selected cards at once.
• Add/Remove Tags — Add a tag to all selected cards or remove a common tag.
• Delete — Delete all selected cards (with confirmation).

Selected cards have a blue border. Click anywhere outside to clear the selection.

Finding Cards Fast

Syedello features a highly refined, full-width **Symmetrical Search & Filter Bar** (Row 1) aligned perfectly with the View Switcher (Row 2). It keeps all filtering controls organized on a single horizontal line, preventing layout wrapping and maintaining clean symmetry.

Search & Live Feedback

Type in the search bar to instantly query cards by their title, description, or unique card key (e.g., PROJ-42). As you type, the search field is accompanied by a rounded, high-contrast **live matches badge** that updates in real-time (e.g., 4 matches) to show exactly how many items match your current criteria.

Interactive Quick Filters

• Framed Color Labels — Six beautiful, framed color dots representing **Rose, Amber, Sage, Teal, Sky, and Lilac**. Tapping a dot filters your board instantly to show only cards tagged with that color label.
• Priority Level — Dropdown to filter by None, Low, Medium, or High priority.
• Scope Tags — Multi-select dropdown displaying active tags like #bug, #frontend, or #backend.
• Assignee — Dropdown to filter cards assigned to specific members of your team.
• Card Type — Filter by hierarchy types: Tasks, Bugs, Stories, Epics, or Subtasks.

Advanced Sorting

Sort cards instantly by Due Date (earliest or latest first), Priority (high first), or Story Points (high first) to focus on what matters most.

Horizontal Swipe Scrolling

On tablets and mobile devices, the entire Search & Filter Bar is configured to scroll horizontally. This ensures you can access every single dropdown, color picker, and sorting tool by swiping left or right, keeping the controls beautifully aligned and fully functional on touchscreens of any size.

Starting Fast with Templates

Board Templates

Click the "Templates" button in the top bar to browse 16+ pre-built boards across themes including: Software Development, Marketing, Design, Sales, Personal Tasks, Events, HR, UX Research, Construction, Non-Profit, and Education.

Each template comes with pre-made lists and sample cards. Hover over a template card and click "Apply" to load it. Note: Applying a template replaces all current lists and cards. Export a backup first if you want to keep your existing board.

Card Templates

Next to the "Add a card" input, you'll see colored template pills: ✅Task, 🔹Subtask, 🐛Bug, 📖Story, 🏆Epic. Click a pill to pre-fill the card type, priority, and tags before you type the title.

Click "📋 All" next to the pills to open the full Card Template Gallery. Each template shows what fields it pre-fills so you can pick the right one.

Smart Typing

As you type a card title, special commands are recognized automatically:

• !high, !medium, !low — Set priority
• #tagname — Add a tag (e.g., #bug, #frontend)
• @Name — Assign to someone (e.g., @JD)
• due:fri, due:mon, due:2025-01-15 — Set due date
• 5pt, 8pt, 13pt — Set story points

Colored indicator pills appear as you type, showing exactly what will be applied when you press Enter.

Focus Timer Built Into Every Card

Each card has a built-in Pomodoro timer to help you stay focused. Open a card and look for the timer section.

Timer Modes

• Focus — 25 minutes of concentrated work.
• Short Break — 5 minutes to rest between focus sessions.
• Long Break — 15 minutes after completing four focus sessions.

How to Use

• Click Play to start the timer, Pause to stop, and Reset to start over.
• The countdown shows in your browser tab title so you can see it even when the tab isn't active.
• Each completed focus session adds a small tomato icon to the session counter.
• A notification sound plays when a session ends to alert you.

Getting Data In and Out

Export Options

• Export to Excel (.xls) — Download all cards as a formatted spreadsheet. Works with Microsoft Excel, Google Sheets, and LibreOffice.
• Export to CSV — Download cards in plain comma-separated format. Universally compatible.
• Print Board / Save PDF — Opens your browser's Print dialog where you can save as PDF.
• Download Backup (.syedello) — A complete workspace snapshot with your board data wrapped in Syedello's portable file format. Keep this file safe — it's your full data archive.
• Save Board Backup — On supported desktop browsers, save directly to a `.syedello` file on your computer and keep writing changes back to that same file.

Import Options

• Open Board Backup — Open a `.syedello` board file from your computer. This is the best option for long-term local-first use.
• Import Cards from CSV — Upload one or more CSV files. Each row becomes a card with its title, description, and other fields.
• Import Cards from JSON — Upload one or more JSON files with structured card data.
• Restore Full Backup — Upload a previous `.syedello` or legacy JSON backup file to restore your entire workspace exactly as it was.

Import Modes

When importing cards, you can choose between two modes:

• Append & Merge — Adds imported cards to your existing cards. No data is removed.
• Vanish & Overwrite — Replaces all current cards with the imported ones. Use this when you want a clean slate.

Managing Multiple Boards

You can create unlimited projects, each with its own lists, cards, settings, and history.

• Create a project — Click the project name in the top-left, then "Create New Project".
• Switch projects — Use the project dropdown to jump between projects instantly.
• Rename a project — Click the project name or use the dropdown menu to rename it.
• Delete a project — Use the dropdown menu. This is permanent — all lists, cards, and Pomodoro logs will be removed.
• Share a project — Each project has its own shareable URL. Click the Share Link button to copy it.

Never Lose Work

Made a mistake? Undo and Redo let you step backward and forward through your changes.

• Ctrl+Z (Cmd+Z on Mac) — Undo the last action.
• Ctrl+Y (Cmd+Y on Mac) — Redo the last undone action.
• Buttons in top bar — Left arrow for Undo, right arrow for Redo. Greyed out when there's nothing to undo or redo.

Undo history covers card moves, edits, additions, and deletions within your current session.

Visual Customization & High-DPI Scaling

Syedello is designed to look premium and feel incredibly sharp, adapting automatically to your display hardware and lighting environment.

Dark / Light Mode

Toggle your theme instantly from the Preferences Hub. Dark mode features a curated dark-gray palette that is gentle on the eyes in low-light settings, while light mode provides high contrast for bright workspaces. On your first visit, the app automatically matches your operating system's theme, and your preference is cached locally for all future sessions.

HD Monitor & HiDPI Laptop Auto-Scaling

To ensure the interface is perfectly readable on premium high-resolution displays, Syedello starts at **100% zoom** by default for all users on desktop.

• Manual Override — You can easily adjust the scale at any time. Your preference is saved locally and persists between sessions. Choose between 8 zoom levels: **Default (100%)**, **Medium (110%)**, **Large (120%)**, **Extra Large (130%)**, **Huge (140%)**, **Ultra (150%)**, and **Max (160%)** from the Preferences Hub.
• Dynamic Font Scaling (Pixel-to-Rem) — When you change the zoom, the root element's font size adjusts. Because the entire UI layout is built using relative units (rem), this scaling changes all text, borders, margins, padding, and card sizes proportionally.

First Impressions & Touch Interface

Syedello delivers a premium, native-app feel from the second the page loads, and is fully optimized for touch controls on tablets and mobile devices.

Premium Splash Intro Screen

When visiting the workspace, you are greeted by an elegant, glassmorphic intro screen that synchronizes your local data in the background. Features include:

• Interactive Logo Switcher — Choose between the **Original Logo** (a flat, high-contrast static icon) and the **New 3D Logo** (a muted, looping 3D metallic video graphic). The player features an automatic static fallback if WebM playback is not supported by your browser.
• Bypass Hotkeys — Need to get straight to work? You can instantly bypass the intro animation by pressing the Spacebar, Enter, or Escape keys, or by clicking anywhere on the background.
• Smart Session Caching — The intro screen utilizes session caching. Once you have seen the splash screen once, it is silenced for the remainder of your browser session, allowing you to reload the app or navigate back and forth without seeing it again.
• Safety Fail-Safe — A hard timeout is set at 1.8 seconds. Even if video loading or background scripts experience lag, the splash screen will automatically dismiss to ensure you are never locked out of your workspace.

Mobile Segmented Kanban Tabs

Standard Kanban boards are unusable on phone viewports because columns wrap or get squeezed. Syedello solves this by transforming the board on mobile:

• Segmented Column Tabs — Instead of showing all lists side-by-side, the app collapses lists into a clean, segmented tab track at the top of the board. Tapping a tab (e.g., "To Do", "In Progress", "Done") slides that column into focus.
• Live Task Counters — Each column tab displays a live counter badge (e.g., In Progress (5)) so you know exactly where your tasks are without having to click through every tab.

Responsive Slide-Up Details Drawer

On mobile devices, clicking a card does not open a large desktop dialog that overflows the screen. Instead, the card details gracefully slide up from the bottom as a **native bottom sheet drawer**:

• Swipeable Drawer — Drag the top handle or swipe down to close the drawer, offering a highly tactile, native mobile experience.
• Full-Featured Control — Edit titles, checklists, pomodoro focus timers, parents, and blockers directly from a single, scrollable mobile sheet.

Accessibility-First Touch Targets (44x44px)

To prevent mis-taps and support finger-touch accuracy on mobile and tablet screens, all interactive elements conform to international accessibility guidelines (WCAG):

• Expanded Targets — Buttons, drag handles, close icons, priority selection dropdowns, and checkboxes have touch zones of at least 44x44 pixels.
• Smooth Drag & Drop — Cards feature dedicated, oversized drag handles on mobile, making it easy to reorder tasks or drag them across columns without accidentally opening the card details.

Work Faster with Shortcuts

Your Data Stays Yours

Syedello is built with privacy as a core principle:

• Local-first by default — All standard project data is stored locally in your browser's IndexedDB. No server or cloud database is required for core usage.
• Optional Cloud Sync — Opt into multi-device backup and team collaboration powered by a secure Supabase backend.
• No accounts for solo use — No registration, signup, or email collection is needed to begin working offline immediately.
• Works offline — The application works fully offline. Optional Team Cloud sync is being prepared for early teams and will sync changes when a connection is re-established.
• No board-content tracking — Vercel Analytics collects anonymous page-view data for aggregate traffic measurement only. No board content, personal identifiers, or task data is collected or transmitted.

Because the core app has no server, its local-first design inherently aligns with the principles behind privacy regulations including GDPR, SOC 2, PCI DSS, ISO 27001, DORA, and CCPA. Your data never leaves your computer unless you explicitly share a board link or download a backup file.

Getting the Most Out of Syedello

For Personal Use

• Use the Personal Tasks template to track your to-do list, grocery list, or reading list.
• Set due dates and use Calendar View to see your week at a glance.
• Use the Pomodoro timer on individual tasks to stay focused.
• Create a "Someday/Maybe" list for ideas you want to come back to later.

For Teams

• Share your project link with team members so everyone sees the same board.
• Use assignees so everyone knows who's working on what.
• Set up labels for work streams (e.g., Design, Backend, Frontend, QA).
• Use the Directory View to map out your team structure.
• Export backups regularly and share them with the team as a safety net.

For Scrum Teams

• Use Scrum Mode for sprint planning, daily stand-ups, and retrospectives.
• Use story points for estimation and track velocity across sprints.
• Review the Burndown Chart daily to see if you're on track.
• Use the Mood Dashboard during retrospectives to discuss team morale.
• Set WIP limits to prevent bottlenecks and keep work flowing.
• Organize work as Epics → Stories → Tasks to maintain a clear hierarchy.
• Turn on automation rules in Board Settings to reduce manual updates.

Keyboard Efficiency

• Use smart typing commands (!high, #bug, @JD, due:fri) to create cards faster.
• Use Ctrl+Z / Cmd+Z freely — the undo history is generous.
• Use Shift+Click and marquee drag to move or tag multiple cards at once.