Skip to content
    Back to all Bounties

    Earn 9,000 ($90.00)

    Time Remainingdue 1 month ago
    Open

    Interactive 3D Brain Model Web App with Course Signup

    KevinHoeflinger
    KevinHoeflinger
    Posted 1 month ago

    Bounty Description

    I'm looking for a web developer to build a single-page interactive web app that displays an anatomically accurate 3D brain model. The goal of this app is to provide free, engaging educational content about the brain while encouraging users to sign up for an in-depth paid course taught by a board-certified neurosurgeon (my Dad).

    Requirements:

    Model Integration:

    Load a detailed 3D brain model in GLB/GLTF format using a JavaScript 3D framework such as Babylon.js, Google Model Viewer, or Three.js (whichever is most reliable).
    Ensure that each major brain region is individually identifiable for interactivity (using segmentation, separate mesh names, or other methods).
    Interactivity:

    Hover Effects: When users hover over a brain region, change its appearance (e.g., highlight, change opacity or color) to indicate interactivity.
    Click Events: When a user clicks on a brain region, display an info box near the mouse cursor with a placeholder description about that region.
    Navigation Controls: Provide intuitive rotation and zoom controls so that users can explore the brain model from multiple angles.
    Educational and Conversion Elements:

    The main interface should focus on free educational content—brief, engaging descriptions of brain regions.
    Include a prominent call-to-action (CTA) on the page (e.g., a banner or modal) prompting users to sign up for a paid, in-depth course on brain education taught by a board-certified neurosurgeon.
    Ensure that the transition from the free content to the course signup is smooth and clearly communicated.
    Mobile Responsiveness:

    Design the app to be fully responsive and perform well on mobile devices.
    Ensure that both the 3D viewer and interactive elements (info boxes, CTAs) scale properly across various screen sizes.
    Code Requirements:

    Implement the project in a well-organized, minimal file structure. You may use a single HTML file with inline CSS/JavaScript or separate files if that improves clarity.
    Provide clear comments and documentation throughout the code.
    Utilize modern coding practices, and ensure the code is clean, efficient, and maintainable.
    Optional Enhancements:

    Add subtle animations for transitions (e.g., when displaying info boxes or switching to the course signup section).
    Include basic accessibility features, such as keyboard navigability and ARIA labels for interactive elements.
    Consider tracking user interactions (e.g., which brain regions are most frequently clicked) to inform future content enhancements.
    Deliverables:

    A complete web app that implements the interactive 3D brain model with educational info and a course signup prompt.
    A live demo or clear instructions on how to run the app on Replit.
    Source files (HTML, CSS, JavaScript, and the 3D model file or instructions on how to access it).
    Documentation or inline comments that explain the functionality of the code.