Flexi project - Blog Report

TDP17 — Fri, 28 Apr 2023 07:55:18 +0000

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 - a JavaScript framework for building web user interfaces.
SASS - a CSS extension language for styling
FontAwesome - 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
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.

DEV Community: TDP17