Starsweeper

Link to project: starsweeper.space Link to GitHub repo: jkrajcir/starsweeper
Starsweeper
Starsweeper leaderboard

What is Starsweeper?

Starsweeper is a recreation of the game Minesweeper.

Starsweeper features include:

  • 3 game difficulties:
    • Easy difficulty has a 9x9 board with 10 stars
    • Normal difficulty has a 16x16 board with 40 stars
    • Hard difficulty has a 30x16 board with 99 stars
  • Personal best time tracking
    • This is tied to your browser
  • Leaderboard for top 10 times over various date ranges
    • Grouped by difficulty
    • Date ranges are: Today, Last 7 Days, Last 30 Days, Last Year, and All Time

Why was Starsweeper Made?

I had a knack to implement Minesweeper, and I also wanted to learn how to use Vue.js, so I put some time into these two desires and created Starsweeper. While developing Starsweeper, I thought of adding a leaderboard feature. I used this as an oppurtunity to learn a "simpler" cloud platform(previous personal project experience using Azure), and decided on DigitalOcean's App Platform to host and manage the SPA, serverless functions, and DB.

Tech Used to Build and Run Starsweeper

The Starsweeper source code is organized as a monorepo containing three projects:

  • common - contains code used by both client and serverless projects, mainly DTO schema declaration and validation functions
  • client - contains Vue.js single-page application
  • serverless - contains serverless functions

All three projects are implemented using TypeScript and uses Prettier for formatting and ESLint for static analysis.

client project

  • Vite front-end tooling
  • UI built using Vue.js SFCs with CSS/SCSS styling
  • Pinia for state management
  • Icons from Remix Icon
  • Favicon from favicon.io

serverless project

  • DigitalOcean Functions for serverless back-end
  • Rollup for bundling a serverless function
  • Two functions for leaderboard feature:
    • get-leaderboard-entries - gets leaderboard entries from database
    • save-new-top-time - saves new top time to database if player placed on leaderboard

Database

  • DigitalOcean Managed Database to host PostgreSQL 15 cluster

Infrastructure

  • GitHub Actions for CI workflows for both client and serverless projects
    • CI build runs on pull requests if there are changes in either respective projects
  • DigitalOcean App Platform to host and manage client, serverless functions, and database under one app
  • Deployed using DigitalOcean App Platform's automatic deployment

TODO items

  • Setup test suite
  • Add loading indicators for UI that corresponds with serverless functions
  • Issues in GitHub repository
Projects