Portfolio-Website-Builder

The Portfolio-Website-Builder is a robust application designed to streamline the creation of personalized portfolio websites. By leveraging AI-assisted features and a user-friendly interface, it empowers users to showcase their skills effectively.

View on GitHubTypeScript
  • Personal project
  • 1 contributor

Tech Stack

TypeScriptThe tech stack includes JavaScript and TypeScript as programming languages.Next.js is used as the framework.The libraries used include Tailwind CSS, Radix UI, Drizzle, Auth.js, Playwright, and Jest.Node.js and Docker are used as tools.The application uses PostgreSQL as the database.
View as

Architecture

The application follows a monolithic architecture, ensuring all components are housed within a single codebase. This design choice facilitates easier management and deployment while maintaining reliability and scalability.

Technical Narrative

The technology stack includes mature tools and libraries such as Next.js and PostgreSQL, which enhance the application's performance and reliability. By utilizing these technologies, the project ensures a seamless user experience while integrating advanced features.

Why This Project Matters

The Portfolio-Website-Builder stands out for its innovative use of AI to assist users in creating tailored portfolios. This project showcases leadership in technology integration and a commitment to enhancing user experience.

Deep Dive

The application addresses complex challenges such as AI integration for portfolio generation and ensuring accessibility through a layout review agent. These features enhance usability and demonstrate a strong commitment to user-centric design.

Architecture

The Portfolio-Website-Builder employs a layered architecture within a monolithic structure, featuring a single Next.js application with multiple components and API routes. This design supports a clear separation of concerns, allowing for efficient processing of portfolio data and effective database schema management through Drizzle.

Technical Narrative

The tech stack comprises JavaScript and TypeScript for programming, with Next.js as the primary framework. The application utilizes libraries like Tailwind CSS for styling, Radix UI for UI components, and Drizzle for database management, ensuring a modern and efficient development environment.

Why This Project Matters

The Portfolio-Website-Builder demonstrates technical depth through its implementation of AI-assisted features and a robust verification pipeline. This project highlights problem-solving capabilities and a focus on delivering innovative solutions.

Deep Dive

The Portfolio-Website-Builder tackles several engineering challenges, including the integration of AI providers for analysis and chatbot functionalities. The layered architecture allows for efficient data processing, while the use of PostgreSQL ensures robust data management. The application consists of 139 files, with a mix of JavaScript and TypeScript, reflecting a well-structured codebase that supports maintainability and scalability.

Guided tour

  1. 01

    AI-Assisted Portfolio Builder

    This project generates proof-backed portfolios by transforming GitHub repositories and resumes 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

    Layered Monolithic Architecture

    The application is structured as a single Next.js app, integrating a PostgreSQL database for data management and various AI services for enhanced functionality. It processes data through ingestion, analysis, verification, and rendering pipelines.

    • !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 foresight in preparing the database for advanced features.

    scripts/init-db.sql

    -- Initialize pgvector extension
CREATE EXTENSION IF NOT EXISTS pgvector;
-- Additional setup can be added here
  4. 04

    Comprehensive Testing Framework

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

    • ✓Tests with Jest
  5. 05

    Cloudflare Pages Deployment

    The application is designed to deploy generated portfolios directly to Cloudflare Pages, facilitating easy hosting and management of the portfolio sites.

  6. 06

    Clone the Repository

    To explore 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[PostgreSQL Database]
    A --> C[Cloudflare R2]
    A --> D[AI Providers]
    A --> E[Cloudflare Pages]

Diagram source rendered with mermaid.js.

Key facts

  • The tech stack includes JavaScript and TypeScript as programming languages.from README
    Evidence
    JavaScript, TypeScript

    Source: README

  • Next.js is used as the framework.from README
    Evidence
    Next.js 14 App Router

    Source: README

  • The libraries used include Tailwind CSS, Radix UI, Drizzle, Auth.js, Playwright, and Jest.from README
    Evidence
    Tailwind CSS + Radix UI primitives, Drizzle, Auth.js v5, Playwright, Jest

    Source: README

  • Node.js and Docker are used as tools.from README
    Evidence
    Node.js 22 (via `nvm`), Docker

    Source: README

  • The architecture type is monolith.inferred
    Evidence
    type: monolith

    Source: architecture

  • The architecture pattern is layered.inferred
    Evidence
    pattern: layered

    Source: architecture

  • The application has a single Next.js application structure with multiple components and API routes.inferred
    Evidence
    Single Next.js application structure with multiple components and API routes

    Source: architecture

  • The application uses PostgreSQL as the database.from README
    Evidence
    Database: PostgreSQL 16

    Source: README

← Back to Projects