Apgiiit.com

This is my first post in 2022. Wish you all a very new happy new year! That being written, let's discuss more about the project. I found this open source API on Github AOE 2 API in Flask

Age of Empires has a special place in my heart since it was the very first full fledged PC game I played on my first ever PC. The application itself does not have much to offer in case you're not familiar with the universe of Age of Empires. I wanted to experiment with various components Material UI has for React and thus this project came into existence. This also has Docker deployment script which uses Nginx. I also deployed it on Heroku using React buildpack someone made on Github.

This project also has a detail page, uses React router V6 for routing and custom styled Material UI components. Style inspiration has been taken from the color palette of W3Schools. The project is nearly complete, but in case I decided to revisit it, I might want to implement searching and filtering on various parameters.

Technologies

Home Page

Structures List

Game Technologies

Civilizations

A pokemon database app created in Vue using Tailwind CSS. Yes, yet another project in Vue and Tailwind CSS. I feel like my profile is kind of skewed towards Vue and Tailwind. I can't help though, since these technologies are awesome and my preferred choices for Front-end applications. Anyways, about the app it is a SPA written in Vue as mentioned earlier and utilizes https://pokeapi.co API for fetching pokemon related data. The source code is available on Github and it uses Django framework in Python.

I was addicted to pokemon Games during my school days, used to have emulators on my PC which were used to simulate GBA (Gameboy Advance) and GB (GameBoy) games on my PC. This surely had role to play in igniting my interest in pursuing this min project. The original project is around an year old, but recently has gone through some UI changes. The app has pages for pokemon, items and moves available in the Pokemon universe with detail pages for each of them. It uses modals, tables and other UI components from Tailwind CSS. Please do play around with it, fork it and leave a star if you wish to. Could be a nice playground to hone your Vue and Tailwind CSS skills with open API integration.

Technologies

Homepage

Pokemon Detail

Move Detail

Loader

Pokemon List

A single page application which integrates with the open API provided by https://www.thecocktaildb.com/api.php. It contains Mocktail recipe related information around the world including images, ingredients used, whether it is alcoholic or not and more.

The app is made in my favorite Frontend stack which is Vue + Tailwind. For the time being it is live here on Heroku https://vue-cocktail-db.herokuapp.com/. Heroku is easily one of the best and easiest cloud platforms to deploy Vue JS apps for a beginner if not the easiest. Aside from Heroku deployment, the repo also has a script for Docker deployment of this application using your own server. This project was part of hiring process for a start-up, that's how this came into existence. There is nothing much aside from what's already been mentioned in this project, a simple SPA with open API integration coupled with deployment script. Please find few screenshots of the app below.

Technologies

Cocktail List

Cocktail Detail

Search Menu

Homepage

Search results