Case study

Portfolio-Website-Builder

  • Personal project
  • 1 contributor
View as

The Portfolio-Website-Builder is a comprehensive tool designed to facilitate the creation of personalized portfolio websites. It leverages advanced technologies to provide features like AI-assisted portfolio generation and proof-backed claims, enhancing user experience and credibility.

Architecture

The application is structured as a monolith, which allows for streamlined development and deployment. Its layered architecture enhances maintainability and scalability, ensuring that new features can be integrated without disrupting existing functionality.

Stack

The technology stack of the Portfolio-Website-Builder includes mature and widely adopted tools such as Next.js for the framework, along with JavaScript, TypeScript, and SQL for development. This ecosystem supports rapid development and deployment, ensuring a robust user experience.

Deep dive

The project tackles the challenge of portfolio creation by implementing AI-assisted generation, which streamlines the user experience. Additionally, the inclusion of a verification pipeline for claims ensures that users can present credible information, enhancing trust and engagement.

The Portfolio-Website-Builder is built as a monolithic application using a layered architecture. It employs a single Next.js app structure to manage an ingestion, analysis, verification, and rendering pipeline, ensuring efficient state management through a database.

Architecture

The Portfolio-Website-Builder utilizes a layered architecture within a monolithic framework, consisting of a single Next.js application. This design includes a comprehensive pipeline for ingestion, analysis, verification, and rendering, supported by a database for state management, which facilitates efficient data handling and user interactions.

Stack

The project employs a tech stack comprising JavaScript, TypeScript, and SQL, with Next.js as the primary framework. It integrates several libraries, including Tailwind CSS for styling, Radix UI for components, and Drizzle for ORM, alongside testing tools like Jest and Playwright to ensure high-quality code and user interfaces.

Deep dive

The Portfolio-Website-Builder addresses several engineering challenges, including the implementation of an AI-assisted portfolio generation feature that requires robust data processing and user input handling. The verification pipeline for proof-backed claims adds complexity, necessitating careful design to ensure reliability. Furthermore, the layout review agent for accessibility checks demonstrates a commitment to inclusive design, requiring integration of various testing methodologies to meet standards.

Guided tour

  1. 01

    AI-Assisted Portfolio Website 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 site is verifiable through concrete code evidence.

    • !Uses AI for portfolio generation
  2. 02

    Monolithic Layered Architecture

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

    • !Single Next.js app structure
  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.

    scripts/init-db.sql

    -- This script initializes the database and enables pgvector extension
CREATE EXTENSION IF NOT EXISTS pgvector;
-- Additional setup commands can follow here.
  4. 04

    Comprehensive Testing Framework

    The project employs Jest for unit and integration tests, alongside Playwright for end-to-end testing, ensuring robust quality assurance.

    • ✓Tests with Jest and Playwright
  5. 05

    Deployment to Cloudflare Pages

    The application is set up to deploy generated sites to Cloudflare Pages, facilitating easy hosting of the portfolios.

    • !Deploys to Cloudflare Pages
  6. 06

    Try It Out

    To explore the project, clone the repository using the command below.

    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 Pages]
    A --> E[Radix UI]
    A --> F[Tailwind CSS]

Diagram source rendered with mermaid.js.

Built with
  • TypeScript
  • The tech stack includes JavaScript, TypeScript, 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 JavaScript, TypeScript, and SQL.from code
    Evidence
    Tech stack includes JavaScript, TypeScript, SQL.

    Source: README

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

    Source: README

  • 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

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

    Source: README

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

    Source: repo_file

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

    Source: repo_file

  • The application has a single Next.js app structure.from code
    Evidence
    Single Next.js app structure.

    Source: repo_file

  • The application includes an ingestion, analysis, verification, and rendering pipeline.from code
    Evidence
    Ingestion, analysis, verification, and rendering pipeline.

    Source: repo_file

View repository ↗