My Projects


Here are some of the web-based projects I've worked on during my journey in computer science. Click on each block to see the project!

Vue To-Do List App Preview

Vue To-Do List Application

A dynamic to-do list app built using the Vue front-end framework, featuring reactive state management and seamless user interaction. Users can add, edit, delete, and mark tasks as complete or active. The app supports categorization of tasks and dynamic filtering.

  1. Reactive Vue instance managing to-do items and UI panel visibility
  2. Dynamic category drop-down menu populated from a reactive object
  3. Two-way data binding for form inputs with validation and error handling
  4. CRUD operations on to-do items, including unique ID generation and visual state updates
  5. Persistent storage of the to-do list via PHP backend API using JSON and AJAX requests
  6. Category filtering system to display tasks by selected category or show all by default
Chatroom App Preview

Discord-Inspired Chatroom

A multi-user chatroom modeled after Discord, built using PHP, JavaScript, HTML, and CSS. While not truly real-time, it mimics real-time communication using long polling to frequently check for new messages. Messages are stored and retrieved from an SQLite database, and users can interact through public messaging and a set of custom system commands.

  1. SQLite3 database for persistent message storage with auto-incrementing ID and timestamps
  2. api.php handles all backend commands via GET/POST, including savemessage and getmessages
  3. Users can register and log in with basic credential validation against a separate user table
  4. Implements private messages via system commands like /help and invalid command detection
  5. /magic8ball QUESTION pulls a random response from a static JSON file and broadcasts it with proper formatting
  6. /coinflip flips a coin server-side and stores the result in a new database table
  7. /coinfliphistory [n] fetches the most recent n coin flips, validating input and displaying counts of heads and tails
Movie Database Preview

Movie Database

A simple yet functional web-based movie database using PHP, HTML, and CSS. Users can add, view, delete, and search records from an SQLite database through intuitive forms and a clear interface. This project demonstrates full CRUD (Create, Read, Update, Delete) operations while following secure file-handling and data validation practices.

  1. SQLite database with at least three columns (e.g., title, year, and genre for a movies table)
  2. index.php displays all records and includes navigation links to add and search pages
  3. add_form.php contains a form for inserting new records with field validation
  4. add_save.php handles form submission and writes validated data to the database
  5. search_form.php allows keyword search and displays matching results
  6. delete.php enables record deletion with confirmation and result messaging
  7. All data securely stored in a non-public folder and accessed via absolute path in PHP
Simpson Quiz Preview

Which Simpson Character are you?

A fully server-side quiz application built using PHP and HTML/CSS without any JavaScript. Users answer a series of questions and submit their responses to be processed and stored on the server. The system saves user results in a text file, tracks prior responses using cookies, and provides an aggregate results page showing the popularity of each outcome with dynamic bar charts.

  1. Quiz form with at least 4 questions and input validation done entirely in PHP
  2. Server-side processing of quiz results, with error handling and user feedback if any question is unanswered
  3. Storing of quiz submissions in a server-side text file and setting cookies to remember user results across visits
  4. Results page displays total submissions and bar charts representing percentage breakdowns of quiz outcomes using pure PHP and CSS
  5. Option for users to retake the quiz which resets their cookie and restarts the process
  6. All functionality implemented without any JavaScript, ensuring server-side control over all logic and display
Gotta Catch 'em All! Preview

Gotta Catch 'em All!

This is an interactive Pokémon-themed browser game built with HTML, CSS, and JavaScript. Players start with 5 Pokéballs and try to catch Pokémon by clicking on one of three grassy patches. Each grass hides either a Pokémon, more Pokéballs, or nothing at all. The game updates inventory counts and ends when the player runs out of Pokéballs. Extra features include result history tracking, super item events, and visual reveals of all hidden items per round.

  1. Interactive gameplay with click-based patch selection and inventory updates
  2. Random Pokémon and Pokéball placement every round using JavaScript logic
  3. Result history panel showing past round outcomes in reverse chronological order
  4. Super item mode that occasionally introduces rare rewards and displays a special message
  5. Reveals all three patch contents after selection, using image opacity to indicate unchosen options
Hogwarts Map Builder Preview

Hogwarts Map Builder

This is a web-based "level editor" that allows users to create custom Hogwarts-themed maps using a tile-based layout system. Built with HTML, CSS, and JavaScript, the tool uses 32x32 pixel tiles that can be selected and placed on a 10x10 grid to form unique layouts for fictional game environments.

  1. Two-column layout: 10x10 tile map grid on the left, full tile selection panel on the right
  2. Uses image array logic to dynamically populate selectable tiles from a given tile set
  3. Click a tile from the right panel to mark it as active with a visual indicator
  4. Click any grid cell to paint it with the selected tile using the `backgroundImage` property
  5. Hover effect highlights grid cells to assist placement precision
Seasonal To-Do List Preview

Seasonal To-Do List

This is a dynamic web-based to-do list system designed to help users manage seasonal activities. Featuring a corkboard-inspired interface, the app allows users to filter tasks by season, add new notes, and view details including timestamps. It's built using HTML, CSS, and JavaScript with DOM manipulation for interactivity.

  1. Corkboard background layout with a two-panel structure: task grid and seasonal filter menu
  2. Interactive form for adding tasks with title, season, and description validation
  3. Dynamically created items with season-based colors and a hover-activated delete button
  4. Expandable item detail view showing title, season, description, creation time, and last accessed time
  5. Filter dropdown to display tasks by season or show all at once
  6. Each task can be marked as complete or incomplete, with a visual indicator and updated filtering options for completed status
Memory Match Game Preview

Pokemon Matching Game

A timed matching game that challenges users to quickly find pairs of hidden tokens before the clock runs out. Players start on an intro screen, then try to uncover pairs of matching images on a dynamically generated grid. The game records the fastest completion times, letting players compete for the top leaderboard spots by entering their names. Multiple difficulty levels and sound effects enhance the gameplay experience.

  1. Dynamic game board generation with 3 difficulty modes: Easy (3x4), Medium (4x5), Hard (5x6)
  2. Click tokens to reveal hidden images, with matching logic to keep pairs visible or hide unmatched pairs after a brief delay
  3. Timer tracks elapsed time during gameplay and stops when all matches are found
  4. Game over screen displays player's time and a leaderboard of the top three fastest scores stored in localStorage
  5. Leaderboard includes player names submitted via an HTML form on achieving a high score
  6. Sound effects for correct and incorrect matches to enhance user feedback
  7. Handles rapid or repeated clicks to prevent game logic errors
Randomized LEGO Uplifter Preview

Randomized LEGO Uplifter

This is a randomized dynamic webpage that brings positivity to your day! Built with HTML, CSS, and beginner-level JavaScript, this page gives you a cheerful greeting, a personalized lucky number set, a randomly assembled LEGO minifigure, and time-based background every time it loads. This project focuses on dynamic content rendering using document.write, basic conditionals, and array manipulation.

  1. Randomized motivational greeting with dynamic heading text
  2. Time-based background and customized greeting (morning, afternoon, etc.)
  3. Display of current time in 12-hour format
  4. Three unique lucky numbers generated based on user input
  5. Randomly combined LEGO minifigure (head + body)