Project Overview
Flockfysh is an AI-powered platform for creating, annotating, managing, and monetizing machine learning datasets. The platform enables ML teams to collaboratively build high-quality training datasets with interactive annotation tools, manage dataset versions, and participate in a marketplace for buying and selling datasets. Our work covered the complete frontend — from the interactive canvas-based annotation interface to the dataset marketplace, subscription management, and community features.
Project Objectives
- Build an interactive web-based annotation interface supporting bounding boxes, polygons, ellipses, and lines
- Implement frame-by-frame video annotation support
- Develop a dataset marketplace UI for browsing, purchasing, and listing datasets
- Build subscription and billing management interfaces
- Create user profile, activity tracking, and community features
- Deliver a performant, accessible UI using Next.js 13 and Material-UI
The Challenge
Canvas-Based Interactive Annotation UI
Building a performant, interactive annotation interface supporting multiple shape types — bounding boxes, polygons, ellipses, lines — and frame-by-frame video annotation required a canvas-based solution capable of handling high-precision user interactions without sacrificing responsiveness.
Complex Data Flows Across Features
The platform combined dataset management, annotation, marketplace transactions, subscription billing, and community features — each with distinct data models and user workflows requiring careful frontend architecture to prevent complexity from accumulating across feature boundaries.
Our Solution
01
Konva.js Canvas Annotation Interface
Built the annotation interface using Konva.js for high-performance canvas rendering, supporting bounding box, polygon, ellipse, and line annotation types with precise interaction handling. Frame-by-frame video annotation was implemented with smooth scrubbing and per-frame label management.
02
Next.js 13 with TypeScript and Material-UI
Developed the complete platform frontend using Next.js 13 with TypeScript for end-to-end type safety. Material-UI provided the design system, Framer Motion handled smooth UI transitions, and Chart.js powered data visualization for dataset analytics.
03
Dataset Marketplace & Billing UI
Built the dataset marketplace for browsing, filtering, and purchasing datasets, alongside subscription management interfaces for tiered plans. React Hook Form and Zod handled all form validation across the platform.
Technologies Used
Frontend
Next.js 13
React 18
TypeScript
Material-UI
Konva.js
Framer Motion
Chart.js
React Hook Form
Zod
Results & Impact
The Flockfysh frontend delivered a rich, interactive platform for AI dataset creation and collaboration, combining advanced annotation tools with marketplace and community features.
5+
Annotation Types
Bounding boxes, polygons, ellipses, lines, and video frame annotation
Full
Platform Sections
Annotation, marketplace, billing, community, and analytics all delivered
Next.js 13
Tech Stack
Modern Next.js with TypeScript, Material-UI, and Konva.js canvas rendering
Project Gallery
