This project is a simple Next.js application that serves as a database for games. It allows users to view game entries from the API https://softgenie.org/api/games. The application is built using Next.js for server-side rendering and optimized performance. It uses Material UI for beautiful styled components following Material design patterns.

The project is deployed here https://next-games-database.vercel.app for the time being.

Project Link : https://github.com/Apfirebolt/next_games

Technologies Used : Next JS, Javascript, HTML, CSS, Tailwind CSS

This is a hobby project created in Nuxt JS to test the features of Nuxt and getting hands-on experience with the framework. The project utilises the Amiibo API to fetch data about various Amiibo figures.

This is some back-end changes

At the time of writing this post the project is deployed here :-

https://github.com/Apfirebolt/amiibo_api_database_in_nuxt

Project Link : https://github.com/Apfirebolt/amiibo_api_database_in_nuxt

Technologies Used : Nuxt, Javascript, Headless UI, Pinia

Another application I created on my journey of learn Sveltekit. It also uses one of my own APIs available on my API portal - softgenie.org. Some of the features of the app are:- 

- Created using Typescript for type validation.

- UI components powered by Tailwind CSS and Svelte animations.

- Displays data related to around 7k movies mostly from India only since that was the dataset which was originally used to feed the API.

Project Link : https://github.com/Apfirebolt/svelte-kit-movies

Technologies Used : Svelte Kit, Svelte, Tailwind CSS, Typescript

A "URL Shortener" project built with the MEVN stack provides a streamlined way to condense long URLs into shorter, more manageable links. It is one of the most common questions asked in system design interviews. Here's a concise overview of the project I created:

- Authentication with multi-user support using Cookie authentication.

- Add concise urls and visit those

- See a graphical analytics of number of visits of each link.

- There are bar, line, donut charts available to compare the number of times each saved link was opened. This has been done through charts js.

Express was used to create back-end with authentication and controllers, MongoDB was used as schema-less database. Front-end is built using Vue JS with Tailwind CSS behind the CSS utility classes.

Project Link : https://github.com/Apfirebolt/miniurl_mevn

Technologies Used : Vue, Express, Docker, MongoDB, Node, Nginx

Github has a public API available which gets user data and other important repository related info like number of stars, forks and more. I used this API to create a user and repository finder app in Vue. It lets you find users and view their details with 5 of their most starred repositories. Some of the other features include:-

- UI components written using Tailwind CSS.

- Custom animated modals purely written using transitions, no other libraries used.

- Light and dark theme can be toggled.

- Advanced pagination and animated loaders.

Project Link : https://github.com/Apfirebolt/vue-github-finder

Technologies Used : Vue, Tailwind CSS, Github, Docker, Kubernetes, Nginx

I was learning Sveltekit just to get a feel of how is it different than Nuxt and Next. I ended up creating some projects in it. This was one of them. It uses the API I created for games https://softgenie.org/api/games.

It displays information related to around 60K games on various platforms. The info includes fields like title, publisher, release date, official sell numbers in USA and Europe, critic score. This uses Sveltekit and built in animation utility provided by Svelte. It has file-based routing for seamless navigation across pages. It provides SSR with dynamic SEO tags such as title and description which boosts SEO page ranking. It has Tailwind CSS for styling and uses Typescript for type validation to minimize type-related errors before compilation. Please find some of the screenshots attached with this post

Project Link : https://github.com/Apfirebolt/svelte-kit-games

Technologies Used : Sveltekit, Svelte, Typescript, Tailwind CSS

Let me introduce you to this boilerplate I created for Next JS. This is supposed to aid me in bootstrapping my future Next JS projects. Why boilerplates are important, you ask? Please read on

In the field of software engineering, efficiency reigns supreme. Developers often find themselves repeating foundational tasks: setting up project structures, configuring build tools, or implementing common authentication flows. This repetitive work, while necessary, consumes valuable time and can lead to inconsistencies. This is where boilerplates become invaluable.

Boilerplates are pre-written code templates designed to standardize and streamline development. They encapsulate common patterns and configurations, allowing developers to jumpstart projects without reinventing the wheel. By isolating these repetitive elements, boilerplates drastically reduce setup time, enabling developers to focus on core functionality and unique features.

The benefits extend beyond time savings. Consistent project structures, enforced by boilerplates, foster maintainability and collaboration.

Standardized configurations minimize errors and ensure uniformity across projects. Essentially, boilerplates act as a foundation upon which developers can build robust and scalable applications, accelerating development cycles and promoting code quality. They are, indeed, an unsung hero of modern software engineering. This boilerplate is equipped with the following features:-

- An aesthetic UI with Tailwind CSS integration.
- Back-end connection using MongoDB and Mongoose, uses env file for storing credentials.
- API routes are written in Next JS inside API folder.
- Includes authentication both on front-end and back-end using Cookies and JWT.
- Next JS pages and components to get started.

Project Link : https://github.com/Apfirebolt/next15_auth_boilerplate

Technologies Used : Next JS, MongoDB, Mongoose, Tailwind CSS, JWT

An application to manage your revered users on Github. You can save repositories and users to your profile so you stay in touch with their updates. Application is built using Next JS, Postgres, Django, Tailwind CSS, Headless UI and various other libraries. Some of the striking features of this application are given below:-

- Contains cookie and JWT based authentication using Next JS and Django.
- For user and repository search, it is integrated with the Github API.

- See the user profile and top repositories of each user on their profile page.
- For CSS and dynamic components like modals Tailwind and Headless UI are being used.

- Can serve as boiler-plate for future Django and Next JS applications.

Project Link : https://github.com/Apfirebolt/next-github-repo-manager

Technologies Used : Django, Next JS, Tailwind CSS, Postgres, Headless UI

Built using React, this application shows data related to countries, provinces and cities. There isn't a lot of information available just the city and code. This has been built using React, Javascript, Tailwind CSS and Flowbite UI library. Docker script is included for Deployment using Nginx. For data it uses the following API:-

- https://countrystatecity.in/faq

Project Link : https://github.com/Apfirebolt/countries-and-states-database-app-in-React

Technologies Used : React, Docker, Nginx, Tailwind CSS, Javascript, Flowbite UI

A MERN application to manage your goals, be it for a day, week, month or even a year. As of now, this is just a simple to-do app with beautiful UI thanks to Material UI. Custom colours have been configured to be used in the theme. More features can be added in the future like sub-task generation of a goal accomplishment, adding reminders for the goals in case the end date is approaching and more. It can be used as a boilerplate for scaffolding MERN projects in future.

- Contains Docker deployment with Nginx script for a MERN app.

- Uses Material UI for UI components with custom colours.

- Auth and full CRUD operations on goals module.

- Uses React-redux with toolkit for state management.

Project Link : https://github.com/Apfirebolt/mern_goal_setter

Technologies Used : Express, React, Material UI, MongoDB, Javascript, Mongoose, Nginx, Docker

A MEVN application to manage your expenses, you can perform CRUD operations on expenses. You can view your expenses in a calendar view. It uses MEVN tech-stack, in place of React we use Vue here. The project has features like authentication, pagination, a good-looking UI using Tailwind CSS and has a huge scope for adding features like expense graph, expense limits and much more.

Project Link : https://github.com/Apfirebolt/expense_tracker_in_vue3_and_express

Technologies Used : Express, Vue, MongoDB, Tailwind CSS, Mongoose, Pinia, Headless UI

"Nuxt Fund Manager" is a web application built with Nuxt.js that helps users explore and track investment funds. It uses Tailwind CSS with custom theming for styling.

Here's a breakdown of its core features:

• Fund Listing: It fetches a comprehensive list of investment funds from an external API, providing users with a centralized resource for discovering available options.

• Search Functionality: A search feature allows users to quickly and easily find specific funds by name or other relevant criteria.

• Favorites: Users can save their preferred funds to their browser's local storage, enabling them to build and maintain a personalized list of investment options for future reference.

By leveraging Nuxt.js, this application benefits from features like server-side rendering, automatic code-splitting, and a file-based routing system, resulting in a performant and user-friendly experience. This makes it an efficient and convenient tool for anyone interested in exploring and keeping track of investment funds.

Project Link : https://github.com/Apfirebolt/Nuxt_fund_manager

Technologies Used : Nuxt 3, Vue, Tailwind CSS, API

An application created in React to view cryptocurrency-related information. You can view which coins are trending, the cryptocurrency exchanges available throughout the world and the prices of those tokens. Other features include:-

- Created in React and Typescript.
- Uses cryptocurrency data from Coingecko API, the API has stringent rate limits though.

- UI is powered by Tailwind CSS.

Project Link : https://github.com/Apfirebolt/crypto-gecko-react

Technologies Used : React, Typescript, API Integration, Tailwind CSS

Creating clones of popular applications is a great way of learning app development, design patterns and getting better in their practical applications.

Emailer is one of the recent projects I worked on which mimics some features of gmail. Emailer aims to provide a streamlined webmail experience, focusing on core functionalities while offering a modern and responsive user interface. This project demonstrates the potential of the MEVN stack in creating complex web applications and highlights the benefits of containerization for development and deployment.

Project Link : https://github.com/Apfirebolt/A-gmail-clone-in-mevn-stack

Technologies Used : Express, Vue, Mongo DB, Nginx, Docker

To enhance my desktop application development skills, I developed a Media Player using Python and PyQT5.

The Media Player has basic controls like a slider to move to any point in the video. There is a volume controller, you can also see file information related to a video. PyQT5 was used because it is rich in classes which are very useful for controlling multi-media contents like audio and video files.

Project Link : https://github.com/Apfirebolt/media_player_in_pyqt5

Technologies Used : Python, PyQt5

As a Software Engineer, I've mostly dealt with Web Applications. But recently, I felt the pull of uncharted territory: machine learning. Intrigued by the possibilities, I decided to embark on a project that combined my existing skills with this exciting new field. This minor hobby project aimed to predict the survival of passengers aboard the Titanic.

Why this topic?

The Titanic dataset is one of the most popular datasets available on Kaggle. It is often the first project of many ML enthusiasts try their hands on similar to "Hello World". The dataset is clean and clear with minimal modifications required in terms of missing values.

Why PyQt5?

I chose PyQt5 to create a user-friendly interface for my project. PyQt5 allowed me to build a graphical interface where users could input passenger details and receive a survival prediction. This not only enhanced the user experience but also provided a visual representation of the model's output.

Learnings from this project

I learned the basics of data cleaning, feature engineering, feature selection, model training and much more from my first elementary ML project

Completing this project gave me a sense of accomplishment and a newfound appreciation for the power of machine learning. It allowed me to merge my desktop app development skills with ML to create innovative applications.

Project Link : https://github.com/Apfirebolt/titanic_survival_prediction

Technologies Used : Pythion, Scikit-Learn, pyQt5

I created a code editor in Next JS. It is similar to many online code editors available and has support for languages like Python, Javascript, C#, Java and others. The formatted code is send to an API for validation. The result from this API is displayed in the window next to the code editor. Here's a concise overview of the project I created:

- Code editor with multiple language support.

- UI components powered by Tailwind CSS and Headless UI.

- Uses Monaco Editor package to initialize the code editor

- For code execution, this API has been used - https://emkc.org/api/v2/piston/execute 

Project Link : https://github.com/Apfirebolt/next_code_editor

Technologies Used : Next JS, Tailwind CSS, Headless UI

I believe creating clones of popular websites and applications is a very effective way of learning system design through practical applications. You might not be know what Redis is good at even with many years of experience under your belt. It could be possible that your project never used Redis. Building clones of let's say Youtube, Dropbox and more would allow you to have exposure to a wide range of tools and technologies. You'd appreciate the practical usage of these tools and would see how much improvement it brings to certain aspects of your application.

I built Quora clone to try some of these things and how they integrate in large-scale applications. There isn't a lot of stuff built with this clone, just the basic features are in place like authentication, the ability to post questions, answer questions posted by others, comment on answers, upvote and downvote for questions and answers. There is a huge scope of incorporating a lot of things with this basic prototype. For instance, machine learning algorithms can be applied to suggest users the questions they'd like to answer based on their past activity. 

Project Link : https://github.com/Apfirebolt/quora_clone_vue_and_django

Technologies Used : Django, Vue, Postgres, Tailwind CSS, Docker

One of those multiple projects I built in Sveltekit lately. This one uses OMDB API to display movies data. The API has generous rate limits. But you need to register on their site and obtain API key. There are some end-points only available for patreon or paid users.

It uses Sveltekit with Tailwind CSS and Typescript. This also contains back-end written in Sveltekit making use of it's powerful server-side features which allows to connect with databases and execute function calls on server. It has user authentication with ability to create playlists and add movies to it. Cookie-based authentication is used in this application.

Project Link : https://github.com/Apfirebolt/svelte-kit-imdb

Technologies Used : Sveltekit, Typescript, Mongoose, Tailwind CSS

This is a simple task scheduler in built using FastAPI and Vue. Below are the features of the application:-

- FastAPI is used at the back-end with postgres, Alembic and SQLAlchemy.

- Vue 3 is used on the front-end with Tailwind CSS

- Custom calendar using day.js, animations are added using AOS.

- Contains custom theme and is fully responsive for mobile.

- Does not contain authentication.

- Calendar and List view for tasks, list view also has sorting

Project Link : https://github.com/Apfirebolt/task-scheduler-in-vue-tailwind-and-fastapi

Technologies Used : FastAPI, Vue 3, Tailwind CSS, AOS, Postgres, Alembic, SQLAlchemy

Another app that I developed recently using Sveltekit. Sveltekit is just awesome ❤️ This app uses API provided by TV Maze to show the information related to TV shows, seasons, episodes, people behind the scenes in production and more. This is equipped with following features:-

- Get the schedule for TV shows based on date and country.

- Get info related to shows, seasons, people and more associated with a TV show.

- Search feature available for shows and people

- Uses Sveltekit with Typescript support

- Tailwind CSS with custom theme.

- Loaders and animations added using CSS animations and Sveltekit transition.

- Contains tons of images related to each show

Project Link : https://github.com/Apfirebolt/sveltekit-tv-maze

Technologies Used : Sveltekit, Typescript, API Integration, Tailwind CSS

SpaceX has a public API available which shows information related to missions they have launched, what ships were involved, launch dates and much more. You can find this API here :-

https://docs.spacexdata.com/

This application used this data to show it in a Vue SPA. It has multiple sections for the information available through this API. There is a page for missions, one for rockets and so on. This uses Vue 3, Tailwind CSS with custom colours, Headless UI for dynamic components and AOS for animations. It also contains some test cases written using Vitest.

Project Link : https://github.com/Apfirebolt/vue-spacex-launchpad

Technologies Used : Vue 3, Tailwind CSS, Vitest, Headless UI

A simple application created in React and Typescript which integrates Harry Potter API to show information from the Wizardry world:-

- Information related to students, teachers, houses and spells.

- Search feature available for staff and students

- Typescript using types for less error prone code and type ahead help when dealing with API data.

- Tailwind UI and custom themes used.

Project Link : https://github.com/Apfirebolt/react_harry_potter

Technologies Used : React, Typescript, Tailwind CSS, API Integration

I've been experimenting with Sveltekit a lot lately. In this process I've built few applications mostly integrating open APIs. This one uses Pexels API to display images and videos from Pexels. The API has generous rate limits. 

It uses Sveltekit with Tailwind CSS and Typescript. This is slowly turning out to be my new favourite front-end stack giving touch competition to Vue. Custom colors are used and in-built svelte transition is used for applying animation.

Project Link : https://github.com/Apfirebolt/sveltekit-pexels-gallery

Technologies Used : Svelte, Sveltekit, Typescript, Tailwind CSS

This web application integrates with the API provided by cocktails DB. They have a generous free plan that allows you to consume some of their end-points without the API key. While creating this application detailed attention was given to user interface with features like animation, interactive mobile menu with mobile-first responsive design. This was achieved using Tailwind CSS. Some of the other features include:-

- Created in Typescript and Svelte Kit.

- UI components powered by Tailwind CSS.

- Displays cocktail information with the ability to search for cocktails, you can also see categories, glasses and ingredients and filter cocktails based on these parameters.

- Get a random cocktail inside a beautiful modal, animation feature implemented without using any external libraries.

- Built-in Svelte stores for data management.

Project Link : https://github.com/Apfirebolt/svelte-tailwind-cocktails

Technologies Used : Svelte Kit, Svelte, Typescript, Tailwind CSS