How to Build a MERN Stack Invoicing Application

Jul 6, 2022 | Programming

Create a robust invoicing application using the MERN stack (MongoDB, Express, React, and Node.js) that’s perfectly suitable for freelancers and small businesses. Let’s walk through the setup and configuration process to get your app running smoothly.

Introduction

Accountill (formerly known as Arc Invoice) is a full-stack invoicing application designed with ease and functionality in mind. Whether you’re sending invoices, receipts, or estimates, this application provides a user-friendly interface for all your invoicing needs. You can check out the Live App or download the Source Code to run it on your server.

Invoice

Key Features

  • Send invoices, receipts, estimates, and more via email.
  • Generate and download PDFs of all documents.
  • Automatic status change on payment record addition.
  • Record partial payments with detailed histories.
  • A clean dashboard displaying total statistics.
  • User authentication via JWT and Google Auth.

Technologies Used

The following technologies power Accountill:

Client

  • React JS
  • Redux
  • Axios
  • Material UI
  • React Google Login

Server

  • Express
  • Mongoose
  • JWT
  • Email Sending with Nodemailer

Database

MongoDB (MongoDB Atlas)

Configuration and Setup

To set up the application locally, follow these steps:

  1. Fork and clone the repository or download it as a zip.
  2. Open in your preferred code editor.
  3. Open a terminal and split it into two (client and server).

Client Side Setup

cd client
touch .env
# Add your environment variables
REACT_APP_GOOGLE_CLIENT_ID=
REACT_APP_API=http://localhost:5000
REACT_APP_URL=http://localhost:3000
npm install
npm start

Server Side Setup

cd server
touch .env
# Add your environment variables
DB_URL=
PORT=5000
SECRET=
SMTP_HOST=
SMTP_PORT=
SMTP_USER=
SMTP_PASS=
npm install
npm start

Troubleshooting

If you encounter issues with sending or downloading PDFs, run the following commands in your server terminal:

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

Should you run into additional issues or need guidance, feel free to seek advice or share your experiences by connecting with our community at fxis.ai.

Additional Tips

Using Docker can simplify the deployment process. Be sure to create your contextualized environment files, and then run:

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

Conclusion

This application is a work in progress, with many more features expected to be added in the future. Your feedback and contributions are welcome to enhance this valuable tool!

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

Stay Informed with the Newest F(x) Insights and Blogs

Tech News and Blog Highlights, Straight to Your Inbox