# SiliconPin A comprehensive web platform offering topic management, admin dashboards, web services, payment processing, and Progressive Web App capabilities. ## 🚀 Quick Start ```bash # Start services and development make dev && yarn && yarn dev ``` ## ✨ Features ### 🔐 **Authentication & User Management** - JWT-based authentication with refresh tokens - OAuth integration (Google, GitHub) - Redis session storage for high performance - Protected routes and comprehensive API middleware - User profile management and account settings ### 📝 **Topic Management System** - Rich text editing with BlockNote editor - User-owned content creation and management - Dynamic tag system with search and filtering - Image upload with MinIO integration - Draft/publish workflows with version control - SEO optimization with metadata and structured data ### 🛠️ **Admin Dashboard** - Comprehensive analytics and reporting - User management and moderation tools - Billing and transaction tracking - Service administration and monitoring - System settings and configuration - PDF report generation ### 🌐 **Web Services** - Cloud hosting deployment and management - VPN service configuration and setup - Kubernetes orchestration and container management - Developer hiring marketplace - Service monitoring and health checks ### 🎤 **Speech Tools** - Text-to-speech synthesis with multiple voices - Voice recognition and transcription - Web Speech API integration - Audio processing utilities ### 💰 **Payment & Billing System** - Balance management and top-up functionality - Transaction history and detailed tracking - Service billing and automated invoicing - Payment gateway integration - Refund processing and management ### 📱 **Progressive Web App (PWA)** - Full PWA capabilities with offline functionality - App installation and native-like experience - Service worker for caching and background sync - Responsive design across all devices - Push notification support ### 🎨 **Modern UI/UX** - Next.js 15 with App Router architecture - TypeScript for complete type safety - Tailwind CSS with custom design system - Radix UI components for accessibility - Dark/light theme support - Mobile-first responsive design ## 🛠️ Installation & Setup ### Prerequisites - Node.js 18+ - MongoDB (local or cloud) - Redis (local or cloud) - Yarn package manager ### Development Setup 1. **Clone and install:** ```bash git clone cd siliconpin yarn install ``` 2. **Environment configuration:** ```bash cp .env.example .env.local ``` Configure `.env.local`: ```env # Database MONGODB_URI=mongodb://localhost:27017/siliconpin # Redis Session Store REDIS_URL=redis://localhost:6379 # Authentication SESSION_SECRET=your-secure-32-character-session-secret JWT_SECRET=your-jwt-secret-change-in-production JWT_REFRESH_SECRET=your-jwt-refresh-secret-change-in-production # MinIO Storage (for file uploads) MINIO_ENDPOINT=your-minio-endpoint MINIO_PORT=9000 MINIO_ACCESS_KEY=your-access-key MINIO_SECRET_KEY=your-secret-key MINIO_BUCKET=your-bucket-name ``` 3. **Start development:** ```bash # Start MongoDB and Redis make dev # Start Next.js development server yarn dev ``` 4. **Access the application:** - Main site: [http://localhost:4024](http://localhost:4024) - Authentication: [http://localhost:4024/auth](http://localhost:4024/auth) - Admin dashboard: [http://localhost:4024/admin](http://localhost:4024/admin) - Topics: [http://localhost:4024/topics](http://localhost:4024/topics) - Tools: [http://localhost:4024/tools](http://localhost:4024/tools) ## 🏗️ Architecture ### Project Structure ``` siliconpin/ ├── app/ # Next.js App Router │ ├── api/ # Comprehensive API (50+ endpoints) │ │ ├── auth/ # Authentication endpoints │ │ ├── admin/ # Admin management │ │ ├── topics/ # Content management │ │ ├── services/ # Service deployment │ │ ├── payments/ # Payment processing │ │ └── tools/ # Utility APIs │ ├── admin/ # Admin dashboard │ ├── auth/ # Authentication pages │ ├── topics/ # Topic management │ ├── services/ # Web services │ ├── tools/ # Speech tools │ ├── dashboard/ # User dashboard │ └── layout.tsx # Root layout ├── components/ # React components (150+) │ ├── admin/ # Admin-specific UI │ ├── auth/ # Authentication forms │ ├── topics/ # Content components │ ├── tools/ # Tool interfaces │ ├── ui/ # Reusable UI library │ └── BlockNoteEditor/ # Rich text editor ├── lib/ # Utilities and services │ ├── mongodb.ts # Database connection │ ├── redis.ts # Redis caching │ ├── minio.ts # File storage │ ├── auth-middleware.ts # API security │ └── billing-service.ts # Payment logic ├── models/ # Database models (8 schemas) │ ├── user.ts # User accounts │ ├── topic.ts # Content model │ ├── billing.ts # Payment data │ └── transaction.ts # Transaction records ├── contexts/ # React contexts ├── hooks/ # Custom React hooks └── docs/ # Documentation ``` ## 🔗 API Overview ### Core APIs (50+ endpoints) **Authentication & Users** - `POST /api/auth/register` - User registration - `POST /api/auth/login` - User authentication - `POST /api/auth/refresh` - Token refresh - `GET /api/auth/me` - Current user profile - `POST /api/auth/google` - OAuth authentication **Topic Management** - `GET /api/topics` - List topics with search/filter - `POST /api/topics` - Create new topic - `GET /api/topics/[slug]` - Get specific topic - `PUT /api/topic/[id]` - Update topic - `DELETE /api/topic/[id]` - Delete topic **Admin Dashboard** - `GET /api/admin/dashboard` - Analytics data - `GET /api/admin/users` - User management - `GET /api/admin/billing` - Billing overview - `GET /api/admin/reports` - Generate reports **Services & Deployment** - `POST /api/services/deploy-kubernetes` - K8s deployment - `POST /api/services/deploy-vpn` - VPN setup - `POST /api/services/deploy-cloude` - Cloud instances - `POST /api/services/hire-developer` - Developer requests **Payment & Billing** - `POST /api/payments/initiate` - Start payment - `GET /api/user/balance` - User balance - `POST /api/balance/add` - Add funds - `GET /api/transactions` - Transaction history **File Management** - `POST /api/upload` - File upload to MinIO - `POST /api/topic-content-image` - Topic images ## 📦 Development Scripts ```bash # Development yarn dev # Start development server (port 4024) yarn build # Build for production yarn start # Start production server # Code Quality yarn lint # Run ESLint with auto-fix yarn typecheck # TypeScript compilation check yarn format # Format code with Prettier # Database Management yarn db:seed # Seed database with initial data yarn db:reset # Reset database to clean state # Docker make dev # Start MongoDB & Redis containers docker-compose up # Full containerized deployment ``` ## 🔒 Security & Architecture ### Security Features - JWT authentication with HTTP-only cookies - OAuth integration (Google, GitHub) - Password hashing with bcryptjs - CSRF protection headers - Input validation with Zod schemas - Protected API routes with middleware - Redis session management - Content Security Policy headers - Rate limiting ready for production ### Technical Stack - **Frontend**: Next.js 15, React 19, TypeScript - **Styling**: Tailwind CSS, Radix UI, Custom components - **Backend**: Node.js, MongoDB, Redis, MinIO - **Authentication**: JWT, OAuth, Sessions - **State**: TanStack Query, React Context - **Validation**: Zod schemas, React Hook Form - **PWA**: Service Worker, Workbox, Manifest ## 🚀 Deployment & Production ### Supported Platforms - **Vercel** (Recommended) - Zero-config Next.js deployment - **Railway** - Full-stack with managed databases - **DigitalOcean App Platform** - Container deployment - **Docker** - Self-hosted containerized deployment - **AWS ECS/Lambda** - Enterprise cloud deployment ### Production Checklist - [ ] Environment variables configured - [ ] MongoDB Atlas or production database - [ ] Redis Cloud or managed instance - [ ] MinIO or S3 for file storage - [ ] SSL/HTTPS certificates - [ ] Domain and DNS configuration - [ ] Security headers and CORS - [ ] Rate limiting implementation - [ ] Error tracking (Sentry) - [ ] Analytics and monitoring ### Docker Deployment ```bash # Production deployment docker-compose --profile production up -d # With custom environment docker-compose -f docker-compose.prod.yml up -d ``` ## 📚 Documentation Comprehensive documentation is available in the `docs/` directory: - **[API Documentation](docs/API.md)** - Complete API reference - **[Deployment Guide](docs/DEPLOYMENT.md)** - Platform-specific deployment - **[Code Patterns](docs/PATTERNS.md)** - Development patterns and examples ## 🤝 Contributing ### Development Guidelines 1. Follow TypeScript strict mode 2. Use Zod for validation 3. Implement proper error handling 4. Add tests for new features 5. Update documentation 6. Follow existing code patterns ### Code Quality Pre-commit hooks ensure: - ESLint compliance - Prettier formatting - TypeScript compilation - Test passing (when applicable) ## 📄 License MIT License - Open source and free for commercial use. --- **SiliconPin** - A comprehensive web platform combining topic management, admin dashboards, web services, payment processing, and Progressive Web App capabilities in a modern, scalable architecture.