The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
🚀 Just wrapped up an intense and incredibly fun Full-Stack Take-Home Assignment for Flodo AI!
I was tasked with building a complete Task Management Dashboard from scratch, and I decided to go all-in on both the architecture and the UI/UX. It was a great experience balancing complex state management with a premium, futuristic design.
Here’s a breakdown of what I built using Flutter (Frontend) and Python/FastAPI (Backend):
✨ Premium UI/UX: Designed a custom Glassmorphism interface layered over a Vanta.js 3D animated background to give it that sleek, modern AI-startup feel.
🔒 Task Dependencies: Implemented a 'Blocked By' logic where dependent tasks visually grey out and lock until the parent task is marked as "Done".
🔍 Debounced Autocomplete Search: Built a custom search bar with a 300ms debounce to optimize API calls, complete with real-time dynamic text highlighting for matching queries.
💾 Draft Preservation: Leveraged Riverpod for state management to ensure that if a user accidentally closes the 'New Task' modal, their unsaved text is preserved as a draft.
⏳ Simulated Latency Handling: Engineered a 2-second non-blocking delay for CRUD operations with smooth loading states and double-tap prevention.
A huge thanks to the team at Flodo AI for putting together such a well-thought-out and challenging assignment. It really pushed me to optimize my API calls and rethink how to handle complex widget states elegantly!
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
Building a Zero-Touch Design Feedback Loop with Slack and the @Paper MCP
What if you never had to manually process a minor design revision again? As designers and developers, we easily waste 30% of our week fulfilling fast client requests—changing button colors, adjusting typography, or tweaking padding. I decided to completely automate this process.
In this project, I engineered an autonomous AI-driven workflow that physically alters native UI designs based on conversational Slack messages, proving the massive potential of the Paper MCP.
✨ The Power of the Paper MCP: Historically, AI agents have struggled to actually "see" or edit design files. By deploying the Paper MCP, I gave a raw Large Language Model the ability to programmatically traverse a 2D design canvas.
The Setup: I design the initial UI (like a Login Page) using Paper and post the screenshot to the client's Slack channel.
The Trigger: The client requests changes natively in Slack by mentioning a custom @DesignBot (e.g., "Make the login button green and change the title to 'Welcome'").
The Execution: Instead of guessing layout geometry, the AI uses the Paper MCP to dynamically query the canvas, isolate the precise target node, and duplicate the master to create a protected variant. It aligns the new design on the canvas grid and updates the styling properties natively.
The Delivery: The MCP server intercepts the final render state and pushes a flawlessly formatted screenshot right back into the Slack thread.
🛠️ Technical Stack Used:
Paper MCP: The absolute core of the project, enabling rigorous JSON-RPC access to native design layers, text bounds, and styling hooks.
Slack Bolt (Socket Mode): For threading logic, instant reaction processing, and conversational memory.
Agentic LLM Engine: Used native OpenAI tool-calling to map the complex MCP schemas directly into the AI’s brain so it never hallucinates commands.
The Result: Clients experience magical, instantaneous visual revisions directly inside their communication channels, while designers and developers win back hours of completely uninterrupted, deep-focus work.
Check out the video demo below to see the AI leverage Paper MCP to parse a layer tree and dynamically manipulate the UI!
This is the kind of workflow that quietly kills 30% of design busywork 👀
Recently, I’ve been working on improving my portfolio and getting it ready for launch.
Been refining the overall design, polishing my case studies, and learning more about deploying it properly through GitHub and Vercel. Still tweaking a few things, but it’s been fun seeing it come together bit by bit. These are some early looks at the loading screen, hero section, selected works layout, and contact page as I continue refining the experience.
Still a work in progress, but I’m enjoying the process of bringing it all together bit by bit.
Outstanding work
For years I've been refining my craft as designer and a strong background as a Front-End developer. Recently, I've been exploring how to push that further by integrating AI into my workflow and pairing every project with a headless CMS. So clients get a site they can actually update on their own, no dev tickets required.
The design-to-code problem everyone knows:
Handoffs break things. Spacing is off. Colors don't match. Interactions get lost in translation. The Figma file says one thing, the browser says another. It's the #1 pain point in every design-to-dev workflow.
That doesn't happen here, because I'm both sides of the handoff. Every screen is designed in Figma, and every pixel is implemented exactly as designed. No compromises, no "close enough".
What AI changes in this equation:
By incorporating AI into the development process, I can move significantly faster from a validated Figma design to a fully functional, production-grade web application, without sacrificing quality or fidelity. What used to take weeks now takes days.
What the client gets after launch:
A Sanity CMS Studio where they can update hero images, property listings, page content, SEO metadata, and company info, all from a single dashboard, with zero technical knowledge. Changes go live in under a minute.
The full stack:
Figma → Next.js + Tailwind CSS → Sanity CMS → Vercel
Design. Build. Ship. Update. All in one workflow, one person, zero friction between what's designed and what's delivered.
🔗 See it live: https://rahome.vercel.app
This same approach works for any industry: healthcare, e-commerce, portfolio sites, you name it. If you need a custom-designed web app that you can actually manage yourself after launch, let's talk.
Nice work
Challenges
View all
Fuser Co-create
$5K4h 03m left345 participants
Morphic Workflows
$10K3d left272 participants
Zo Computer Challenge
$10K3d left562 participants
Anything Ship & Sell Remixathon
$10K10d left195 participants
Impossible UI with Rive
$10K10d left125 participants
Runway $100k Big Pitch Challenge
$100K10d left196 participants
Trending
Runway
AI video generation is exploding. What are you dreaming up in Runway?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
portfolioreview
The best portfolios tell a story, not just show a grid. Share yours for feedback.
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?