SiliconPin

A comprehensive web platform offering topic management, admin dashboards, web services, payment processing, and Progressive Web App capabilities.

🚀 Quick Start

# 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:

git clone <repository-url>
cd siliconpin
yarn install

2. Environment configuration:

cp .env.example .env.local

Configure .env.local:

# 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:

# Start MongoDB and Redis
make dev

# Start Next.js development server
yarn dev

4. Access the application:

• Main site: http://localhost:4024
• Authentication: http://localhost:4024/auth
• Admin dashboard: http://localhost:4024/admin
• Topics: http://localhost:4024/topics
• 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

# 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

# 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 - Complete API reference
• Deployment Guide - Platform-specific deployment
• Code Patterns - 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.