Miniplay Arcade

A web application featuring classic games with modern features

Timeline January 2025 - May 2025
Team Lea Karsanbhai, Jessica Webb
Role Full Stack Developer
View GitHub Repository →

Project Overview

MiniPlay is an arcade web application featuring classic games including Hangman, Tic-Tac-Toe, and Rock Paper Scissors. The platform includes user authentication and a competitive leaderboard system, designed as a scalable foundation for future game additions.

JavaScript HTML/CSS Frontend Development Game Design Database Integration User Authentication Agile Development

Initial Design & Planning

Software Design Principles

Throughout the development of MiniPlay, we used an agile approach to match the scope of this project. Key principles included:

  • Incremental Planning: Scheduled increments matched with team availability
  • Embracing Change: Adapted implementations to fit project scope and improve UX
  • Simplicity: Kept UX/UI simple to create a "simple distraction" for users
  • User-Centered Design: Focused on accessibility and ease of navigation
System architecture diagrams and user flow
Game design sketches and component planning

System Architecture

The diagrams for MiniPlay were designed to structure the flow of the website so users and future developers can understand functionality with ease. Main flow points include:

  1. Sign up/login page for user authentication
  2. Rock Paper Scissors game with scoring
  3. Hangman with dynamic visuals and hints
  4. Tic-Tac-Toe with strategic gameplay
  5. Leaderboard for competitive tracking

Technology Stack

MiniPlay was built using modern web technologies with a focus on scalability, collaborative development, and engaging user experiences.

Frontend Development

  • JavaScript for game logic and interactivity
  • HTML5 for semantic structure
  • CSS3 for responsive styling and animations
  • Custom graphics created with Adobe Creative Cloud
  • Interactive UI elements with hover effects

Backend & Database

  • Database integration for player information
  • User authentication system
  • Leaderboard functionality with score tracking
  • GitHub for version control and collaboration
  • Open-source licensing for future development

Game Features

Rock Paper Scissors

The main focus for the Rock Paper Scissors game was to create a non-static interactive experience for this classic game. This implementation includes:

  • Interactive hover buttons for user's choice
  • Displayed text for user and computer choice
  • Random computer choice generation
  • Dynamic custom graphics for engaging gameplay
  • User scoretracker with persistent data

Hangman

The main focus of the Hangman game was to engage users in this word-guessing game by adding the classic Hangman visuals and assisting users in guessing the correct word. Features include:

  • Dynamic Hangman visual that updates with each incorrect guess
  • Dynamic character buttons that disable after selection
  • Hint feature to assist players
  • User scoretracker with win/loss tracking
  • Word bank with varying difficulty levels

Tic-Tac-Toe

The main focus of the Tic-Tac-Toe game was to engage users by allowing personal strategy and smooth visuals to ensure easy gameplay. The implementation includes:

  • Dynamic player choices with visual feedback
  • Interactive grid with hover states
  • Win detection algorithm
  • User scoretracker with persistent statistics
  • Reset functionality for continuous play

Final Outcome

MiniPlay Successfully Delivers:

  • Three fully functional interactive games
  • User authentication and profile management
  • Leaderboard system for competitive play
  • Clean, accessible navigation
  • Scalable architecture for future game additions
  • Responsive design for mobile and desktop

The platform provides an engaging user experience while maintaining simplicity and accessibility, ready for expansion with additional games and features.

MiniPlay Final Outcome Dashboard

Project Reflection

This project strengthened my experience in full-stack web development, collaborative coding with GitHub, implementing game logic with JavaScript, and creating engaging user interfaces. The agile development approach allowed us to adapt to challenges and deliver a polished final product that prioritizes simplicity and user experience. Working with a teammate enhanced my ability to communicate technical decisions and merge different coding styles into a cohesive application.

View GitHub Repository →

Next Project

PortfoiAI Website Development