DEV Community

Pasan Ranaweera
Pasan Ranaweera

Posted on

2 1 1 1 1

πŸš€ I Built a Simple Invoice Generator with Astro! [Feedback Welcome]

Hey DEV community! πŸ‘‹

I've recently been working on a small project β€” a simple invoice generator β€” and decided to build it using Astro. I thought it would be fun to share my journey and gather some feedback from you all!


πŸ›  Tech Stack

  • Astro: Frontend framework for lightning-fast static sites
  • Vercel: Hosting
  • FormSubmit: For handling the contact form without a backend

🎯 Project Goal

I wanted to build a lightweight tool where:

  • Users can quickly generate invoices
  • No login/signup is required
  • Users can download or print the invoices
  • Optionally upload their company logo
  • Simple and mobile-friendly UI

No user data is stored β€” everything happens on the client side. πŸ”


✨ Features

  • Add client and company information
  • Add multiple invoice items
  • Auto-calculates totals and taxes
  • Upload a company logo (optional)
  • Download or print the final invoice
  • Contact form integrated using FormSubmit

πŸ“Έ Sneak Peek

Invoice Generator Screenshot


πŸ“¬ Contact Form Setup

I kept the project backendless by integrating FormSubmit, allowing form submissions to go directly to my inbox without needing to set up a custom server or API.


🌍 Live Demo

πŸ–₯ Visit the Invoice Generator


🧠 Lessons Learned

  • Astro is amazing for building fast static websites
  • Serverless services like FormSubmit make it easy to deliver functionality without backend code
  • Designing for simplicity can be more challenging than adding complex features
  • Client-side apps can be powerful without needing databases or user auth

πŸ™Œ I'd Love Your Feedback!

  • What do you think about the UI/UX?
  • Any features you'd suggest adding?
  • If you have experience with Astro, what are your best practices?

Thanks for reading! πŸš€

Looking forward to hearing your thoughts and ideas! πŸ‘‡

Dev Diairies image

User Feedback & The Pivot That Saved The Project

πŸ”₯ Check out Episode 3 of Dev Diairies, following a successful Hackathon project turned startup.

Watch full video πŸŽ₯

Top comments (2)

Collapse
 
kelvincode1234 profile image
Precious Kelvin Nwaogu β€’

Amazing, i love the smooth and neat UI

Collapse
 
pasan02 profile image
Pasan Ranaweera β€’

Thank you so much! I'm glad you liked the UI

Scale globally with MongoDB Atlas. Try free.

Scale globally with MongoDB Atlas. Try free.

MongoDB Atlas is the global, multi-cloud database for modern apps trusted by developers and enterprises to build, scale, and run cutting-edge applications, with automated scaling, built-in security, and 125+ cloud regions.

Learn More

πŸ‘‹ Kindness is contagious

Sign in to DEV to enjoy its full potentialβ€”unlock a customized interface with dark mode, personal reading preferences, and more.

Okay