PDF_Editor_

— Responsive PDF editor with

dark mode and bilingual UI —

A person working on a laptop at a white table, with a cup, notepad, and notebooks nearby, in a well-lit room.

  • Created a hi-fi Figma prototype as the visual blueprint.

  • Built with Next.js App Router and Tailwind CSS for modular frontend development.

  • Supported dark mode using Tailwind's dark variants.

  • Enabled language switching via custom i18n context.

  • Designed reusable UI components: Navbar, Sidebar, DropZone, PageInput, etc.

  • Integrated frontend with Stirling PDF backend through public API endpoint.

  • Deployed live demo on Vercel for interactive showcasing.

Overview

This project is inspired by Stirling PDF, an open-source tool that offers a wide range of PDF processing features. While the functionality is powerful, I found the original interface could be overwhelming and unintuitive for everyday users.

I initiated this redesign and implementation project to explore how thoughtful UI/UX improvements could enhance document processing efficiency. From layout structure to interaction feedback, every decision was made with usability in mind.

This is a solo project, and I am responsible for both the design and frontend development. The work is ongoing, and I plan to continue refining the user experience and integrating more advanced features over time.

Homepage Redesign

  • Stirling PDF- Homepage

    Problems in Original Design

    1. All tools are listed on a single page, making it difficult for users to locate what they need.

    2. The page contains many rarely-used features, increasing cognitive load.

    3. There is no clear visual hierarchy, and the layout feels overwhelming.

    4. Hover interactions cause layout jittering and cognitive distraction.

  • PDF_Editor_homepage

    My Design Improvements

    1. I categorized tools into four main types (Organize, Convert, Security and Edit) and routed them into separate pages for better clarity.

    2. I retained only the features relevant to our company's actual use cases to streamline the interface.

    3. I used a card-based layout with visual grouping to reduce noise and create a more welcoming experience.

    4. I designed smooth transitions and minimal hover states that enhance interactivity without breaking layout or overwhelming the user visually.

Tool Pages Redesign

Problems in Original Design

1. Icon shows as text before it appears normally

The original system uses Google Fonts for icons. When the icon font hasn’t finished loading, the icon’s name (like “dashboard” or “arrow_back”) shows up as plain text for a moment. This looks messy and breaks the visual consistency.

2. Flash between dark and light mode on page change

Theme preference is stored in localStorage but not applied early enough. Without a hydration-safe script in the <head>, the page renders in the default theme before updating, causing a visual flash that disrupts the experience.

My Design Improvements

1. Switched from Google icon fonts to React icons

This avoids the icon text flash because React icons load immediately as part of the page, without needing to wait for a font to download.

2. Applied the correct theme right at the start

I added a small script in the <head> that reads the saved theme and applies it before anything else loads. This prevents theme flashes when changing pages.

Features

Responsive Layout
for All Devices

The layout prioritizes desktop users, which aligns with common usage patterns for document editing tools. Responsive utilities from Tailwind CSS (such as sm, md, and lg) ensure that the interface remains clean and functional across tablets and smaller screens.

Smooth Dark/Light
Mode Toggle

Offers both dark and light themes based on system preferences or manual toggling. Theme rendering is managed through the class="dark" strategy and Tailwind's dark: variants, providing a consistent and flicker-free visual experience across transitions.

Seamless Language Switching

Supports both Traditional Chinese and English. The interface uses the i18n framework to manage translations, allowing users to switch languages instantly without refreshing the page. Text content is organized through centralized translation files, ensuring consistency and easy maintenance.

Intuitive File Upload Experience

Users can upload PDF files either by clicking to browse or by dragging them directly into the workspace. Offering both options makes the interaction more flexible and user-friendly, especially for first-time users. File input is also handled gracefully on mobile and touch devices to ensure broad usability.

Technologies Used

Page Hierarchy Diagram

The tool pages were reorganized into four main categories. This hierarchy aims to reduce information overload and provide clearer navigation paths by grouping related tools into distinct, purpose-driven pages.