A simple, silly project that I wanted to create as myself and my wife like to "make a bet" if something happens. Sometimes, we both tend to forget what we want to win if one (or both) of us won a bet for "something something".

How it works is I create a bet with a stipulation; for example, if one of our cats do a trick. Then I write down our answers such as "I believe the cat will not be able to perform the trick" and my wife would answer "My kitty will perform the trick!" Finally, we add what we like to receive if either or both of us won the bet before a deadline.

After the bet has been fulfilled or the deadline reach, the bet is ready to be completed where I select which one of us won the bet and the bet is completed and can no longer be updated afterwards.

Hypertext Markup Language (HTML 5)

Cascading Style Sheets (CSS 3)

ECMAScript (JavaScript)

React JS

TypeScript

Vite

Logo of NodeJS. Please refer to the guidelines when using this image.

https://nodejs.org/en/about/resources/

NodeJS

Fastify

Docker

PostgreSQL

I Bet App

One of my hobbies is playing board games, and Keyforge is a mix between trading card games like Magic The Gathering (same designer) and board games. Instead buying individual packs or single cards, you buy a deck, and that is all you need.

This is a very simple front-end only application with local storage being the data repository. Not much in the way of visualization, but it does the job well. This utilizes the Keyforge API (ala Master Vault, a repository of decks a player collected and scanned) to retrieve the name of the deck, and other elements. 

The simple purpose for this application is to print a sheet of labels for deck boxes from a company named Burger Token. The labels were measured to be applied at the top of these simple, plastic deck boxes for easy management.

This is the (basic) view of the web app labeler. At the center is the deck labels currently imported. Top right is the remaining decks that can be imported for an A4 sheet. Bottom left is the clear button once I want to start a new sheet, and finally the upload button at bottom right.

This view shows the simple upload form modal where I apply a URL link of the deck in the game's repository (ala Master Vault). Then it takes the properties of the deck to fulfill the label.

A simple application to print labels for Keyforge decks with Burger Token perfect-fit deck boxes.

Keyforge Burger Token Labeler

SHELF is an ebook library repository that displays all of my ebooks from a server with a friendly graphical user interface (GUI). 

This is my first attempt at the MERN stack: MongoDB, Express.js, ReactJS, and NodeJS. Basically, the front-end would be ReactJS while the backend composes of NodeJS using the Express.JS framework to make it a REST API application, and the main database is a NoSQL, Document-based MongoDB. With this project, for the front-end, I did not use any front-end library (see Bootstrap, Bulma, Chakra, etc...) and all of the components are all custom made. 

When someone navigates around the web application it is broken down into three sections: the breadcrumbs, the directories, and the books. Each section can be displayed in different formats by the choosing of the user: links (breadcrumb only), list view, and tiles. Tiles gives off the most graphical representations as it shows the book covers (right now for just PDF ebooks). List view does show some icons, but to give it the best look I would recommend tiles.

The back-end did bring in an opportunity to use a testing framework, so I decided to use Mocha with Chai. This allowed me to make sure the REST API will give the desired results when scanning through the filesystem, on the server, and to check if the books may already exist in the MongoDB database otherwise just ignore it.

I did had to use a PDF library, thanks to Mozilla, to retrieve the cover of the ebook (normally the first page). This one proved to be one of the most challenging aspects to the program. Sadly, I have not gone far into retrieving the cover image from epub files.

Canvas

CORS

.env

PDFJS by Mozilla

Chai As Promise

Chai HTTP

Chai String

MongoDB Memory Server

SHELF is an eBook library repository that displays all of my ebooks from a server with a friendly graphical user interface (GUI). 

Logo of SASS or Syntactically Awesome Stylesheets

Syntactically Awesome Style Sheets (SASS)

Font Awesome

Express JS

Logo of MongoDB. Please refer to the guidelines when using this logo.

https://www.mongodb.com/brand-resources

Jeremy Trpka

"I type stuff and magic happens."

I Bet App

Keyforge Burger Token Labeler

SHELF