Flowniq

AI-Powered Roadmap Generator

Comment

About Flowniq

Inspiration

The inspiration behind Flowniq stemmed from a common challenge: the difficulty in transforming abstract goals into concrete, actionable plans.

Whether it's learning a new skill, planning a complex trip, managing a project, or sticking to a fitness routine — the initial hurdle of structuring these aspirations often leads to procrastination or abandonment.

We envisioned a tool that could leverage the power of artificial intelligence to democratize structured planning, making it accessible and visually engaging for everyone. The goal was to create a personal AI consultant that could break down any objective into a clear, step-by-step roadmap, complete with relevant resources and interactive visualization.

What It Does

Flowniq is an AI-powered roadmap generator that transforms your goals into clear, visual, and actionable plans.

It supports a diverse range of categories, including:

  • Kitchen Recipe: Generate step-by-step cooking guides with ingredient lists and techniques.
  • Travel Planning: Create detailed itineraries with integrated maps and local recommendations.
  • Project Planning: Outline structured project roadmaps with milestones and deliverables.
  • Fitness Planning: Design personalized workout plans with nutrition guidance and progress tracking.

Key Features

  • Interactive tree visualization using React Flow
  • Secure user authentication and Row Level Security via Supabase
  • AI-generated detailed instructions and media (e.g. YouTube videos, map locations)
  • Progress tracking
  • PDF export functionality

How We Built It

Frontend

  • React 18.3.1 with TypeScript 5.5.3
  • Tailwind CSS 3.4.1 for utility-first styling
  • React Flow 12.0.4 for roadmap visualization
  • React Router DOM 6.20.1 for routing
  • Lucide React for icons
  • Vite 5.4.2 for build tool & dev server

Backend

  • Node.js with Express 4.18.2
  • CORS and environment variables managed using dotenv

AI Integration

  • Gemini AI: Primary roadmap generation (phases + steps)
  • Mistral AI: Detailed, actionable instructions for each step

Database & Auth

  • Supabase (PostgreSQL)
  • Row Level Security (RLS)
  • Real-time dashboard updates

Challenges We Ran Into

AI Prompt Engineering

Ensuring structured output (e.g., exactly four steps per phase) from AI models required meticulous prompt engineering and extensive trial-and-error.

Complex Interactive Visualization

Creating a dynamic, interactive tree structure with custom nodes/edges in React Flow was challenging — especially maintaining smooth performance as roadmaps scaled.

Multi-AI Integration

Balancing Gemini and Mistral APIs with different formats and capabilities, along with fallback/error handling mechanisms, added backend complexity.

Data Structuring and Persistence

Storing deeply nested JSON structures and applying RLS accurately in Supabase was a learning curve.

Accomplishments We're Proud Of

  • ✅ Seamless AI Integration: Gemini + Mistral working in harmony
  • ✅ Interactive Visual Roadmaps: React Flow canvas that's engaging and clear
  • ✅ Holistic Feature Set: Video suggestions, maps, PDF export
  • ✅ Secure Full-Stack Architecture: Auth, database, and UI built from scratch

What We Learned

  • 📌 Prompt Engineering: Writing precise prompts for structured output
  • 📌 React Flow Mastery: State management, custom rendering
  • 📌 Supabase: Real-world use of RLS, subscriptions, and database design
  • 📌 Full-Stack Practices: API connection, error handling
  • 📌 UX Design: Iterative interface development for clarity and engagement

What's Next for Flowniq

  • 👥 Collaboration: Real-time roadmap sharing and editing
  • 📊 Advanced Analytics: Usage and progress insights
  • 🤖 More AI Models: Enrich roadmap content and depth
  • 🌍 Internationalization: Multi-language support
  • 📱 Mobile App & PWA: Roadmaps on-the-go
  • 🎨 Customization: Personalized roadmap themes & AI tone

Built With

Share this project:

Updates