Hackonnect

Hackonnect: Supercharge your hackathon journey with AI. Seamlessly generate ideas, build high-performing teams, and accelerate your project from concept to successful startup.

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 also integrated ElevenLabs for high-quality text-to-speech narration. We learned how to craft effective prompts, manage API keys, and parse AI outputs for actionable insights.

🧱 Full-Stack Development

Building a scalable and modular application using Next.js (App Router) with TypeScript and Tailwind CSS. We implemented serverless API routes and optimized frontend performance, leveraging UI component libraries like Shadcn UI for a polished user experience.

🗃️ Data Management & Migration

We utilized NeonDB (PostgreSQL) for core data storage, managing models like Idea, TeamMessage, and TeamProfile with Prisma ORM. This involved configuring connection pooling and handling direct connections.

🔴 Real-Time Communication

Implementing live team chat functionality 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.

🔐 Authentication

Integrating Clerk for robust user authentication and management, providing secure access to user-specific data and team features.

🔧 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), React, TypeScript, Tailwind CSS, Shadcn UI, React Flow (for flowcharts)
Backend/API: Next.js API Routes (Serverless Functions), Perplexity API (Sonar Pro & Sonar Deep Research models), ElevenLabs API
Database: NeonDB (PostgreSQL) with Prisma ORM
Real-Time: Socket.IO (for team chat)
Authentication: Clerk
Deployment: Netlify

🌟 Key Features

🌐 AI Hackathon Finder

Uses Perplexity AI to deliver personalized hackathon listings globally based on user interests and input themes, searching across major platforms like Devpost, Devfolio, DoraHacks, and MLH.

💡 AI Idea Generator

Utilizes Perplexity AI to transform simple user inputs or problem statements into comprehensive project overviews, complete with suggested use cases, features, and potential tech stacks.

📊 Project Flowchart Generator

Automatically visualizes AI-generated project ideas or user-defined project structures into interactive flowcharts using React Flow, helping users understand project architecture, modules, and dependencies.

⚖️ Competitive Analysis

Compares user projects against past winning submissions using Perplexity AI, offering insights on uniqueness, impact, and areas for improvement.

🧰 AI Resource Hub

Provides AI-driven recommendations for APIs, datasets, development tools, and learning resources relevant to the user's project theme and chosen technologies.

👥 Team Collaboration & Management

Includes tools for team formation based on skills, interests, and availability, and real-time team chat functionality using Socket.IO for seamless communication.

🧑‍🏫 AI Mentorship Matching

Uses intelligent algorithms to match mentors with mentees, analyzing skill levels and generating optimal session schedules.

🚀 Hackathon-to-Startup Launchpad

Features AI-powered tools to generate comprehensive pitch packages (slide decks, scripts, storyboards) using Perplexity AI, and professional voice narration for presentations using ElevenLabs.

🌱 Sustainability Score

Evaluates a project's environmental, social, and economic impact, providing SDG alignment, carbon footprint assessment, and actionable recommendations.

🚧 Challenges Faced

🎯 AI Prompt Engineering and Response Parsing

Crafting effective prompts for the Perplexity API to ensure accurate, relevant, and consistently formatted JSON responses was an iterative process. Extracting and structuring data from the AI's often verbose outputs for features like flowcharts, competitive analysis, and resource recommendations required robust parsing logic.

🔁 Real-Time Synchronization

Implementing Socket.IO for team chat and ensuring real-time updates across multiple clients demanded careful handling of connection states, message broadcasting, and maintaining data consistency, especially in serverless environments.

🛠️ Database Setup and Connectivity

Ensuring the PostgreSQL database (NeonDB) was correctly set up and accessible for both pooled and direct connections posed challenges. Initial setup and migration processes required meticulous attention to connection strings and schema synchronization.

🔐 Authentication Integration (Clerk)

We encountered issues with Clerk authentication, specifically "refused to connect" errors. This required careful configuration of allowed domains in the Clerk dashboard and ensuring environment variables were correctly set for both development and deployment environments.

🧩 Build and Dependency Management

Resolving build failures related to PostCSS and Tailwind CSS, such as the Cannot find module '@tailwindcss/postcss' error, required updating dependencies and ensuring the PostCSS configuration was correct for the Next.js build process. This highlighted the importance of precise dependency management in a complex project.

✅ Conclusion

This project has been a tremendous learning experience, deepening our understanding of AI integration, real-time systems, database management, 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