CodeNewbie Community 🌱

Cover image for Building My First Web App & Learning as I Go
cmdme
cmdme

Posted on

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 screenshot of my database that shows the property and value fields of data that is saved when a person submits a text message

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();
  }
});
Enter fullscreen mode Exit fullscreen mode

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
  );
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (3)

Collapse
 
mcsie364 profile image
mcsie-364

I have a paintball mask usa website that explore the thrilling world of paintball, offering comprehensive information on equipment, tactics, and strategies. So, I want to allow users to initiate the paintball mask app directly by clicking on the website link. Can someone answer me?

Collapse
 
dakota54 profile image
Dakota

Define the purpose of your web app and what you want it to accomplish. Having a clear goal in mind will help you stay focused and motivated as you work on your project. truepaintballer Decide on the programming language, frameworks, and tools you will use to build your web app. Research different options and choose the ones that best suit your needs and skill level.

Collapse
 
papaspizzeria profile image
papas-pizzeria

Good job! Feedback a player might give about papa's burgeria online.