From Voice to Live Site: A Backend Deep Dive into Foligo's AI Portfolio Engine

Every student and professional knows the feeling: you complete an amazing project, learn a new skill, or finish a tough internship, but the thought of sitting down to write about it for your portfolio feels like a mountain to climb. That friction often leads to outdated websites and missed opportunities. My team and I created Foligo to solve this exact problem.

Foligo is an AI-powered platform that generates polished portfolio content from a simple conversation. As the lead backend developer, I was responsible for building the core engine that makes this possible—from the API and database architecture to the complex AI and voice integrations. This is the story of how we architected a system to turn spoken words into a live, professional website in minutes.

The Vision: Turning "Dead Time" into Productive Time

Our core idea was inspired by the desire to make portfolio building effortless and accessible. What if you could turn your walk between classes or your commute home into a productive content creation session?

The user journey is simple by design:

  1. A user starts a voice conversation with our AI assistant.

  2. The AI conducts a brief, structured interview, asking intelligent questions about the project or experience.

  3. From that single conversation, Foligo instantly generates a detailed portfolio write-up, a professional LinkedIn post, and a concise update for platforms like X.

To achieve this seamless experience, I designed a robust, microservices-based backend capable of handling everything from real-time voice processing to dynamic site generation.

Architecting the Foligo Engine

At its heart, Foligo is a collection of interconnected services working in concert. I chose a microservices architecture to ensure scalability, maintainability, and clear separation of concerns.

Here’s a high-level look at the components:

graph TD
    A["User on Mobile/Web"] --> B["Dashboard (Vue)"]
    A --> C["Sites (Nuxt SSR)"]

    subgraph "Backend Services"
        B <--> D["API (Node.js)"]
        C -- "Fetches data for *.foligo.tech" --> D
        D <--> E["PostgreSQL & Redis"]
        D <--> F["Gemini & ElevenLabs APIs"]
    end

As the backend lead, my focus was on the API, a Node.js and Express application that serves as the central nervous system. It connects to a PostgreSQL database via the Prisma ORM for data management and uses Redis for high-performance caching. This API is responsible for user authentication, project management, and, most critically, orchestrating the AI workflows.

The other key pieces I built were:

  • Dashboard: A Vue.js admin interface that allows users to manage their projects and use our block-based CMS.

  • Sites: A Nuxt.js static site generator that creates the final, public-facing portfolio websites.

The Technical Journey: From a Spoken Word to a Live Webpage

The magic of Foligo lies in how data flows through our stack. Let’s follow the journey from the user’s voice to a published portfolio piece.

1. The Conversation and the Custom Toolcall

When a user starts a conversation, we leverage the ElevenLabs API for its high-quality, low-latency speech-to-text capabilities. But simply transcribing audio wasn't enough. We needed the AI to understand the intent of the conversation and take action.

This is where the real innovation happened. We integrated Google's Gemini AI not just as a text generator, but as an intelligent agent. I engineered a system using custom toolcalls. Instead of just having a chat, the Gemini model is configured to call our own internal API endpoint when it determines the conversation is complete.

Here’s how it works:

  1. The user finishes their conversation with the AI assistant.

  2. We dynamically inject the unique projectId into the system prompt, giving the AI context for the user's current work.

  3. Gemini recognizes the conversation's conclusion and, instead of just responding with text, it makes a secure API call to our /api/ai/generate-content endpoint.

  4. It passes the entire summarized conversation, ensuring all the rich details from the user's description are included.

This custom toolcall is the bridge between the conversational interface and our backend content generation logic, allowing the AI to actively trigger the creation of a portfolio piece.

2. The Challenge of Dynamic Subdomains

One of the most rewarding challenges was building the system that serves unique portfolio sites for every user, like yourname.foligo.tech. This required a dynamic and scalable solution.

I built the sites service using Nuxt.js with Server-Side Rendering (SSR). When a request comes in for a specific subdomain, our Nuxt server does the following:

  1. Inspects the Host: It reads the host header from the incoming HTTP request to identify the subdomain (e.g., yourname).

  2. Makes a Server-Side API Call: Before rendering the page, the Nuxt server makes a direct, server-to-server API call to our main backend (api.foligo.tech/site/yourname).

  3. Fetches Site Data: The API retrieves all the necessary data for that user—their profile information, custom styling, projects, and posts—from the PostgreSQL database.

  4. Pre-renders the Page: Nuxt uses this data to pre-render the complete HTML page on the server, including all the content.

This SSR approach provides two major benefits:

  • Excellent SEO: Search engines receive a fully rendered HTML page, making the content easily indexable.

  • Fast Load Times: The user receives a complete page instantly, without waiting for client-side JavaScript to fetch data and build the UI.

Overcoming Hurdles: The GPU Roadblock and a Strategic Pivot

Our journey wasn't without its obstacles. Initially, we planned to create our own speech-to-speech agent using open-source models hosted on Vultr and Digital Ocean. However, we hit a wall: we were denied access to any GPU compute resources, which are essential for running modern AI models efficiently. After hours with support, it became clear our initial approach wasn't viable.

Instead of giving up, we pivoted. We decided to leverage a best-in-class managed service and integrated the ElevenLabs API for real-time voice interaction. This setback taught us a valuable lesson in pragmatism and the importance of adapting our technical strategy to overcome real-world constraints. It ultimately led to a more robust and responsive system for our users.

What's Next for Foligo?

We are proud to have built a fully functional, end-to-end application that solves a real problem. But we're just getting started. We are actively developing new features, including:

  • AI-Powered Image Selection: An AI that can analyze a project URL (like a GitHub repo or live demo), take screenshots, and intelligently select the most relevant images for a post.

  • Personalized Interview Prep: A tool that leverages a user's accumulated project data to act as a personalized assistant, helping them prepare for specific job interviews by generating relevant talking points and potential questions.

Try It Yourself

Building the backend for Foligo has been an incredible journey of integrating complex systems to create a simple, powerful user experience. I invite you to see the result of our work.