A comprehensive Teer prediction platform built with Next.js 14+, TypeScript, Tailwind CSS, and Prisma ORM. This platform allows users to subscribe, get daily predictions, and provides admins with full management capabilities.
- Framework: Next.js 14+ (App Router)
- Language: TypeScript
- Styling: Tailwind CSS with dark mode support
- Database: PostgreSQL with Prisma ORM v7
- Authentication: NextAuth.js v5
- Forms: React Hook Form + Zod validation
- File Uploads: Uploadthing
- State Management: Zustand
- Date Handling: date-fns
commonnumber-pred/
├── app/
│ ├── api/auth/[...nextauth]/ # NextAuth API route
│ ├── layout.tsx # Root layout with providers
│ ├── page.tsx # Homepage
│ └── globals.css # Global styles with theme
├── components/
│ ├── ui/ # Reusable UI components
│ ├── navbar.tsx # Navigation bar
│ └── providers.tsx # Session provider wrapper
├── lib/
│ ├── prisma.ts # Prisma client singleton
│ ├── auth.ts # NextAuth configuration
│ ├── auth-helpers.ts # Auth helper functions
│ └── utils.ts # Utility functions
├── prisma/
│ ├── schema.prisma # Complete database schema
│ └── seed.ts # Database seed script
└── .env # Environment variables
The platform includes comprehensive models for:
- User: User accounts with authentication and subscription status
- SubscriptionPlan: Different subscription tiers (1-day, 3-day, 7-day)
- Subscription: User subscriptions with status tracking
- Payment: Payment records with approval workflow
- House: Teer houses (Shillong, Khanapara, etc.)
- Result: Daily results for each house
- Prediction: Daily predictions (public and premium)
- PaymentMethod: Payment methods (UPI, Bank Transfer)
- DreamSymbol: Dream interpretation database (110+ symbols)
- Notification: User notifications
- Setting: Site configuration
- Node.js 18+ installed
- PostgreSQL database (local or remote)
- npm package manager
-
Install dependencies
npm install
-
Configure environment variables
The
.envfile contains all necessary configuration. Update the following:DATABASE_URL="your-postgres-connection-string" NEXTAUTH_SECRET="your-secret-key" UPI_ID="your-upi-id@paytm" WHATSAPP_NUMBER="+91XXXXXXXXXX"
-
Setup database
# Push schema to database npm run db:push # Seed initial data npm run db:seed
-
Run development server
npm run dev
Open http://localhost:3000 to view the app.
After seeding the database:
Admin Account:
- Username:
admin - Password:
admin123 - Access: Full admin panel + all features
Test User:
- Username:
testuser - Password:
user123 - Access: User features only
- ✅ Next.js 14+ with App Router and TypeScript
- ✅ Tailwind CSS with dark mode support
- ✅ Prisma ORM v7 with complete schema
- ✅ NextAuth.js v5 authentication
- ✅ Database seed script with sample data
- ✅ Utility functions and auth helpers
- ✅ Reusable UI components (Button, Card, Input, Label)
- ✅ Navigation bar with authentication state
- ✅ Session provider wrapper
- ✅ Homepage with hero section, statistics, features showcase, and latest results
This project provides a solid foundation. Here's what needs to be built:
-
/login- Login page -
/register- Registration page -
/dashboard- User dashboard -
/subscription- Subscription plans page -
/predictions- Predictions page with dream interpretation -
/latest-results- Complete results page -
/account- Account settings -
/payments- Payment history
- Dashboard with statistics
- User management (CRUD)
- Subscription plans management
- Payment approval system
- House management
- Results management
- Predictions management
- Payment methods management
- Settings management
All CRUD operations need implementation in app/api/:
- Public: results, plans, registration
- Protected: user profile, subscriptions, payments, predictions
- Admin: complete management APIs
- Prediction algorithms (dream, formula, pattern analysis)
- Cron job for daily auto-predictions
- Historical data analysis
# Generate Prisma Client
npx prisma generate
# Push schema to database (no migrations)
npm run db:push
# Seed database with sample data
npm run db:seed
# Open Prisma Studio (database GUI)
npm run db:studio
# Reset database (⚠️ deletes all data)
npx prisma migrate resetnpm run dev # Start development server
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLint
npm run db:push # Push schema to database
npm run db:seed # Seed database
npm run db:studio # Open Prisma Studio- Push code to GitHub
- Import project in Vercel
- Add environment variables
- Deploy
DATABASE_URL=
NEXTAUTH_URL=
NEXTAUTH_SECRET=
UPI_ID=
WHATSAPP_NUMBER=
UPLOADTHING_SECRET=
UPLOADTHING_APP_ID=
CRON_SECRET=⚠️ Change default admin password immediately⚠️ Use strong secrets (32+ characters) in production⚠️ Enable HTTPS in production⚠️ Regularly backup database⚠️ Validate all user inputs server-side⚠️ Use rate limiting for API routes⚠️ Sanitize file uploads
// app/your-page/page.tsx
export default function YourPage() {
return <div>Your content</div>
}// app/api/your-route/route.ts
import { NextResponse } from 'next/server'
import { prisma } from '@/lib/prisma'
import { requireAuth } from '@/lib/auth-helpers'
export async function GET() {
const user = await requireAuth()
const data = await prisma.yourModel.findMany()
return NextResponse.json(data)
}'use client'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import * as z from 'zod'
const schema = z.object({
field: z.string().min(1, 'Required'),
})
export function YourForm() {
const form = useForm({
resolver: zodResolver(schema),
})
// ... form implementation
}- Implement Authentication Pages: Build login and registration
- Create User Dashboard: Show subscription status and predictions
- Build Admin Panel: Complete CRUD for all resources
- Add API Routes: Implement all API endpoints
- Prediction System: Build auto-prediction algorithms
- File Upload: Integrate Uploadthing for payment screenshots
- Testing: Test all features thoroughly
- Deploy: Deploy to production
- Create feature branch
- Make changes
- Test thoroughly
- Submit pull request
MIT License
The foundation is complete. Start building features following the structure provided! 🎉