Project: Writing on the Wall

92.99% relative
40.00% relative

Began in June 2021

This project is a social media game with a similar layout to Pokémon Go. You can walk around to discover notes and chests on the current-location-based map. You can then leave notes for other players to find with different charms attached to them, which change how the note interacts with the world.

It was a very extensive project with a robust backend, and it took a year of development (not full-time development) to release the beta version.

I created this web app using Node.js, React, and Sequelize ORM. It has a secure backend built with Express coupled with a React frontend to create a gamified social media app.

This project featured a comprehensive administration portal for authorized users of varying permission levels. In this portal, administrators could manage users, approve moderator-flagged items, send messages and gifts to players, check logs, and manage the items available in the game.

The administration pages used a CRUD React component that I made, which enables easy Create, Read, Update, and Delete options as well as an aggregate table view with little setup required, making it a reusable and versatile component for interacting with databases.

One specific point which I took care to consider is how to store and retrieve nearby geolocated items at scale. I considered different latitude/longitude algorithms, including taking a measured number of digits from the latitude and longitude components such that every matching component would be in a defined rectangle corresponding to the block being searched. I resolved instead to query the database by calculating the distance between latitude marks at the current longitude (as this varies with distance from the equator) and then determining the maximum distance away needed to be checked. I then refined this smaller chunk of data with a search that calculated exactly how far away each item was from the user's current location.

The live website is currently not available due to a decline in demand.

Check out a demo and walkthrough of implementation details in the link below!

  • A screenshot of a portrait view of the web app containing a map, a marker at the user's curent location, nearby chests, nearby notes, and menu toggles to view profile, see memories, create note, and open backpack
  • A portrait screenshot of the inventory page with toggles to show Charms or Chests as well as Your Charms or the Charm Catalog. Several charms are listed along with the count owned and coloring on the edges of the buttons to indicate their rarity
  • A portrait view of the memories page with taps for Timeline, Cloud (selected), and Map. A word cloud can be seen with different memories floating around in a sphere
  • A portrait view of the settings page with options including change name and email
  • A screenshot of a chest dialog box with a picture of the chest and options to Open Now or Claim for Later
  • A horizontal screenshot of the admin interface with colored quick links to different tools as well as statistics for user activity, note activity, and note view activity for different time segments
  • A view of the admin interface for managing Charms in the game. There are tabs to Create, Table view, View individual, Edit, and Delete. The table displays options such as displayName, description, isActive, isObtainable, and rarity