/facture

Facture (French word for invoice) is a time-stamped commercial document that itemizes and records a transaction between a buyer and a seller.

Primary LanguageVue

Facture

Facture (French word for invoice) is a time-stamped commercial document that itemizes and records a transaction between a buyer and a seller.

Demo | Code

Table of Contents

Overview

Home Page Add Invoice Single Invoice Edit Invoice

Built With

  • Semantic HTML5 markup
  • SCSS custom properties
  • Flexbox
  • Mobile-first workflow
  • Vue.js - Javascript Framework
  • Vuex - Serves as a centralized store for all the components in an application.
  • Vuetify - Vue UI Library with beautifully handcrafted Material Components
  • Vuelidate - For forms input validations
  • Moment - For date formatting

Useful Resources

  • Vuelidate - Useful for forms input validations
  • Moment - For date formatting of any type

What I Learnt

  • The major things I learnt are how to work with Vuex (Centralized store) and vuetify (UI library for Vue) and the extensive use of LocalStorage (Client-Side database/store)

Features

Users should be able to:

  • ✅ View the optimal layout for the app depending on their device's screen size
  • ✅ See hover states for all interactive elements on the page
  • ✅ Create, read, update, and delete invoices
  • ✅ Receive form validations when trying to create/edit an invoice
  • ✅ Save draft invoices, and mark pending invoices as paid
  • ✅ Filter invoices by status (draft/pending/paid)
  • ✅ Toggle light and dark mode
  • ✅ Keep track of any changes, even after refreshing the browser

How To Use

To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:

# Clone this repository
$ git clone https://github.com/blade-01/facture.git

# Project setup
$ yarn install

# Compiles and hot-reloads for development
$ yarn serve

# Compiles and minifies for production
$ yarn build

# Lints and fixes files
$ yarn lint

Acknowledgements

  • ResponsivelyApp - This extension helped me in viewing my projects in every viewport which helped improve responsiveness.
  • Google & Stackoverflow - The goto place when I run into any problem 😉

Contact