349 lines
9.9 KiB
Markdown
349 lines
9.9 KiB
Markdown
# 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 <repository-url>
|
|
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.
|