INTRO
WORK
ABOUT
RESUME
CONTACT

Projects

Menu
WhichAni.me

A web app made for sharing and creating anime lists. Generate randomized anime lists based on your preferences!

The answer to "Any anime recs?" and "What's your fav anime?"

Details

WhichAni.me

Languages: Python, HTML, CSS, JavaScript, SQL

Technologies: Flask, Bootstrap 5, Jinja2, PostgreSQL, SQLAlchemy, Flask-WTF, Flask-Session, Flask-Mail, Bcrypt, jQuery

  • Full stack application built using Flask framework
  • Created a system to generate randomized anime lists based on user preferences
  • Retrieved anime information from public Jikan.moe API, allowing access to MyAnimeList synopses and cover images
  • Set up a relational database to host user accounts, lists and likes using PostgreSQL
  • Hosted database on ElephantSQL, creating a backend database to store and pull data from the frontend Python/Flask framework
  • Used Bcrypt to authenticate and authorize users, providing an encryption method to manage storage of sensitive user passwords in our database
  • Built front-end with Bootstrap 5 framework to create mobile-friendly UI
  • Used Jinja2 to create dynamic HTML pages that could respond to information retrieve from backend database
  • Tested routes and SQL models with Python unittest library to ensure functionality throughout changes during development
  • Set up an account recovery system safeguarded by recovery tokens, using Flask-mail to message user emails links to password reset access

Discord Spelling Assistant

A discord bot made to help with correcting typos.

A bot I made for fun to help correct my friend's frequent typos. Originally server based, I didn't want to keep it on all the time so I learned to utilize Amazon's Lambda service and connect a Discord bot to it by having the bot communicate with code on AWS Lambda, allowing users to interact with this bot via slash commands 24/7.

Details

Discord Spelling Assistant

Languages: Python, TypeScript

Technologies: Python, Discord.py, Amazon Lambda, Amazon CDK, Flask

  • Discord bot made using discord.py and discord-interactions libraries for Python
  • Hosted interactions backend on Amazon Web Services

Jobly

A web app designed to allow you to look up and apply to jobs for different companies.

Details

Languages: JavaScript, HTML/CSS, SQL

Technologies: React, Reactstrap, Express, Node.js, and more...

  • Full stack application built using Express (Backend) and React.js (Frontend)
  • Built frontend UI using Reactstrap, allowing UI to be mobile friendly
  • Tested and maintained React component integrity using Jest testing framework
  • Managed user states by utilizing localStorage space and React hooks, allowing for a dynamic experience where certain routes are only accessible with an account (protected routes)
  • Implemented a search feature that allows users to filter my company and job name (improved UX)
  • Set up a Postgres database on Vercel and seeded database with job/company information for demo usage
  • Set up backend and frontend seperately on Vercel, having the frontend make API calls to the backend to achieve a fully functional full-stack app

Promptopia

A feed website to share prompt messages for AI technology.

Details

Languages: JavaScript

Technologies: React, Next.js, NextAuth, TailwindCSS, Mongoose

Demo app I built to familiarize myself with Next.js.
  • Full stack application built with Next.js framework
  • Set up external relational database utilizing Mongoose to store app data (users, posts, tags) on backend MongoDB database
  • Used NextAuth to allow user creation via Google authentication, permitting visitors to sign up with Google accounts and create posts
  • Built mobile-friendly UI for app using TailwindCSS in React components

Warbler

Note: The site is hosted on a low-resource server so you may experience some lag, especially on enter.

A Twitter(X?) clone.

Details

Languages: Python, CSS, HTML,

Technologies: Flask, Bootstrap, PostgreSQL, SQLAlchemy, Bcrypt, Jinja2, unittest, Flask-WTF

  • Full stack application built with Python using Flask framework
  • Set up a relational database to host user accounts, messages and likes using PostgreSQL
  • Hosted database on ElephantSQL, creating a backend database to store and pull data from the frontend Python/Flask framework
  • Used Bcrypt to authenticate and authorize users, providing an encryption method to manage storage of sensitive user passwords in our database
  • Built front-end with Bootstrap framework to create mobile-friendly UI
  • Used Jinja2 to create dynamic HTML pages that could respond to information retrieve from backend database
  • Tested routes and SQL models with Python unittest library to ensure functionality throughout changes during development
HackOrSnooze

A Hacker News clone.

Details

Languages: JavaScript, CSS, HTML

Technologies: jQuery, Axios

A Hacker News clone, aiming to replicate the functionality.

Users have traditional login/signup functionality as well as the ability to make posts sharing articles. Calls are made to and from an external API to show stories from others and those uploaded by the user. Users can also favorite stories as well as see ones they have submitted.

This work represents one of my first integrations of API into web development.

Meme Generator

A meme generator that applies custom top and bottom text to an image of your choice, dynamically loading them onto the page.

Details

Languages: JavaScript, CSS, HTML

An early project made to test out what I learned on utilizing JavaScript to handle events, manipulate the DOM, and generate dynamic content.

MEMORYxGAME

A memory game with SPYxFAMILY assets. Cute, right?

Details

Languages: JavaScript, CSS, HTML

An early project I made on static pages to put into practice what I learned on using JavaScript to add functionality to my pages built with HTML/CSS.