Manta

A desktop application for creating invoices with beautiful and customizable templates.

Screenshots • Features • Downloads • Technologies • Why? • Goals • Development • Support • FAQ

Screenshots

Here's a few screenshots:

Features

• 🎚 Flexible form. You can turn on/off fields
• 🏗 Drag & drop for reordering items. This makes editing easier.
• 📐 Use SVGs for logo for better printing.
• 🎨 2 Custom designed & highly customizable templates. Will add more in future versions.
• 📊 Export PDF for print or email.
• 🔒 Privacy. Your data stays where it belongs.
• 💯 Totally Free.

Downloads

macOS	Windows	Linux
Download v1.0.0	See Build Instruction	See Build Instruction

Windows and Linux versions are still being developed. If you're interested in making your own build, please refer to the build instruction for more details.

Technologies

• Electron
• React
• Redux
• React-DnD
• React-Beautiful-DnD
• React-Motion
• Webpack

Why

The main reason I decided to build this is because I need a simple tool to create good looking invoices, estimates, and receipts but couldn't find one that suits my needs. I don't do invoicing for a living but I do need it occasionally so an ideal invoicing app just needs to be good at one thing and one thing only, which is making invoices. I really don't need a full-fledged bookkeeping or accounting software.

I believe there are many people such as freelance designers, developers, photographers or writers... also have such need. However, most (if not all) products I found have these these problems:

Complexity

• Most invoicing products nowadays is web-based, which means you’ll need to maintain a new account (possible a monthly fee, too) just to create an invoice.
• Sure, there some open-source products that can be self-hosted, but that will introduce a new layer of complexity to your workflow. Who will setup the product? Who will maintain the server? Who will cover the cost? ...
• You will always need internet connection to be able to create your invoices. It can be slow sometimes.

Privacy

• When you use a web service, most of the time, you’re giving away your data whether you want it or not. Financial data is sensitive and I believe that no one should know about your data except yourself.

Goals

With that in mind, I know that Manta would need to satisfy these criteria:

• 🚀 Fast!!!

• 👍 Friendly UI & UX

• 🎉 Has nice looking templates

• 🔒 Does not touch user’s data

• 💰 Free! :)

  If you think Manta delivers these, let me know by putting a star on this project 😉

Development

It's very easy to get started with these 3 steps:

• Clone this project to your local machine.
• Open terminal and cd into the cloned folder, usually cd Manta.
• Run yarn install to install dependencies.
• Run yarn dev in one tab to start webpack-dev-server.
• Run yarn start in another tab to open the app.

This is still in beta and it's far from perfect so feedbacks, issues or PRs are greatly appreciated! :)

Support

Future versions might include support for Windows/Linux if there's enough people request it. If you want to test it out on Windows/Linux you can following these steps:

• Clone the project
• Run yarn install to install dependencies.
• Run yarn release:win if you want to build for Windows
• Run yarn release:linux if you want to build for Linux

In the project's root directory, open the dist folder and you should see the installer.

Note that on Linux you will need additional dependencies to provide the icns2png and gm commands. Ubuntu/Debian users can run: sudo apt install -y icnsutils graphicsmagick.

FAQ

• Is this app built with Electron?

Yes, it's built on top of Electron. Please see the Technologies section for more info.

• What boilerplate did you use

None. This is my attempt to integrate Electron with React from scratch. The idea was to get a better understanding of how things work together, especially Webpack. But I do take cue from other projects.

• What CSS/UI Framework did you use?

I wrote all the CSS myself. I only use Bootstrap for prototyping at first. But I gradually encapsulate most of the style to the component with the help of styled-components. There is some places still use Bootstrap mostly for layout purpose but I'll get rid of it eventually.

• Where did you get the icons?

ionicons. They're great!

• Why did you name the project Manta? It has nothing to do with invoicing.

It's actually very common to associate an animal with your brand. There's a reason behind the Twitter bird, the famous MailChimp Freddy or the Docker whale ... It's called the Baby-Face bias. You can read more about it in the book Designing for Emotion by Aaron Walter. In my case, I was inspired by the movie Racing Extinction and by naming this project Manta, I hope to raise people's awareness on some environmental issues mentioned in the movie. You can read more about it here

• I like Manta's logo, did you design it?

Yes, I actually did all the illustrations as well as the templates that you see in the app.

• Are you available for hire?

Yes, kind of. I'm exploring new opportunities at the moment. Please let me know what you have in mind.

• How do I contact you?

If you find an issue, please report it here. For everything else, please drop me a line at [email protected]