Online Invoicing application for creating and Sending invoices to customers via email, suitable for Startups, Business Owners and Freelancers.
This project is a is a user-friendly full-stack Online Invoicing application designed to streamline the process of creating and sending invoices to customers via email.
This application caters to the needs of startups, business owners, and freelancers who require a simple yet efficient invoicing system.
The project is built using React and Node.js, making use of the Novu API for seamless delivery of invoices as email messages.
The application provides a user-friendly interface for creating professional invoices.
Users can input relevant details such as the customer's name, billing information, item descriptions, quantities, prices, and notes.
The invoicing application integrates the Novu API, enabling users to send invoices in PDF format directly to customers via email.
With a unified delivery API, the application ensures reliable and efficient delivery of invoices to the intended recipients.
To cater to changing requirements or corrections, the application incorporates an edit invoice functionality.
Users can seamlessly update invoice details, such as customer information, item descriptions, quantities, and prices.
The application automatically recalculates the total quantity and amount based on the edited values.
Live view of the application Demo can be VIEWED here- Invoice App
Front page display.
Invoice Creation View
Created Invoice:
Invoice Sample:
The project is built with;
- React JS -Library for building user interfaces
- Axios - Promise based HTTP client for the browser and node.js
- React-router - Enables the to implementation of dynamic routing in a web app.
- Tailwind CSS - A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.
-
novu/node - Simple components and APIs for managing all communication channels in one place: Email, SMS, Direct, and Push
-
Express JS - flexible Node.js web application framework that provides a robust set of features for web and mobile applications.
-
HTML-PDF - HTML to PDF converter that uses phantomjs
-
Mongoose - Provides a straight-forward, schema-based solution to model application data
-
Node.js- Cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser.
- MongoDB- 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, you can 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 git@github.com:jamesoyanna/novu-invoice.git OR clicking on the code button ontop to clone the application.
Installation steps:
Node.js and Yarn or Npm You should have Nodejs installed, and NPM to run this application .You can download Node.js from https://nodejs.org . NPM comes with Node.js
Upon 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
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 WITH YOURS:
NODE_VERSION = 16.14.2
NOVU_API_KEY= YOUR NOVU_API_KEY
MONGODB_URI= YOUR MONGODB_URI
Run npm install from your terminal. Then run npm start. Your server should start running on port 5000.
I am Frontend Engineer. I have a proven track record of successfully developing and managing client-centric mobile & Web applications.