Fullstack open source Invoicing application made with MongoDB, Express, React & Nodejs (MERN)

Overview

arcinvoice.com

MERN Stack Invoicing Application

Built with the MERN stack (MongoDB, Express, React and NodeJS). Invoice

Introduction

This is a side project I've been working on. A full stack invoicing application made using the MERN stack (MongoDB, Express, React & Nodejs), specially designed for freelancers and small businesses, but can be used for almost any type of business need. With this application, you can send beautiful invoices, receipts, estimates, quotes, bills etc to your clients. Jump right off the Live App and start sending invoice or download the entire Source code and run it on your server. This project is something I've been working on in my free time so I cannot be sure that everything will work out correctly. But I'll appreciate you if can report any issue.

Invoice Dashboard

Key Features

  • Send invoices, receipts, estimates, quotations and bills via email
  • Generate and send/download pdf invoices, receipts, estimates, quotations and bills via email
  • Set due date.
  • Automatic status change when payment record is added
  • Payment history section for each invoice with record about payment date, payment method and extra note.
  • Record partial payment of invoice.
  • Clean admin dashboard for displaying all invoice statistics including total amount received, total pending, recent payments, total invoice paid, total unpaid and partially paid invoices.
  • Multiple user registration.
  • Authentication using jsonwebtoken (jwt) and Google auth

Technologies used

This project was created using the following technologies.

Client

  • React JS
  • Redux (for managing and centralizing application state)
  • React-router-dom (To handle routing)
  • Axios (for making api calls)
  • Material UI & CSS Module (for User Interface)
  • React simple Snackbar (To display success/error notifications)
  • Cloudinary (to allows users to upload their business logo)
  • Apex Charts (to display payment history)
  • React-google-login (To enable authentication using Google)

Server

  • Express
  • Mongoose
  • JWT (For authentication)
  • bcryptjs (for data encryption)
  • Nodemailer (for sending invoice via email)
  • html-pdf (for generating invoice PDFs)

Database

MongoDB (MongoDB Atlas)

Configuration and Setup

In order to run this project locally, simply fork and clone the repository or download as zip and unzip on your machine.

  • Open the project in your prefered code editor.
  • Go to terminal -> New terminal (If you are using VS code)
  • Split your terminal into two (run the client on one terminal and the server on the other terminal)

In the first terminal

  • cd client and create a .env file in the root of your client directory.
  • Supply the following credentials
REACT_APP_GOOGLE_CLIENT_ID = 
REACT_APP_API = http://localhost:5000
REACT_APP_URL = http://localhost:3000

To get your Google ClientID for authentication, go to the credential Page (if you are new, then create a new project first and follow the following steps;

  • Click Create credentials > OAuth client ID.
  • Select the Web application type.
  • Name your OAuth client and click Create
  • Remember to provide your domain and redirect URL so that Google identifies the origin domain to which it can display the consent screen. In development, that is going to be http://localhost:3000 and http://localhost:3000/login
  • Copy the Client ID and assign it to the variable REACT_APP_GOOGLE_CLIENT_ID in your .env file
$ cd client
$ npm install (to install client-side dependencies)
$ npm start (to start the client)

In the second terminal

  • cd server and create a .env file in the root of your server directory.
  • Supply the following credentials
DB_URL = 
PORT = 5000
SECRET = 
SMTP_HOST = 
SMTP_PORT = 
SMTP_USER = 
SMTP_PASS = 

Please follow This tutorial to create your mongoDB connection url, which you'll use as your DB_URL

$ cd server
$ npm install (to install server-side dependencies)
& npm start (to start the server)

Troubleshooting

If you're getting error while trying to send or download PDF, please run the following in your server terminal.

$ npm install html-pdf -g
$ npm link html-pdf
$ npm link phantomjs-prebuilt

Docker

Using docker is simple. Just add the .env contextualized with the docker network.

e.g:

goes to path "server/.env"

DB_URL = mongodb://mongo:27017/arch
PORT = 5000
SECRET = 
SMTP_HOST = 
SMTP_PORT = 
SMTP_USER = 
SMTP_PASS = 

goes to path "client/.env"

REACT_APP_GOOGLE_CLIENT_ID = 
REACT_APP_API = http://localhost:5000
REACT_APP_URL = http://localhost

And run

docker-compose -f docker-compose.prod.yml build

And then

docker-compose -f docker-compose.prod.yml up

Comment

I intend to keep adding more features to this application, so if you like it, please give it a star, that will encourage me to to keep improving the project.

Author

License

  • This project is MIT licensed.
Comments
  • Add way to include payment details

    Add way to include payment details

    Love this software, thanks for releasing it!

    On my invoices, I include my payment details so the client can pay me. I can't see a way to do that currently (but I could have missed it?). It would be great to have this feature.

    opened by joekroese 5
  • missing dependencies?

    missing dependencies?

    When starting the server on Ubuntu 21.10 I get a missing dependency for Express.

    Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'express' imported from /home/user/arcinvoice/server/index.js

    opened by bvdberg 3
  • Google login not working

    Google login not working

    Hello @Panshak

    Seems like Google Auth is not working. The user is being redirected to the Google login screen, selects an email, the Auth tab closes but googleSuccess in /components/Login/Login is not being called.

    I forked your project and started working on Bulkit. Thanks for the great setup!

    opened by KristiyanTs 2
  • Set default react favicon.icon

    Set default react favicon.icon

    I purpose set default React favicon

    react default favicon.ico

    With the Arc Invoice icon

    Arc Invoice icon

    I update the file at /client/public/favicon.ico for browser can automatically load icon.

    And i add a set of icons PNG and ICO light files at /client/public/icons

    Can load PNG images files at post img cc galery

    opened by Orivoir 2
  • app is crashed

    app is crashed

    throw new TypeError(Invalid schema configuration: \${name}` is not ` + ^

    TypeError: Invalid schema configuration: U is not a valid type at path 0. See https://bit.ly/mongoose-schematypes for a list of valid schema types.

    opened by Lasarussp 0
  • Installation problem

    Installation problem

    Hello,

    I have a problem when starting the Client part.

    When I do "npm start" I get this error.

    Starting the development server...

    Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:67:19) at Object.createHash (node:crypto:133:10) at module.exports (C:\Users\AdrienLcq\Downloads\accountill-0.1.3\client\node_modules\webpack\lib\util\createHash.js:135:53) at NormalModule._initBuildHash (C:\Users\AdrienLcq\Downloads\accountill-> 0.1.3\client\node_modules\webpack\lib\NormalModule.js:417:16) at handleParseError (C:\Users\AdrienLcq\Downloads\accountill-0.1.3\client\node_modules\webpack\lib\NormalModule.js:471:10) at C:\Users\AdrienLcq\Downloads\accountill-0.1.3\client\node_modules\webpack\lib\NormalModule.js:er.js:233:18 at context.callback (C:\Users\AdrienLcq\Downloads\accountill-0.1.3\client\node_modules\loader-runner\lib\LoaderRunner.js:111:13) at C:\Users\AdrienLcq\Downloads\accountill-0.1.3\client\node_modules\babel-loader\lib\index.js:59:103 { opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], library: 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED' }

    Node.js v18.3.0

    Thank you for your help

    opened by Shadow59i 0
  • Multilingual Support added

    Multilingual Support added

    Hi, I have added the multilingual support to this Accounthill invoicing project here. Please check it once I hope you like it and appreciate my work. This is a solution for issue #10. It supports the following languages: English, Spanish, French, Portuguese, Chinese, Hindi, Arabic, Urdu, Vietnamese, Turkish, Japanese, Greek, Indonesian, Italian, Russian, Korean, and German.

    opened by aannaassalam 2
  • logo changed and minor fixes that enchanced ui

    logo changed and minor fixes that enchanced ui

    I have made some minor changes in the login page UI nothing with the functionality. I hope you like the UI I am pasting a screenshot below for reference. please accept my pull request if everything goes fine. It is a fix for issue #6

    image

    opened by aannaassalam 1
  • Update constants.js

    Update constants.js

    The constant FETCH_CLIENTS_BY_USER was set to FETCH_PROFILE_USER which will cause a lot of problems especially, with <Link> if you visit clients will not be able to edit settings

    opened by codejq 1
  • Docker build fails

    Docker build fails

    The docker build fails on the client build part (client/Dockerfile).

    COPY client/yarn.lock . COPY failed: file not found in build context or excluded by .dockerignore: stat client/yarn.lock: file does not exist

    After checking there's indeed no yarn.lock file present in the client folder. No idea if it's needed or not, could you please add the file or remove the copy line from the Dockerfile?

    Thanks!

    opened by WolfCabo 1
  • Docker

    Docker

    Added context for the build parts, which fixes errors when trying to build.

    Added .env.example files for both client & server. Default values of gmail for the SMTP + link in case people use 2FA on their google mail.

    opened by WolfCabo 1
Releases(v0.1.3)
Owner
Panshak Solomon
Conservation Biologist | Software Developer
Panshak Solomon
Free and open-source MERN Stack CRUD Application built with React v17+, RRDv6+, Node.js, Express.js MongoDB and Mongoose ODM

?? MERN Stack CRUD Application Free and open-source MERN Stack CRUD Application built with React v17+, RRDv6+, Node.js, Express.js MongoDB and Mongoos

Henok R. Bedassa 20 Dec 19, 2022
null 19 Nov 13, 2022
MERN Stack App built with React, Redux, NodeJS, ExpressJS, MongoDB, and deployed to Ubuntu Server on AWS EC2 Instance

MERN Stack App built with React, Redux, NodeJS, ExpressJS, MongoDB, and deployed to Ubuntu Server on AWS EC2 Instance. JWT Authentication – Hook Up with ASP.NET Core 3.1

Christotle Agholor 3 Mar 5, 2022
CRUD App using MERN Stack, it uses ReactJS for Front-end, NodeJS, Express For the Backend and Mongo DB as database!

Book Collection List ?? Demonstration of the application | Features | Technologies used | Application installation ?? Demonstration of the application

Victor Lira 33 Nov 20, 2022
Palo-mern-boilerplate - A MERN stack (Mongo, Express, React, Node) boilerplate to get Palowans up and running quickly.

palo MERN boilerplate A MERN stack (Mongo, Express, React, Node) boilerplate to get Palowans up and running quickly. Commands: npm install # install b

Jim 10 Oct 31, 2022
Full-stack React app built with Typescript, Bootstrap, Apollo client on the frontend, and NodeJS/Express, Typescript, Apollo server, and MongoDB/mongoose on the backend.

Event Scheduler App This project was bootstrapped with Create React App. Event Scheduler is a React app that allows users to create events. An event c

ahmed 8 Dec 1, 2022
QABAS AL ANI 1 May 29, 2022
Creador de tareas - MERN - MongoDB, Express, React y Node

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Alberto Rodriguez Diaz 1 Nov 11, 2021
Fyodor Simonov 3 Apr 15, 2022
In this project im going to build and deploy a online bus reservation application. Covered topics: Reactjs, Nodejs, Expressjs and Mongodb.Design patern: mvc

Merkob.ma This is a node.js online bus reservation application powered by Express that provides the main functions you'd expect, an admin system, etc.

marouane zahaoui 13 Dec 4, 2022
An Ecommerce site for Cosmetic and Makeup products built using ReactJs , NodeJs and MongoDB.

An Ecommerce site for Cosmetic and Makeup products built using ReactJs , NodeJs and MongoDB. It Provides role based authentication to Admin for maintaining the store and Users for Purchasing product including cart,Checkout and Payment.

Mayuresan 3 Nov 8, 2021
Application made with Nodejs typescript framework Nestjs and Reactjs Redux Saga to simulate simple vending machine workflow.

Project Description This project was made to simulate on how vending machine works. We have two application frontend and backend. Frontend is made wit

Roshan Ranabhat 15 Jan 3, 2023
Full Stack tutorial using ReactJS, NodeJS, Express and MySQL

Run this project If you want to try the finished project: Go to Start with MySQL to create the database Download the project Go to the client folder a

Carlos Puente 1 Apr 15, 2022
This application is being constructed by combining small open source demos into one big application

Live Demo on Heroku If this doesn't work, it's probably because it exceeds Heroku's 500MB memory quota for the free tier. Sorry about that. It does wo

null 0 Dec 10, 2021
A MERN stack (Mongo, Express, React, Node) boilerplate to get Palowans up and running quickly.

Palo MERN boilerplate A MERN stack (Mongo, Express, React, Node) boilerplate to get Palowans up and running quickly on new projects. Commands: npm ins

Palo IT Singapore 10 Oct 31, 2022
Simple React Social Network, built with React,Node,Express,MongoDB and Tailwind

Full stack react social network application A mini social network application built with React,Typescript, Redux, Node, Express, MongoDB, and Tailwind

Albenis Kërqeli 31 Dec 19, 2022
Echo-soundboard - A free, open-source soundboard made using ElectronJS + React

Echo Soundboard by Performave A free, open-source soundboard made using Electron

Eric Wang 27 Sep 22, 2022
Ini adalah kumpulan source code belajar website React JS dari Channel Youtube Prawito Hudoro, Materi CRUD React MERN

MERN Basic Indonesia Screenshot Aplikasi Dokumentasi API https://documenter.getpostman.com/view/10749611/UVXbvKqe Pengertian MERN Mongo DB Adalah suat

Rifki Ramadhan 3 Jun 6, 2022
Changd - Open source web monitoring application for monitoring visual site changes using screenshots, XPath's or API's

Changd is a open source web monitoring application and a free alternative to Cha

Paul Aschmann 109 Dec 20, 2022