Fantasy founders

Fantasy football, except you are drafting cracked swe/cs kids

Comment

Inspiration

While trying to come up with an idea for a fun project, we looked towards our own hobbies. Fantasy sports are a popular game/activity enjoyed by many worldwide, and so our team thought "Why not make a fantasy business game?". Career success is more sought out than ever in the present, and individuals have very different opinions on what makes a business thrive. Our goal in creating Fantasy Founders is to bring the fun aspect of fantasy football leagues to the business and career success world, and discover more about key factors contributing to business success.

What It Does: Fantasy Founders: A Fantasy League for Linkedin Users

Fantasy Founders is a fantasy league platform where users draft and manage teams of LinkedIn founders and influencers, competing against other managers based on real LinkedIn metrics. Users can:

  • Draft Founders: Browse and select top LinkedIn founders to build their fantasy team based on followers, engagement rates, and influence metrics
  • Manage Your Team: View your roster, track individual founder performance, and make strategic roster changes
  • Compete in Leagues: See how your team stacks up against others in the league with live leaderboards and rankings
  • Track Performance: Monitor your founders' LinkedIn activity, engagement rates, network growth, and points scored
  • View Standings: Check league-wide statistics, win-loss records, and see who's leading the pack

The platform brings the competitive excitement of fantasy sports to the professional networking world, allowing users to showcase their knowledge of business leaders and industry influencers while having fun with friends and colleagues.

How we built it

We built Fantasy Founders as a full-stack web application using modern web technologies:

What We Used for Frontend:

  • Next.js 16 with App Router for rendering and routing
  • React 19 with TypeScript for component development
  • Tailwind CSS 4 for styling
  • Lucide React for icons

What We Used for Backend:

  • Next.js API Routes for backend endpoints
  • TypeScript for API development
  • Centralized data management with shared data sources

Architecture:

  • Client-side components using React hooks (useState, useEffect) for dynamic data fetching
  • Server-side API routes that serve JSON data to the frontend
  • Clean separation between frontend pages and backend APIs
  • Responsive design that works seamlessly

Key Features Implemented:

  • Dynamic team management page with real-time data fetching
  • Interactive draft interface with search and filtering
  • Leaderboard with rankings and statistics
  • Dashboard with team performance metrics
  • Direct LinkedIn profile integration with clickable links

Challenges we ran into

  1. Connecting Frontend to Backend: Initially, our frontend pages had hardcoded mock data. We had to properly integrate Next.js API routes with React components using useEffect and useState hooks to fetch and display dynamic data.

  2. Next.js App Router: Understanding the new App Router architecture in Next.js was challenging, especially distinguishing between server and client components and knowing when to use 'use client'.

  3. Linkedin Scraping: Intially, we wanted to scrape Linkedin data to build our database, but ran into challenges regarding the availability of tools and the legal aspect of it.

  4. State Management: Managing loading states, error handling, and data fetching across multiple components while maintaining a good user experience with loading indicators.

  5. API Route Structure: Organizing our API routes in a logical, maintainable way and ensuring all routes use a shared data source to avoid data duplication and inconsistencies.

  6. Package Dependencies: Encountering missing dependencies (like lucide-react) and learning to properly manage npm packages and ensure all required libraries are installed.

Accomplishments that we're proud of

  1. Full-Stack Integration: Successfully connecting our frontend React components to backend API routes, creating a fully functional full-stack application where data flows seamlessly from the backend to the frontend.

  2. Modern, Responsive UI: Built a modern user interface using CSS that's fully responsive and provides an excellent user experience.

  3. Clean Architecture: Implemented a well-organized codebase with clear separation of concerns, reusable components, and centralized data management that makes the codebase maintainable and scalable.

  4. Working API Endpoints: Created multiple functional API routes (/api/my-team, /api/leaderboard, /api/waiver-wire, /api/summary) that serve data to different parts of the application.

  5. Interactive Features: Implemented interactive features like the draft system with search and filtering, team management with edit capabilities, and direct LinkedIn profile links for each founder.

  6. Type Safety: Maintained type safety throughout the application using TypeScript, reducing bugs and making the codebase more maintainable.

  7. Git Workflow: Successfully learned and implemented proper Git workflow, including staging, committing, and pushing changes to GitHub.

What we learned

  • Next.js Fundamentals: Gained understanding of Next.js App Router, API routes, server components, client components
  • React Hooks: Learned how to use useState and useEffect for managing component state and side effects like data fetching
  • TypeScript: Learned to write type-safe code, define interfaces, and maintain type consistency across the application
  • API Development: Understood how to create RESTful API endpoints and serve JSON data to frontend applications
  • Full-Stack Development: Learned how to architect and build full-stack applications with clear separation between frontend and backend
  • Tailwind CSS: Gained proficiency in utility-first CSS and responsive design principles
  • Git & Version Control: Improved Git skills including staging, committing, and pushing changes to remote repositories
  • Problem Solving: Developed debugging skills and learned to troubleshoot issues like missing dependencies and API integration problems

What's next for Fantasy founders

  1. LinkedIn API Integration: Connect to the official LinkedIn API to fetch real-time data about founders, including actual follower counts, engagement metrics, and activity updates.

  2. User Authentication: Implement user authentication using NextAuth.js (already in dependencies) so users can create accounts, log in, and have personalized teams.

  3. Database Integration: Set up Prisma with a database (PostgreSQL or SQLite) to store user teams, league data, and founder information persistently.

  4. Real-Time Scoring System: Develop a scoring algorithm that calculates points based on LinkedIn metrics like:

    • Follower growth
    • Post engagement rates
    • Network expansion
    • Career milestones (job changes, promotions)

  5. Multi-User Leagues: Allow users to create and join leagues, compete in weekly matchups, and see live standings updates.

  6. Advanced Features:

    • Trade system between team managers
    • Waiver wire with transaction processing
    • Matchup scheduling and playoff brackets
    • Push notifications for draft picks and trade offers
    • Real-time chat or messaging between league members

  7. Enhanced UI/UX:

    • Dark mode support
    • Advanced filtering and sorting options
    • Data visualization charts for performance tracking
    • Mobile app version (React Native)

  8. Analytics Dashboard: Provide detailed analytics and insights about founder performance, trend analysis, and predictive scoring.

  9. Social Features: Add social sharing, league invites, and community features to make the platform more engaging.

Share this project:

Updates