ABOUT ME

A work in progress e-commerce site, running on Next.js

Allows the client to CRUD (Create, Read or get, Update, and Delete) blog posts in the form of virtual art lessons, or sales/store updates. The post content can be written and displayed styled thanks to React-Quill. These posts, as well as the products and orders, are stored in MongoDB.
Client can also CRUD products, with each product having a complex data structure. Upon creating a product, the client can give it multiple prices and/or additional options, all which allow for adding images that associate with each option. When viewing the page and adding to cart, the chosen options appear in the image viewer.
This site utilizes the SEO features of Next.js, with each page having custom "head" properties. It also implements server side rendering with getServerSideProps(), allowing for static page generation.
I've developed this with mobile-first pattern, which means that it is mostly responsive. Being a WIP, I am not finished with the app yet. This is currently deployed for free to Vercel, is mostly functional and can be viewed/tested by clicking the website icon.

Website

GitHub Repo

A Flask app that helps Catholics prepare for confession.

Users select from a list what applies to them, and can add custom list items. These two lists are stringified, and encrypted before entering the MySQL database.
Upon loading the page, the data is decrypted and parsed through.
Validations are done using AJAX, and users do not have to login in for the list to save to session. This allows for users to leave the page without worrying that the list will clear. There is a button to clear the list manually.
Deployed via AWS EC2 for better scalability and security, added SSL using CertBot, and routed a Google Domain to the elastic IP address, incase the instance server needs to be moved/updated.

Website

GitHub Repo

Nostalgia Red

An app that emulates my childhood. Made using the Pokemon API, and React.js.

Makes calls to the poke api using Axios.
Multi-layered CSS to imitate the screen of a DMG, where there are shadows on what appears on screen, with a slight glare in the plastic.
Use of a custom button component that fetches the list of Pokemon when clicked, and serves as a "Go Back" button.
Pausible audio plays in the background, and sound effects for clicking on links - both match what it sounds like in game on an actual DMG.

Website

GitHub Repo

A full stack study app made using React for snappy functionality, and styled with Bootstrap and custom CSS.

Completed in a group employing the Agile Development cycle and daily scrum meetings, which helped us visualize our goals and keep track of the projects moving parts.
Includes CSS animations for loading periods.
Deployed via AWS EC2 instance for better security and scalability. The demo is live and functional - try it out!

Video Demo

GitHub Repo

An app that let's your browse the Star Wars API, found here. This was built using React.

Select the category, and the id to produce a card with that information.
Built with a dynamic background and customized bootstrap.
API calls are made using Axios, which allows for easier readability and use.
This app is deployed on my GitHub, and can be visited through the website link below.

Website

GitHub Repo

This is an operational 4 function calculator, made using HTML, CSS, and JavaScript. It is styled after an old Casio MS80-B.

When the equation produces too high a number for the display to contain, "too long!" is shown.
If an equation has a large string of decimals, the amount displayed on the right is determined by the space to the left of the decimal.
The calculator can also be moved around the screen.