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

This project's main purpose, besides being a portfolio, was to try a full suite of tools with NextJS (a full-stack React framework) with TypeScript. The end-user will be able to navigate around the website to look at projects that the hobbyist created. Components include individual sections that make up the detailed project pages like showing a gallery of technology stacks (showing a logo and a link to the official page), and an image gallery showing the project in various screen sizes separated in a tab panel.

Instead of using a database, there is a folder of Markdown files that will make up the project listing. Using metadata, in the Markdown files with Gray Matter, this will show all the information of that project and be displayed onto the website. This is all being handled with using a library of functions to handle retrieving all posts or an individual post. This is to reduce costs for the project by setting up a database instance.

Testing was done with the various components using Jest for most of the unit testing including component testing with the React Testing Library. This is followed with Cypress to handle the integration testing. With some additional programming and fake data and posts; all the integration testing will not be fragile and not have to rely on actual data to make the proper testing. Before each Git branch merges from a pull request; GitHub Actions are set up to perform test checks to make sure that all are passing before it goes to the develop branch.

Utilizing GitHub issues and projects to keep track of tasks to be completed to make sure that nothing will be forgotten for later implementations.


React Markdown

This is my portfolio that show cases all of my projects from personal to professional (if allowed).

Logo of SASS or Syntactically Awesome Stylesheets

Syntactically Awesome Style Sheets (SASS)

Next JS

Logo of Contentful, the very headless CMS being used.

Contentful

Bulma

Font Awesome

Markdown

Jest

Testing Library

Cypress

Logo of GitHub Actions by GitHub and Microsoft

GitHub Actions

Portfolio

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). 

Express JS

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

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