The latest articles on Forem by Pasan Ranaweera (@pasan02). https://forem.com/pasan02 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%2F3068385%2F55801d44-f9fe-4223-97cb-b73e183999f5.png https://forem.com/pasan02 en Pasan Ranaweera Mon, 05 May 2025 01:41:21 +0000 https://forem.com/pasan02/i-built-a-simple-invoice-generator-with-astro-feedback-welcome-1loo https://forem.com/pasan02/i-built-a-simple-invoice-generator-with-astro-feedback-welcome-1loo <p>Hey DEV community! 👋</p> <p>I've recently been working on a small project — a <strong>simple invoice generator</strong> — and decided to build it using <strong>Astro</strong>. I thought it would be fun to share my journey and gather some feedback from you all!</p> <h2> 🛠 Tech Stack </h2> <ul> <li> <strong>Astro</strong>: Frontend framework for lightning-fast static sites</li> <li> <strong>Vercel</strong>: Hosting</li> <li> <strong>FormSubmit</strong>: For handling the contact form without a backend</li> </ul> <h2> 🎯 Project Goal </h2> <p>I wanted to build a lightweight tool where:</p> <ul> <li>Users can quickly generate invoices</li> <li>No login/signup is required</li> <li>Users can <strong>download</strong> or <strong>print</strong> the invoices</li> <li>Optionally upload their <strong>company logo</strong> </li> <li>Simple and mobile-friendly UI</li> </ul> <p>No user data is stored — everything happens on the client side. 🔐</p> <h2> ✨ Features </h2> <ul> <li>Add client and company information</li> <li>Add multiple invoice items</li> <li>Auto-calculates totals and taxes</li> <li>Upload a company logo (optional)</li> <li>Download or print the final invoice</li> <li>Contact form integrated using FormSubmit</li> </ul> <h2> 📸 Sneak Peek </h2> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flzj1u4whcpr6ig124iv0.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flzj1u4whcpr6ig124iv0.png" alt="Invoice Generator Screenshot" width="800" height="359"></a></p> <h2> 📬 Contact Form Setup </h2> <p>I kept the project backendless by integrating <a href="https://formsubmit.co/" rel="noopener noreferrer">FormSubmit</a>, allowing form submissions to go directly to my inbox without needing to set up a custom server or API.</p> <h2> 🌍 Live Demo </h2> <p>🖥 <a href="https://invoice-generator-two-steel.vercel.app/" rel="noopener noreferrer">Visit the Invoice Generator</a> </p> <h2> 🧠 Lessons Learned </h2> <ul> <li>Astro is <strong>amazing</strong> for building fast static websites</li> <li>Serverless services like FormSubmit make it easy to deliver functionality without backend code</li> <li>Designing for simplicity can be more challenging than adding complex features</li> <li>Client-side apps can be powerful without needing databases or user auth</li> </ul> <h2> 🙌 I'd Love Your Feedback! </h2> <ul> <li>What do you think about the UI/UX?</li> <li>Any features you'd suggest adding?</li> <li>If you have experience with Astro, what are your best practices?</li> </ul> <p>Thanks for reading! 🚀<br><br> Looking forward to hearing your thoughts and ideas! 👇</p> astro webdev javascript beginners