Skip to content
    Back to all Bounties

    Earn 36,000 ($360.00)

    Time Remainingdue 1 year ago
    Open

    Build a Nextjs/React Web App Boilerplate/Template using Plasmic.app and Stripe

    WilliamBarber7
    WilliamBarber7
    Posted 1 year ago

    Bounty Description

    Problem Description

    I would like to build a web app by dragging, dropping and styling react components inside https://www.plasmic.app. It's a very cool MIT licensed low-code builder. Plasmic hasn't yet implemented a Stripe integration. You also have to implement third party authentication like Supabase Auth yourself as well, and I'm not a web developer.

    I need you to setup a github repo that I can clone, and add my relevant keys (stripe key, supabase key and database url etc.), and ideally deploy as a nextjs app to Cloudflare pages (hopefully their spotty node package support isn't an issue, if so can deploy with vercel or similar).

    Other requirements:

    1. Needs to work with a third party tool like https://getlago.com for usage based pricing
    2. Should use stripe elements instead of stripe checkout (reduces the %age stripe takes of each transaction and it's easier to brand the checkout experience this way). I believe this means you/I will have to "register" these react components with Plasmic to be used inside plasmic?
    3. I will need guidance on how to register the tanstack table component within plasmic as well: https://tanstack.com/table/v8
    4. The auth setup needs to support multitenancy. Example repo showing how to use supabase auth with plasmic here: https://github.com/plasmicapp/plasmic/tree/master/examples/supabase-auth-nextjs-pages-loader though it's using an older/deprecated way of logging into supabase, you will need to figure out how to migrate this to the currently recommended way to do this on supabase's end
    5. Should be setup with million.js in automatic mode (https://million.dev) to make things a bit faster
    6. I will need you to walk me through how to make sure that when I add analytics tools like amplitude that they run on the web worker thanks to https://partytown.builder.io
    7. Should have a component or similar that uses unkey.dev to generate an api key, to access some API endpoints I've already made (I'll handling incorporating unkey into the back end, I just need you to help me make the front end part work)
    8. Walk me through how to set it up such that when I hit "publish" in plasmic, the latest changes are then deployed to the relevant environment (dev or prod) via github actions or similar to Cloudflare pages

    Acceptance Criteria

    • Understands you'll have to navigate some plasmic docs and examples to figure this out
    • Familiar with Next.js, React, Stripe and either Postgres or ideally Supabase specifically as I'm guessing edge functions are a reasonable way to do this
    • Able to get on a zoom call in EST time zone or will create short videos of how to connect the github repo to plasmic