Building Quick Quotations with Next.js: A Modern Quotation Management App That Works Entirely in the Browser

Muhammad Tahir Baloch — Mon, 06 Jul 2026 17:44:19 +0000

As developers, we often build projects to learn a new framework or library.

This time, I wanted to solve a real-world business problem while exploring modern frontend architecture.

The result is Quick Quotations, a quotation management application built with Next.js, TypeScript, and IndexedDB that allows businesses and freelancers to create professional quotations without relying on a backend.

quick-quotations-puce.vercel.app

The entire application runs inside the browser.

Why I Built It

Many small businesses still create quotations using Word documents, spreadsheets, or PDFs that need to be edited manually.

That approach has several problems:

Repetitive work
Inconsistent formatting
Difficult editing
Manual calculations
No centralized quotation history

I wanted a solution that was:

1. Fast
2. Modern
3. Offline-friendly
4. Easy to use
5. Privacy-focused

Instead of storing user data on a server, I decided to store everything locally using IndexedDB.

This means users keep full control over their own data while enjoying an application-like experience.

Tech Stack

The application is built using:

Next.js (App Router)
React
TypeScript
Tailwind CSS
React PDF
IndexedDB

Each technology was chosen for a specific reason.

Next.js App Router

The App Router makes organizing large applications much easier through layouts, nested routing, and server/client component separation.

TypeScript

Type safety becomes increasingly valuable as applications grow.
It helped catch bugs early and made refactoring much safer.

React PDF

Generating professional PDFs inside React was one of the most interesting parts of this project.

The exported PDF closely matches the live preview shown inside the application.

IndexedDB

Instead of building an authentication system and backend API, I wanted the application to remain completely client-side.

*IndexedDB provides:
*

Large storage capacity
Structured data
Fast queries
Offline support

Users can continue working without an internet connection.

*Tailwind CSS
*
Tailwind made it easy to build reusable UI components while maintaining a consistent design system.

Features

Create Quotations
Create professional quotations in minutes.
No complicated forms.
No unnecessary steps.
Edit Existing Quotations
Every quotation remains editable after creation.
Update customer information, products, taxes, discounts, or notes whenever needed.

Live PDF Preview

quick-quotations-puce.vercel.app

One feature I particularly enjoyed building was the live preview.
Users immediately see how their quotation will look before exporting it. There are no surprises after generating the PDF.
Professional PDF Export quotations as polished PDFs suitable for clients.

The layout is designed to look clean, consistent, and business-ready.

Company Profile Management

Store company information once and reuse it across every quotation.

This includes:

Company name
Address
Country
State
Contact information
Tax details
Automatic Calculations

The application automatically calculates:

Subtotal
Discounts
Taxes
Grand Total
This reduces manual errors.
Local Data Storage
Every quotation is stored inside IndexedDB.
No backend.
No database server.
No account required.
Responsive UI

The interface works smoothly across desktop and laptop screens while maintaining a clean, modern design.

Challenges I Faced

Every project teaches something new.

This one was no exception.

1. PDF Generation

Creating responsive web pages is one thing.

Generating identical PDF layouts is another.

React PDF follows different rendering rules compared to HTML and CSS, so several layouts had to be redesigned specifically for PDF generation.

2. Synchronizing Preview and PDF

Keeping the live preview visually identical to the exported PDF required careful component organization.

The goal was simple:

What users see should be exactly what they export.

3. Client-Side Architecture

Without a backend, data management becomes even more important.

Designing reusable services around IndexedDB helped keep the application organized and scalable.

Reusable Components

Instead of writing separate UI for every page, I focused on reusable components that could be shared throughout the application.

This reduced duplication and simplified future development.
What I Learned Building this project improved my understanding of:

Next.js App Router
TypeScript architecture
Client-side databases
PDF generation with React
IndexedDB data modeling
Component reusability
Form management
Business application workflows
Modern frontend architecture
Future Improvements

The current version focuses on local-first usage, but there are many features I'd like to explore in the future.

Some ideas include:

Customer management
Product catalog
Multi-currency support
Quotation templates
Dark mode
Import and export backups
Cloud synchronization (optional)
Analytics dashboard
Email quotation directly from the app
Multi-language support
Why Local-First?

One design decision I'm particularly happy with is choosing a local-first architecture.

Not every application needs a backend.

For many small business tools, storing data locally provides several advantages:

Better privacy
Faster performance
Lower hosting costs
Offline capability
Simpler deployment

Sometimes the simplest architecture is the best architecture.

Final Thoughts

Quick Quotation

s started as a learning project, but it evolved into something that solves a genuine business need.

It gave me practical experience with Next.js, IndexedDB, React PDF, and scalable frontend architecture while reinforcing the importance of building applications around real user problems.

There are still many features I'd like to add, but I'm proud of how far the project has come.

If you're building business tools with Next.js or experimenting with local-first applications, I'd love to hear your thoughts and learn how you approach similar challenges.

Happy coding! 🚀

Build your API, not your boilerplate.

Muhammad Tahir Baloch — Fri, 26 Jun 2026 13:36:51 +0000

🚀 After building backend projects repeatedly, I realized I was solving the same infrastructure problems every time.

Before writing a single business feature, I had to configure:

• TypeScript
• Express
• Prisma
• PostgreSQL
• JWT Authentication
• Email verification
• Password reset
• Two-Factor Authentication (2FA)
• CSRF Protection
• Role-based Authorization
• Rate Limiting
• Security Headers
• Input Validation
• Project Structure

It quickly became repetitive.

So I started building Backend Starter.

A production-ready Express.js starter that lets you focus on building products instead of setting up infrastructure.

What's included?

🔐 Authentication
• JWT Access & Refresh Tokens
• HTTP-only Cookies
• Email Verification
• Password Reset
• Change Email
• Change Password
• Two-Factor Authentication (2FA)

🛡️ Security
• CSRF Protection
• Helmet
• Express Rate Limit
• Zod Validation
• bcrypt Password Hashing
• Refresh Token Rotation

👥 User Management
• Registration
• Profile Management
• Device Sessions
• Login History
• Account Deletion

👨‍💼 Admin Features
• User Management
• Role Management
• Account Status Management
• Login History

⚡ Developer Experience
• TypeScript
• Prisma ORM
• PostgreSQL
• Biome
• Husky Git Hooks
• Environment Example Generator
• Postman Collection
• Clean Project Structure

This is only the beginning.

Next on the roadmap

• OAuth (Google & GitHub)
• Redis
• Docker Compose
• Swagger / OpenAPI
• Background Jobs
• File Upload Module

The project is completely open source, and I'd genuinely appreciate feedback from the community.

⭐ If you find it useful, consider giving it a star or contributing.

GitHub:
https://github.com/setahirbaloch/backend-starter

Linkedin:
https://linkedin.com/in/setahirbaloch

What feature do you think every production-ready backend starter should include?

DEV Community: Muhammad Tahir Baloch

Building Quick Quotations with Next.js: A Modern Quotation Management App That Works Entirely in the Browser

Build your API, not your boilerplate.

What's included?

Next on the roadmap