Flexi project - Blog Report
Tags: vue, firebase, pwa
Published: 2023-04-28 07:55:18

For our 6th semester of college, my friends and I decided to work on a document management `progressive web app (pwa)` called 'DocIt'.
In this blog, I will dive into the latest tools and techniques used to create the Frontend of this application. I will also talk about why this set of technologies was our choice.

## Which technologies were used by an individual in the project 
- [**Vue.js**](https://vuejs.org/) - a JavaScript framework for building web user interfaces.
- [**SASS**](https://sass-lang.com/) - a CSS extension language for styling
- [**FontAwesome**](https://fontawesome.com/) - icon library and toolkit
- **Linting & Code Quality** - a **Husky, ESLint, Staged-Lint** and **Prettier** setup

## Why only these technologies

### Vue

> Vue2 is awesome because it combines simplicity, flexibility, performance, and a supportive community, making it a powerful tool for building modern user interfaces for web applications.

Being used to React/Next environments, I was a bit hesitant when it came to migrating to Vue for this project. All of it changed when I started working on the project and the migration was made seamless by the extensive and comprehensive documentation that they provide. 
#### Some features I personally enjoyed of Vue.js
- In built state management library `Vuex`
- Out of the box scoped styling support options with sass/scss
- Shorthands for many common workflows like `v-model` reduces developer time by a lot
- The opinionated suggestions for routing, state management solutions like `vue-router`, `vuex` and their documentation. This is while keeping it flexible to mix-n-match 

### Sass + FontAwesome 
These libraries are just amazing at reducing development time and for the short timeframe of this project, proved to be a godsend

### Linting & Code Quality 
#### Husky 
Allows you to manage your client-side `githooks` and is a pretty cool open-source solution to most of the hassles that come up while setting up hooks
#### Staged-lint 
A tool to run your linting (husky pre-commit hook in this case) only for the changed (staged) files
#### Prettier + ESLint 
Industry standards for maintaining code formatting, quality and static checking for problems (linting)

## How you applied the learned knowledge to your project
During this semester, we also learned about Vue in class, which helped me get a head-start in developing the project. The workflows and correct practices taught to us were very helpful in quickly getting me used to Vue development. 
We were also taught to create PWAs and the ecosystem surrounding them (service workers, manifests, etc.)

## How differently you have applied the technologies in use
```
Vue.js - Frontend development library - SFCs
Ecosystem of Vuex, Vue-router

CSS + SCSS - Styling - Scoped

PWA - Creating a PWA

FontAwesome - Icons
```

## How others have used which technologies for similar work / project
[Vue Partners](https://vuejs.org/partners/)
Vue is used by the likes of Facebook, Netflix, Adobe, Apple, Google, Gitlab for the development of their products' user interfaces. It is only rising in popularity according to Stack overflow surveys due to it's friendly learning curve and DX.

## About your technical contribution and learning via this blog
I worked primarily on the Frontend development.
- Receive the designs in Figma
- Code up the user interface, fix it's responsivity and styling
- Add the reactive (js) part
- Connect to the backend using `fetch` requests

I also deployed the project using `Firebase`, transformed it into a PWA and further tested if it fit the requirements

As a part of the project, my team and I worked in sprints which also introduced me to the world of documentation and Agile. I took on the role of Scrum Master and planned out the execution of the project

Essentially, I learnt a new JavaScript framework Vue.js, its development environment, how to create PWAs and much more.