Search this site
Embedded Files
  • Home
  • Projects
    • PortFeed
    • Doorbell - Smart
    • Modular Firmware Architecture
    • Garage Door Control
    • Irrigation System (WiFi)
  • Contact
 
  • Home
  • Projects
    • PortFeed
    • Doorbell - Smart
    • Modular Firmware Architecture
    • Garage Door Control
    • Irrigation System (WiFi)
  • Contact
  • More
    • Home
    • Projects
      • PortFeed
      • Doorbell - Smart
      • Modular Firmware Architecture
      • Garage Door Control
      • Irrigation System (WiFi)
    • Contact

PortFeed

Web application with comprehensive analysis, actionable feedback and current trend insights.

Overview

PortFeed is an intelligent web application designed to bridge the gap between creating a personal portfolio and making it truly effective. It acts as an AI-powered career consultant that provides objective, actionable, and goal-oriented feedback on a user's entire portfolio website. By analysing everything from design and content quality to SEO and mobile responsiveness, PortFeed helps developers, designers, and other professionals refine their online presence to better attract job offers, secure clients, or grow their personal brand.

Architecture and Design Goals

The application is built on a modern, serverless architecture designed for scalability, security, and a seamless user experience.

  • Frontend: A responsive and dynamic user interface built with Next.js and React, leveraging Server Components for optimal performance. Styling is handled by Tailwind CSS with a custom theme, and components from ShadCN/UI ensure a polished and consistent look.

  • Backend: The backend is powered by Firebase, utilizing Firestore for the database and Firebase Authentication for secure user management. Server-side logic and actions are handled within the Next.js environment.

  • AI Orchestration: The core "brain" of the application is a series of orchestrated AI flows managed by Genkit. These flows handle complex tasks such as URL safety vetting, discovering all internal pages of a site, and performing multi-layered analysis with Google's Gemini models.

  • Design Goals: The primary goal was to create a clean, intuitive, and non-intrusive user experience. The design emphasises clarity and actionability, presenting complex AI-generated feedback in a simple, digestible format with charts, scores, and practical examples.

Features

  • Multi-Stage AI Analysis: Goes beyond simple page scraping by using a Genkit-orchestrated process to vet URLs for safety, discover all internal pages, and synthesize feedback from the entire site into a single, holistic report.

  • Goal-Oriented Feedback: The AI tailors its analysis based on the user's stated career goal (e.g., Job Hunt, Find Clients), providing contextually relevant advice. For a job hunter, it prioritises clarity and evidence of skills for recruiters.

  • Profession Inference: The system intelligently infers the user's profession (e.g., "UI/UX Designer," "Software Engineer") from the site's content to provide industry-specific feedback and trend analysis.

  • Secure User and Subscription Management: Integrates Firebase for authentication and Stripe for secure, PCI-compliant subscription and billing management, including a full Admin Dashboard for user and plan administration.

State Management

The application employs a combination of React's built-in state management hooks (useState, useEffect) and server-side state management through Next.js Server Actions.

  • Client-Side: Local UI state, such as form inputs, dialog visibility, and loading indicators, is managed within individual components using React hooks for simplicity and performance.

  • Server-Side: All critical business logic and data mutations (e.g., running an analysis, updating a user profile, processing a subscription) are handled by asynchronous Server Actions. This modern Next.js pattern centralizes state changes on the server, reducing client-side complexity and ensuring data integrity. The client-side UI simply calls these actions and updates based on the result.

Programming and Libraries

  • Languages: TypeScript

  • Frameworks: Next.js, React

  • Styling: Tailwind CSS, ShadCN/UI

  • AI & Backend: Genkit, Google AI Platform (Gemini), Firebase (Firestore, Authentication)

  • Payments: Stripe

  • Key Libraries: Zod (for schema validation), lucide-react (for icons), Recharts (for data visualization)

Summary

PortFeed is a full-stack web application that demonstrates a practical and powerful use of modern AI to solve a real-world problem for professionals. It showcases skills in building secure, scalable, and user-friendly products using a contemporary tech stack. The project encompasses frontend development, backend architecture, third-party API integration (Stripe, Google AI), and advanced AI flow orchestration with Genkit.

Demo

bg.mov

Link to Website

https://portfeed.com

View All Projects

Google Sites
Report abuse
Google Sites
Report abuse