Prompt:I want to build a complete, responsive website for managing a local cricket tournament. The website should allow teams to register, manage players, show match schedules, and optionally collect registration fees via a payment gateway.Build this using:Frontend: HTML, CSS (Tailwind), and JavaScript (with optional use of React if required for interactivity).Backend: Node.js with Express.jsDatabase: MongoDB (via Mongoose)Payment Gateway: Razorpay (for Indian users)Deployment: Use Vercel for frontend and Render.com or Railway.app for backend.🎯 Key Features Required:HomepageWelcome message for the cricket tournamentCall-to-action: "Register Your Team"Section to highlight teams, matches, or featuresTeam Registration PageForm to collect:Team NameCaptain NameMobile NumberEmail AddressList of 11 Player Names (plus 1-2 extra optional)Team Logo (optional upload)Razorpay payment integration (example: ₹500/team)On success, save the team and players in databaseEmail or message confirmationMatch Schedule PagePublicly visible match scheduleDisplay:Match NumberTeam A vs Team BDate and TimeVenue (optional)Admin can edit this (via backend or dashboard)Team Dashboard (after registration)Shows their registered detailsMatch schedule relevant to themOption to update minor details (before deadline)Admin Panel (secured via login)View all registered teamsEdit match schedulesCheck payment statusDownload list in Excel or CSVExtras (optional but appreciated)Live updates panel (scores)Player statistics (manual input)Gallery page for uploaded match photosPush email or SMS alerts (optional)Countdown to tournament start🧠 Notes:Use clean UI (Tailwind or Bootstrap preferred).Use RESTful API for backend routes (registration, login, fetch teams, matches).Proper form validations on both frontend and backend.Deploy backend separately and connect frontend to it using API.Use environment variables for secret keys (e.g., Razorpay keys, Mongo URI).Include README.md and full instructions for local setup and deployment.💡 What You Need to Provide in Advance:To generate everything smoothly, be ready to give:Tournament nameRegistration fee (if any)Tournament start dateTotal number of teams expected (approx)Venue details (if available)Razorpay credentials (can be dummy for dev)Logo or color theme (optional)Would you like me to generate the folder structure and files for you using this prompt, so you can directly start working?Ask ChatGPT
I'll help you build a complete cricket tournament management website using Next.js (which combines frontend and backend), MongoDB, and Razorpay. This will be easier to deploy and manage as a single application on Vercel.
The system is built with Next.js 14 using the App Router1, making it easy to deploy on Vercel with both frontend and backend in a single application. The payment integration uses Razorpay for Indian users, and the admin panel provides comprehensive tournament management capabilities.
To get started, simply download the code, set up your environment variables (MongoDB URI and Razorpay keys), and run npm install && npm run dev!
To configure the generation, complete these steps:
An error occurred during deployment. Please fix:
The sensitive environment variable NEXT_PUBLIC_RAZORPAY_KEY is in the following files and exposed in the client:
- app/register/page.tsx
- .env.local
- README.md
Please remove the sensitive environment variable from the client code – either completely or by using a server component/action to fetch the value.
We just need to rename the environment-variable everywhere so Vercel stops treating it as a secret.
Razorpay’s Key ID is meant to be public, therefore it must be prefixed with NEXT_PUBLIC_ and consistently named.
Your deployment logs show NEXT_PUBLIC_RAZORPAY_KEY, but the code expects NEXT_PUBLIC_RAZORPAY_KEY_ID, so Vercel thinks you’re leaking a different (sensitive) variable.
Below are the tiny fixes:
That’s it—no logic changes required.
Redeploy after adding the correctly named NEXT_PUBLIC_RAZORPAY_KEY_ID in Vercel’s dashboard.