A comprehensive, production-ready crypto dashboard with real-time data, social features, and advanced trading tools.
- User Registration with email verification
- Secure Login with NextAuth.js
- Password Validation with strength requirements
- Session Management with secure cookies
- CSRF Protection and input validation
- Portfolio Tracker - Track investments with real-time P&L
- Price Alerts - Get notified of price movements
- Donations Widget - Accept crypto donations with wallet integration
- Buy Bot - Automated trading functionality
- Market Cap - Live market data and analytics
- Price Charts - Interactive price visualization
- Widget Sharing - Share widgets with the community
- Comments System - Community feedback and discussion
- Collaboration - Work together on widget configurations
- Public Gallery - Discover and use community widgets
- Live Price Feeds - CoinGecko API integration
- WebSocket Support - Real-time price updates
- Portfolio Tracking - Investment performance monitoring
- Market Analytics - Comprehensive market insights
- Modern Design - Tailwind CSS with dark theme
- Responsive Layout - Works on all devices
- Interactive Components - Smooth animations and transitions
- Customizable Themes - Personalize your experience
- Node.js 18+
- npm or pnpm
- Git
- Clone the repository
git clone https://github.com/yourusername/crypto-dashboard.git
cd crypto-dashboard- Install dependencies
npm install
# or
pnpm install- Set up environment variables
cp .env.example .env.local- Configure your environment
Edit
.env.localwith your settings:
# Database
DATABASE_URL="file:./dev.db"
# NextAuth.js
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="your-secret-key"
# Email Configuration
SMTP_HOST="smtp.gmail.com"
SMTP_PORT="587"
SMTP_USER="[email protected]"
SMTP_PASS="your-app-password"
SMTP_FROM="[email protected]"- Set up the database
npx prisma generate
npx prisma db push- Start the development server
npm run dev- Open your browser
Visit
http://localhost:3000
- Dashboard -
/- Main dashboard with analytics - Configure -
/configure- Widget configuration - Sign Up -
/auth/signup- User registration - Sign In -
/auth/signin- User login - Community -
/community- Shared widgets gallery - Analytics -
/analytics- Usage analytics
Track your cryptocurrency investments with real-time P&L calculations.
Features:
- Add/remove crypto positions
- Real-time price updates
- Profit/loss calculations
- Performance percentages
- Portfolio summary
Set up automated alerts for price movements.
Features:
- Above/below price alerts
- Email notifications
- Sound alerts
- Multiple alert management
- Real-time price monitoring
Accept cryptocurrency donations with wallet integration.
Features:
- Multiple wallet support (Phantom, Solflare, Coinbase)
- Token selection
- Custom donation URLs
- Minimum amount settings
- QR code generation
Automated trading functionality for crypto purchases.
Features:
- Real-time buy alerts
- Tier-based notifications
- Audio feedback
- Custom buy amounts
- Transaction tracking
Live market data and analytics.
Features:
- Real-time market cap data
- Price change tracking
- Volume analysis
- Market trends
- Customizable display
POST /api/auth/register- User registrationGET /api/auth/verify-email- Email verificationPOST /api/auth/signin- User login
GET /api/crypto/prices- Get crypto pricesGET /api/crypto/prices?symbol=bitcoin- Get specific crypto price
POST /api/widgets/share- Share a widgetGET /api/widgets/comments- Get widget commentsPOST /api/widgets/comments- Add a comment
GET /api/analytics/summary- Get analytics summaryPOST /api/analytics/track- Track user actions
- Connect to Vercel
npm i -g vercel
vercel login
vercel-
Set environment variables in Vercel dashboard:
DATABASE_URLNEXTAUTH_URLNEXTAUTH_SECRETSMTP_HOST,SMTP_PORT,SMTP_USER,SMTP_PASS,SMTP_FROM
-
Deploy
vercel --prodSee DEPLOYMENT.md for detailed deployment instructions for:
- AWS Amplify
- AWS EC2
- Railway
- Heroku
The application uses Prisma with SQLite (development) or PostgreSQL (production).
- User - User accounts and authentication
- Preset - Saved widget configurations
- SharedWidget - Community-shared widgets
- WidgetComment - Comments on widgets
- VerificationToken - Email verification
- ResetToken - Password reset
- Password Hashing - bcrypt with salt rounds
- Email Verification - Secure token-based verification
- CSRF Protection - Built-in NextAuth.js protection
- Input Validation - Comprehensive form validation
- Rate Limiting - API rate limiting
- SQL Injection Protection - Prisma ORM protection
- Next.js 14 - Latest framework optimizations
- Image Optimization - Automatic image optimization
- Caching - Intelligent caching strategies
- Code Splitting - Automatic code splitting
- Bundle Analysis - Optimized bundle sizes
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Documentation - Check the
/docsfolder - Issues - Open an issue on GitHub
- Discussions - Use GitHub Discussions for questions
- Email - Contact [email protected]
- Mobile app (React Native)
- Advanced charting (TradingView integration)
- Social trading features
- API rate limiting dashboard
- Advanced analytics
- Multi-language support
- Dark/light theme toggle
- Widget marketplace
- ✅ Real-time crypto data feeds
- ✅ Social widget sharing
- ✅ Portfolio tracking
- ✅ Price alerts system
- ✅ Production deployment setup
- ✅ Advanced authentication
- ✅ Community features
- Next.js - React framework
- Tailwind CSS - Styling
- Prisma - Database ORM
- NextAuth.js - Authentication
- CoinGecko - Crypto data API
- Lucide React - Icons
Built with ❤️ for the crypto community