Starsweeper

Table of Contents

1. What is Starsweeper?
2. Why was Starsweeper Made?
3. Project Structure and Tech Used to Build Starsweeper
4. How to Install and Run Client Project

---

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.

Project Structure and Tech Used to Build Starsweeper

This project is organized as a monorepo.

All Projects:

• Implemented using TypeScript
• Prettier for formatting and ESLint for static analysis

common Project:

• Project referenced by both client and serverless projects
• Contains mainly DTO schema declaration and validation functions

client Project:

• Vite front-end tooling
• Vue.js SFCs with TypeScript and SCSS
• 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:
  • get-leaderboard-entries
    • Gets leaderboard entries from Managed PostgreSQL cluster
  • save-new-top-time
    • Saves a new top time if player has placed onto the leaderboard

Database:

• DigitalOcean Managed Database to host PostgreSQL 15 cluster
• DDL and DML

Infrastructure:

• GitHub Actions for CI workflows
  • CI workflow for both client and serverless projects, which run when a PR is opened
• DigitalOcean App Platform to host and manage client, serverless functions, and database under one app
• Deployed using DigitalOcean App Platform's automatic deployment

How to Install and Run client Project (serverless project not required, leaderboards won't load)

Monorepo Prettier and ESLint Setup

npm install

common Project Setup

cd common
npm install
npm run build

client Project Setup

cd client
npm install

client Project Compile and Hot-Reload for Development

cd client
npm run dev

client Project Type-Check, Compile and Minify for Production

cd client
npm run build

client Project Lint with ESLint

cd client
npm run lint