My Projects

Project List

Some of the projects that I have worked on.

React Employee API Integration

Posted on 13th January, 2022

This is probably one of the smallest projects on my portfolio. I was not sure of adding it but, it had certain things like sorting and filtering in React which I felt I could use in some of my future projects. Hence, I updated it recently. Origin story of this mini project goes back to 2019 when I was on a job hunt and was assigned this project as a part of hiring process for a start up.

I was a newbie in React when I was coding this. This makes use of Class based components which I rarely use now that I was recently introduced to Function based components and hooks. For UI, the project uses Bulma CSS. I was a big fan of this framework at that time. But, my inclination has been shifted towards Tailwind for the last couple of years. There are only a couple of screenshots attached for this project, this project also makes use of storing data in history object while making a transition from home page to the employee detail page.

Technologies

React BulmaCSS HTML CSS
https://github.com/Apfirebolt/React-Employee-Management

Homepage
Employee Detail
View

MERN Heroku To Do Boilerplate

Posted on 21st January, 2022

It is a boilerplate full-stack application which can be used as starting point for other MERN applications and deploy them quickly on free Heroku dinos. The project is configured with Heroku post-build script to generate production build of the React frontend application and serve it on Heroku using proxy for API requests.

The app also comes equipped with latest version of React-router in hash mode, it has React-Bootstrap components such as tables and modals available to use. For displaying toast message on completion of certain actions it uses a popular React toast library called "React Toastify". For managing data on the frontend it is configured with Redux and related libraries for React. For the time being this application can be found live on https://firebolt-express.herokuapp.com/. For persisting data it uses mongoDB Atlas database on AWS cloud. For more information you can visit homepage of mongodb and Atlas here, try their services for limited storage absolutely free of charge.

Technologies

React Express Bootstrap Heroku MongoDB-Atlas Mongoose
https://github.com/Apfirebolt/mern-todo-heroku-api

Home page
Login Page
Modal on To Do page
View

Pixabay Gallery in Vue and Buefy using Pixabay API

Posted on 22nd January, 2022

I created this project using Pixabay API. In case you don't know Pixabay is a website which has a large collection of royalty free images which you can use without being worried about any copyright notifications. They also provide API for developers with limited usage based on authentication credentials. Update : This project also has been integrated with flickr API to fetch flickr images. Flickr exposes their API for limited non-commercial usage.

I am currently writing a blog post where I rank "Top 10 UI libraries to use in Vue". There were a couple of UI libraries in that list which I never used till date. So, I thought maybe I should just apply them into one of my personal projects before accurately gauging their pros and cons. I have used Bulma CSS long back for some of my projects but it is the first instance of me using Buefy (Bulma + Vue), which is a Vue UI toolkit taking inspiration from Bulma CSS. It has been a pleasant experience using this framework, I'd be writing more about under the "Buefy" section of that blog post.

There is not a lot going on for this project. The idea was to experiment with Buefy and Bulma CSS. Right now, we have a carousel which is populated from the images fetched from pixabay API. It shows various parameters for each image like how many likes a given image has received, how many views and comments it has and more. If I did revisit this project, I might consider adding a full page gallery with different image sizes also known as "Masonry".

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

Technologies

Vue Buefy Bulma CSS HTML
https://github.com/Apfirebolt/pixabay-gallery-in-vue-and-buefy

Homepage
Images-1
Images part-2
Flickr page
View