The latest articles on DEV Community by Mutashim Mohsin (@mutashim99). https://dev.to/mutashim99 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3665289%2F0b085e27-87f1-4f84-93d8-de11d37d243f.png https://dev.to/mutashim99 en Mutashim Mohsin Tue, 16 Dec 2025 16:23:16 +0000 https://dev.to/mutashim99/i-built-a-free-invoice-generator-with-nextjs-because-i-hate-subscriptions-14o4 https://dev.to/mutashim99/i-built-a-free-invoice-generator-with-nextjs-because-i-hate-subscriptions-14o4 <h2> <strong>The Problem with "Free" Tools</strong> </h2> <p>A few months ago, I needed to send a quick invoice for a freelance gig. I Googled "free invoice generator," clicked the top result, spent 10 minutes filling out the details, and hit "Download."</p> <p><strong>Pop-up:</strong> "Create an account to download your PDF." Next Pop-up: "Start your 7-day free trial."</p> <p>I was frustrated. I just wanted a simple PDF, not a monthly subscription to an accounting ecosystem.</p> <p><strong>The Solution: SmoothLedger</strong><br> I decided to solve this problem by building <a href="https://smoothledger.com" rel="noopener noreferrer">SmoothLedger.com</a>.</p> <p>My goal was simple:</p> <ul> <li> <strong>No Signups:</strong> You land on the page, you type, you print.</li> <li> <strong>No Watermarks:</strong> Professional output immediately.</li> <li> <strong>Fast:</strong> Built on a modern tech stack.</li> </ul> <h2> <strong>The Tech Stack</strong> </h2> <p>As a full-stack developer (currently in my 5th semester!), I wanted to use tools that were fast and handled state management well.</p> <p><strong>Frontend:</strong> Next.js (App Router). I love Next.js for its SEO benefits and how easy it makes routing.</p> <p><strong>Styling:</strong> Tailwind CSS. It allowed me to build the invoice preview to look exactly like A4 paper on the screen.</p> <p><strong>Deployment:</strong> Vercel (for the frontend speed) and Azure (for backend services).</p> <p><strong>State Management:</strong> React Hooks. Since there is no database login required for the basic features, managing the invoice state locally makes the app incredibly snappy.</p> <h2> <strong>The Challenge: Printing to PDF</strong> </h2> <p>One of the hardest parts of this build was getting the web view to convert perfectly to a PDF. Browsers render HTML differently than PDF engines. I had to do a lot of tweaking with print-specific CSS (<a class="mentioned-user" href="https://dev.to/media">@media</a> print) to ensure that when a user hits "Save," the margins, fonts, and layout remain perfect.</p> <h2> <strong>Future Plans</strong> </h2> <p>I am currently working on adding more tools to the suite, like a richer salary slip generator and potentially some AI-driven features to help categorize expenses.</p> <h2> <strong>Try it out</strong> </h2> <p>If you are a freelancer or dev who hates friction, give it a try. I’d love to hear your feedback on the UX or the code implementation!</p> <p>Link: <a href="https://smoothledger.com" rel="noopener noreferrer">SmoothLedger.com</a></p> <p>(I'm also open to connection requests here on Dev.to!)</p> nextjs webdev saas tooling