My Projects

Project List

Some of the projects that I have worked on.

Superhero App in Vue and Element UI

Posted on 25th January, 2022

I created this project simply to get my hands dirty with Element UI which is probably the most popular UI toolkit for Vue. To populate this app I've used this API https://superheroapi.com/. It provides data of over 700 + superheroes from Marvel and DC universes.

I've a pretty mixed response to using Element UI for the first time. It has wide range of components, customized themes which you can download. But, I had to write a lot of custom CSS, overriding the CSS styles was something I did not enjoy experimenting with this framework

About the project itself, like mentioned above I did not seriously invested my time on this. The sole purpose of doing this was to try Element UI. I've the missing piece of the puzzle having projects on all 10 Popular UI library kits for VueI mentioned on one of my blog posts. It has only a single page though technically, it is a single page application with routing enabled. I had another page which had list of all the superheroes which I've removed for now but might want to add later if required.

If you enjoyed this project, please leave a star on Github and show some support.

Technologies

Vue Element-UI HTML CSS
https://github.com/Apfirebolt/element-ui-vue-superhero-app

Appearance Section
Biography Section
Power section
Sign Up
View

Project Locator in MERN

Posted on 27th February, 2022

It has been a while since I posted in this section. Anyways, I created this project with the aim of experimenting with Google Maps API. Otherwise, it is a simple CRUD app with user authentication where users would register and login into the system and create projects.

Project would have some generic attributes like name, details, start date and end date. The project would also have 'latitude' and 'longitude' properties which would be populated from the data received through the click event on Google Maps. The Google maps used in this project does not include an API key which I might address as improvement in the existing project sometime later. It does have issues sometimes loading the map would would normally resolve when you refresh the page.

As evident from the title of this post. It has been created in one of the most popular tech stacks used to create full stack applications which is "MERN". If you enjoyed this project, please leave a star on Github and show some support.

Technologies

React Express Bootstrap MongoDB React-Redux
https://github.com/Apfirebolt/Mern-project-locator-with-google-maps

Homepage
Loader
update_project
Project List
View

Chat group application in Vue, Express, Socket IO and MongoDB

Posted on 2nd March, 2022

This is one of my most ambitious personal projects. I always had this curiosity of learning more about Sockets and bi-directional persistent connections used in chat based applications. This is a hobby project that utilizes the concept of sockets using Socket IO library in Node. This application has user authentication and allows you to create chat rooms and perform CRUD operations on it.

Chat you had in a group is saved permanently in MongoDB database through event triggering at client and server sides using socket based bi-directional communications which are significantly different than HTTP REST based interaction which are essentially stateless and do not remember things done in past interactions.

Tailwind CSS is used to provide the application a beautiful user interface. Vuex is used for store management on the front-end which assists in calling back-end API actions which trigger CRUD operations on chat rooms. This app is built on top of the boilerplate I created for MEVN stack apps. That is why I cannot stress enough on the importance of having boilerplates for your favorite stacks which can be easily tweaked and extended as per your requirements.

If you enjoyed this project, please leave a star on Github and show some support.

Technologies

Vue Express SocketIO MongoDB Mongoose TailwindCSS
https://github.com/Apfirebolt/MEVN-chat-groups

Chatroom
Chat detail
Register
View