Case study

Portfolio-Website-Builder

  • Personal project
  • 1 contributor
View as

The Portfolio-Website-Builder is a comprehensive application designed to streamline the creation of professional portfolios. It leverages advanced AI capabilities to generate portfolios from GitHub repositories and resumes, enhancing user experience and efficiency.

Architecture

The application is structured as a monolith, ensuring that all components work seamlessly together. This architecture supports scalability and reliability, allowing for efficient management of the portfolio generation process.

Stack

The tech stack is chosen for its maturity and ecosystem support, including TypeScript and Next.js, which facilitate robust application development. The integration of libraries like Tailwind CSS and Radix UI ensures a modern and responsive user interface.

Deep dive

The application tackles the challenge of portfolio generation by integrating AI capabilities that pull data from GitHub repositories and resumes. This approach not only streamlines the creation process but also ensures that portfolios are tailored to individual users.

The Portfolio-Website-Builder is a monolithic application built using a layered architecture. It integrates multiple functionalities, including ingestion, analysis, verification, rendering, and deployment, all within a single codebase, which simplifies maintenance and deployment.

Architecture

The Portfolio-Website-Builder employs a layered architecture pattern, which separates concerns and enhances maintainability. The monolithic structure allows for efficient data flow between components, as all functionalities, including ingestion, analysis, verification, rendering, and deployment, are handled within the same application.

Stack

The application utilizes a tech stack that includes TypeScript, JavaScript, and SQL, with Next.js as the primary framework. Libraries such as Tailwind CSS and Radix UI enhance the UI, while Drizzle manages database interactions. Testing is supported by Jest and Playwright, ensuring high-quality code.

Deep dive

The Portfolio-Website-Builder's architecture supports complex functionalities such as proof-backed claims and a verification pipeline. The layout review agent enhances accessibility and design checks, ensuring that the generated portfolios meet high standards. The integration with AI providers further enriches the application's capabilities, allowing for dynamic content generation and user engagement.

Guided tour

  1. 01

    AI-Assisted Portfolio Builder

    This project generates proof-backed portfolios from GitHub repositories and resumes. It ensures that claims on the site are supported by concrete code evidence, making portfolios more trustworthy.

    • !Uses AI for portfolio generation
  2. 02

    Layered Monolithic Architecture

    The application is structured as a single Next.js app that integrates ingestion, analysis, verification, and rendering. It utilizes a Postgres database for data storage and schema management.

    • !Single Next.js app structure
  3. 03

    Database Initialization Script

    The `scripts/init-db.sql` file initializes the Postgres database and enables the `pgvector` extension, showcasing the developer's focus on database capabilities.

    • ✓Contains database initialization logic

    scripts/init-db.sql

    -- Enable pgvector extension
CREATE EXTENSION IF NOT EXISTS pgvector;
  4. 04

    Well-Tested with Jest

    The project uses Jest for unit and integration testing, ensuring code reliability. Playwright is employed for end-to-end testing and layout reviews.

    • ✓Tests with Jest framework
  5. 05

    Deploys to Cloudflare Pages

    The application is designed to deploy generated portfolios to Cloudflare Pages, streamlining the hosting process.

    • !Deployment target is Cloudflare Pages
  6. 06

    Clone the Repository

    To try the project, clone the repository and follow the setup instructions in the README.

    git clone https://github.com/shashankcm95/Portfolio-Website-Builder
Architecture
graph TD
    A[Next.js App] --> B[Postgres Database]
    A --> C[AI Providers]
    A --> D[Cloudflare Pages]
    A --> E[User Interface]
    A --> F[Verification Pipeline]

Diagram source rendered with mermaid.js.

Built with
  • TypeScript
  • The tech stack includes TypeScript, JavaScript, and SQL.
  • The framework used is Next.js.
  • The libraries used include Tailwind CSS, Radix UI, Drizzle, Auth.js, Playwright, and Jest.
  • The tools used include Docker and nvm.

Verified facts

  • The tech stack includes TypeScript, JavaScript, and SQL.from code
    Evidence
    Tech stack includes TypeScript, JavaScript, SQL

    Source: README.md

  • The framework used is Next.js.from code
    Evidence
    Next.js 14 App Router

    Source: README.md

  • The libraries used include Tailwind CSS, Radix UI, Drizzle, Auth.js, Playwright, and Jest.from code
    Evidence
    UI: Tailwind CSS + Radix UI primitives; ORM: Drizzle; Auth: Auth.js v5; Testing: Jest, Playwright

    Source: README.md

  • The tools used include Docker and nvm.from code
    Evidence
    Docker, nvm

    Source: README.md

  • The architecture type is monolith.from code
    Evidence
    type: monolith

    Source: repo_file

  • The architecture pattern is layered.from code
    Evidence
    pattern: layered

    Source: repo_file

  • The application handles ingestion, analysis, verification, rendering, and deployment within the same application.from code
    Evidence
    Ingestion, analysis, verification, rendering, and deployment handled within the same application

    Source: repo_file

  • The application has a total of 197 files.from code
    Evidence
    fileCount: 197

    Source: repo_file

View repository ↗