Simple PDF Merger

A modern, user-friendly web application for merging PDF files with a clean and intuitive interface. Built with Next.js, TypeScript, and Tailwind CSS.

📚 Quick Links

• 🌟 Features
  • Core Application Features
  • Modern Tech Features
• Live Demo
• 🛠️ Tech Stack
• 📁 Project Structure
• 🚀 Getting Started
  • Prerequisites
  • Installation
• Development
  • Type Checking
  • Linting
  • Building for Production
• Deployment
  • Deploy to Vercel
  • Manual Deployment
• Troubleshooting
• Visual Representation
• Contributing
• 👨‍💻 Author
• 📜 License
• 🌟 Star History
• 🙏 Acknowledgments

🌟 Features

Core Application Features

• 📎 Drag and Drop PDF Files: Easily add files by dragging and dropping them into the application.
• 📋 Reorder Files Before Merging: Arrange the order of your PDF files before merging them.
• 🔄 Simple and Intuitive Interface: User-friendly design for a seamless experience.
• 📱 Responsive Design: Optimized for all devices, including mobile and tablets.
• 🎯 File Size Display: View the size of each PDF file before merging.
• 🗑️ Easy File Removal: Quickly remove unwanted files from the list.
• ⚡ Fast and Efficient: Merge PDF files quickly with high performance.
• 📱 Modern Frontend: Next.js with Tailwind CSS for a sleek and modern look.
• 🛠️ TypeScript Support: Strongly typed codebase for improved maintainability.
• 📦 Component Library: Utilizes shadcn/ui components for a consistent design.
• 🚀 Deploy with Vercel: Easily deploy to Vercel with a single click.

Modern Tech Features

• ⚡ React 19 RC Integration

  • Document Metadata API
  • Asset Loading API
  • Progressive Loading
  • Optimization Compiler

• 🚀 Next.js 15 App Router

  • Server Components
  • Partial Prerendering
  • Parallel Routes
  • Edge Runtime

• 🔄 Full-Stack Type Safety

  • End-to-end typesafe APIs with tRPC
  • Runtime validation
  • Strict TypeScript
  • Comprehensive error handling

• ⚡ Performance First

  • Edge deployment
  • Streaming SSR
  • Smart bundling
  • Optimal caching

Live Demo

Visit Simple PDF Merger

🛠️ Tech Stack

• Framework: Next.js
• Language: TypeScript
• Styling: Tailwind CSS
• Components: shadcn/ui

📁 Project Structure

simple-pdf-merger/
├── .eslintrc.json
├── .gitignore
├── .husky/
│   ├── _/...
│   ├── commit-msg
├── .vscode/
│   ├── settings.json
├── app/
│   ├── fonts/
│   ├── globals.css            # Global styles
│   ├── layout.tsx             # Root layout with metadata
│   └── page.tsx               # Home page
├── commitlint.config.js
├── components/
│   └── ui/                    # shadcn/ui components
│       ├── button.tsx
│       └── card.tsx
│       └── PDFMerger.tsx      # Main PDF merger component
├── components.json
├── lib/
│   └── utils.ts               # Utility functions
├── next-env.d.ts
├── next.config.ts
├── package.json
├── pnpm-lock.yaml
├── postcss.config.mjs
├── public/
│   └── screenshot.png         # App screenshot
├── README.md
├── tailwind.config.ts
├── tsconfig.json
├── types/
│   ├── api.ts                 # API type definitions
│   ├── components.ts          # Component type definitions
│   ├── events.ts              # Event type definitions
│   ├── index.ts               # Main type exports
│   ├── pdf.ts                 # PDF type definitions
│   └── utils.ts               # Utility type definitions

🚀 Getting Started

Prerequisites

• Node.js 18.17 or later
• pnpm (recommended), npm, or yarn

Installation

1. Clone the repository:

   git clone https://github.com/BjornMelin/simple-pdf-merger.git
   cd simple-pdf-merger

2. Install pnpm if you don't have it:

   npm install -g pnpm

3. Install dependencies:

   pnpm install

4. Set up shadcn/ui components:

   pnpm dlx shadcn@latest init

   Choose the following options when prompted:

   • TypeScript: Yes
   • Style: Default
   • Base color: Slate
   • Global CSS: globals.css
   • CSS variables: Yes
   • tailwind.config.js location: tailwind.config.js
   • Components import alias: @/components
   • Utilities import alias: @/lib/utils

5. Install required shadcn/ui components:

   pnpm dlx shadcn@latest add card button

6. Run the development server:

   pnpm run dev

7. Open http://localhost:3000 in your browser.

Development

Type Checking

npm run type-check

Linting

npm run lint

Building for Production

npm run build

Deployment

Deploy to Vercel

1. Push your code to GitHub
2. Go to Vercel
3. Import your repository
4. Deploy

Manual Deployment

Build the application:

npm run build

The build output will be in the .next directory.

Troubleshooting

If you encounter the error 'pnpm' is not recognized as an internal or external command, operable program or batch file, follow these steps:

1. Ensure Node.js and npm are installed:

   • Download and install Node.js from nodejs.org.

   • Verify the installation:

     node -v
     npm -v

2. Install pnpm globally:

   • Run the following command to install pnpm:

     npm install -g pnpm

3. Verify pnpm installation:

   • Check the pnpm version:

     pnpm -v

4. Run the command again:

   • Use pnpm dlx to ensure the latest version is used:

     pnpm dlx shadcn@latest init

Visual Representation

graph TD;
    A[Install Node.js and npm] --> B[Install pnpm globally];
    B --> C[Clone the repository];
    C --> D[Install dependencies];
    D --> E[Initialize shadcn/ui];
    E --> F[Install required components];
    F --> G[Run development server];

Loading

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

👨‍💻 Author

Bjorn Melin

AWS-certified Solutions Architect and Developer with expertise in cloud architecture and modern development practices. Connect with me on:

• GitHub
• LinkedIn

Project Link: https://github.com/BjornMelin/simple-pdf-merger

📜 License

This project is licensed under the MIT License - see the LICENSE file for details.

🌟 Star History

🙏 Acknowledgments

• Next.js
• Tailwind CSS
• shadcn/ui
• Lucide Icons

Built with React 19 RC + Next.js 15 by Bjorn Melin