Develop Image-centric Web App with OpenAI Integration

I want a simple web app created.

Functionality of the app is, User can upload an image and image will be sent to openAI with a predefined/hard coded prompt.
once the response from openAI arrive, show it on a results page.

Further, users can signup & signin and they will have simple dashboard

app runs on image credit basis. 1 image credit equals to 1 image upload.
New users get 1 free credit.
paid users can purchase image credits as packages

Users can select from 3 different packages essential, standard & extra.
in essential package user pays $3 and he will get 3 image credits.
in standard package user pays $5 and he will get 8 image credits.
in premium package user pays $10 and he will get 20 image credits.

link stripe as payment processor
supabase as database system

when image is uploaded and we get successful response from only then deduct the image credit

once credits reach 0, users should not be able to upload images until they purchase new credits

In dashboard user can see remaining credits.

all the packages (prices,names), openAI prompt etc, I should be able to change in the source code. (I have some knowledge in next.js)

Make this using next.js which I can host in vercel
I will need full source code and source code should be well commented