Flowy

<sub>ucode connect webster "Flowy" is the project of ucode connect the Track FullStack programming bootcamp
lasting 6 weeks (May 5, 2025 - June 16, 2025),
where the NestJS with TypeScript and React with KonvaJS were used to develop the service for graphic design.

The purpose: create a service for graphic design that allows every user without design skills to create and
process images using the whole cycle of Challenge Based Learning framework with a team.</sub>

📑 Table of Contents

• 🎨 About "Flowy" Platform
• 🧑‍💻 Team
• 🌊 About "Flowy" Frontend
• 🎯 Features and Functionality
  • 🖌️ Core Drawing Tools
  • 📝 Text & Typography
  • 🔷 Shape Tools
  • 🖼️ Image & Background Management
  • ✂️ Specialized Editing Tools
  • 📋 Canvas & Navigation Management
  • 🔄 Advanced Functionality
  • 👥 User Management System
  • 📂 Project Management
  • 🌐 External Service Integration
  • 🔔 Sharing & Distribution
• 🧶 Use case diagram
• 🧲 Activity diagram
  • 👤 User Registaion
  • 🎞 Action History System
  • 📁 File Export
• 🚚 Deployment Diagram
• 🚀 Get started

🎨 About "Flowy" Platform

Flowy is a web-based graphic design platform that provides professional-grade tools for creative design and image editing.

Create stunning visuals with canvas-based drawing tools, advanced image manipulation, layer management, and seamless project workflows in your browser.

Built with modern web technologies, Flowy delivers a comprehensive design experience comparable to desktop applications.

Here is a link to the presentation file.

🧑‍💻 Team

• 👩🏼‍💻 Inessa Repeshko

• 🧑🏼‍💻 Andrew Laskevych

• 🧑🏻‍💻 Vadym Zharyi

🌊 About "Flowy" Frontend

Flowy is a comprehensive web-based graphic design platform inspired by industry-standard design tools like Photoshop and Canva. Built using React, TypeScript, Konva, and Tailwind CSS, it features a highly responsive and intuitive interface optimized for creative workflows.

The Flowy project is designed for professional graphic design and creative content creation. It combines powerful design tools with modern web technologies, allowing users to create, edit, and manipulate images and graphics directly in their browser.

Frontend technologies:

• React provides a component-based architecture for complex interactive interfaces with optimal performance using a virtual DOM;
• Vite provides build speed and built-in TypeScript support with Hot Module Replacement to accelerate development;
• Konva and React-Konva are key technologies for graphics functionality, providing a powerful 2D API for working with vector graphics and a declarative approach to working with canvas;
• Tailwind CSS + Radix UI create an effective styling system with a “utility first” approach and accessible UI components.

Built with React Konva for canvas rendering, the application provides smooth performance for complex graphic operations while maintaining cross-platform compatibility and accessibility.

🎯 Features and Functionality

Flowy is a comprehensive web-based graphic design platform that provides the following features:

🖌️ Core Drawing Tools

1. Brush Tool

• Freehand Drawing:

  • Flexible line thickness adjustment
  • Color selection with primary/secondary color system
  • Transparency level control
  • Smooth stroke rendering with anti-aliasing

• Mirror Modes:

  • No mirroring (standard drawing)
  • Vertical mirroring
  • Horizontal mirroring
  • Four-way mirroring for symmetrical designs

• Object Transformations:

  • Drag and drop positioning
  • Stretching and compression
  • Rotation controls

2. Eraser Tool

• Selective Erasing:
  • Adjustable eraser thickness
  • Hardness settings for precise control
  • Support for all mirror modes
  • Symmetrical editing capabilities

3. Hand Tool (Navigation)

• Canvas Navigation:
  • Pan and navigate across the canvas
  • Zoom percentage adjustment
  • Fit to window functionality
  • Fill window for optimal workspace display

📝 Text & Typography

Text Tool

• Font Management:

  • Font family selection
  • Font size customization
  • Text styles: bold, italic, underlined, strikethrough

• Text Formatting:

  • Case control: normal, uppercase, lowercase, sentence case
  • Color settings: text color, background color, highlight color
  • Line height adjustment
  • Four alignment options: left, center, right, justified

• Text Operations:

  • Add, copy, and delete text objects
  • Reset all text settings
  • Keyboard shortcuts support
  • Real-time text editing

🔷 Shape Tools

Geometric Shapes

• Shape Variety:

  • Rectangle, square, rounded rectangle, squircle
  • Circle, ellipse, and custom curves
  • Line tool with various stroke options
  • Triangle, pentagon, hexagon shapes
  • Star, heart, and arrow shapes

• Shape Properties:

  • Fill color customization
  • Border color, width, and style settings
  • Corner rounding adjustment
  • Reset, add, copy, and delete operations
  • Keyboard shortcuts support

🖼️ Image & Background Management

Advanced Image Tools

• Image Selection & Management:

  • Dropdown image selector
  • Active image switching
  • Layer management (send to back/bring to front)

• Image Adaptation:

  • Fit to canvas with proportion preservation
  • Full canvas fill mode
  • Horizontal and vertical flipping
  • Size adjustment controls

• Professional Features:

  • Remove.bg integration for automatic background removal
  • High-precision background elimination
  • Transparency, brightness, and contrast adjustment
  • Fill and background color settings
  • Settings reset functionality

✂️ Specialized Editing Tools

4. Crop Tool

• Canvas Resizing:
  • Height and width adjustment
  • Aspect ratio controls
  • Apply or reset changes
  • Interactive crop selection

5. Liquify Tool

• Image Deformation:
  • Cursor width adjustment
  • Multiple liquify methods:
    • Smudge, Swirl, Pinch
    • Bloat, Crystalize, Reconstruct
  • Percentage-based effect strength
  • Effect cancellation capability

6. Blur Tool

• Selective Blurring:
  • Adjustable cursor width
  • Variable effect strength
  • Effect cancellation
  • Brush-based blur application

📋 Canvas & Navigation Management

Navigation System

• Mini-map Integration:
  • Convenient canvas area control
  • Zoom and coordinate display
  • Real-time canvas dimensions
  • Zoom level indication

Color System

• Comprehensive Color Tools:
  • Full-featured color palette
  • Pre-configured color sets
  • Transparency adjustment
  • Primary/secondary color system

🔄 Advanced Functionality

Version Control & History

• Project Versioning:
  • Navigate to specific project versions
  • Unlimited undo/redo operations (up to 50 steps)
  • Change history tracking
  • Safe user workflow

Object Manipulation

• Editing Operations:
  • Copy, cut, and paste objects
  • Edit existing text, shapes, and drawings
  • Object scaling and rotation
  • Transform handles for manual adjustments

👥 User Management System

Authentication & Authorization

• User Registration:

  • Email confirmation required
  • Dedicated confirmation page

• Login Methods:

  • Traditional login/password
  • Google OAuth integration
  • Enhanced security and convenience

• Profile Management:

  • Edit personal information (name, surname)
  • Profile photo upload (max 5MB)
  • File size validation

📂 Project Management

User Projects

• Personalized Dashboard:
  • Recent projects support
  • Project history viewing
  • Project duplication for variations
  • Project deletion and renaming
  • Storage for up to 20 projects with metadata
  • Creation and modification date tracking

File Operations

• Project Lifecycle:
  • New project creation with canvas sizing
  • JSON format saving for editing
  • Multiple export formats: PNG, JPG, WEBP, SVG, PDF
  • Image import for project base
  • Auto-save functionality
  • Browser crash recovery

🌐 External Service Integration

Image Resources

• Unsplash Integration:

  • High-quality professional background images
  • Search and download functionality

• Pixabay Integration:

  • Element and object image search
  • Expanded composition possibilities

• Remove.bg Integration:

  • Professional image processing
  • High-precision background removal
  • Quality preservation

AI-Powered Features

• Pollinations.AI Integration:
  • Unique image generation from text descriptions
  • Creative expression expansion
  • AI-powered content creation

🔔 Sharing & Distribution

Project Sharing

• ImgBB Integration:

  • Public link creation
  • Automatic email template generation
  • Clipboard image copying

• Social Media Integration:

  • Telegram sharing with pre-formed descriptions
  • Facebook and Instagram post creation
  • Multi-platform distribution

Export Capabilities

• Multiple Format Support:
  • PNG, JPG, WEBP, SVG, PDF export
  • Custom resolution and quality settings
  • Professional output options

🧶 Use case diagram

🧲 Activity diagram

👤 User Registaion

🎞 Action History System

📁 File Export

🚚 Deployment Diagram

🚀 Get started

1. Run the flowy-backend project.
2. Clone this repository and move to the project directory:

   git clone <repository-url> flowy-frontend
   cd flowy-frontend

3. Install the dependencies:

   npm install

4. Run the development server:

   npm run dev

5. For production build:

   npm run build:prod

6. Application will be launched on http://localhost:5173/.

---

© Inessa Repeshko. 2025