Make WhatsApp a little bit more exiciting by integratin GPT and DALL-E-3
Tech Stack · Deploy Your Own ·
- Convex for the database, real-time events and cloud functions
- Next.js App Router for the framework
- ShadCN for UI components
- Convex File Storage for storing images and videos
- ZegoCloud for video calls
- Clerk for user authentication
- Tailwind CSS for styling
- TypeScript just to feel cool
You can deploy this app by setting up the following services and adding their environment variables:
- Run
npm install
to install dependencies. - Run
npm run dev
. It will prompt you to log into Convex and create a project. - It will then ask you to supply the
CLERK_ISSUER_URL
. To do this:- Make a Clerk account.
- Copy both the
CLERK_SECRET_KEY
andNEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
API keys into.env.local
. - Do steps 1-3 here and copy the Issuer URL.
It should look something like
https://some-animal-123.clerk.accounts.dev
. - Add
CLERK_ISSUER_URL
to your Convex Environment Variables Paste the Issuer URL as the value and click "Save".
- Add
CLERK_HOST_NAME
to your Convex Environment Variables as for the value paste theCLERK_ISSUER_URL's
value - From your CLERK account, under the WebHooks, add an endpoint which should look like this:
https://your-convex-url.convex.site/clerk
and selectuser.created
user.updated
session.created
session.ended
events. Copy the webhook secret and in your Convex Dashboard add this env variableCLERK_WEBHOOK_SECRET
and paste the value - Now your frontend and backend should be running and you should be able to log in but not support OpenAI features.
- Create an OpenAI account to get $5 of free credit or pay for your current account and get your
OPENAI_API_KEY
and add it to Convex Dashboard - To enable video calling, create a ZEGOCLOUD account, create a project and select voice && video calls. Paste
ZEGO_APP_ID
andZEGO_SERVER_SECRET
to .env.local and save - Now it should be up and running. Check out the TUTORIAL for a complete walk-through.
- Like && Subscribe for more projects like this