Skip to main content

My Projects

A showcase of my technical projects and development work

Castle Adventure Game

A text-based adventure game built using Object-Oriented Programming principles in JavaScript. The game features a modular architecture with separate classes for rooms, items, and characters, demonstrating clean code organization and inheritance patterns.

JavaScript OOP HTML5 CSS3 Game Dev

Technical Implementation:

  • Implemented using ES6+ JavaScript classes for game objects
  • Utilized inheritance for shared functionality between game entities
  • Created a state management system for tracking game progress
  • Implemented input validation and error handling
  • Used event listeners for user interactions
  • Designed a modular architecture for easy expansion

Key Features:

  • Multiple interactive rooms with unique properties
  • Inventory system with item management
  • Character interactions with dialogue trees
  • Combat system with weapon requirements
  • Puzzle-solving mechanics with state tracking
  • Save/load game functionality

Cipher Encoder/Decoder

A secure message encryption tool implementing the Caesar Cipher algorithm with an enhanced rolling key feature. Built with vanilla JavaScript, this project demonstrates strong understanding of string manipulation, algorithm implementation, and real-time user interaction handling.

JavaScript Algorithms HTML5 CSS3 Cryptography

Technical Implementation:

  • Implemented custom rolling key algorithm for enhanced security
  • Created real-time encryption/decryption with event listeners
  • Developed input validation and sanitization system
  • Built modular functions for different cipher operations
  • Implemented error handling for edge cases
  • Used modern JavaScript features for string manipulation

Key Features:

  • Real-time encryption and decryption
  • Custom rolling key implementation
  • Input validation and error handling
  • Responsive design for all devices
  • Copy to clipboard functionality
  • User-friendly interface with clear feedback

Game Review Website

A responsive game review platform built with pure HTML and CSS, demonstrating strong front-end development skills. The project showcases semantic HTML structure, CSS Grid and Flexbox layouts, and responsive design principles without relying on frameworks.

HTML5 CSS3 Responsive Design Semantic HTML GitHub Pages

Technical Implementation:

  • Built with semantic HTML5 for better accessibility
  • Implemented responsive design using CSS media queries
  • Used CSS Grid and Flexbox for modern layouts
  • Created custom animations and transitions
  • Optimised images for web performance
  • Deployed using GitHub Pages

Key Features:

  • Responsive design for all devices
  • Semantic HTML structure
  • Accessible navigation
  • Optimised images
  • Clean, modern design
  • Fast loading times

Star Wars Trivia Quiz

An interactive quiz application built with vanilla JavaScript, featuring a dynamic question system, score tracking, and themed UI elements. The project demonstrates strong DOM manipulation skills, event handling, and state management without external libraries.

JavaScript DOM Manipulation HTML5 CSS3 Tailwind CSS

Technical Implementation:

  • Built with vanilla JavaScript for core functionality
  • Implemented dynamic question loading and randomization
  • Created a custom timer system with countdown functionality
  • Developed score tracking and high score system
  • Used event delegation for efficient event handling
  • Implemented responsive design with Tailwind CSS

Key Features:

  • Timed questions with countdown timer
  • Randomized question order
  • Score tracking and high score system
  • Star Wars themed UI elements
  • Responsive design for all devices
  • Interactive feedback system

Open Source Testing Setup

A comprehensive testing infrastructure for open-source projects, featuring Jest, Cypress, and GitHub Actions integration. This project demonstrates advanced testing methodologies, CI/CD practices, and automated quality assurance workflows.

JavaScript TypeScript Jest Cypress GitHub Actions

Technical Implementation:

  • Configured Jest for unit and integration testing
  • Set up Cypress for end-to-end testing
  • Implemented GitHub Actions workflows for CI/CD
  • Created custom testing utilities and factories
  • Integrated code coverage reporting
  • Set up automated test runs on pull requests

Key Features:

  • Comprehensive test suite setup
  • Automated CI/CD pipeline
  • Code coverage tracking
  • Cross-browser testing support
  • Custom testing utilities
  • Documentation and best practices

Weather App Full Stack Project

A robust full stack weather application built with Node.js, Koa, and a modern frontend. Features real-time weather and forecast data, RESTful API endpoints, error handling, logging, rate limiting, and comprehensive automated testing.

Node.js Koa JavaScript CSS Cypress Jest GitHub Actions Docker

Technical Implementation:

  • Node.js backend with Koa for RESTful API endpoints
  • Frontend for weather and forecast display
  • Error handling, logging, and rate limiting
  • Comprehensive automated testing with Jest and Cypress
  • Continuous integration with GitHub Actions
  • Dockerized for easy deployment

Key Features:

  • Fetch current weather and 7-day forecast by city or coordinates
  • Health check endpoint
  • Error handling and logging (Winston)
  • Rate limiting and security middleware
  • Automated tests and code coverage
  • Modern, responsive UI

Movies API

A RESTful API for movie data, built with Node.js, Express, and MongoDB. This project demonstrates backend development, API design, and database integration for a scalable movie information service.

Node.js Express MongoDB REST API Backend

Technical Implementation:

  • Node.js backend with Express for RESTful endpoints
  • MongoDB for persistent data storage
  • CRUD operations for movies, directors, and genres
  • API documentation and error handling
  • Deployed on Render for public access

Key Features:

  • Get, add, update, and delete movies
  • Filter by director, genre, or title
  • Robust error handling and validation
  • API documentation for easy integration
  • Scalable and secure backend

Backend Environment and API Structure

An open-source Node.js/Express backend environment template with comprehensive API structure, testing setup, and development tools. Features a robust foundation for building scalable backend applications with best practices and modern development workflows.

Node.js Express Jest ESLint Prettier Husky

Technical Implementation:

  • Express.js backend with modular architecture
  • Comprehensive testing setup with Jest
  • Code quality tools (ESLint, Prettier)
  • Git hooks with Husky for pre-commit checks
  • Environment configuration management
  • Error handling and logging middleware

Key Features:

  • Ready-to-use backend development environment
  • Automated testing and code quality checks
  • Standardized API structure and error handling
  • Development workflow automation
  • Comprehensive documentation
  • MIT licensed for open-source use

Event Management App

A full-stack event management application built with Next.js and Express/MongoDB. Features user authentication, event creation, management, and a modern, responsive UI. Demonstrates full-stack development skills and team collaboration.

Next.js Express MongoDB JWT Full Stack Team Project

Technical Implementation:

  • Next.js frontend with modern React practices
  • Express.js backend with MongoDB integration
  • JWT authentication for secure user management
  • Protected routes and API endpoints
  • Responsive design with modern UI components
  • Git hooks with Husky for code quality

Key Features:

  • User registration and authentication
  • Create, view, edit, and delete events
  • Protected routes for authenticated users
  • Modern, accessible UI design
  • Real-time event management
  • Team collaboration features

FriendBay Social Media Platform

A modern social media platform built with Next.js, React, and TypeScript. Features local-only data persistence for privacy, allowing users to create, edit, and interact with posts that are stored locally on their device. Demonstrates full-stack development with modern React practices and responsive design.

Next.js React TypeScript Tailwind CSS Local Storage Social Media

Technical Implementation:

  • Next.js 14 with React 18 for modern frontend development
  • TypeScript for type-safe development and better code quality
  • Tailwind CSS for responsive and accessible UI design
  • Local storage for private, device-only data persistence
  • Component-based architecture with reusable React components
  • Unit testing with React Testing Library and Jest

Key Features:

  • Create, edit, and delete posts with rich content
  • React to posts with like, love, and laugh reactions
  • Search functionality for posts by username or content
  • User profiles with customizable avatars
  • Local-only data storage for complete privacy
  • Responsive design optimized for all devices

Privacy-Focused: All posts and data are stored locally on your device only. No shared content or external data storage.