A comprehensive, AI-first personal web platform for John Oluleke-Oke (J StaR Films) featuring dynamic content management, admin dashboard, and creator tools.
To create a unified, modular, and scalable personal web platform that serves as a "Creative Operating System" - integrating a public-facing portfolio website, a digital product storefront, a powerful AI assistant (JohnGPT), and a comprehensive suite of creator tools for audience growth, client acquisition, and monetization.
The platform combines John's diverse expertise as a speedcubing champion, professional filmmaker, and AI developer to deliver AI-first architecture that runs locally for privacy, performantly scales to cloud infrastructure, and provides tiered access experiences from basic portfolio viewing to advanced creator automation tools.
- 🎬 Filmmaker & Educator: YouTube channel with 280+ videos, 176K+ views, 5K+ likes, teaching DaVinci Resolve, color grading, and cinematography
- 🏆 Speedcubing Champion: Nigerian champion with multiple gold medals in 2x2x2 and Megaminx events, WCA competitor since 2022
- 🤖 AI Developer: Full-stack engineer specializing in React/Next.js, Python AI, Google Gemini API, and local AI model integration
- 🎓 TEDx Speaker: Keynote speaker on "What if reality is editable?" at TEDxElizadeUniversity
- 📚 Computer Science Student: BSc Computer Science at Elizade University
| Tier | User Persona | Access Level | Key Features |
|---|---|---|---|
| 👥 Guest | Website Visitor | Public-only | Portfolio, blog, services, contact forms, limited JohnGPT demo |
| 🤖 Tier 1 | JohnGPT User | Basic Paid | Full JohnGPT assistant with conversation history, AI persona switching |
| 🎯 Tier 2 | Creator Pro | Professional | CGE tools (YouTube Virality OS, Client Magnet, Scripting Studio) |
| ⭐ Tier 3 | Elite Creator | Premium | All tools, advanced templates, private course access, priority support |
| ⚡ Admin | Platform Owner | Full Control | Complete CMS, user management, AI configuration, system monitoring |
- Admin Dashboard (
/admin) - Complete system monitoring and management - Hero Slides Management (
/admin/cms/hero-slides) - Full CRUD for homepage carousel with dynamic slides - System Diagnostics (
/admin/system-diagnostic) - Performance monitoring and real-time metrics - Contact Form Management - Complete contact submissions with filtering/pagination/analytics
- Newsletter Management - Subscriber management with admin tools
- Database Integration - SQLite with Prisma ORM and advanced caching system
- Basic page structure implemented with About, Portfolio, Services, Blog, Contact, Store
- Hero section with dynamic slides powered by admin CMS
- Theme toggle functionality with dark/light/auto modes
- Mobile-responsive design with touch-friendly interactions
- Enhanced UI/UX with smooth scrolling, focus states, and accessibility improvements
- Multi-engine AI assistant supporting Ollama, LM Studio, Gemini, OpenAI, and cloud APIs
- Conversation history and prompt library management
- Split-view canvas mode for advanced ideation
- Agent Slot Machine for A/B testing multiple AI models
- Creator Growth Engine: YouTube Virality OS, Client Magnet, and Course Builder
ALL PROJECT INFORMATION, GUIDELINES, MOCKUPS, AND DOCUMENTATION ARE AVAILABLE IN THE docs/ FOLDER. This is your complete reference library for understanding, developing, and contributing to the platform.
- [
docs/J StaR Personal Platform PRD.md](docs/J StaR Personal Platform PRD.md) - Complete 300+ page product requirements document docs/Endpoints.md- All 25+ page routes and navigation with feature breakdownsdocs/AdminPageRoutes.md- Comprehensive admin API documentation with examplesdocs/coding_guidelines.md- Development standards and architectural principles
docs/Styling-in-Next-and-Tailwind-v4.md- Tailwind CSS v4 styling guidedocs/Styling-Addendum.md- Project-specific styling with @theme tokensdocs/animation-guidelines.md- Animation system with performance optimizations
docs/MobileFirstResponsiveDesign.md- Mobile-first responsive design systemdocs/ui_crosscheck_prompt.md- UI verification and implementation processdocs/NavigationSystemAnalysis.md- Navigation architecture and implementation
docs/portfolio.md- Complete professional portfolio and resume- [
docs/Yt jobs breakdown-refactor.md](docs/Yt jobs breakdown-refactor.md) - Client work testimonials (176K+ views, 280+ videos) docs/Website_Integration_Plan.md- Social proof integration strategies
docs/TaskSpawnPromptTemplate.md- Standardized task creation templatedocs/documentation_guide.md- Documentation standards and processesdocs/ComponentAnalysisPrompt.md- Component review and improvement framework
docs/
├── J StaR Personal Platform PRD.md # 300+ page full PRD
├── Endpoints.md # Complete page/feature mapping
├── AdminPageRoutes.md # Admin API documentation
├── coding_guidelines.md # Development standards
├── Styling-in-Next-and-Tailwind-v4.md # Universal styling guide
├── Styling-Addendum.md # Project styling reference
├── MobileFirstResponsiveDesign.md # Responsive design system
├── animation-guidelines.md # Animation framework
├── portfolio.md # Professional materials
├── Yt jobs breakdown-refactor.md # Client testimonials
├── Website_Integration_Plan.md # Social proof strategies
├── ui_crosscheck_prompt.md # UI verification process
├── TaskSpawnPromptTemplate.md # Task creation template
├── documentation_guide.md # Documentation standards
├── ComponentAnalysisPrompt.md # Component review framework
├── Mockups/ # 200+ UI mockups
├── JStaR_Mockups/ # Design iterations
├── features/ # Feature documentation
└── Export/ # Configuration exports
- Node.js 18+
- npm or yarn
- SQLite (included with Prisma)
- Clone the repository
git clone <repository-url>
cd j-star-platform- Install dependencies
npm install- Set up the database
# Generate Prisma client
npx prisma generate
# Run database migrations
npx prisma db push- Start the development server
npm run dev- Access the platform
- Public Site: https://jstarfilms.vercel.app/
- Public(local) Site: http://localhost:3000
- Admin Dashboard: http://localhost:3000/admin
- Hero Slides CMS: http://localhost:3000/admin/cms/hero-slides
- System Diagnostics: http://localhost:3000/admin/system-diagnostic
j-star-platform/
├── src/
│ ├── app/ # 📱 Next.js 14 App Router
│ │ ├── admin/ # Admin pages & APIs
│ │ │ ├── cms/ # Content Management System
│ │ │ ├── system-diagnostic/ # Performance monitoring
│ │ │ └── page.tsx # Admin dashboard
│ │ ├── api/ # 🚀 REST API endpoints
│ │ │ └── admin/ # Admin-protected APIs
│ │ └── globals.css # 🎨 Tailwind v4 styling
│ ├── features/ # 🧩 Feature-based architecture
│ │ ├── AdminDashboard/ # Admin monitoring
│ │ ├── HeroSlidesManagement/ # CMS hero slides
│ │ ├── JohnGPT/ # AI assistant core
│ │ ├── CreatorGrowthEngine/ # CGE tools
│ │ └── HomePage/ # Landing page
│ ├── components/ # 🧱 Shared components
│ ├── lib/ # 🔧 Utilities & providers
│ ├── hooks/ # 🪝 Custom React hooks
│ └── stores/ # 📦 State management
├── docs/ # 📚 COMPLETE DOCUMENTATION
│ ├── *.md # Guidelines & references
│ ├── Mockups/ # UI designs
│ └── features/ # Feature docs
├── prisma/ # 🗃️ Database schema
└── public/ # 🖼️ Static assets
- 📊 System Status: Real-time monitoring of database, API, CPU, memory, and storage
- 📈 Quick Stats: Key metrics including contact submissions, newsletter signups, and system health
- ⚡ Quick Actions: Fast access to common admin functions and emergency controls
- 🔔 Activity Feed: Latest admin actions and system events with timestamps
- 🎯 Module Access: Available admin modules with status indicators
- 🚨 Emergency Panel: System recovery tools and diagnostic utilities
- ✨ Full CRUD: Create, read, update, delete homepage slides with live preview
- 🎨 Rich Customization: Gradient backgrounds, button styling, alt text, project showcases
- 📱 Mobile-First: Responsive design with touch-friendly admin interface
- 🔄 Live Updates: Changes reflect immediately on public homepage
- 📊 Sort Management: Drag-and-drop ordering with persistence
- 🖼️ Media Support: Image URL configuration with accessibility features
- 📝 Form Submissions: Complete contact form management with validation
- 🔍 Advanced Filtering: Filter by status (PENDING/PROCESSED/RESPONDED), service type, date ranges
- 📊 Real-time Analytics: Daily metrics, conversion tracking, service breakdown statistics
- 📧 Newsletter Manager: Subscriber management with admin add/remove capabilities
- ⚡ High Performance: 85-92% faster API responses through intelligent caching
- 📈 User Insights: Comprehensive analytics with 30-day historical data tracking
- 🖥️ System Health: CPU, memory, disk usage monitoring with alerts
- 🌐 API Monitoring: Endpoint health, response times, error tracking
- 📊 Database Health: Connection status, query performance, optimization metrics
- ⚡ Performance Metrics: Core Web Vitals, load times, resource monitoring
- 🔧 Diagnostic Tools: Automated testing, troubleshooting utilities
- 📱 Real-time Updates: Live monitoring with WebSocket connections
- 🧠 Multi-Engine AI: Seamless switching between Ollama, LM Studio, Gemini, OpenAI, and cloud APIs
- 💬 Advanced Chat: Markdown rendering, code syntax highlighting, conversation history
- 🎭 Persona System: Creative Director, Systems Mentor, Faith Guide modes
- 📚 Prompt Library: Save, organize, and reuse custom prompts
- 🎨 Split-View Canvas: Combined chat and visual ideation workspace
- 🎰 Agent Slot Machine: A/B test multiple AI models side-by-side
- 📈 YouTube Virality OS: Trend analysis, virality scoring, thumbnail generation with AI
- 🎣 Client Magnet: Targeted lead generation and personalized outreach automation
- 📝 Scripting Studio: AI-assisted video script writing with Obsidian integration
- 🏗️ Course Builder: Modular course creation with landing page generation
- 📊 Analytics Hub: Social media performance tracking and growth metrics
- Framework: Next.js 14 with App Router - React-based full-stack framework
- Language: TypeScript - Strict type safety for complex application architecture
- Styling: Tailwind CSS v4 - Utility-first CSS with design token system
- State Management: React Hooks + Custom stores - Component-level and global state
- Icons: Lucide React - Consistent icon system with accessibility
- Animations: Framer Motion integration - Performance-optimized motion design
- Runtime: Node.js - Server-side JavaScript execution
- API Layer: Next.js API Routes - File-based routing for REST endpoints
- Database: SQLite with Prisma ORM - Local-first with cloud migration capability
- Authentication: JWT-based - Secure token authentication for admin routes
- Caching: Advanced in-memory cache - 83-92% API performance improvement
- Multi-Engine Support: Ollama, LM Studio, Google Gemini API, OpenAI, Groq
- Local AI Processing: ONNX Runtime for offline AI model execution
- Cloud AI Integration: REST API gateways for various AI providers
- Document Processing: PDF/DOCX parsing, YouTube video analysis, web scraping
- Linting: ESLint with Airbnb configuration - Code quality enforcement
- Formatting: Prettier - Consistent code formatting across the codebase
- Type Checking: TypeScript strict mode - Zero-runtime type errors
- Database Tools: Prisma Studio - Visual database management
- Testing: Jest + React Testing Library (planned) - Component and integration tests
CREATE TABLE hero_slides (
id TEXT PRIMARY KEY,
titleLine1 TEXT NOT NULL,
titleLine2 TEXT NOT NULL,
tagline TEXT NOT NULL,
description TEXT NOT NULL,
imageUrl TEXT NOT NULL,
gradient TEXT NOT NULL,
buttonGradient TEXT NOT NULL,
buttonBorder TEXT NOT NULL,
buttonText TEXT NOT NULL,
buttonHover TEXT NOT NULL,
isActive BOOLEAN DEFAULT TRUE,
sortOrder INTEGER DEFAULT 0,
altText TEXT,
projectTitle TEXT,
projectDesc TEXT,
createdAt DATETIME DEFAULT CURRENT_TIMESTAMP,
updatedAt DATETIME DEFAULT CURRENT_TIMESTAMP,
createdBy TEXT
);CREATE TABLE contact_submissions (
id TEXT PRIMARY KEY,
name TEXT NOT NULL,
email TEXT NOT NULL,
subject TEXT NOT NULL,
service TEXT NOT NULL,
message TEXT NOT NULL,
newsletter BOOLEAN DEFAULT FALSE,
status TEXT DEFAULT 'PENDING',
submittedAt DATETIME DEFAULT CURRENT_TIMESTAMP,
ipAddress TEXT,
userAgent TEXT,
adminNotes TEXT,
respondedAt DATETIME,
respondedBy TEXT
);
CREATE TABLE newsletter_subscribers (
id TEXT PRIMARY KEY,
email TEXT UNIQUE NOT NULL,
name TEXT,
subscribedAt DATETIME DEFAULT CURRENT_TIMESTAMP,
unsubscribedAt DATETIME,
isActive BOOLEAN DEFAULT TRUE,
source TEXT,
tags TEXT
);| Endpoint | Method | Purpose | Caching | Performance Impact |
|---|---|---|---|---|
/api/admin/hero-slides |
GET | Retrieve slides | 2min TTL | 91.7% faster |
/api/admin/contacts |
GET | Contact submissions | 30sec TTL | 85% faster |
/api/admin/contacts/analytics |
GET | Analytics data | 2min TTL | 90% faster |
/api/admin/newsletter/subscribers |
GET | Subscriber list | 30sec TTL | 82% faster |
/api/admin/system/metrics |
GET | System metrics | 2min TTL | 87.5% faster |
- Admin APIs: 100 GET/min, 30 POST|PUT|DELETE/min
- Input Validation: Comprehensive server-side validation
- SQL Injection Protection: Parameterized Prisma queries
- Authentication: JWT tokens with role-based access control
@theme {
/* Platform Identity */
--color-jstar-blue: #007bff;
--color-faith-purple: #6f42c1;
--color-growth-green: #28a745;
--color-admin-red: #dc3545;
--color-sacred-gold: #d4af37;
/* Core System Colors */
--color-background: #ffffff;
--color-foreground: #0b1221;
--color-border: #e5e7eb;
--color-ring: #3b82f6;
/* Interactive Elements */
--color-primary: var(--color-jstar-blue);
--color-secondary: var(--color-faith-purple);
--color-accent: var(--color-growth-green);
}
@theme .dark {
--color-background: #0b1221;
--color-foreground: #e5e7eb;
--color-border: #374151;
--color-ring: #8b5cf6;
}- 200-Line Rule: Components exceeding 200 lines trigger automatic refactoring
- Single Responsibility: One purpose per component with clear boundaries
- TypeScript First: Strict typing with destructured props and specific interfaces
- Data Flow: Props down, events up pattern with proper TypeScript contracts
- Container/Presentational: Smart components manage state, dumb components render UI
- Custom Hooks: Reusable logic extracted into named hooks starting with
use
- Performance Optimized: Transform and opacity based animations
- Accessibility Aware: Respects
prefers-reduced-motionuser preference - Trigger Types: Hover, click, programmatic, and load state animations
- Library Integration: Framer Motion with Framer Motion Animate components
- Mobile-First: Base styles for mobile, progressive enhancement for larger screens
- Breakpoint System: sm(640px), md(768px), lg(1024px), xl(1280px), 2xl(1536px)
- Touch Targets: Minimum 44px for all interactive elements
- Content Scaling: Typography and spacing systems scale predictably
- Grid Systems: Flexible layouts from single column to complex multi-column grids
- Mobile (< 768px): Single-stack layouts, touch-optimized interactions
- Tablet (768px - 1024px): Two-column grids, expanded navigation menus
- Desktop (> 1024px): Multi-column layouts, complex grid systems
- Navigation Patterns: Bottom tab bar (mobile), sidebar (tablet+), top navigation (desktop)
- Image Loading: Next.js Image component with lazy loading and responsive sizing
- Bundle Splitting: Code splitting by route and feature
- Caching Strategy: Aggressive caching for static assets and API responses
- Database Queries: Optimized with selective field loading and pagination
- Role-Based Access: Admin, Guest, Tier 1-3 user classifications
- API Protection: JWT tokens required for admin endpoints
- Data Encryption: Sensitive data encrypted at rest and in transit
- Input Sanitization: All user inputs validated and sanitized
- Local-First Storage: SQLite for private data storage
- Offline Capability: Platform functions without constant cloud connectivity
- AI Privacy: JohnGPT data stays local with optional cloud synchronization
- GDPR Compliance: Data export, deletion, and consent management features
npm run dev # Hot reload development server
npm run build # Production build with optimizations
npm run start # Production server with performance monitoring
npm run lint # ESLint code quality checks
npm run type-check # TypeScript compilation verificationnpx prisma studio # Visual database management interface
npx prisma format # Database schema formatting
npx prisma generate # Client code generation
npx prisma db push # Schema migration and deploymentBuilt with ❤️ for J StaR Films by John Oluleke-Oke