Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chandan8018/invoicegeneration
Develop a programmatic way of generating an invoice for orders placed on an e-commerce platform.
https://github.com/chandan8018/invoicegeneration
aceternity-ui firebase-auth firebase-storage flowbite framer-motion html2canvas material-ui mern-stack react-pdf-renderer render swagger-ui tailwindcss
Last synced: 19 days ago
JSON representation
Develop a programmatic way of generating an invoice for orders placed on an e-commerce platform.
- Host: GitHub
- URL: https://github.com/chandan8018/invoicegeneration
- Owner: Chandan8018
- License: mit
- Created: 2024-06-26T05:20:09.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-07-12T03:02:44.000Z (7 months ago)
- Last Synced: 2024-11-25T16:25:20.647Z (3 months ago)
- Topics: aceternity-ui, firebase-auth, firebase-storage, flowbite, framer-motion, html2canvas, material-ui, mern-stack, react-pdf-renderer, render, swagger-ui, tailwindcss
- Language: JavaScript
- Homepage: https://abc-invoices.onrender.com/
- Size: 14.8 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Invoice Generation For e-commerce Web.
## Table of Contents
- [Project Overview](#project-overview)
- [Features](#features)
- [Technologies Used](#technologies-used)
- [API Documentation](#api-documentation)
- [Installation](#installation)
- [Usage](#usage)
- [Folder Structure](#folder-structure)
- [Demo](#demo)
- [Contributing](#contributing)
- [License](#license)
- [Contact](#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](https://abc-invoices.onrender.com/api-docs/))
## View PDF
You can [view the PDF here](./frontend/public/invoice.pdf).
## Embedded PDF
## Installation
1. **Clone the repository**:
```bash
git clone https://github.com/Chandan8018/InvoiceGeneration.git
```
2. **Backend Setup**:
```bash
npm install
```
3. **Frontend Setup**:
```bash
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**:
```bash
npm run dev
```
2. **Start the frontend server**:
```bash
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
```sh
.
├── 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: [email protected]
- GitHub: https://github.com/Chandan8018/
Feel free to reach out for any questions, suggestions, or contributions. Happy coding!