🎯 Vero is a ultra-fast, collaborative whiteboard designed for teams to ideate, sketch, and brainstorm in real time. similar to Miro. It is made using NextJS, Tailwind CSS, Typescript, Liveblock For Real Time Collaboration, Clerk For Authentication, Convex As Our Database.
First, Clone The Repo The Repository
git clone https://github.com/psykat1116/Vero.git <folder name>Start The Server on the Local Server. Change The Folder Name To Lower Case.
cd <folder name>
npm run devCreate a .env File In The Root Folder With The Given Environment Variable
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY =
CLERK_SECRET_KEY =
NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL =
NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL =
LIVEBLOCK_SECRET_KEY = Create a .env.local File In The Root Folder With The Given Environment Variable
CONVEX_DEPLOYMENT =
NEXT_PUBLIC_CONVEX_URL = Log In to the Liveblock And Add A New Project. You Will Get Private Key From API Section
LIVEBLOCK_SECRET_KEY = Login Into The Clerk Create A New Project And Select What Login Option You Want To Keep Then Create The Project. You Will Get Two Key
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY =
CLERK_SECRET_KEY =Create An Account In Convex And Create A New Project
npm install convexGo To The Convex & Clerk And Go Through The Following Steps Mentioned Below Complete Upto Step 4 and then Run The Following Commands.
npm install @clerk/clerk-react
npx convex devAt The Time Of Development npx convex dev Must Run All The Time During Development. The below environmental variable will automatically created in .env.local file otherwise it Will Be In Settings In Development Mode Then Put It To The Variable.
NEXT_PUBLIC_CONVEX_URL =After Deploying To Vercel Go To The Project Details In Change From Development To Production.Then Go To The Project Settings and Copy The Deployment URL to NEXT_PUBLIC_CONVEX_URL And Create a New Deploy Key And Paste It To CONVEX_DEPLOY_KEY in Environment Variables Section. Don't Need To Change in local .env.local file.
NEXT_PUBLIC_CONVEX_URL =
CONVEX_DEPLOY_KEY =