Enable dark mode

Freelance Manager - A Project Management Tool for Solo Freelancers

Posted by Vishnu Raghav B • 03 June, 2020 • 4 min read
cover image for Freelance Manager - A Project Management Tool for Solo Freelancers
Photo by Luca Bravo on Unsplash

As freelancers, we would have used at least one online service to manage our projects. There are a bunch of good free as well as paid services available online which helps us to plan, schedule, manage billing and collaborate with others.

As a user of such services, I had this idea of creating an offline only app with most of the features of any project management service. By utilizing the COVID-19 lockdown, I took this idea as a personal project and did something out of it called “Freelance Manager” (app name yet to be finalised)

Introduction

For the sake of customised billing, I used to design my billing documents individually for each client. I had my own templates designed for Estimate, Invoice, Receipt, Agreements, etc. Every time when I need to send a bill or agreement to a client, I had to edit one of these templates which was very time consuming admist the project work and also it wasn’t perfect, mistakes happen.

To overcome these issues, I decided to create a front-end only project using HTML, CSS and vanilla JS. I did a simple single-page (kind of) application which generated bills and agreement in a click of a button. The content for each document are made editable using the HTML5’s contenteditable feature. So each document can be edited and saved as a PDF file. The major disadvantage here is that, all data will be lost after a page reload. That wasn’t perfect though.

Later, I started this project. Initially, my idea was just to generate invoices quickly and accurately in my own design. But as the project started growing, it didn’t stop there, my ideas expanded further into a project managment tool. So here we are.

Introducing Freelance Manager, an offline only project management tool for solo freelancers like me with privacy and simplicity in mind. First of all I would like to say that the features displayed in this article about the webapp are entirely based on my project workflow and some features may or may not be included in the public release.

Check out the video demo of the webapp below

Pros

  • Full functionality without a network connection.
  • 100% data privacy. Business data are stored in the device itself instead of someone else computer.
  • CSS customisable document templates.
  • Simple document generation.
  • Stay on track with statistics.
  • Easy data backup.

Cons

I can only tell the pros of this webapp now, you can tell me the cons after the public release. We can collectively fix everything to make it better 😉

Features

I’ve included the most common features that I require in a project management app. The feature list can grow or shrink in the public release.

freelance manager webapp interface
Freelance Manager's interface

Feature list for v1.0

  • Client list sidebar with grouped projects.
  • Load Project Brief from JSON data.
  • Immersive view for Project Brief.
  • Estimate, Invoice, Receipt and Agreement generation with CSS customisable templates.
  • Print open documents with the browser’s print menu (eg: Ctrl + p).
  • Milestones and Timeline.
  • Notes for individual projects.
  • Option to include traits under Client information and Project contact. Helpful for personalised communication.
  • Click on a link, email or ID to copy it to clipboard.
  • Add subcontractors to a project, assign tasks, generate subcontractor agreements.
  • Load Testimonial & Feedback from JSON data.
  • Slide-in panels for Notifications and Statistics.
  • Light and Dark interface modes.
  • Search through Client ID, Name or Bill No.

Roadmap

  • Time tracker
  • Kanban board

Screenshots

Client list
Client list
Client information section
Client information section
Project title section
Project title section
Billing section
Billing section
Bill editor
Bill editor
Bills and Agreements
Bills and Agreements
Milestones section
Milestones section
Timeline section
Timeline section
Subcontracting section
Subcontracting section
Notes section
Notes section
Testimonial & feedback section
Testimonial & feedback section
Search option
Search option
Statistics slide-in panel
Statistics slide-in panel

Technologies in use

The front-end of this webapp was built using Nuxt, a free and open source web application framework based on Vue.js, Node.js, Webpack and Babel.js. And for the backend, I’m using json-server, a fake REST API, which I think is more than enough for a local webapp.

Future

Currently, this is an offline desktop webapp that runs on localhost. In future, it will be converted to a standalone desktop as well as mobile application. So stay tuned!

Having a project in mind?

Lets get it started