Building an Intelligent, Automated Portfolio with Next.js and Generative AI

This project represents my personal portfolio, engineered not just as a static showcase, but as a dynamic, intelligent system designed to minimize maintenance overhead while maximizing content quality. The core innovation lies in the automated project onboarding pipeline, which leverages Next.js, NextAuth for secure access, and the Google Generative AI (Gemini) API to analyze code and generate rich, portfolio-ready documentation.

Technical Architecture Overview

The application utilizes the modern Next.js App Router framework, providing server-side rendering capabilities alongside client-side interactivity.

1. Frontend: Built with React and styled using Tailwind CSS for a responsive, clean, and modern UI. The client-side logic handles fetching projects, managing state (like the project modal), and client-side authentication status.
2. Backend & Data: API routes handle interaction with MongoDB, managed through Mongoose. This persistence layer stores structured project data (IProject), including the crucial AI-generated descriptions and metadata.
3. Authentication & Security: NextAuth is implemented using the GitHub Provider. Crucially, access control is strictly enforced in the API routes and the /admin page, restricting CRUD and AI generation capabilities solely to the designated administrator (Past-da-king). This uses custom session and JWT callbacks to securely store and utilize the user's GitHub username and access token.

The Automated Project Onboarding Pipeline

The most complex and valuable component of this portfolio is the administrative workflow for adding new projects, housed under the /admin route.

1. Secure Access and GitHub Integration

The Admin Dashboard (src/app/admin/page.tsx) first verifies user identity and authorization using useSession(). If the user is authenticated and is the specified admin, it proceeds. The API endpoint (/api/admin/github/repos) fetches a list of the administrator's GitHub repositories. This requires the stored GitHub OAuth accessToken obtained during the NextAuth login process, allowing the application to securely interact with the GitHub API on the user's behalf to list available projects.

2. AI-Powered Content Generation Workflow

When the administrator selects a repository and initiates the "Generate AI Description & Save Project" action, the server-side API (/api/admin/projects/route.ts) orchestrates the automated process:

1. Code Fetching: The API uses the GitHub Tree API to identify all relevant code files (files smaller than 100KB) within the specified repository. It then iteratively fetches the raw content of these files using the stored OAuth accessToken. This raw code content is meticulously concatenated into a single prompt string, prefixed by filenames (--- File: {path} ---), ensuring the Gemini model receives comprehensive context.
2. AI Prompting: The combined codebase is passed to the Gemini API (@google/generative-ai) along with a system prompt. The prompt instructs the AI to act as a "software engineering portfolio assistant" and generate a detailed blog post (in pure Markdown format) focusing on the project's purpose, technologies, architecture, and developer learnings, maintaining a professional tone. Custom prompts are also supported to fine-tune the output.
3. Persistence: The resulting AI-generated Markdown description, along with metadata (like project URL, image URL, and tags) provided by the admin, is saved as a new document in the MongoDB portfolio_projects collection.

3. Project Management and Frontend Display

The Admin dashboard also provides full CRUD capabilities (PUT, DELETE APIs) to manage existing projects and update their metadata. The public-facing / page then fetches these projects, and when a user clicks on a project card, a modal uses the marked library to safely parse and render the stored Markdown content (the AI-generated blog post) into clean, styled HTML.

Key Learnings and Technical Highlights

• Secure OAuth Handling: Successfully implemented NextAuth callbacks (jwt and session) to extract and manage sensitive data like the GitHub access token, essential for secure server-side interactions with the GitHub API.
• Integrating LLM Pipelines: Built a robust, multi-step asynchronous pipeline that handles external API rate limits and complex tasks (code aggregation, AI generation) to create high-quality, insightful content automatically.
• Mongoose and Next.js Best Practices: Ensured efficient database connection management in the serverless environment using a globally cached Mongoose connection utility (src/lib/db.ts) to prevent connection issues.