This project is an easy-to-use fullstack Online Invoicing application for creating and Sending invoices to customers, suiteable for Startups, Business Owners and Freelancers.
-Add Customers or clients.
- Create a new invoice
- Compose and quote invoice. -Authentication using jsonwebtoken
- Send invoice to customer via Email
- Download invoice as PDF. -Record Payment -Using Signup and Login
- You firstly add a customer you would want to send an invoice to. Create an invoice to send to the customer. Add the billing information, item description, amount, quantity and discount if any.
You can also add more items, edit or delete item from your invoice. By clicking on the Send Invoice button, you can send invoice via email to the customer. You can also download the invoice as PDF.
Live view of the application Demo can be found here- Smart Invoice Landing Page
Username: admin@gmail.com,
Landing page display.
Dashboard View
Sample Invoice Display:
Create An Invoice:
The project is built with;
- React JS -Library for building user interfaces
- Axios - Promise based HTTP client for the browser and node.js
- Redux - A Predictable State Container for JS Apps
- React-router - Enables the to implementation of dynamic routing in a web app.
- Material UI - A library that allows the import and use of different components to create a user interface in React applications.
- Apex Charts - An open-source modern charting library that helps to create beautiful and interactive visualizations for web pages.
-
Express JS - flexible Node.js web application framework that provides a robust set of features for web and mobile applications.
-
Bcrypt JS - This module enables storing of passwords as hashed passwords instead of plaintext.
-
HTML-PDF - HTML to PDF converter that uses phantomjs
-
Mongoose - Provides a straight-forward, schema-based solution to model application data
-
Nodemailer - A module for Node.js applications to allow easy as cake email sending.
-
Node.js- Cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser.
- Node.js- Source-available cross-platform document-oriented database program.
Ensure you have NodeJS installed by entering node -v on your terminal If you don't have NodeJS installed, go to the NodeJS Website, and follow the download instructions
The following tools are required to run this application:
- A text editor like Visual Studio Code
- Command Line
You can clone the repository directly using this command: git clone https://github.com/jamesoyanna/smart-invoice.git OR clicking on the code button ontop to clone the application.
Installation steps:
Node.js and Yarn or Npm Your computer must have installed nodejs, and yarn to run this application You can download Node.js from https://nodejs.org and yarn from https://yarnpkg.com/lang/en/docs/install/ . NPM comes bundled with Node.js
After clonning the application, to run the client application locally, you will have to install all the dependencies and packages. Open your terminal and navigate into the client folder using the command: cd client
Create a .env file in the root of your client folder and add this: REACT_APP_API = http://localhost:4000
Run yarn or npm install from the root of the client folder.
Run yarn start or npm start from the root of the client folder to start the development server.
Go to http://localhost:3000 on your browser. Your app should be running.
The app will automatically reload if you make changes to any of the source files.
Open the project folder you cloned. Create a .env file in the root folder Fill in the following credentials: DB_URL = PORT = SECRET = SMTP_HOST = SMTP_PORT = SMTP_USER = SMTP_PASS =
Run npm install from your terminal. Then run npm start. Your server should start running on port 4000.