HackFlow

HackFlow is an AI-powered platform that helps users discover hackathons, generate ideas, build flowcharts, analyze competition, and access curated tools—making hackathon planning effortless.

Comment

About Our Hackathon AI-Powered Platform

Inspiration

This project was inspired by the multifaceted challenges hackathon participants face—ranging from idea generation, team formation, project planning, to competitive analysis. We wanted to build an AI-powered platform that guides users through the entire hackathon lifecycle, making it easier for beginners and experienced participants alike to find relevant hackathons, generate innovative ideas, collaborate effectively, and prepare strong submissions.

What We Learned

Throughout the development journey, we gained extensive knowledge and experience in:

  • AI Integration: Utilizing Perplexity’s advanced AI models—Sonar Pro for real-time hackathon discovery, resource recommendations, and competitive analysis; Sonar Deep Research for deep idea generation and project evaluation. We learned how to craft effective prompts and parse AI outputs for actionable insights.
  • Full-Stack Development: Building a scalable and modular application using Next.js with TypeScript and Tailwind CSS. We implemented serverless API routes and optimized frontend performance.
  • Data Management & Migration: Initially started with Supabase for user and project data, later migrated to NeonDB (PostgreSQL) for better scalability, advanced querying capabilities, and compatibility with our real-time collaboration needs. This migration involved data export/import, adapting queries, and refactoring backend logic.
  • Real-Time Communication: Implementing live team chat and collaboration charts using Socket.IO, enabling smooth, low-latency interactions among team members.
  • Visualization: Leveraging React Flow to transform AI-generated project ideas into interactive flowcharts, helping users visualize project modules, dependencies, and milestones.
  • UX/UI Design: Designing a user-friendly interface that integrates multiple AI-driven features seamlessly, with attention to responsiveness and accessibility.

How We Built It

Our approach was feature-centric, focusing on integrating AI models with real-time collaboration tools in a coherent platform:

Tech Stack

  • Frontend: Next.js (App Router), TypeScript, Tailwind CSS, React Flow for flowcharts
  • Backend/API: Next.js API routes, Perplexity API (Sonar Pro & Sonar Deep Research models)
  • Database: NeonDB (PostgreSQL) replacing Supabase for core data storage
  • Real-Time: Socket.IO for team chat and live team collaboration charts
  • AI Models:
    • Sonar Pro for hackathon finder, resource hub, and competitive project analysis
    • Sonar Deep Research for detailed idea generation and project analysis

Key Features

  • Hackathon Finder: Uses Sonar Pro to deliver personalized hackathon listings globally based on user interests and input themes, scraping data from platforms like Devpost, Devfolio, and DoraHacks.
  • Idea Generator: Converts simple user inputs into comprehensive project overviews with suggested use cases, tech stacks, and problem statements.
  • Project Flowchart Generator: Automatically builds interactive flowcharts representing the architecture and milestones of the project using React Flow and AI-parsed data.
  • Competitive Analysis: Compares user projects with past winning hackathon submissions and suggests improvements to increase uniqueness and impact.
  • Resource Hub: AI-powered recommendations of APIs, datasets, tools, and learning resources relevant to the user's project theme.
  • Team Collaboration: Real-time team chat implemented with Socket.IO to facilitate communication among team members.
  • Team Formation & Management: Tools to create, join, and manage hackathon teams with live collaboration charts and GitHub/Discord integrations.

Challenges Faced

  • Migration from Supabase to NeonDB: Migrating from Supabase to NeonDB was a significant challenge. It involved exporting existing user and project data, adjusting queries and API calls, and refactoring authentication and real-time subscription logic to fit NeonDB’s architecture. This migration improved our backend reliability and performance but required careful testing to ensure data integrity and minimal downtime.

  • API Latency and Rate Limits: The Sonar Deep Research model sometimes had slower response times due to the complexity of the queries. Implementing effective loading states and fallback UI was necessary to maintain a smooth user experience.

  • Parsing and Formatting AI Responses: The AI outputs were often unstructured and verbose. Building parsers to convert these into clean, JSON-formatted data for flowchart generation, competitive analysis, and resource recommendations required iterative refinement.

  • Real-Time Synchronization: Implementing Socket.IO for live chat and collaboration charts demanded handling edge cases like reconnections, message ordering, and multi-client consistency.

  • User Experience Complexity: Integrating multiple AI-driven features—hackathon finder, idea generator, flowchart builder, team tools—while maintaining an intuitive, coherent UI was a continuous design challenge.

Conclusion

This project has been a tremendous learning experience, deepening our understanding of AI integration, real-time systems, database migration, and full-stack development. The platform empowers hackathon participants by combining AI intelligence with collaborative tools, ultimately helping them innovate, connect, and succeed.

We look forward to enhancing the system further with more intelligent suggestions, richer collaboration features, and smoother AI interactions.

Built With

Share this project:

Updates