Order and Beauty: How I Built My Personal Web Space (React 19 + TS 5 + Tailwind 4)

🌟 Vision

I’ve always wanted to create something that sits between a "quick sketch" and an "industrial-grade product." By sticking to TDD processes and Component-Driven Development (CDD), I’ve built myself a Web application framework that can handle complex logic while maintaining a silky-smooth visual experience.

🚀 Technical Solutions

Reflections on the "Frontend Three"

React 19: Why is it indispensable? Because it has long surpassed being just a UI library; it has become my cognitive foundation. Specifically, React 19's Actions pattern and the use primitive turn once-cumbersome async logic and state management into something truly pure. This declarative paradigm is the core cornerstone for building my highly abstract and reusable RT component set.
TypeScript 5: To me, TS is more than just type annotations; it’s my "safety net." I deeply utilize the declarative features of TS 5 to establish strong type contracts between components, which keeps me relaxed even during large-scale code refactorings.
Tailwind CSS 4: Moving away from the cumbersome configurations of the past, Tailwind 4's pure CSS configuration mode makes managing design tokens feel much more natural.

Infrastructure Choices

Ant Design 6: I use it as my visual foundation because it provides excellent component consistency.
React Router v7: A standout choice in my opinion—it unifies data loading and state persistence, giving this Web app the fluid feel of a native application.
Redux Toolkit & TanStack Query: This is my most recommended state management combo. RTK helps me manage UI state, while Query handles data synchronization with the server, with caching and prefetching done exceptionally well.

📁 RT Components

Based on Atomic Design principles, I developed my own set of RT (React-Toolkit) components. They are the visual soul of my entire application:

src/components/
├── RTHeading/      # My heading system, balancing SEO and visual rhythm
├── RTText/         # Precision typography for multi-language and line heights
├── RTButton/       # Interactive core, where I’ve integrated debounce and haptic feedback
├── RTStack/        # Flexbox helper components that help me reduce scattered CSS
├── RTImage/        # A "lazy" image loader that supports progressive display
└── RTContainer/    # Responsive safe area control

🛠 Obsession with DX (Developer Experience)

I firmly believe that great processes lead to great products. While developing this project, I’ve had a few non-negotiables:

Biome: I said goodbye to the heavy ESLint + Prettier setup. Biome runs incredibly fast, letting me focus on the code itself rather than fixing format issues.
Storybook 10: My components are all "hand-crafted" within Storybook. I test every edge case here to ensure they don't fail anywhere.
Strict TDD: For core logic, I insist on "tests first, code later." This contractual spirit gives me the confidence for the long-term maintenance of this project.

🎨 Visual and Interactive "Magic"

I love focusing on the details. I’ve integrated lightweight libraries like tsparticles and TextTypewriter because I don't want the data to look too static. Combined with Tailwind's micro-transitions, I want you to feel an instant "breathability" every time you click a button.

🌍 The Soul of Multi-Language

Using react-i18next, I’ve implemented switching between Chinese, English, and Japanese. I didn't just translate text; even the layouts are adaptive based on language lengths, ensuring a consistent, premium experience no matter which language you read.

📁 Project Directory Overview

src/
├── app/
│   ├── core/           # Core application configuration (Providers, Store, Theme)
│   ├── resume/         # Modular business views
│   └── nav/            # Routing grid configuration
├── components/         # Self-developed RT (React-Toolkit) component library
├── shared/
│   ├── api/            # Strongly-typed API client (Axios)
│   ├── hooks/          # Highly abstracted custom reusable logic
│   ├── utils/          # Functional utility methods
│   └── forms/          # Form solutions based on RHF + Zod
├── i18n/               # Internationalization multi-language resources
└── styles/             # Tailwind 4 modern styling system