Open Source Ecosystems

Project Link:

Visit Project's Live Web-App

Tech Stack

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

Deploy Locally

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:
1. Make a Clerk account.
2. Copy both the CLERK_SECRET_KEY and NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY API keys into .env.local.
3. Do steps 1-3 here and copy the Issuer URL.
  It should look something like https://some-animal-123.clerk.accounts.dev.
4. 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 the CLERK_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 select user.created user.updated session.created session.ended events. Copy the webhook secret and in your Convex Dashboard add this env variable CLERK_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 and ZEGO_SERVER_SECRET to .env.local and save
Now it should be up and running. Check out the TUTORIAL for a complete walk-through.