Facture (French word for invoice) is a time-stamped commercial document that itemizes and records a transaction between a buyer and a seller.
- 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
- 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)
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
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- 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 😉
- Website - Animashaun Taofiq T.
- LinkedIn - Animashaun Taofiq T.
- Twitter - @dr_annys