Invoice App

This is a solution to the Invoice app challenge on Frontend Mentor.

Requirements

Users should be able to:

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• Create, read, update, and delete invoices
• Receive form validations when trying to create/edit an invoice
• Save draft invoices, and mark pending invoices as paid
• Filter invoices by status (draft/pending/paid)
• Toggle light and dark mode
• Bonus: Keep track of any changes, even after refreshing the browser (localStorage could be used for this if you're not building out a full-stack app)

Built with

Code Quality with

Project Highlights

• Invoice Management: Easily create, view, edit, and delete invoices, streamlining your billing process.
• Tech Stack: Built with Next.js for seamless front-end and back-end integration, Prisma as the ORM, and Tailwind CSS for responsive design.
• Database: Utilizes PostgreSQL, self-hosted on an Ubuntu server for robust and secure data management.
• Responsive Design: Fully responsive interface with support for both light and dark themes, enhancing user experience across devices.
• Form Handling: Leveraged react-hook-form and Zod for efficient form state management and validation, ensuring data integrity.
• Advanced Routing: Implemented parallel routes and intercepting routes in Next.js for enhanced user experience during invoice creation and editing.
• Error Handling: Comprehensive error handling with clear messages for user guidance during data entry and operations.
• Pagination and Filtering: View invoices with pagination and multi-select filtering options to manage large datasets efficiently.
• Real-Time Updates: Instant feedback on invoice creation, updates, and deletions, keeping the dashboard up-to-date.

Implementation time

This challenge was completed over a span of 25 hours.