Building My First Web App & Learning as I Go

Introduction

It's been 7 months since I've started working on an anonymous messaging app for people to share their texts left on read. But that wasn't the idea in the beginning.

When I started working on Reply to Me, I went in with the idea of people sharing texts they don't know how to respond to and getting help from others. But there's no signup and I want people to remain anonymous, so creating a reply system was starting to sound a little complex.

Sometimes your projects completely change mid-development.

So I thought, okay, I could have the person register via email so that the unique id of the message could be tied back to the email address. This way that person could receive a notification via email when they receive a reply.

A Change in Development

But as it stands, there is no way to reply to a text, so there's no way to have a conversation with other people and get help or advice.

I shared the prototype with my wife and she suggested that I make a website for people to "share texts left on read". I thought that was a great idea, so I went with it. Sometimes your projects completely change mid-development.

It's a social experiment of sorts. Communication has never been easier, and we expect instant replies because we have the means to at our fingertips. But sometimes it can be too much.

The messages can be weird, spam, wrong numbers, or even texts that are just difficult to reply back to. Maybe we'll laugh, or cry, even cringe. Maybe we can relate.

This project is still in alpha, (if you can't tell by the design) but I'm working on it pretty regularly.

What's Next?

Since its inception, I've made quite a few changes, from refactoring code to make it load faster to fixing bugs between devices.

I've added light/dark modes to give people more options, but it reverts to the default on refresh & page load (for now). I'm afraid I've chosen the hard path by making two separate style sheets as you can see in my code below.

const btn = document.querySelector(".theme-toggle-btn");
const theme = document.querySelector("#theme-link");
const currentTheme = localStorage.getItem("theme-link");

btn.addEventListener("click", function () {
  if (theme.getAttribute("href") == "css/light-theme.css") {
    theme.href = "css/dark-theme.css";
    populateStorage();
  } else {
    theme.href = "css/light-theme.css";
    populateStorage();
  }
});

The next thing to do is save it to localStorage.

Now, I've tried doing this via a function I made called populateStorage()

function populateStorage() {
  localStorage.setItem(
    "theme-link",
    document.querySelector("#theme-link").href
  );
}

I know I have to use both setItem() and getItem() but unfortunately I've thrown everything I can at the wall and nothing is sticking.

I'm pretty determined to solving this problem with my current solution of two stylesheets, but I may need to reconsider–I'm just being lazy and don't want to undo all of my hard work! But like writing is rewriting; coding is refactoring.

It's a learning process.

This project is built with Express & EJS, and MongoDB for the database.