Designflow is a professional design platform with intuitive tools, smart templates, and AI-powered transformations to create, enhance, and collaborate on stunning visuals—effortlessly.
Team Leader : Aditya Mazumdar
Members: Iman Dutta, Soumyadip Maity, Arpita Chattopadhyay
DesignFlow is a powerful web-based design studio that enables users to create stunning visuals for various platforms. With an intuitive interface, AI-powered features, and extensive customization options, it simplifies graphic design for both beginners and professionals.
Custom canvas dimensions
Predefined templates for:
Social media (Instagram, Facebook, Twitter, LinkedIn, Pinterest)
YouTube (thumbnail, banner, post)
Presentations (PowerPoint)
Print materials (A4 flyer)
Shapes: Circle, Square, Triangle, Line, Rectangle, Ellipse, Pentagon, Hexagon, Star, Arrow, Heart
Images:
Upload from device
Search via Unsplash integration
Transformations via Streamlit app (background removal,5 filters)
Text:
Multiple text types (heading, subheading, paragraph)
Rich formatting (bold, italic, underline)
Font selection
AI content generation (Gemini 2.0 Flash)
Stickers:
Extensive emoji library
Drawing Tool:
Freehand drawing with mouse using pencil tool
Undo / Redo functionality for canvas
Multiple users can work on the same canvas simultaneously
Color adjustment
Border styling
Opacity control
Dynamic resizing
Draggable & rotatable elements
Background customization
Recent designs section
Projects organization
Template library
Design management (create/delete)
Generative AI: Gemini 2.0 Flash for content generation
Storage: Convex cloud database
Media: ImageKit.io for image hosting
Stock Images: Unsplash API
Secure authentication and user management: Stack Auth
Next.js (App Router)
Tailwind CSS
Fabric.js (Canvas manipulation)
React Icons
Convex (Database & backend functions)
Flask (AI content generation)
Streamlit (Image transformations)
Google Gemini API
Unsplash
Convex
Stack Auth
Node.js (v18+)
Python (for Flask backend)
flask
flask_cors
google.generativeai
streamlit
decouple
numpy
PIL
rembg
Convex account
ImageKit.io account
Google API key (for Gemini)
Unsplash API key
Stack Auth account
git clone https://github.com/aditya95-pixel/design-flow.git
cd design-flow
npm i
Create .env.local file
CONVEX_DEPLOYMENT=
NEXT_PUBLIC_CONVEX_URL=
NEXT_PUBLIC_STACK_PROJECT_ID=
NEXT_PUBLIC_STACK_PUBLISHABLE_CLIENT_KEY=
STACK_SECRET_SERVER_KEY=
NEXT_PUBLIC_IMAGEKIT_PUBLIC_KEY=
NEXT_PUBLIC_IMAGEKIT_PRIVATE_KEY=
NEXT_PUBLIC_IMAGEKIT_URL_ENDPOINT=
NEXT_PUBLIC_UNSPLASH_ACCESS_KEY=
Add the keys as applicable
npm run dev
cd backend
python app.py
cd backend
streamlit run imagetransformer.py
The project has been successfully deployed using Vercel (except for AI text generation, which is currently disabled due to API rate limits).All other features are live and functional.
This site link: DesignFlow
During the hackathon, our team made significant progress in building DesignFlow, a collaborative design studio tailored for ease of use and creative flexibility. We implemented a rich set of features including custom canvas templates for social media, presentations, and print, along with a variety of design elements such as shapes, text, images, and stickers with a number of customisations available. Users can upload images, apply Streamlit-powered transformations (including background removal and various filters), and access stock images via the Unsplash API. The text tool supports rich formatting, font selection, and is integrated with AI-powered content generation using Gemini. A standout achievement was the successful implementation of real-time collaboration and editing, made possible by the Convex cloud database. Using Convex, we enabled seamless synchronization across users—allowing multiple people to edit the same canvas simultaneously, with changes reflected in real-time. This was further enhanced with undo/redo capabilities and a freehand drawing tool (pencil), giving users full control over their creative workflow. We also ensured secure user management using Stack Auth, and smooth media handling through ImageKit.io. The frontend was built with Next.js and Tailwind CSS, with Fabric.js handling canvas manipulation, while the backend services were powered by Flask and Streamlit. We successfully deployed the web application with the features live and functional, offering users a smooth and interactive design experience. Overall, DesignFlow evolved into a robust, real-time, cloud-powered design platform.