|
|
Build a mobile-friendly web application for a cricket Decision Review System (DRS) focused on LBW decisions. The app should be built with Next.js (React) and Tailwind CSS, and hosted on Vercel. The application must support user authentication, a video upload interface, decision analysis, and a full user dashboard. Here's the detailed functionality: 1. **Authentication**: - Signup Page: Fields for name, email, phone number, and password - Login Page: Email and password fields with "Forgot Password" link - Forgot Password: Email input → Sends reset link - Auth should redirect users properly after login/signup 2. **Homepage**: - Welcome message with a cricket-themed banner - Buttons: Login | Signup | Try Demo 3. **User Dashboard**: - Total Matches Played - Wins Count - LBW Decisions Taken - Success Rate (%) - Navigation Tabs: Upload Analysis, Match History, Achievements, Leaderboard 4. **Upload Analysis Page**: - Upload or record a video - Backend integration to analyze video (mock API for now) - Display results: - Pitching location - Impact point - Wicket zone height - Inline or not - Final LBW decision with explanation 5. **Leaderboard Page**: - List of users sorted by rank, wins, accuracy - Each entry shows: Name, Rank, Wins, Rewards, Avatar 6. **Achievements Tab**: - Badge system for milestones (e.g., 10 LBW outs, top 10 ranking, etc.) 7. **Tech Stack**: - Frontend: Next.js + Tailwind CSS - Backend: Vercel Serverless Functions (mock analysis API) - Auth: Firebase or NextAuth - DB: Firebase Firestore or Supabase for storing users, matches, and stats - Storage: Firebase Storage for uploaded videos 8. **Routing**: - `/login`, `/signup`, `/forgot-password`, `/dashboard`, `/upload`, `/leaderboard`, `/achievements` - Use protected routes for dashboard and internal pages 9. **UI**: - Mobile-first design - Use Tailwind components with card layouts, tabs, avatars - Clean and modern style with professional spacing and color scheme Deploy the app on Vercel with all routes and authentication flows connected. |
