Invoice Generation For e-commerce Web.

Table of Contents

• Project Overview
• Features
• Technologies Used
• API Documentation
• Installation
• Usage
• Folder Structure
• Demo
• Contributing
• License
• Contact

Project Overview

This project involves generating a detailed invoice based on various input parameters, including seller details, order details, item details, and tax calculations. The invoice will also include placeholders for the company logo and the seller's signature image.

Features

• Dynamic Input Handling: Easily input and manage seller, billing, and shipping details.
• Tax Computation: Automatically compute tax types and amounts based on the place of supply and delivery.
• Net Amount Calculation: Derive net amounts for each item considering unit price, quantity, and discounts.
• Detailed Item Listing: List multiple items with comprehensive details including description, unit price, quantity, discount, and net amount.
• Total Amount Calculation: Compute the total amount including tax for all items.
• Amount in Words: Convert the total amount to words for easy readability.
• Signature and Authorization: Insert seller's signature image and authorization note.
• Company Logo: Placeholder for including the company logo in the invoice.
• pdf Download: User can download pdf after create invoice.
• Responsive Design: The application is mobile-friendly and has a clean design.

Technologies Used

• Frontend: React, Vite, JavaScript, Tailwind CSS, Flowbite, firebase, to-words, Framer Motion, and MUI
• Backend: Node.js, Express, jsonwebtoken,jsonwebtoken, and swagger-ui(API-Docometation), Lazy loading
• Database: MongoDB
• State Management: Redux
• Authentication: Google OAuth
• Animations: Framer Motion
• Hosting: Render

API-Documentation

Click on link use api- (API Documentation)

View PDF

You can view the PDF here.

Embedded PDF

Installation

1. Clone the repository:

   git clone https://github.com/Chandan8018/InvoiceGeneration.git
   

2. Backend Setup:

   npm install

3. Frontend Setup:

   cd frontend
   npm install

4. Environment Variables:

   • Create a .env file in the root of the api directory and add your MongoDB URI, JWT secret, and other necessary environment variables.
   • Create a .env file in the root of the frontend directory and add your Firebase and other necessary environment variables.

Usage

1. Start the backend server:

   npm run dev

2. Start the frontend server:

   cd frontend
   npm run dev

3. Open your browser and navigate to http://localhost:7970 to view the application.

Home Page

The Home Page is designed to welcome users with an attractive gradient background and interactive elements. It includes links to services and contact pages.

Sign In / Sign Up

Users can sign in or register for a new account. These forms handle user input and manage state using Redux.

Dashboard

Accessible only to authenticated users, the Dashboard displays user-specific information and actions.

Folder Structure

.
├── api
|   ├── controllers
|   |   ├── auth.controller.js
|   |   ├── customer.controller.js
|   |   ├── invoice.controller.js
|   |   ├── supplier.controller.js
|   |   └── user.controller.js 
|   ├── routes
|   |   ├── auth.route.js
|   |   ├── customer.route.js
|   |   ├── supplier.route.js
|   |   ├── invoice.route.js
|   |   └── user.route.js
|   ├── models
|   |   ├── customer.model.js
|   |   ├── supplier.model.js
|   |   ├── invoice.model.js
|   |   └── user.model.js
|   ├── utils
|   |   ├── error.js
|   |   └── verifyUser.js
|   └── index.js
|   
├── frontend
|   ├── public
|   ├── src
│   |   ├── components
│   │   |   ├── footer
│   │   │   |   └── FooterComp.jsx
│   │   |   ├── header
│   │   │   |   └── Header.jsx
│   │   |   ├── privateroute
│   │   │   |   └── PrivateRoute.jsx
│   │   |   ├── invoices
│   │   │   |   ├── FullFeaturedCrudGrid.jsx
│   │   │   |   └── Invoice.jsx
│   │   |   ├── googleConfig
│   │   │   |   └── OAuth.jsx
│   │   |   ├── dash
│   │   │   |   ├── DashboardComp.jsx
|   |   |   |   ├── Profile.jsx  
|   |   |   |   ├── SideBarComp.jsx  
|   |   |   |   └── SidebarIcons.jsx
│   │   |   ├── theme
│   │   │   |   └── ThemeProvider.jsx
│   │   |   ├── ui
│   │   │   |   └── Various UI Components
│   |   ├── pages
│   │   |   ├── About.jsx
│   │   |   ├── Contact.jsx
│   │   |   ├── Dashboard.jsx
│   │   |   ├── Home.jsx
│   │   |   ├── Service.jsx
│   │   |   ├── SignIn.jsx
│   │   |   ├── QuizPage.jsx
│   │   |   ├── UpdateCustomer.jsx
│   │   |   ├── UpdateSupplier.jsx
│   │   |   ├── ViewCustomers.jsx
│   │   |   ├── ViewSuppliers.jsx
│   │   |   ├── CreateCustomer.jsx
│   │   |   ├── CreateSupplier.jsx
│   │   |   └── SignUp.jsx
│   |   ├── redux
│   │   |   ├── theme
│   │   |   │   └── themeSlice.js
│   │   |   └── user
│   │   |       └── userSlice.js
│   |   ├── .env
│   |   ├── App.jsx
│   |   ├── main.jsx
│   |   ├── firebase.js
│   |   └── index.css
|   ├── .eslintrc.js
|   ├── .gitignore
|   ├── index.html
|   ├── package-lock.json
|   ├── package.json
|   ├── postcss.config.js
|   ├── tailwind.config.js
|   └── vite.config.js
├── .gitignore
├── package-lock.json
├── package.json
└── README.md

Demo

• Invoice Generation Page

---

• Dashboard Page

---

• Home Page

---

• Sign-Up Page

---

• Sign-In Page

---

• User Profile Update Page

---

• Side Bar

---

• Preview All Customers Page

---

• Add Customer Page

---

• Update Customer Page

---

• Preview All Suppliers Page

---

• Add Supplier Page

---

• Update Supplier Page

---

• Initial Invoice Page

---

License

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

Contact

For any questions or inquiries, please contact:

• Author: Chandan Kumar Sahoo
• Email: chandankumarsahoo19@gmail.com
• GitHub: https://github.com/Chandan8018/

Feel free to reach out for any questions, suggestions, or contributions. Happy coding!