trpfrog.net

A monorepo for my personal website, trpfrog.net, built with Next.js and TypeScript.

🧩 Technology Stack

• Node.js
• TypeScript with better-typescript-lib
• Vitest
• Tailwind CSS
• React (with React Compiler)
• pnpm
• ESLint
• Prettier
• Turborepo for monorepo management
• Zod for schema validation
• ts-pattern for pattern matching

trpfrog.net

• Next.js for building the website
• Vercel for website hosting
• CSS Modules for complex styling
• Vanilla Extract for more complex styling
• Hono for BFF (hono/vercel) and middlewares
• Cloudinary for image CDN
• next-mdx-remote for rendering blog articles from Markdown
• OpenAI API for resolving ambiguous URLs (trpfrog.net/fuzzy)
• microCMS for hosting draft articles
• PlanetScale for database of Twitter archives
  • Due to the discontinuation of PlanetScale's hobby plan, we are planning to migrate to Cloudflare D1.

trpfrog-diffusion (AI-powered TrpFrog Icon Generation)

• Hono for API endpoints
• Cloudflare Workers for hosting the API
• HuggingFace for image generation using Prgckwb/trpfrog-sd3.5-large-lora
• OpenAI API for generating prompt
• Cloudflare Workers KV for caching generated images

dev-blog-server

• Socket.io for real-time editing of blog posts

and so on...

🐤 Getting Started

First, install the dependencies:

pnpm install

Next, run the development server:

pnpm run -w dev

Open http://localhost:3000 with your browser to see the result.

To build this project, just run below:

pnpm run -w build

🚗 Requirements

• Node.js 20.x
• pnpm 9.x

📦 Project Structure

We are using a monorepo. The package structure is as follows.

.
├── apps                    # Applications
│   ├── trpfrog.net           # Main project, trpfrog.net
│   ├── dev-blog-server       # Socket.io server for editing blog posts
│   └── image-generation      # API Endpoints for trpfrog-diffusion
├── packages                # Libraries
│   ├── config-tailwind       # Shared Tailwind CSS config
│   ├── config-typescript     # Shared TypeScript config
│   ├── config-vitest         # Shared Vitest config
│   ├── constants             # Constants used by some packages
│   ├── posts                 # Utilities for posts
│   ├── storybook-theme       # TrpFrog's Storybook theme
│   └── utils                 # Utilities used by some packages
├── posts/                  # Blog posts
│   └── *.md
├── README.md
├── package.json
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── prettier.config.js
├── turbo.json
└── vitest.workspace.ts

💚 Contribution

Welcome! and thank you for your interest in contributing! Please keep the following in mind:

1. No Major *Content* Changes or Additions This is a personal site by @trpfrog. Major content changes or new additions that might alter the original intent of the website are not accepted.

2. License Notice This project may switch to the MIT License in the future. Contributions will follow the same license at that time.

3. Improvements and Suggestions Welcome Improvements, such as refactoring or typo fixes, are welcome through Pull Requests. We also welcome new content ideas and suggestions via Issues.

Thank you for your understanding and support!