Case study

Portfolio-Website-Builder

View as

The Portfolio-Website-Builder is a sophisticated application designed to streamline the creation of personalized portfolios for developers. By leveraging AI-assisted features and a user-friendly interface, it enables users to generate portfolios from their GitHub repositories and resumes, enhancing their professional visibility.

Architecture

The architecture of the Portfolio-Website-Builder is designed to be both scalable and reliable, utilizing a monolithic structure that separates the builder app from the portfolios it generates. This layered architecture allows for clear organization of components, pages, and APIs, ensuring maintainability and ease of updates.

Stack

The project utilizes a modern tech stack, including Next.js for its framework, which supports server-side rendering and static site generation. The choice of TypeScript enhances code quality and maintainability, while libraries like Tailwind CSS and Radix UI provide a robust foundation for building responsive and accessible user interfaces.

Deep dive

The project tackles the challenge of generating personalized portfolios by integrating AI capabilities that analyze GitHub repositories and resumes. This approach not only streamlines the creation process but also ensures that the portfolios are tailored to reflect the unique skills and experiences of each developer.

The Portfolio-Website-Builder is built as a monolithic application using Next.js, TypeScript, and a layered architecture pattern. It incorporates a range of technologies to facilitate AI-assisted portfolio generation and ensures a structured separation of concerns within the codebase.

Architecture

The Portfolio-Website-Builder employs a layered architecture pattern, which facilitates separation of concerns through distinct directories for components, pages, and APIs. This design choice enhances maintainability and scalability, while the integration of a verification pipeline ensures that claims made within the portfolios are backed by code evidence.

Stack

The tech stack for the Portfolio-Website-Builder includes TypeScript and JavaScript as primary programming languages, with Next.js serving as the framework. Key libraries such as Tailwind CSS and Radix UI are used for UI development, while Drizzle is employed as an ORM for database interactions. The application also integrates Auth.js for authentication and utilizes Playwright and Jest for comprehensive testing.

Deep dive

A key challenge in the Portfolio-Website-Builder was implementing the AI-assisted portfolio generation feature, which required the integration of various AI providers for analysis and chatbot functionality. The team also focused on creating a layout review agent to conduct accessibility and design checks, ensuring that the generated portfolios meet high standards of usability and aesthetics. The use of a verification pipeline for proof-backed claims further enhances the credibility of the portfolios.

Guided tour

  1. 01

    AI-Assisted Portfolio Builder

    This project creates a proof-backed portfolio by transforming a developer's GitHub repositories and resume into a cohesive website. It ensures that every claim made on the portfolio is verifiable through direct code evidence.

    • !Uses AI for portfolio generation
  2. 02

    Layered Monolithic Architecture

    The application is structured as a single Next.js app that integrates various functionalities including ingestion, analysis, verification, and rendering. It utilizes a PostgreSQL database for data management and supports schema migrations.

    • !Monolithic architecture with layered pattern
  3. 03

    Database Initialization Script

    The `scripts/init-db.sql` file initializes the PostgreSQL database and enables the `pgvector` extension, showcasing the developer's attention to database setup for AI features. This file is essential for setting up the database environment.

    • Includes database initialization script

    scripts/init-db.sql

    -- This script initializes the database and enables pgvector
    CREATE EXTENSION IF NOT EXISTS pgvector;
  4. 04

    Well-Tested with Jest and Playwright

    The project employs Jest for unit and integration tests, while Playwright is used for end-to-end testing. This ensures that the application is robust and reliable.

    • !Tests with Jest framework
  5. 05

    Deploys to Cloudflare Pages

    The generated portfolios are deployed on Cloudflare Pages, providing a seamless hosting solution. This integration allows for easy sharing and accessibility of the portfolios.

    • Deploy target is Cloudflare Pages
  6. 06

    Try It Out

    To explore the project, clone the repository using the command below. Follow the setup instructions in the README to get started.

    git clone https://github.com/shashankcm95/Portfolio-Website-Builder
Architecture
graph TD;
    A[Next.js App] --> B[Postgres DB];
    A --> C[AI Providers];
    A --> D[Cloudflare R2];
    A --> E[Cloudflare Pages];

Diagram source rendered with mermaid.js.

Built with
  • TypeScript
  • The project uses TypeScript as a programming language.
  • The project uses JavaScript as a programming language.
  • The project uses Next.js as a framework.
  • The project uses Tailwind CSS as a library.
  • The project uses Radix UI as a library.
  • The project uses Drizzle as an ORM.
  • The project uses Auth.js v5 for authentication.
  • The project uses Playwright for testing.
  • The project uses Jest for testing.
  • The project uses Docker as a tool.
  • The project uses nvm as a tool.

Verified facts

  • The project uses TypeScript as a programming language.from code
    Evidence
    Runtime: Node.js 22 (via `nvm`), Next.js 14 App Router, TypeScript

    Source: README

  • The project uses JavaScript as a programming language.from code
    Evidence
    Runtime: Node.js 22 (via `nvm`), Next.js 14 App Router, TypeScript

    Source: README

  • The project uses Next.js as a framework.from code
    Evidence
    Runtime: Node.js 22 (via `nvm`), Next.js 14 App Router, TypeScript

    Source: README

  • The project uses Tailwind CSS as a library.from code
    Evidence
    UI: Tailwind CSS + Radix UI primitives

    Source: README

  • The project uses Radix UI as a library.from code
    Evidence
    UI: Tailwind CSS + Radix UI primitives

    Source: README

  • The project uses Drizzle as an ORM.from code
    Evidence
    ORM: Drizzle (schema + migrations in `src/lib/db/`)

    Source: README

  • The project uses Auth.js v5 for authentication.from code
    Evidence
    Auth: Auth.js v5 (NextAuth) with GitHub OAuth

    Source: README

  • The project uses Playwright for testing.from code
    Evidence
    Testing: Jest (unit + integration), Playwright (e2e + layout review)

    Source: README

View repository ↗