knightkoder / invoiced-base

A ⚛️ web application that allows users to create, manage, and track invoices.

Invoiced

A React web application that allows users to create, manage, and track invoices. Features include responsive design, form validations, draft/pending/paid invoice status filtering, light and dark mode, yearly report and localStorage integration for data persistence.

Table of contents

• Overview
  • Features
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Acknowledgments

Overview

Features

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

Screenshot

Links

• Repo
• Live

My process

Built with

• React
• CSS Modules + PostCSS (custom media queries)
• React Hook Forms
• Zustand lightweight state management 🐻
• Nivo for pie and line chart
• Radix UI Primitives for headless accessible components (Select, Dialog, Popover, Checkbox)

What I learned

rhf, nivo, zustand and radix-ui were new to me and I had so much fun playing around with them :3 Used CSS variables for light/dark mode and can't help but wonder how messy it would be maintaining so many variables for each mode in a big project.

Continued development

There are so many things to make this project even better:

• Import/Export Invoices to/from a file.
• A full blown dashboard with weekly/monthly/yearly dataviz. (I just did yearly overview for now) + option to download the report
• Make nivo charts accessible? Expore how to even do that T^T
• Making this a fullstack app ✨

Useful resources

• So you think you can build a Dropdown - Stumbled across this and went with radix-ui lol

Acknowledgments

This is a solution to the Invoice app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.