SnapPChart is an advanced AI-powered stock trading analysis platform that uses OpenAI's GPT-4 Vision to analyze stock charts and provide instant trading recommendations using proven momentum trading strategies. Simply upload a screenshot of any stock chart and receive professional-grade analysis in seconds.
- 🧠 GPT-4 Vision Analysis: Advanced AI that understands charts like a professional trader
- 📊 40+ Trading Signals: Comprehensive analysis across volume, momentum, patterns, and more
- 🎯 Precision Grading (A-F): Clear trade ratings with detailed reasoning
- 💰 Complete Trade Planning: Exact entry, stop loss, and profit targets
- 🚀 Real-Time Processing: Get results in under 3 seconds
- 🔒 Secure Authentication: OTP-based login system
- 💳 Flexible Pricing: Monthly, yearly, and lifetime subscription options
Before you begin, ensure you have:
- Node.js 18+ installed
- Docker Desktop installed and running
- Git installed
- Accounts for required services (detailed below)
Before users can manage subscriptions, you MUST configure the Stripe Customer Portal:
- Go to Stripe Dashboard → Billing → Customer Portal
- Click "Activate test link" to create a default portal configuration
- Optionally customize portal features and appearance
Without this setup, the billing portal functionality will not work!
# Clone the repository
git clone https://github.com/yourusername/snappchart.git
# Navigate to the project directory
cd snappchart
# The project is already in the snappchart folder# Install all npm packages
npm installYou'll need to create accounts and get API keys for the following services:
- Go to OpenAI Platform
- Sign up or log in
- Navigate to API Keys section
- Click "Create new secret key"
- Copy the key (starts with
sk-) - Important: You need GPT-4 Vision API access (may require paid account)
- Go to Resend
- Sign up for a free account
- Go to API Keys section
- Create an API key
- Copy the key (starts with
re_) - Add and verify your domain (or use their test domain)
- Go to Stripe Dashboard
- Sign up or log in
- Switch to Test Mode (toggle in dashboard)
- Get your test keys from Developers → API keys:
- Publishable key (starts with
pk_test_) - Secret key (starts with
sk_test_)
- Publishable key (starts with
- Create products and prices:
- Monthly: $19.99 - Yearly: $99.99 - Lifetime: $599 - Save the price IDs (start with
price_)
# Copy the example environment file
cp .env.example .env.local
# Open .env.local in your editorUpdate .env.local with your actual values:
# Database (keep as is for local development)
DATABASE_URL="postgresql://snappchart:snappchart_password_2024@localhost:5432/snappchart?sslmode=disable"
# NextAuth (generate a random secret)
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="your-random-secret-here-use-openssl-rand-base64-32"
# OpenAI (REQUIRED - Get from https://platform.openai.com/api-keys)
OPENAI_API_KEY="sk-proj-xxxxxxxxxxxxxxxxxxxxx"
# Email/Resend (REQUIRED - Get from https://resend.com/api-keys)
RESEND_API_KEY="re_xxxxxxxxxxxxxxxxxxxxx"
EMAIL_FROM="[email protected]" # Or use "[email protected]" for testing
# Stripe (Get from https://dashboard.stripe.com/test/apikeys)
STRIPE_SECRET_KEY="sk_test_xxxxxxxxxxxxxxxxxxxxx"
STRIPE_PUBLISHABLE_KEY="pk_test_xxxxxxxxxxxxxxxxxxxxx"
STRIPE_WEBHOOK_SECRET="whsec_xxxxxxxxxxxxxxxxxxxxx" # Get this after setting up webhook
# Stripe Price IDs (Create products in Stripe Dashboard)
STRIPE_MONTHLY_PRICE_ID="price_xxxxxxxxxxxxxxxxxxxxx"
STRIPE_YEARLY_PRICE_ID="price_xxxxxxxxxxxxxxxxxxxxx"
STRIPE_LIFETIME_PRICE_ID="price_xxxxxxxxxxxxxxxxxxxxx"
# Application
APP_URL="http://localhost:3000"Run this command to generate a secure secret:
openssl rand -base64 32# Start PostgreSQL with Docker Compose
docker-compose up -d
# Verify it's running
docker ps
# You should see snappchart_postgres container running# Generate database schema
npm run db:generate
# Push schema to database
npm run db:push
# (Optional) Open database studio to view tables
npm run db:studio# Run the development server
npm run dev
# The app will be available at http://localhost:3000- Open your browser and go to
http://localhost:3000 - Click "Start Free Trial" or "Sign In"
- Enter your email address
- Check your email for the OTP code
- Enter the code to log in
- Upload a stock chart screenshot to test the analysis
-
Check API Access:
- Log in to OpenAI Platform
- Go to Settings → Limits
- Ensure you have access to
gpt-4-vision-preview - If not, you may need to add payment method and upgrade
-
Set Usage Limits (Recommended):
- Go to Settings → Limits
- Set monthly budget to prevent unexpected charges
- Monitor usage in Usage → Overview
-
Test Your API Key:
curl https://api.openai.com/v1/models \ -H "Authorization: Bearer YOUR_API_KEY"
-
Domain Configuration:
- For production: Add and verify your domain
- For testing: Use
[email protected]as EMAIL_FROM
-
Test Email Sending:
curl -X POST 'https://api.resend.com/emails' \ -H 'Authorization: Bearer YOUR_RESEND_API_KEY' \ -H 'Content-Type: application/json' \ -d '{ "from": "[email protected]", "to": "[email protected]", "subject": "Test", "html": "<p>Test email</p>" }'
-
Create Products:
- Go to Products in Stripe Dashboard
- Create three products:
- Monthly Subscription: $19.99/month
- Yearly Subscription: $99.99/year
- Lifetime Access: $599 one-time
-
Set Up Webhook (For production):
Endpoint URL: https://yourdomain.com/api/stripe/webhook Events to listen: - checkout.session.completed - customer.subscription.created - customer.subscription.updated - customer.subscription.deleted -
Test Payments:
- Use Stripe test cards:
4242 4242 4242 4242 - Any future date for expiry
- Any 3 digits for CVC
- Use Stripe test cards:
snappchart/
├── app/ # Next.js App Router pages
│ ├── (admin)/ # Admin-only pages
│ │ └── admin/ # Admin dashboard
│ ├── (app)/ # Authenticated user pages
│ │ ├── analyze/ # Chart upload & analysis page
│ │ ├── analysis/[id]/ # Individual analysis results
│ │ ├── billing/ # Subscription management
│ │ ├── dashboard/ # Legacy dashboard (redirects to analyze)
│ │ ├── home/ # User home page
│ │ └── settings/ # User settings
│ ├── (auth)/ # Authentication pages
│ │ ├── login/ # Login page (OTP-based)
│ │ └── unauthorized/ # Access denied page
│ ├── (legal)/ # Legal pages
│ │ ├── disclaimer/ # Trading disclaimer
│ │ ├── privacy/ # Privacy policy
│ │ └── terms/ # Terms of service
│ ├── (marketing)/ # Public marketing pages
│ │ ├── about/ # About us
│ │ ├── blog/ # Blog page
│ │ ├── contact/ # Contact form
│ │ └── pricing/ # Pricing plans
│ ├── api/ # API routes
│ │ ├── admin/ # Admin endpoints
│ │ │ ├── analytics/ # Admin analytics
│ │ │ └── users/ # User management
│ │ ├── analyses/ # Analysis endpoints
│ │ │ └── history/ # User analysis history
│ │ ├── analysis/ # Create new analysis
│ │ ├── analytics/ # Analytics tracking
│ │ │ └── track/ # Event tracking
│ │ ├── auth/ # Authentication
│ │ │ ├── [...nextauth]/ # NextAuth handlers
│ │ │ └── send-otp/ # OTP email sending
│ │ ├── billing/ # Billing endpoints
│ │ │ └── usage/ # Usage stats & limits
│ │ ├── referrals/ # Referral system
│ │ │ └── stats/ # Referral statistics
│ │ ├── stripe/ # Payment processing
│ │ │ ├── checkout/ # Create checkout session
│ │ │ ├── portal/ # Customer portal
│ │ │ └── webhook/ # Stripe webhooks
│ │ └── usage/ # Usage tracking
│ │ └── stats/ # Usage statistics
│ └── page.tsx # Landing page
├── components/ # React components
│ ├── ui/ # Shadcn UI components
│ └── providers.tsx # App providers
├── lib/ # Core business logic
│ ├── auth/ # Authentication logic
│ ├── db/ # Database schema & config
│ ├── openai/ # OpenAI GPT-4 integration
│ ├── stripe/ # Stripe integration
│ └── trading/ # Trading analysis engine
├── public/ # Static assets
├── docker-compose.yml # Database configuration
└── package.json # Dependencies
/- Landing page with hero section and features/about- About the platform and team/blog- Blog posts and trading insights/contact- Contact form/pricing- Subscription plans and pricing/terms- Terms of service/privacy- Privacy policy/disclaimer- Trading disclaimer and risk warnings/login- OTP-based email login
/home- User home page after login/analyze- Main chart upload and analysis page/analysis/[id]- View individual analysis results/billing- Subscription management and usage stats/settings- User account settings/dashboard- Legacy route (redirects to /analyze)
/admin- Admin dashboard with analytics and user management
/unauthorized- Shown when user tries to access admin pages without permission
Solution: Make sure you've added your OpenAI API key to .env.local and restarted the dev server
Solution: The project is already in a snappchart folder. Don't create another one.
Solution:
# Make sure Docker is running
docker ps
# Restart the database
docker-compose down
docker-compose up -dSolution:
- Check spam folder
- Verify Resend API key is correct
- Use
[email protected]for testing - Check Resend dashboard for email logs
Solution:
- Verify you have GPT-4 Vision access in OpenAI account
- Check API key permissions
- Ensure you have credits/payment method added
The app analyzes 40+ signals across these categories:
- Volume: High buying volume, low selling volume
- Momentum: MACD green, technical alignment
- Trend: Close to 9 EMA, support rejection
- Patterns: Bullish engulfing, hammer, cup & handle
- Risk/Reward: 2:1 or better ratio
- Volume: Heavy selling, decreasing buying
- Momentum: MACD red, weakening indicators
- Trend: Extended moves, far from 9 EMA
- Patterns: Topping tail, bearish engulfing
- Risk: Poor risk/reward, below 2:1
- Below VWAP
- Prior sudden rejection (hidden seller)
- Near 200 EMA resistance
- Push your code to GitHub
- Go to Vercel
- Import your GitHub repository
- Add all environment variables
- Deploy!
- Neon: neon.tech (Recommended)
- Supabase: supabase.com
- Railway: railway.app
- AWS RDS: For enterprise scale
POST /api/auth/send-otp # Send OTP code to email
POST /api/auth/signin # Sign in with OTP code
GET /api/auth/signout # Sign out current user
POST /api/auth/[...nextauth] # NextAuth handlers
POST /api/analysis # Create new chart analysis (multipart/form-data)
GET /api/analyses/history # Get user's analysis history
GET /api/billing/usage # Get current user's usage stats and limits
GET /api/usage/stats # Get detailed usage statistics
POST /api/stripe/checkout # Create checkout session for subscription
POST /api/stripe/portal # Get customer portal URL
POST /api/stripe/webhook # Handle Stripe webhook events
GET /api/admin/users # Get all users (admin only)
GET /api/admin/analytics # Get platform analytics (admin only)
POST /api/analytics/track # Track user events
GET /api/referrals/stats # Get referral statistics
# Development
npm run dev # Start development server
npm run build # Build for production
npm run start # Start production server
# Database
npm run db:generate # Generate migrations
npm run db:push # Push schema to database
npm run db:studio # Open Drizzle Studio
npm run db:migrate # Run migrations
# Docker
docker-compose up -d # Start services
docker-compose down # Stop services
docker-compose logs -f # View logsMIT License - feel free to use this project for your own trading platform!
Contributions are welcome! Please feel free to submit a Pull Request.
Important: This tool is for educational and informational purposes only. Trading stocks involves substantial risk of loss. Past performance does not guarantee future results. Always do your own research and consider consulting with a financial advisor.
If you encounter any issues:
- Check the Common Issues section
- Search existing GitHub Issues
- Create a new issue with:
- Error message/screenshot
- Steps to reproduce
- Your environment (OS, Node version, etc.)
You're all set! Your SnapPChart platform is ready to analyze charts and help you make better trading decisions. Remember to:
- ✅ Test thoroughly in development
- ✅ Use Stripe test mode for payments
- ✅ Monitor your OpenAI usage
- ✅ Keep your API keys secure
- ✅ Never commit
.env.localto git
Happy Trading! 🚀📈