Skip to content

SCREENSHOT-GUIDE.md

Latest commit

 

History

History
301 lines (202 loc) · 6.08 KB

SCREENSHOT-GUIDE.md

File metadata and controls

301 lines (202 loc) · 6.08 KB

Portfolio Screenshot Guide

This guide helps you capture the best screenshots of TaskOrbit for your portfolio.

🎯 Quick Start

  1. Run the seed script:

    cd apps/api
npm run seed

  2. Start your application:

    # Terminal 1 - API
cd apps/api
npm run dev

# Terminal 2 - Web
cd apps/web
npm run dev

  3. Login with your credentials:

    • Email: pasindulankaa@gmail.com
    • Password: (your password)

📸 Best Screenshots to Capture

1. Dashboard View

URL: /dashboard

What to show:

  • All 3 boards displayed as cards
  • Task counts on each board
  • Different board colors and icons
  • Clean, organized layout

Tips:

  • Make sure all 3 boards are visible
  • Shows the variety of projects
  • Good overview screenshot

2. Kanban Board - Product Development

URL: /boards/product-development

What to show:

  • 5 columns: Backlog, To Do, In Progress, In Review, Done
  • Multiple tasks in each column
  • Different priority indicators (urgent, high, medium, low)
  • Task cards with tags and due dates

Tips:

  • This board has the most variety (13 tasks)
  • Shows drag-and-drop functionality
  • Demonstrates task organization
  • Good for showing the main feature

3. Task Detail View

URL: Click on any task, e.g., "Implement drag-and-drop for task reordering"

What to show:

  • Task title and description
  • Priority and status badges
  • Subtasks with checkboxes (some completed, some not)
  • Due date and time estimates
  • Tags
  • Assignees

Recommended tasks to showcase:

  • "Implement drag-and-drop for task reordering" (has 5 subtasks)
  • "Performance optimization for large boards" (has 4 subtasks)
  • "Add file attachment support" (all subtasks completed)

4. List View - Design System

URL: /boards/design-system

What to show:

  • Tasks displayed in list format
  • Sortable columns
  • Compact view of many tasks
  • Different view option from Kanban

Tips:

  • Toggle to list view if not default
  • Shows alternative visualization
  • Good for demonstrating flexibility

5. Marketing Campaign Board

URL: /boards/marketing-campaign-q1

What to show:

  • Different board theme (pink color)
  • Marketing-specific tasks
  • 4 status columns
  • Shows versatility of the app

6. Task with Subtasks (Expanded)

Best examples:

  • "Implement drag-and-drop for task reordering" (5 subtasks, mix of completed/incomplete)
  • "Launch email campaign" (4 subtasks, shows progress)
  • "Create onboarding flow" (all subtasks completed)

What to show:

  • Subtask list with checkboxes
  • Progress tracking
  • Completed vs incomplete items

🎨 Visual Tips

Browser Settings

  • Resolution: 1920x1080 or higher
  • Zoom: 100% (no zoom in/out)
  • Hide browser UI: Use full-screen mode (F11) or presentation mode
  • Clean bookmarks bar: Hide it for cleaner screenshots

Color Themes

  • Light Mode: Best for portfolio (better contrast)
  • Dark Mode: Also looks great, shows theme support
  • Consider taking both versions

What to Avoid

  • ❌ Empty states (the seed script prevents this)
  • ❌ Loading spinners
  • ❌ Error messages
  • ❌ Development console open
  • ❌ Personal information (already using your portfolio email)

🖼️ Screenshot Tools

Recommended Tools

macOS:

  • Cmd + Shift + 4 - Select area
  • Cmd + Shift + 3 - Full screen
  • CleanShot X (paid) - Professional screenshots with annotations

Windows:

  • Win + Shift + S - Snipping tool
  • ShareX (free) - Advanced screenshot tool

Browser Extensions:

  • Awesome Screenshot - Full page captures
  • Nimbus Screenshot - Annotations and editing

📋 Screenshot Checklist

  • Dashboard with all 3 boards
  • Product Development Kanban board (full view)
  • Task detail with subtasks
  • List view of Design System board
  • Marketing Campaign board
  • Mobile responsive view (optional)
  • Dark mode version (optional)

🎬 Bonus: GIF/Video Captures

Consider capturing these interactions:

  1. Drag and Drop:

    • Move a task between columns
    • Shows interactivity

  2. Task Creation:

    • Open create task dialog
    • Fill in details
    • Shows user flow

  3. Subtask Completion:

    • Check off subtasks
    • Shows progress tracking

Tools:

  • macOS: QuickTime, Kap (free)
  • Windows: Xbox Game Bar, OBS Studio (free)
  • Online: Loom, Recordit

💡 Portfolio Presentation Tips

Organize Your Screenshots

TaskOrbit/
├── 01-dashboard.png
├── 02-kanban-board.png
├── 03-task-detail.png
├── 04-list-view.png
├── 05-marketing-board.png
└── demo.gif (optional)

Add Captions

  • "Dashboard view showing multiple project boards"
  • "Kanban board with drag-and-drop task management"
  • "Detailed task view with subtasks and time tracking"
  • "List view for alternative task visualization"

Highlight Key Features

In your portfolio description, mention:

  • ✅ Real-time collaboration (Pusher)
  • ✅ Multiple board views (Kanban, List)
  • ✅ Task management with subtasks
  • ✅ Priority and status tracking
  • ✅ Time estimation and tracking
  • ✅ Tag-based organization
  • ✅ Responsive design
  • ✅ Dark mode support

🔄 Re-seeding Data

If you need fresh data or want to start over:

cd apps/api
npm run seed

The script will:

  1. Clean up old data
  2. Create fresh boards and tasks
  3. Ready for new screenshots in seconds

📞 Need Different Data?

Edit apps/api/src/scripts/seedData.ts to customize:

  • Board names and descriptions
  • Task titles and content
  • Number of tasks per board
  • Priorities and statuses
  • Due dates and time estimates
  • Tags and subtasks

Then run npm run seed again!

✨ Final Tips

  1. Take screenshots in order - Follow the checklist
  2. Consistent lighting - Use the same theme for all shots
  3. High resolution - Don't compress too much
  4. Show variety - Different boards, views, and states
  5. Tell a story - Show the user journey
  6. Keep it clean - No clutter or distractions

Good luck with your portfolio! 🚀