Steven Coy Web Developer Projects

Web Developer Projects

I am a self-taught web developer who believes in and enjoys project-based learning. I seek to combine my programming skills with my past experience in project management, design, and customer relations in a role as a web developer in order to further develop, and explore beyond, the knowledge I have acquired and demonstrated in the projects below.

HISSINGBELL (2023) - Developer Website

HISSINGBELL Logo

I created the developer website, using Next.js, for the client HISSINGBELL, a San Diego, California based VR game studio.

This job includes:

  • Ongoing client/developer collaboration involving virtual meetings, design mock-ups, and Git workflow.
  • Static site developed using Next.js.
  • Layered SVG parallax effects using React Scroll Parallax.
  • Image carousel using React-multi-carousel.
  • Site-wide light/dark mode saved to Local Storage.
  • Deployed on DigitalOcean.

SIRME (2023) - React Simon Game

SIRME Logo

SIRME is a Simon game created in React. High scores are stored in local storage, so players can enjoy persistent competition with friends on the same device.

In this project, I learned how to manage state, execute actions in a timed sequence, properly set and get data in local storage, handle event listeners of keyboard shortcuts, and play sounds simultaneously using the Web Audio API. The UI is responsive, so SIRME can be experienced on both desktop and mobile.

Github Repo

GridSquid (2022) - Custom Grid Creator

GridSquid Logo

GridSquid is an educational single-page web app coded in JavaScript and Python/Django that lets users make custom grids of images, sounds, and captions. Originally, the idea was to help toddler-aged kids learn the faces and names of all their relatives, but it developed into a much broader application that is useful in homeschool, language studies, and other general education.

I learned so much from this project, namely how to set up a CRUD-capable backend with user authentication, custom APIs, and integration of open-source libraries, as well as a good understanding of core JavaScript concepts like promises, async/await, destructuring, the spread operator, array methods, and the Fetch API (to name a few). I also became more familiar with Git and the deployment process.

Features Include:

  • A front-end written in JavaScript, HTML, and responsive CSS (Bootstrap 5 in part, the rest hand-coded).
  • Implementation as a single-page application (SPA) with history states for better user navigation.
  • A fully CRUD-capable backend written in Django/Python with many custom APIs.
  • User authentication and password resets via email.
  • Guest accounts (w/ same user access) that get deleted every 30 days, checked daily via automated task and custom command.
  • User accounts for creating and storing sets of custom grids with uploaded images, audio, and/or text captions.
  • Cropping functionality for user-submitted images using the Cropper.js library.
  • Backend image compression using Pillow.
  • User-uploaded audio files converted to mp3 using Pydub.
  • File/mime type validation of image and audio files via Python Magic.
  • The option to record and save audio using Microphone Recorder to Mp3.
  • A memory game that can be played on any grid complete with sound effects and CSS “card flip” animations.
  • Auto-generated quizzes for any grid with that has audio or text (or both).
  • A collection page called “MyGrids” where user grids can be organized into albums.
  • Deployed on PythonAnywhere.

View this project in action: gridsquid.ragmats.com

Video demo:

Oopsie (2021) - Anti-Fertility Calculator

Oopsie Logo

Oopsie is a web-based anti-fertility application that celebrates the wonderful, life-altering event of not getting pregnant. I made this tool because I love my kids and two are enough for me 😊

This project was built with Flask/Python and JavaScript. I learned how to set up a backend and render templates with calculations based on user input and data from a database. I also learned how to work with classes for cleaner code, Python’s datetime module, time zone localization, and persistent user sessions.

Features Include:

  • A main page that gives the user their “oopsie” chance as a percentage based on method inputs and researched data.
  • Responsive design using CSS media queries.
  • Algorithms that determine an oopsie chance based on date, time, and user inputs.
  • A “permanent” session for a persistent user experience.
  • Time zone localization.
  • A calendar view that displays the current, last, and next week of oopsie chances.
  • A JavaScript simulation/mini-game.
  • Deployed on PythonAnywhere (previously Heroku).

  • View this project in action: oopsie.ragmats.com

Video demo: