Official Documentation
The Carcino Vantage
Team Wiki
Your complete guide to every workflow in the platform — from writing your first article to approving content as Leadership. Upload screen recordings to each workflow card below.
Writers' BlockDesign LabDevelopmentMarketingLeadershipProofreaders
✎
Markdown Editor
A distraction-free editor with live preview, syntax highlighting, auto-save, and GFM support for all document types.
◈
Task Management
Structured task pipelines with assignment, status tracking, proofreader queues, and leadership approval flows.
📊
Department Dashboards
Role-specific dashboards for Writers, Design Lab, Development, Marketing, and Leadership with live analytics.
🔔
Push Notifications
Real-time push notifications keep every team member updated on task assignments, reviews, and deadlines.
🏗
Content Types
Supports Articles, Blog Posts, Survivor Stories, Cancer Docs, and Awareness Posts across all departments.
🌐
PWA + Mobile
Installable Progressive Web App with full mobile support, offline persistence, and swipe navigation.
How to use this wiki
Navigate to your department using the sidebar. Each workflow card has a video slot — click "Upload Recording" on any card to attach your screen recording for that specific workflow. Videos are stored locally in your browser for easy reference.
Mobile Navigation Centre
Mobile Guide
How the app works differently on phones and tablets — the bottom navigation bar, docked toolbar, hamburger menus, and mobile-only interaction patterns across every page.
≤ 767px breakpointPWA ReadyTouch Optimised
| Feature | Desktop | Mobile (≤767px) |
|---|
| Navigation | Left sidebar with text labels | Fixed bottom bar — icons + labels |
| Editor toolbar | Top bar, grouped by category (Headings / Style / Code / Insert / Lists) | Bottom docked, flat horizontal scroll strip — all tools in one row |
| Editor view mode | Split view available (drag handle to resize) | Editor-only by default — toggle to Preview via view mode buttons. No split view. |
| Sidebar (editor) | Left slide-out panel for document outline | Hidden by default; accessible via hamburger in the header |
| Page header | Full header with search bar, icons, account menu | Compact header with hamburger (☰) button that opens a slide-down panel |
| Modals | Fixed width (400–600px) centred on screen | Full-width minus 32px padding, no centred positioning |
| Applications table | Wide table with mouse-drag scroll | Touch-drag scroll horizontally to reveal all columns |
| Keyboard resize | Not applicable | VisualViewport API adjusts editor height when keyboard opens so toolbar stays above keyboard |
MOBILE BOTTOM NAV BAR
🏠Overview
🗂Queues
💼Tasks3
👥Team
Writers' Block also shows: Articles + Blog Posts
🏠
Overview (Home)
Links to / — your department dashboard. Always the leftmost tab.
🗂
Queues
Links to /queues — the proofreader queue page for reviewing tasks.
📄
Articles + Blog Posts
Only visible for Writers' Block and Leadership (isFullSidebar). Links to filtered document views.
💼
Assignments
Links to /tasks. Shows a red badge with the count of pending tasks when you have open work.
👥
Team
Links to /team. Always shown as the last tab.
MobileAll Roles
Navigating with the Bottom Bar
A walkthrough of the fixed bottom navigation bar — switching between Overview, Queues, Assignments, and Team using the tab icons.
Key Points
★
Tap any icon to navigate — the active tab gets an accent underline
★
Red badge on Assignments shows how many tasks are pending
★
On very small screens labels may hide — icons only mode
MobileAll Roles
Using the Hamburger Menu (☰)
Opening the page-specific hamburger menu in the header to access settings, notifications, theme toggle, and page-specific controls.
Steps
1
Tap the ☰ icon in the top-right of the header
2
A slide-down panel opens below the header
3
Access theme toggle, settings, notifications, search
4
Tap ☰ again or tap outside to close
⌨On mobile, the editor automatically defaults to Editor-only mode. The formatting toolbar moves to the bottom of the screen and sits just above the on-screen keyboard. As you type, the editor height adjusts using the VisualViewport API so the toolbar never gets hidden behind the keyboard.
ℹSplit view is not available on mobile. The drag-handle that lets you resize the editor/preview panes is hidden. Instead, use the view mode toggle buttons in the header to switch between Editor and Preview.
MobileWriters
Using the Bottom Toolbar in the Editor
The mobile toolbar is a flat horizontally-scrollable strip at the bottom. Swipe left/right to reveal all formatting tools (Bold, Italic, Headings, Lists, Code, Links etc.).
How It Works
★
Toolbar sits above your on-screen keyboard
★
Swipe the toolbar horizontally to see all tools — they're in a single scrollable row
★
Tap any tool icon to apply formatting to selected text
★
Icons are 40×40px touch targets — easier to tap than on desktop
MobileWriters
Switching Between Editor and Preview (Mobile)
How to toggle from writing mode to reading the rendered Markdown preview on mobile — since split view isn't available.
Steps
1
While in the Editor, tap the Preview icon (👁) in the header
2
The editor pane hides, preview fills the full screen
3
Tap the Editor icon (✎) to switch back to writing
4
The ⊞ split icon is greyed out — not available on mobile
MobileAll Roles
Accessing the Guided Tour on Mobile
The Guided Tour on mobile is a simplified version with 5 steps (vs 7 on desktop), adapted for mobile interactions — no spotlight highlights, just centred modals.
Mobile Tour Steps
1
✦ Welcome — overview of the app
2
✎ Toolbar — swipe horizontally at the bottom
3
⊞ Editor/Preview — use floating button to switch
4
≡ Outline — tap menu and select "Outline"
5
> Commands — tap the search icon for quick commands
MobileAll Roles
Dashboard on Mobile
The main dashboard page on mobile — stat cards stack vertically, the document grid goes single-column, and quick action buttons wrap to fit the screen.
What's Different
★
Stat cards stack in a column (not a 4-wide grid)
★
Quick action buttons may wrap to 2 columns
★
All functionality identical — layout adapts only
MobileTasks
Submitting Tasks on Mobile
The Task Submission Modal and Task Details Modal on mobile — they expand to near-full-screen width, making file upload and comment input comfortable on a phone.
What's Different
★
Modal is calc(100vw - 32px) wide — full width
★
Max height is calc(100vh - 32px) with overflow scroll
★
File picker works with camera — can take a photo as proof
MobileLeadership
Applications Table on Mobile (Drag Scroll)
The internship applications table has many columns — on mobile, touch-drag horizontally across the table to scroll left and right and see all columns.
Steps
1
Open the Applications tab on the Team page
2
Press and hold on the table, then drag left/right
3
Release to stop scrolling — cursor becomes a grab hand
MobileAll Roles
Installing the App (Add to Home Screen)
Installing Carcino Vantage as a PWA on your phone for a native-like experience — no App Store required.
On iOS (Safari)
1
Tap the Share button (box with arrow) in Safari
2
Scroll down and tap "Add to Home Screen"
3
Confirm — app icon appears on your home screen
A
On Android: Tap ⋮ menu → "Add to Home screen" or look for the install banner prompt
Core Feature
The Editor
A beautiful, minimal Markdown editor with live split-view, document outline, auto-save, and rich formatting tools.
⊞
Split View
Editor on the left, live Markdown preview on the right. Perfect for drafting and reviewing simultaneously.
✎
Editor Only
Full-width CodeMirror 6 editor for distraction-free writing. All formatting shortcuts active.
👁
Preview Only
Rendered Markdown output with syntax highlighting, GFM tables, task lists, and styled prose.
All Roles
Switching View Modes
How to switch between Editor-only, Split View, and Preview-only using the icons in the header bar.
Steps
1
Open the Editor page at /editor
2
Click the view mode icons in the top header (⊞ ✎ 👁)
3
Observe how the layout transitions between modes
All Roles
Using the Formatting Toolbar
Applying bold, italic, headings, lists, code blocks, links, tables, and horizontal rules using toolbar buttons or keyboard shortcuts.
Key Shortcuts
I
Ctrl+I — Italic selection
K
Ctrl+K — Open Command Palette
All Roles
Document Outline & Navigation
Using the left sidebar outline that auto-parses all headings. Click any heading to jump to it in the editor.
Steps
1
Add headings (##, ###) to your document
2
See them auto-appear in the left sidebar outline
3
Click a heading in the outline to jump the editor to that section
All Roles
Export & Save Documents
Exporting your document as Markdown (.md) or styled HTML. Auto-save runs every 800ms to localStorage.
Steps
1
Click the export icon in the header toolbar
2
Choose "Export as .md" or "Export as HTML"
3
File downloads immediately — no manual save needed
Core Feature
Tasks & Status Flow
How tasks move through the pipeline from creation to final approval — and what each status means.
📋 To Do→⚡ In Progress→📝 Ready for Proofread→🔍 Proofreading→⬆ Ready for Upload→👁 In Review→✓ Done
| Status | Who Acts | What Happens |
|---|
| 📋 To Do | Writer / Assignee | Task created and assigned. Writer picks it up and starts work. |
| ⚡ In Progress | Writer | Writer is actively working on the document in the Editor. |
| 📝 Ready for Proofread | Writer → Proofreader | Writer marks draft complete. Task enters the Proofreader Queue. |
| 🔍 Proofreading | Proofreader | Proofreader claims the task and actively reviews the document. |
| ⬆ Ready for Upload | Proofreader → Leadership | Proofreader approves. Task is ready for final publishing decision. |
| 👁 In Review | Leadership | Submission media uploaded. Leadership reviews before final approval. |
| ✓ Done | Leadership | Task fully approved and published. Counted in completion metrics. |
🎬
Video Coming Soon
Recording will appear hereWriters
Creating & Submitting a Task
How to pick up a task, work on it in the Editor, and submit with proof of work media when complete.
Steps
1
Go to Tasks page, find your assigned task
2
Click "Start" to move to In Progress
3
Write in the Editor — auto-save is active
4
Click Submit, upload proof media, confirm
🎬
Video Coming Soon
Recording will appear hereLeadership
Assigning a Task to a Team Member
Leadership creates a task and assigns it to a specific team member via the Assign Task modal.
Steps
1
Click "+ Assign Task" from the dashboard
2
Fill title, description, category, priority, due date
3
Select department and assignee
4
Confirm — assignee receives push notification
Department
Writers' Block
Workflows for Writers — from creating documents to submitting tasks for proofreading and tracking your word count goals.
💡Writers can create Articles, Blog Posts, and Survivor Stories. Your dashboard shows total word count, weekly output, and a live activity graph. The word goal tracker updates in real time as you write.
🎬
Video Coming Soon
Recording will appear hereWriter
Creating a New Article
Start a new research article or cancer document from the Writers' dashboard Quick Actions.
Steps
1
Click "New Article" quick action on your dashboard
2
Select document type in the Initial Type Modal
3
Begin writing — auto-save keeps every change
🎬
Video Coming Soon
Recording will appear hereWriter
Writing a Blog Post
Creating perspective-driven blog content and using the editor's Markdown features effectively for blog format.
Steps
1
Click "New Blog Post" from quick actions
2
Write your intro, body sections with ## headings
3
Use Split View to check formatting in preview
🎬
Video Coming Soon
Recording will appear hereWriter
Submitting a Survivor Story
How to write and submit a community survivor story through the platform with appropriate tone and structure.
Steps
1
Click "Survivor Story" quick action
2
Write the story following editorial guidelines
3
Submit for proofreading via task workflow
🎬
Video Coming Soon
Recording will appear hereWriter
Tracking Word Count & Goals
How the dashboard shows total words, weekly output, and the word goal progress bar in real time.
Where to Find
★
Stats grid: Total Words, This Week, Published, Word Goal
★
Activity chart shows daily word output for the week
Department
Design Lab
Workflows for the Design Lab team — managing creative tasks, awareness posts, and design deliverables.
💡Design Lab tasks include Awareness Posts, campaign visuals, and UI assets. Tasks flow through the same pipeline — get assigned, work in your tool of choice, then submit via the task card with your deliverable as proof of work.
🎬
Video Coming Soon
Recording will appear hereDesign
Picking Up a Design Task
Finding your assigned design task in the Design Lab dashboard and understanding the task brief.
Steps
1
Navigate to your Design Lab dashboard
2
Find tasks in "To Do" status with your name
3
Click the task card to view full brief and due date
🎬
Video Coming Soon
Recording will appear hereDesign
Submitting a Design Deliverable
Uploading your completed design (image or video) as proof of work and moving the task to In Review.
Steps
1
Open the task card, click "Submit Task"
2
Upload your design file (image or short video)
3
Status moves to In Review automatically
Department
Development
Workflows for the Development team — tracking GitHub metrics, managing issues, and coordinating technical tasks.
💡The Development dashboard pulls live GitHub stats for project-scribe and carcino-fighters-website — including total commits, open PRs, and weekly contribution activity.
🎬
Video Coming Soon
Recording will appear hereDeveloper
Reading the Development Dashboard
Understanding the GitHub stats panel — commits, PRs merged, open issues, and weekly contribution graph.
Metrics Explained
★
Total Commits — across all tracked repos
★
PRs Merged — total merged pull requests
★
API Status — health of backend services
🎬
Video Coming Soon
Recording will appear hereDeveloper
Tracking Technical Tasks
Managing development tasks in the platform — bug fixes, feature builds, and infrastructure work through the task pipeline.
Steps
1
Check Tasks page for development assignments
2
Update status as you progress (Todo → In Progress)
3
Submit with a PR link or screenshot as proof
Department
Marketing
Workflows for the Marketing team — reading analytics, tracking campaigns, and managing growth tasks.
💡The Marketing dashboard connects to Google Analytics (GA4) and displays total active users, page views, and bounce rate for the past 7 days. Use this to track campaign performance and content reach.
🎬
Video Coming Soon
Recording will appear hereMarketing
Reading the Analytics Dashboard
Understanding GA4 metrics — active users, page views, bounce rate, and the daily page view chart.
Key Metrics
★
Active Users — unique visitors in past 7 days
★
Page Views — total content views
★
Bounce Rate — average session quality
🎬
Video Coming Soon
Recording will appear hereMarketing
Managing Awareness Post Tasks
How marketing tasks for social awareness posts move from brief to approval through the task pipeline.
Steps
1
Receive awareness_post task from Leadership
2
Create content in your platform of choice
3
Submit with screenshot/video as proof of work
Department
Leadership
Workflows for Leadership — assigning tasks, reviewing submissions, approving content, and monitoring org-wide performance.
💡Leadership has full visibility across all departments. The dashboard lets you filter by department to see that team's metrics, task queue, completion rate, and work velocity — or view the global org overview.
🎬
Video Coming Soon
Recording will appear hereLeadership
Assigning Tasks to Team Members
Creating new tasks and assigning them to specific members across any department with priority, due date, and category.
Steps
1
Click "+ Assign Task" button on dashboard
2
Fill in title, description, type, priority, due date
3
Select department and assignee user
4
Submit — push notification sent to assignee
🎬
Video Coming Soon
Recording will appear hereLeadership
Reviewing & Approving Submissions
Viewing submitted work in the Review Queue, checking proof of work media, and approving or rejecting tasks.
Steps
1
Navigate to the Review Queue
2
Open a task in "In Review" status
3
View the submission media and document
4
Click Approve → status moves to Done
🎬
Video Coming Soon
Recording will appear hereLeadership
Monitoring Department Performance
Using the department selector cards to drill into each team's stats — completion rate, approval rate, and velocity.
Dashboard Features
★
Click a dept card to filter all metrics to that team
★
Global view when no dept is selected
★
Activity chart updates to show that dept's output
🎬
Video Coming Soon
Recording will appear hereLeadership
Inviting New Team Members
Sending invitations to new users and assigning them to departments using the Invite User modal.
Steps
1
Open Account menu → Invite User
2
Enter the user's email address
3
Select their department assignment
4
Invitation email is sent via Supabase Auth
Role
Proofreaders
Workflows for Proofreaders — claiming tasks from the proofreader queue, reviewing documents, and forwarding approved work.
💡Proofreaders have a dedicated Proofreader Queue at /queues. Tasks appear here once a writer marks them "Ready for Proofreading." You claim a task, review the document, then move it to "Ready for Upload" when approved.
🎬
Video Coming Soon
Recording will appear hereProofreader
Accessing the Proofreader Queue
How to navigate to the Queues page and find tasks waiting for proofreading in your department.
Steps
1
Navigate to /queues in the sidebar
2
See all tasks in "Ready for Proofreading" status
3
Click a task to claim and begin reviewing
🎬
Video Coming Soon
Recording will appear hereProofreader
Reviewing a Document
Opening the linked document, reading through it in the Editor preview, and noting any corrections needed.
Steps
1
Open the document from the task card
2
Use Preview mode to read the rendered document
3
Add comments or corrections via task comments
🎬
Video Coming Soon
Recording will appear hereProofreader
Approving & Forwarding Content
Once satisfied with the document quality, marking it "Ready for Upload" to forward to Leadership review.
Steps
1
Open the task details modal
2
Click "Approve" or set status to Ready for Upload
3
Task moves to Leadership review queue
Platform Feature
Team Directory
The Team page at /team shows every member of The Carcino Foundation, grouped by department, with filtering, search, and direct task assignment.
🔍
Search & Filter
Search by name, email, or department. Filter by "All Members", "Admins", or any specific department from the sidebar or tab bar.
🏷
Department Grouping
Members are automatically grouped under: Leadership (01), Writers' Block (02), Public Relations (03), Design Lab (04), Development (05).
🛡
Admin Badge
Members with admin_access = true show a shield badge and "Admin" tag on their card.
⚡
Quick Assign
Admins and Leadership can click "Assign" on any member card to immediately open the Assign Task Modal pre-filled with that member.
🌐
Social Links
Each card shows GitHub and LinkedIn links built from the member's username, allowing quick professional profile access.
🟢
Active Status
A small green or grey dot on each avatar indicates whether the member is currently active or inactive in the system.
👥The Applications tab in the Team page sidebar is only visible to Leadership. It switches the main content from the member directory to the full internship applications table pulled from Google Sheets.
All Roles
Browsing the Team Directory
Navigating the /team page — using the department tabs, scrolling through member cards, and using the search bar to find a specific person.
Steps
1
Click "Team" in the main sidebar navigation
2
Use the filter bar tabs to narrow by department
3
Type in the search box to find members by name or email
4
Click GitHub or LinkedIn on a card to visit their profile
LeadershipAdmins
Assigning a Task from the Team Page
Using the quick "Assign" button on a member card to open the Assign Task Modal pre-filled with that team member as the assignee.
Steps
1
Find the team member you want to assign a task to
2
Click the "+ Assign" button at the bottom of their card
3
Fill in the task details in the modal that opens
4
Submit — the member is notified via push notification
Leadership Only
Internship Applications
The Recruitment Bureau — a live table of all internship applications submitted through the Foundation's Google Forms, pulled directly from Google Sheets.
🔒Access: Only users with department = "Leadership" can see the Applications tab. It appears in both the Team page sidebar and the filter bar. The data is fetched live from Google Sheets via /api/applications and connected to Google Cloud Identity Platform (v4.0.1).
📊
Department Tabs
Filter applications by: ALL, Development, Writers' Block, Design Lab, or Marketing. Each tab shows a count of applications received for that department.
🔍
Live Search
The search bar filters all visible rows in real time — search by applicant name, email, portfolio URL, or any cell content in the table.
🔗
Clickable Links
Any URLs in the application (portfolio, GitHub, LinkedIn, Google Drive links) are automatically rendered as clickable links that open in a new tab.
↔
Horizontal Scroll
The table can be scrolled horizontally by dragging — click and drag left/right on the table to reveal all columns without losing context.
🏷
ALL View
The "ALL" tab combines every department's applications into a single table with a "DEPARTMENT" column automatically injected so you can see the full picture at once.
⏱
Timestamps
Every row includes the original Google Form submission timestamp, so you can see exactly when each candidate applied.
| Department Tab | Data Source | Notes |
|---|
| ALL | All sheets combined | Adds a "DEPARTMENT" column automatically. Shows total count across all departments. |
| Development | Development Google Sheet | Engineering applicants — expect GitHub links, technical skills, project portfolios. |
| Writers' Block | Writers' Block Google Sheet | Content applicants — writing samples, blog links, research interests. |
| Design Lab | Design Lab Google Sheet | Creative applicants — Figma portfolios, Behance/Dribbble links, UI samples. |
| Marketing | Marketing Google Sheet | Growth applicants — social media links, campaign experience, analytics knowledge. |
Leadership
Accessing the Applications Table
How Leadership navigates to the Recruitment Bureau — from the Team page sidebar or the filter tab bar — to view all submitted applications.
Steps
1
Go to the Team page via the main sidebar
2
Click "Applications" in the left sidebar or filter bar
3
The Recruitment Bureau table loads from Google Sheets
4
Use the dept tabs to view per-department applications
Leadership
Searching & Filtering Applicants
Using the real-time search bar and department tabs to find specific applicants and review their submitted details and portfolio links.
Steps
1
Type a name or keyword in the "SEARCH RECORDS..." box
2
Table filters live — any matching cell highlights the row
3
Click any URL in the table to open their portfolio/links
4
Drag horizontally on the table to scroll and see all columns
Leadership
Reviewing & Acting on an Application
Reading an application in full, reviewing portfolio links, and then taking the next step — inviting accepted candidates via the Invite User modal.
After Reviewing
1
Review the applicant's answers and portfolio links
2
If accepted, go to Team → click "+ Invite" button
3
Enter their email and assign to the correct department
4
They receive a Supabase Auth invite to join the platform
Platform Feature
Push Notifications
How the platform keeps every team member informed with real-time browser push notifications.
🔔Notifications are powered by the Web Push API with VAPID keys. Users must grant browser permission once. Notifications fire automatically when tasks are assigned, reach review status, or deadlines approach.
🎬
Video Coming Soon
Recording will appear hereAll Roles
Enabling Push Notifications
Granting browser notification permission and subscribing to push alerts in your profile settings.
Steps
1
Open your Profile / Settings page
2
Click "Enable Notifications"
3
Allow browser permission prompt
4
Subscription saved — you'll receive alerts instantly
Platform Feature
Account & Settings
Managing your profile, avatar, department assignment, theme preferences, and PWA installation.
🎬
Video Coming Soon
Recording will appear hereAll Roles
Updating Your Profile & Avatar
Changing your display name, uploading a profile photo, and setting your department in the Profile page.
Steps
1
Click your avatar in the top-right header
2
Select "Profile" from the account menu
3
Upload avatar (auto-cropped), update name, save
🎬
Video Coming Soon
Recording will appear hereAll Roles
Light / Dark Mode & Themes
Toggling between light and dark themes and how preferences persist across sessions.
Steps
1
Click the theme toggle icon in the header
2
Theme switches immediately across all UI
3
Preference saved to localStorage automatically
🎬
Video Coming Soon
Recording will appear hereAll Roles
Installing as a PWA
Installing Carcino Vantage as a Progressive Web App on mobile or desktop for native-like access.
Steps
1
Look for the Install prompt in the header or browser
2
On mobile: Share → Add to Home Screen
3
App installs with full-screen experience + offline support
