The MERN Invoice Management System is a comprehensive application designed to manage invoices, customers, and payments. It leverages the MERN stack (MongoDB, Express, React, Node.js) and includes features such as invoice management(creating, editing, viewing, and managing invoices), user authentication, user management, invoice PDF generation, email notifications, and role-based access control. The project is modular, ensuring that both the frontend and backend are well-organized and maintainable.

• Features
• File Structure
• Demo View
• Installation
• Usage
• API Endpoints
• Contact
• License

• Invoice Management: Create, edit, view, and delete invoices.
• Customer Management: Manage customer information.
• Payment Handling: Record and manage payments for invoices.
• PDF Generation: Generate PDF versions of invoices for emailing or printing.
• User Interface: User-friendly interface built with React and Material-UI.
• Responsive Design: Works on both desktop and mobile devices.

• File Structure is generated by AI

To install and run this project locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/yourusername/mern-invoice-project.git
   cd mern-invoice-project

2. Install dependencies for both server and client:

   # Install server dependencies
   cd backend
   npm install
   
   # Install client dependencies
   cd ../client
   npm install

3. Set up environment variables: Create a .env file in the backend directory with the following contents:

   NODE_ENV=development
   PORT=5000
   MONGO_URI=your_mongodb_connection_string
   JWT_SECRET=your_jwt_secret
   MAILGUN_API_KEY=your_mailgun_api_key
   MAILGUN_DOMAIN=your_mailgun_domain

4. Run the application:

   # Run server
   cd backend
   npm run dev
   
   # Run client
   cd ../client
   npm start

Once the application is running, you can access it at http:https://localhost:3000.

• Also, you need to set up with the .env file

• Documents Page (DocumentsPage.jsx): Displays a list of invoices with options to view, delete, and create new invoices.
• Single Document Page (SingleDocumentPage.jsx): Shows detailed information about a specific invoice, including payment records and customer details.
• Document Create/Edit Form (DocCreateEditForm.jsx): Form for creating or editing an invoice, including adding items, selecting customers, and specifying terms.
• Payment Form (PaymentForm.jsx): Form for recording payments, including selecting payment method and entering payment details.
• Payment Date Component (PaymentDate.jsx): Component for selecting payment date using a date picker.

The backend provides several API endpoints for managing invoices and customers. Here are some key endpoints:

• Customers:

  • GET /api/customers: Get a list of all customers.
  • POST /api/customers: Create a new customer.
  • GET /api/customers/:id: Get a specific customer by ID.
  • PUT /api/customers/:id: Update a specific customer by ID.
  • DELETE /api/customers/:id: Delete a specific customer by ID.

• Invoices:

  • GET /api/invoices: Get a list of all invoices.
  • POST /api/invoices: Create a new invoice.
  • GET /api/invoices/:id: Get a specific invoice by ID.
  • PUT /api/invoices/:id: Update a specific invoice by ID.
  • DELETE /api/invoices/:id: Delete a specific invoice by ID.

• Payments:

  • POST /api/payments: Record a new payment.

Made with ❤️ by Edison www.Edisonwhale.com

Have any questions? Email me! [email protected]

This project is licensed under the MIT License. See the LICENSE file for details.