Foundrly

Foundrly is a Tinder-style app for bad startup ideas where users swipe idea cards, match with people who liked the same idea, and chat in real-time.

Comment

📖 Project Story

The Inspiration

Foundrly was born from a simple question: What if finding a co-founder was as easy as swiping on dating apps, but for startup ideas? The name "Foundrly" (pronounced "founder-ly") reflects this vision—a playful combination of "founder" and "friendly."

The concept emerged from three key observations:

  1. Tinder's swipe mechanics work brilliantly for quick decision-making
  2. Netflix's dark, cinematic UI creates an immersive, engaging experience
  3. The startup world needed a better way to connect founders around ideas

The logo embraces a boat-style aesthetic—simple, bold, and memorable—representing the journey of building something together.

The Innovative Idea

The core innovation is the Request System. Unlike typical matching apps where swiping right creates an instant match, Foundrly introduces a two-step process:

  1. Swipe right on an idea → Send a request message to the idea creator
  2. Idea creator reviews and accepts → Match is created

This adds intentionality: you explain why you're interested, and creators choose who to work with. It mirrors real co-founder dynamics—it's not just about mutual interest, but about having a conversation first.

Additional innovations include:

  • AI-powered idea generation using Google Gemini to create and refine startup ideas
  • AI Roast & Pitch It Badly: Interactive features that use AI to roast ideas or rewrite them in cursed pitch styles, adding humor and engagement
  • Idea-centric matching: Conversations are organized by idea, so multiple conversations with the same person about different ideas are clearly separated
  • Real-time notifications for requests and messages, keeping users engaged

The Design Philosophy

Netflix-Inspired Dark Theme

The entire UI embraces a dark, cinematic aesthetic with red accents, glassmorphism effects, and smooth transitions. This creates a premium feel and reduces eye strain during long sessions.

Tinder-Style Swipe Mechanics

The swipe interface uses Framer Motion for smooth, natural gestures. Cards respond intuitively to drag, with visual feedback for left/right actions.

Boat-Style Logo

The logo is minimalist and bold—clean lines, strong presence, easy to recognize at any size.

How We Built It

Architecture Decisions

We chose a full-stack JavaScript approach:

  • Backend: Node.js + Express.js for a RESTful API
  • Database: MongoDB with Mongoose for flexible schema
  • Real-time: Socket.io for live chat
  • Frontend: React with Vite for fast development

Key Technical Challenges

  1. Real-time Synchronization
  • Problem: Keeping chat messages and notifications in sync across clients
  • Solution: Socket.io with room-based architecture, plus deduplication to prevent duplicate messages
  1. Request System Flow
  • Problem: Implementing the two-step matching process
  • Solution: A Request model with status tracking (pending, accepted, rejected) and a viewed flag for notifications
  1. Idea-Centric Chat Organization
  • Problem: Multiple conversations with the same person about different ideas
  • Solution: Each match is tied to a specific idea, and the UI displays the idea title and "by {person name}" to distinguish conversations
  1. Smooth Swipe Animations
  • Problem: Creating natural, responsive swipe gestures
  • Solution: Framer Motion with drag constraints, spring physics, and proper cleanup on unmount
  1. AI Integration
    • Problem: Generating coherent, creative startup ideas
    • Solution: Google Gemini API with structured prompts and error handling for API failures

Development Process

  1. Backend First: Built the API with Express, MongoDB models, and Socket.io setup
  2. Authentication: Implemented JWT with bcrypt, plus Google OAuth
  3. Frontend: Built React components with TailwindCSS, then integrated with backend
  4. Real-time Features: Added Socket.io for chat and notifications
  5. Polish: Added animations, responsive design, and UX refinements

What We Learned

Technical Skills

  • Real-time web applications with WebSockets
  • Complex state management in React (matches, messages, notifications)
  • MongoDB schema design for relationships (Users, Ideas, Matches, Requests, Messages)
  • API design for scalable features
  • Animation libraries (Framer Motion) for smooth interactions

Product Insights

  • Intentional matching beats instant matching for co-founder discovery
  • Context matters: organizing conversations by idea improves clarity
  • Real-time notifications significantly increase engagement
  • Dark themes can improve perceived quality and reduce eye strain

Challenges Overcome

  1. Socket.io Connection Management
  • Challenge: Handling reconnections, room joins, and cleanup
  • Learning: Proper event listener management and connection state tracking
  1. Notification System Complexity
  • Challenge: Tracking unread requests and messages across different types
  • Learning: Unified notification model with type discrimination
  1. Performance with Many Matches
  • Challenge: Rendering large lists of matches efficiently
  • Learning: Virtualization techniques and proper React key usage
  1. AI Prompt Engineering
    • Challenge: Getting consistent, creative output from AI
    • Learning: Iterative prompt refinement and structured response parsing

The Result

Foundrly successfully combines:

  • Tinder's swipe mechanics for quick idea discovery
  • Netflix's dark, cinematic UI for an engaging experience
  • Boat-style logo for a clean, memorable brand
  • Innovative request system that adds intentionality to matching

The platform enables founders to discover ideas, connect with creators, and start conversations that can lead to real partnerships. It's more than a matching app—it's a tool for building the next generation of startups, one swipe at a time.

Built with passion, curiosity, and a healthy dose of humor about the startup world. Because sometimes, the best ideas come from the worst ones. 🚀

Built With

  • 18
  • ai
  • api
  • architecture
  • authentication
  • autoprefixer
  • axios
  • bcrypt
  • client
  • cors
  • cors-enabled
  • dark
  • dom
  • dotenv
  • environment-based
  • es6+
  • express-validator
  • express.js
  • framer
  • framer-motion)-on-the-frontend-and-node.js-+-express.js-+-mongodb-on-the-backend.-it-supports-real-time-communication-(socket.io)
  • gemini
  • generative
  • glassmorphism
  • google
  • google/generative-ai
  • helmet
  • jsdom
  • jsonwebtoken
  • jsx
  • jwt
  • jwt-authentication
  • jwt-based
  • middleware
  • models
  • modular
  • mongodb
  • mongoose
  • motion
  • mvc
  • netflix-inspired
  • node.js
  • nodemon
  • oauth
  • openai
  • postcss
  • react
  • responsive
  • restful
  • router
  • routes
  • socket.io
  • tailwindcss
  • testing-library/jest-dom
  • testing-library/react
  • theme
  • vite
  • vitest
  • watch
  • websocket
Share this project:

Updates