InGen

• 

  This is the dashboard of the InGen -simple ,clean.

• 

  This page is for the invoice input like price ,rate .

• 

  This is the summary portion thats shows the invoice element.

• 

  This portion provide the download the invoice in pdf form .

• 

  This is the invoice png that i download .

• 

  This portion has a feature for discount .

• 

  This is the discounted invoice.

Inspiration

The inspiration for InGen came from the struggle many freelancers and small business owners face: complicated, bloated accounting software. We wanted to build a "zero-friction" tool that allows anyone to generate a professional, branded PDF invoice in under 60 seconds without needing to create an account or navigate complex menus

What it does

InGen is a streamlined web application that allows users to:

1.Rapidly enter line items with automatic subtotal calculations.

2.Apply dynamic promo codes (like SAVE10, SAVE20) to instantly see discount impacts on the final total.

3.Preview a real-time summary of the invoice metadata, including invoice numbers and date stamps.

4.Generate and download professional PDF documents that are print-ready and formatted for business standards.

How we built it

The project was built using a modern frontend stack:

-React.js for the core architecture and state management.

-Tailwind CSS for the high-end, custom UI/UX design, featuring large rounded corners and a "Slate & Emerald" professional color palette.

-Lucide-React for clean, consistent iconography throughout the dashboard.

-jsPDF & jspdf-autotable for the heavy lifting of generating structured PDF tables directly in the browser.

Challenges we ran into

One of the primary challenges was handling responsive layouts for complex data. Ensuring that the invoice summary didn't overlap on smaller screens required deep-diving into CSS Grid and Flexbox logic. Another hurdle was the PDF generation logic—specifically, ensuring that the tables correctly handled long item descriptions without breaking the document structure

Accomplishments that we're proud of

-Clean UI/UX: We successfully created a dashboard that feels premium and "App-like" rather than just a simple form.

-Promo Code System: Implementing a functional discount logic that updates the state across multiple components seamlessly.

-Auto-Formatting: Building a system that automatically handles currency formatting and date generation to save the user time.

What we learned

During this project, we sharpened our skills in React state management, specifically how to pass complex data and callback functions (like the PDF download trigger) between parent and child components. We also learned the intricacies of client-side document generation and how to optimize web layouts for professional printing.

What's next for InGen

The future of InGen involves moving from a single-session tool to a more robust platform:

-Cloud Storage: Allowing users to save and manage a history of sent invoices.

-Tax Integration: Automatic tax calculation based on regional settings.

-Payment Links: Integrating Stripe or PayPal so users can get paid directly from the invoice PDF.

-Multi-currency Support: Allowing users to switch between USD, EUR, and other global currencies.

Built With

• javascript
• react