Quick Invoice

Vue.jsPiniaNuxt.jsTypeScriptVuexLightHouseWaveJestCypressTanStack QueryAxiosTailwindStorybookVercelFigmahtml2pdf.js

Overview

QuickInvoice is an invoice generator that allows users to create professional invoices by filling out a simple form and adding multiple items. The app emphasizes accessibility, performance, and simplicity, achieving perfect or near-perfect scores in Lighthouse and Wave accessibility audits.

Built with Vue 3 and Nuxt 3, QuickInvoice leverages modern web technologies to deliver a seamless user experience. The project is structured into three phases, with the first phase (MVP) already completed and subsequent phases planned for future enhancements.

Current Status

Phase 1 (MVP) completed

  • Implemented the core functionality of generating invoices.
  • Learned form handling and validation in Vue/Nuxt.
  • Implemented PDF generation directly on the frontend.
  • Shifted perspective from React-centric practices to Vue/Nuxt approaches.
  • Built a clean and reusable component-based UI.

Key Features

  • Dynamic form with validation
  • Generate invoices with customizable fields
  • Export invoices as PDF with html2pdf.js.
  • Responsive design for both desktop and mobile
  • Simple and clean UI, built with reusable components
  • Planned features: authentication and invoice history
  • Future enhancements: A/B testing, multi-language support, CSV export

Planned Enhancements

Phase 2 (Enhancements - upcoming)

This phase focuses on refining the user experience, improving accessibility and performance, and laying the groundwork for future scalability.

  • UI refinements and improved component design
  • Accessibility and performance improvements
  • Integration with Strapi for data handling
  • Storybook for UI documentation
  • Currency API integration
  • Automated testing with Jest and Cypress
  • SEO optimization and additional performance audits

Phase 3: Advanced Features

  • User authentication
  • Invoice history and management
  • Multi-language support
  • Dark mode toggle
  • CSV export
  • A/B testing with Statsig