🎨 OpusForge - Professional Portfolio Builder

Transform your career story into a stunning portfolio in minutes

OpusForge is a modern, full-stack web application that empowers developers and IT professionals to create stunning portfolios effortlessly. With seamless GitHub integration, AI-powered templates, and centralized asset management, building your professional presence has never been easier.

✨ Key Features

🚀 One-Click Portfolio Creation

• Professional Templates: Choose from expertly crafted templates designed for developers
• Intuitive Interface: User-friendly forms for easy data input
• Instant GitHub Integration: Automatic repository creation with portfolio code
• Immediate Deployment: Get a shareable link instantly upon creation

📁 Centralized Asset Management

• Document Storage: Store resumes, cover letters, certificates, and more
• Quick Access: Retrieve all professional documents from one location
• Upload Integration: Seamless file management within the portfolio builder
• Asset Search: Powerful search functionality to find documents quickly

🔐 Secure Authentication

• GitHub OAuth: Seamless integration with your GitHub account
• Credentials Support: Traditional email/password authentication
• MongoDB Sessions: Secure session management
• User Profile Management: Complete user data handling

🌐 Instant Deployment & Hosting

• GitHub Pages Integration: Automatic deployment to GitHub Pages
• Custom Domains: Support for custom domain configuration
• Live Updates: Real-time portfolio updates and redeployment
• Version Control: Full Git history for your portfolio changes

🎨 Live Preview & Real-time Editing

• Interactive Preview: See changes instantly as you build
• Responsive Design: Mobile-first approach with responsive previews
• Form Validation: Real-time validation and feedback
• Auto-save: Automatic saving of progress

🏗️ Detailed Architecture & Features

🎯 Core Application Flow

User Journey:
┌─────────────┐    ┌──────────────┐    ┌─────────────────┐    ┌──────────────┐
│  Landing    │ →  │ Authentication│ →  │ Template        │ →  │ Portfolio    │
│  Page       │    │ (OAuth/Creds) │    │ Selection       │    │ Builder      │
└─────────────┘    └──────────────┘    └─────────────────┘    └──────────────┘
                                                ↓
┌─────────────┐    ┌──────────────┐    ┌─────────────────┐    ┌──────────────┐
│ Live        │ ←  │ GitHub       │ ←  │ Asset           │ ←  │ Form         │
│ Portfolio   │    │ Deployment   │    │ Management      │    │ Filling      │
└─────────────┘    └──────────────┘    └─────────────────┘    └──────────────┘

🤖 AI-Powered Features

1. Intelligent Resume Parser (/src/lib/parse-resume-from-pdf/)

• PDF Text Extraction: Advanced PDF parsing using PDF.js
• Section Detection: ML-based section identification (Education, Experience, Skills)
• Feature Scoring System: Sophisticated scoring algorithm for content relevance
• Data Normalization: Converts unstructured resume data into structured format
• Multi-language Support: Handles various resume formats and languages

2. AI Template Generator (/src/app/api/AI/TemplateGenerator/)

• Google GenAI Integration: Leverages Google's Generative AI for template creation
• Category-based Generation: Supports multiple template categories (Portfolio, Landing, Dashboard)
• Custom Prompt Processing: Understands user requirements and generates appropriate designs
• Template Structure Validation: Ensures generated templates follow proper HTML/CSS structure
• Real-time Generation: Fast AI processing with immediate preview

3. Smart Form Auto-fill (/src/app/api/AI/Parser/)

• Resume Data Extraction: Automatically extracts data from uploaded resumes
• Form Field Mapping: Maps extracted data to appropriate form fields
• Data Validation: Validates and cleans extracted information
• Manual Override: Allows users to review and modify auto-filled data

🔐 Authentication & Security Architecture

NextAuth.js Configuration (/src/lib/server/auth.js)

Providers:
├── GitHub OAuth (Primary)
│   ├── Scope: read:user, user:email, repo, workflow, delete_repo
│   ├── Repository Creation Permissions
│   └── GitHub Pages Deployment Access
└── Credentials Provider (Secondary)
    ├── Email/Password Authentication
    ├── bcrypt Password Hashing
    └── MongoDB User Storage

Session Management

• MongoDB Adapter: Persistent session storage
• JWT Tokens: Secure token-based authentication
• Access Control: Role-based access to protected routes
• API Security: Authenticated API endpoints with session validation

📊 Data Management & Storage

MongoDB Database Schema

Collections:
├── users
│   ├── Authentication data (email, password, OAuth tokens)
│   ├── Profile information (name, image, provider)
│   └── Account verification status
├── portfolios
│   ├── Portfolio metadata (name, template, deployment URL)
│   ├── User form data (skills, experience, projects)
│   └── GitHub repository information
├── templates
│   ├── HTML/CSS template code
│   ├── Template metadata (name, category, preview image)
│   └── Form field configuration
└── assets
    ├── File metadata (name, type, upload date)
    ├── Cloudinary storage references
    └── User association and access control

State Management with Redux Toolkit

Store Slices:
├── User Slice (/src/store/slices/User.js)
│   ├── Authentication state
│   ├── Profile information
│   └── Session management
├── Portfolio Slice (/src/store/slices/Portfolios.js)
│   ├── Portfolio CRUD operations
│   ├── Deployment status tracking
│   └── Form data persistence
├── Template Slice (/src/store/slices/Templates.js)
│   ├── Template selection and loading
│   ├── AI-generated template storage
│   └── Custom template management
└── Asset Slice (/src/store/slices/Assets.js)
    ├── File upload management
    ├── Asset search and filtering
    └── Cloudinary integration

🌐 Deployment & GitHub Integration

GitHub API Integration (/src/app/api/user/createRepo/, /src/app/api/user/deployToGithubPages/)

GitHub Operations:
├── Repository Creation
│   ├── Automatic repo generation with portfolio code
│   ├── Initial commit with HTML/CSS/JS files
│   └── Repository configuration and settings
├── GitHub Pages Deployment
│   ├── Automatic GitHub Actions workflow setup
│   ├── Live deployment to username.github.io/repo-name
│   └── Custom domain configuration support
└── Version Control
    ├── Commit tracking for portfolio updates
    ├── Branch management for different versions
    └── Rollback capabilities

Deployment Workflow

1. Portfolio Generation: HTML/CSS generation from template + user data
2. Repository Creation: New GitHub repo with generated code
3. Initial Commit: Push portfolio files to repository
4. GitHub Pages Setup: Enable Pages with automatic deployment
5. Live URL Generation: Provide shareable portfolio link
6. Update Mechanism: Handle portfolio updates with new commits

🎨 Advanced UI/UX Features

Real-time Portfolio Builder (/src/components/other/Preview.jsx)

• Live Preview: Instant rendering of portfolio changes
• Split-screen Interface: Form editing alongside live preview
• Responsive Preview: Mobile/tablet/desktop preview modes
• Auto-save: Automatic saving of form progress
• Undo/Redo: Change history and reversal capabilities

Asset Management System (/src/app/user/assets/)

• Drag & Drop Upload: Intuitive file upload interface
• File Type Validation: Support for PDFs, images, and documents
• Cloud Storage: Secure Cloudinary integration
• Search & Filter: Advanced asset search capabilities
• Batch Operations: Multiple file management

Template Customization Engine

• Dynamic Form Generation: Creates forms based on template structure
• Field Type Detection: Automatically determines input types
• Validation Rules: Built-in form validation and error handling
• Custom Field Support: Extensible field types for advanced templates

🔧 Advanced Technical Features

PDF Processing Engine (/src/lib/parse-resume-from-pdf/)

Processing Pipeline:
├── PDF Text Extraction (read-pdf.js)
├── Text Item Grouping (group-text-items-into-lines.ts)
├── Section Detection (group-lines-into-sections.ts)
├── Content Extraction
│   ├── Profile Information (extract-profile.ts)
│   ├── Work Experience (extract-work-experience.ts)
│   ├── Education (extract-education.ts)
│   ├── Skills (extract-skills.ts)
│   └── Projects (extract-project.ts)
└── Data Normalization & Output

Template Processing System (/src/helper/normalToBackticks.js)

• Variable Interpolation: Dynamic content insertion using template literals
• Conditional Rendering: Show/hide sections based on user data
• Loop Processing: Generate repeating elements (skills, experiences)
• Escape Handling: Secure content rendering with XSS prevention

Performance Optimizations

• Next.js 15 with Turbopack: Ultra