Pepa's Playground, Agentic UI Engineering, Frontend EngineeringPepkata Logo
  • Home
  • Experiments
Logo

Built with

Linkedin

Logo

Github

Logo
©2025 YouPan. All Rights Reserved.

I'm So Glad You
Found Me!

A Builder & Full-Stack Engineer, crafting product-focused frontends and building intelligent, Agentic UIs

Get In Touch

Playground. Experiments

The Creative Impulse

Exploring the intersection of AI and user interfaces to create intelligent, adaptive experiences

LiveFintech · Trading Tools

Trading Dashboard Web3 🚧

Beta Version – Features in Development

A comprehensive trading dashboard for cryptocurrency and forex markets. Built with modern web technologies, this platform provides an intuitive interface to monitor assets and analyze trends with AI-powered insights. 🚨 Note: This is a preview build. All data is simulated, and live trading features are coming soon.

TypeScriptReactNext.jsVercel AI SDKOpenAI APIAPI RoutesTailwindRedux ToolkitReact QueryCode QualityVitestRecharts
Learn More
LiveFull-stack • Type-safe • Monorepo

Perfume AI - Full-Stack Monorepo

Type-Safe Next.js + FastAPI Platform

A modern full-stack application built with Next.js (TypeScript) and FastAPI (Python), structured as a scalable monorepo. Features strong end-to-end type safety through TypeScript, Zod, Pydantic, and SQLAlchemy typing. Implements a clean separation of concerns with a stateless backend, RESTful API design, automated documentation, and a production-ready deployment pipeline. Includes comprehensive testing on both frontend and backend using Vitest, Testing Library, Pytest, and HTTPX.

Next.jsTypeScriptFastAPIPythonPydanticSQLAlchemyZodVitestCode QualityPytestTailwindDcokerVercelFly
Learn More
LiveFull-stack • E-commerce • CRUD

Scentio — Perfume Store

Full-Stack Commerce Core

A classic full-stack CRUD e-commerce application built with Flask, SQLite, and Tailwind CSS. Features include user authentication, server-side validation, product management, and a fully responsive interface. Implements complete end-to-end flows—from database operations to frontend rendering—allowing users to browse products, view details, manage a cart, and complete purchases through a simple checkout process. Designed as a traditional full-stack architecture using Python and SQLite, demonstrating clear backend-to-frontend integration.

FlaskPythonSQLiteTailwindCode QualityTestingRender
Learn More
LiveReal Estate · Contracts

Contract Extractor

Upload any contract to automatically identify and summarize key legal and business terms using advanced AI. The system supports PDF, DOCX & TXT formats, and is powered by LangChain and OpenAI with structured output to accurately parse complex legal language. Now with Enhanced Validation: intelligent contract- type validation ensures accurate parsing of your documents.

TypeScriptReactNext.jsReact QueryVercel AI SDKOpenAI APIAPI RoutesLangChainOpenAIStructured OutputPDF AnalysisDocument ParsingJSON SchemaCode Quality
Learn More
LiveReal Estate · Descriptions

Property Description AI Generator

A suite of AI-powered tools designed for real estate professionals and enthusiasts. Generate compelling property descriptions, analyze lease agreements, extract key clauses from contracts, and gain market insights—all powered by advanced language models to streamline your real estate workflow.

TypeScriptReactNext.jsVercel AI SDKOpenAI APIAPI RoutesTailwindCode Quality
Learn More
LiveReal Estate · Leases

Document Chat

Upload any document (PDF, Word, or Text) and converse with it using advanced AI. Get instant, context-aware answers, detailed summaries, and clear explanations—all backed by citations pointing directly to the source. Perfect for in-depth research, rapid content analysis, and extracting specific information without manual searching.

TypeScriptReactNext.jsVercel AI SDKOpenAI APIAPI RoutesLangChainRAGPDF AnalysisTailwindCode Quality
Learn More
Live

Bruce Lee - Lee Jun Fan

This project showcases Bruce Lee's legacy with a unique design by Gyzmo, using Next.js. It leverages nested API routes and server- side rendering for optimized performance. All content is copyrighted and cannot be used without permission. Stay tuned for the upcoming Bruce Lee store!

TypeScriptReactNext.jsVercel AI SDKOpenAI APIReact QueryTailwindAPI RoutesCode QualityVitest
Learn More
Live

News Portal

myNews Portal - without ads => This project utilizes the latest Next.js features, including server components, for seamless data fetching, server-side integration, and exceptional performance. Tailwind CSS complements the setup by enabling efficient, responsive, and accessible styling.

TypeScriptReactNext.jsVercel AI SDKAPI RoutesCode QualityVitestTailwindCore Web VitalsPerformance OptimizationCode QualityVitest
Learn More
Live

Hacker News Clone

hackerClone - without ads => This is a personal clone project to follow Hacker News, without getting disturbed by ads. Migrated it to latest Next.js & server-components. It is optimized for accessibility while leveraging dynamic data fetching from the HNews API to ensure a streamlined, user-centric interface.

ReactTypeScriptNext.jsReact QueryAPI Routes
Learn More
Coming Soon

AI Agent Builder

An innovative platform for creating and deploying autonomous AI agents. Built with React and TypeScript, featuring real-time collaboration and advanced prompt engineering capabilities.

ReactTypeScriptPythonFast APIWebSockets
Stay tuned for updates
Coming Soon

Conversational UI Framework

A comprehensive framework for building natural language interfaces. Implements context-aware dialogues with multi-turn conversation management and seamless integration with LLMs.

Next.jsOpenAITailwindVercel AI SDK
Stay tuned for updates
Coming Soon

Agentic Component Library

A reusable component library specifically designed for Agentic UIs. Features intelligent components that adapt based on user behavior and context, with built-in AI assistance.

ReactStorybookRadix UILangChain
Stay tuned for updates
Project architecture