My Projects

Project List

Some of the projects that I have worked on.

Multi User Polls App in Express, Vue 3, Typescript and Quasar

Posted on 21st December, 2021

It is a multi-user polls application where users can create polls and have anywhere between 3-10 options for each poll. The polls created by them would be visible to other users on their homepage/dashboard page once they login.

This project was created as a part of my learning process when I was getting acquainted with Vue 3, Quasar and Typescript. The story goes like this - in my organization, people were planning to port the entire app we had in Vue 2 to Vue 3 using Typescript and Quasar. This was mildly inspired by the Django Polls App given in Django official docs.

Anyways, the high level requirements remain pretty much the same, you have full CRUD functionality on the polls you create, that is you can Create, Update, Delete and View all the polls created by you. Other users would be able to vote on your poll. You'd be able to see the votes of the users and their choice. Once voted on a poll, you cannot vote on any other option (Single choice poll) unless you withdraw the vote you had cast earlier.

There is also a details page for each user who is part of the website. You can search for other users and polls through a search bar and on User Detail page you would be able to see all the polls created by that user.

Frontend validation is done using Vee-Validate and Zod validation libraries for Vue 3 and Typescript. Quasar is used for UI components. Quasar is one of the first UI kits in Vue which offered full support to Vue 3. Other UI libraries like Vuetify, VuePrime are now offering support for Vue 3 as well. But, Quasar remains my personal favourite choice as of now because of the wide range of components it has to offer, configurable options, ease of use and more.

For Backend, Express is used which is still the most widely used framework for Node ecosystem.

Technologies

Vue3 Express Typescript Quasar Vee-Validate Zod
https://github.com/Apfirebolt/vue3-express-quasar-polls

Poll List
Users
Poll Detail
Home Page
Add Poll
Add Choice
View

Digifix Fictional Door-2-Door Gadget Repair System

Posted on 21st December, 2021

Digifix is a fictional portal which offers door-to-door services of picking up your faulty electronic gadgets like Mobile, Laptop, PS4 and others. Digifix would then have their engineers working on fixing the issues with your devices. You can keep track of the progress with the portal. The entire work flow of the system is described below :-

The web app is created in Django using Tailwind CSS and DTL (Django Templating Language). It is a stand-alone multi-page app but it does have APIs as well written using DRF (Django-rest-framework).

The app has three different types of users, Admin, Staff/Engineer and Customer (Normal users who would register complaints). Only Admin can add other users and assign them role of "Staff/Engineer". Distribution of incoming requests among available Engineers is also handled by Admin.

Status of this project is still in progress, I'd be looking forward to add views for Engineers who would be added by the Admin. Engineers upon login should be redirected to the list of complaints pages assigned to them and should be able to see all the threads and communicate with the concerned users through comment system provided by the complaint thread opened.

Technologies

Python Django TailwindCSS rest-framework Jquery
https://github.com/Apfirebolt/digifix-electronics-repair-service-portal-

Dashboard
Homepage
Add Address Form
Address List
User Testimonial
Complaint Detail
View

News App in Vue 2 using Vuetify and Vuex

Posted on 24th December, 2021

A web application to get news from 50+ countries across multiple categories. This application makes use of the API provided by News API. It has a free tier with limits on number of hits and number of results which can be retrieved. It is simple to use, just have to register on their official website and request for the API keys which would soon be delivered to your email address.

These API integrates with 100+ news sources including big names like BBC, CNN, Russia Today and more. You can search news with a keyword. There are 50+ countries you can view to get the news from. There are 6 categories you can use to filter news by category such as Entertainment, Sports, Health, Business and More. Vuetify is used as UI Kit to provide UI components for this project. This is an old project, recently I did visit it and cleaned up some parts of it.

Technologies

Vue2 Vuetify Vuex
https://github.com/Apfirebolt/News-App-in-Vue-JS-using-Vuetify

About Page
List of Countries
News Page - 1
News Page - 2
News Sources
Country Category
View