A clean, professional web application frontend to create, manage, and export invoices for any business or freelancer.
Built with ReactJS, Tailwind CSS, and Context API, this frontend connects seamlessly with the backend API for persistent data storage.

• 📝 Invoice Management

  • Create, edit, and view invoices
  • Track status (Draft, Paid, Unpaid)
  • Auto-calculate subtotal, taxes, extra fees, and grand total
  • Custom invoice numbers and due dates

• 🏢 Company Profile

  • Add business details (name, address, email, phone)
  • Upload and display company logo and banner

• 👥 Client Management

  • Add, edit, and delete clients
  • Autofill client details in invoices
  • Reuse saved clients

• 📦 Product Management

  • Add, edit, and delete products
  • Save reusable products for invoices
  • Autofill price and description

• 📤 Export Invoices

  • Download professional PDF invoices using jsPDF & html2canvas

• 🎨 UI/UX

  • Modern, responsive, mobile-first design
  • Dashboard with search and filtering
  • Toast notifications for instant feedback
  • Splash screen for professional app feel

• ⚛ ReactJS (Vite)
• 🎨 Tailwind CSS (styling)
• 🌐 React Router (navigation)
• 📦 React Context API (state management)
• 🔔 react-toastify (notifications)
• 🧑‍💻 Lucide-react (icons)
• 🖨 jsPDF + html2canvas (PDF export)
• 🔒 Axios (API calls to backend)

frontend/ ┣ 📂 src ┃ ┣ 📂 assets/ # Images, logos, icons ┃ ┣ 📂 components/ # Reusable UI components ┃ ┃ ┣ business/ ┃ ┃ ┣ clients/ ┃ ┃ ┣ invoices/ ┃ ┃ ┣ products/ ┃ ┃ ┣ layout/ ┃ ┣ 📂 context/ # React Context (Company, Clients, Invoices, Products) ┃ ┣ 📂 pages/ # Page-level views (Dashboard, Invoices, Clients, Products) ┃ ┣ 📂 services/ # API helper functions (axios) ┃ ┣ 📂 utils/ # Utility functions ┃ ┣ App.jsx ┃ ┣ main.jsx ┃ ┣ index.css ┣ package.json ┗ README.md

• Node.js (v18+ recommended)
• Backend server running (see backend README)

# Navigate into frontend folder
cd frontend

# Install dependencies
npm install

# Start development server
npm run dev

App will be available at: http://localhost:5173

npm run build

• Configure your backend API base URL in .env:

VITE_API_URL=http://localhost:5000/api

• The frontend communicates with backend endpoints for invoices, clients, products, and company profiles.

• 🎯 Practice full-stack development with React + Express + MongoDB

• 🧩 Showcases reusable, modular frontend components

• 💼 Real-world project for resume/portfolio

• 📄 Implements invoice workflows used by businesses & freelancers

• Using React Context API for complex state management

• Connecting frontend with Express/MongoDB backend

• Clean UI/UX design with Tailwind CSS

• Real-world invoice PDF generation

• Structuring scalable full-stack projects

• No authentication implemented yet

• All invoices, clients, and products are shared if multiple users connect to the same backend

• Future improvement: integrate login/signup and secure per-user data with JWT