Phase-2 Project Review

Our phase-2 project was an individual project using React to build a webpage with multiple Routes used. Fairly straightforward and with very basic deliverables, so it left us open to get creative and see what we could do with all we learned. In this post I'll reflect on things I learned and struggles I had.

With the project being so open ended, I used the opportunity to try building out an idea I've had for some time - a website to view happy hours in Denver. Being a happy hour connoisseur myself I've had the desire for an easy way to view what bars and restaurants in Denver had specials. What limited resources there were already online had become quite out of date post-COVID, when many reopening establishments either reduced or outright eliminated their happy hours. My goal was to build a site where it would be easy for users to add and update specials, while giving access to an admin role to review any changes made by users.

So on to the build. For this project I decided to use Vite, a tool that among other things, provides a much quicker server. I'm sure there is much more Vite can do that I didn't utilize in this project and I hope to learn more about it in the future. One nice side effect of Vite is that generating a default project had some basic build and styling pre-built, so I was able to use some of that as basic guidelines for building out my css. On the topic of css, for this project I opted to attempt to use vanilla css, as I wanted to work on my own knowledge of css. In the future I will likely try something like Bootstrap, as that is what I would be using in a professional setting.

One early lesson learned was that I should be better about planning my components before building. Not that it caused any major long term issues but I ended up building two redundant components, a "Home" component and a "CardList" component, the "CardList" component didn't end up having any functionality built into it other than to pass props up and pass functions down so it was just unnecessary. I ended up leaving it in as it wasn't breaking anything, but in a project I would actually be publishing I would want that to be cleaned up.

Other than that most of the basic build was straightforward and I had the core deliverables completed on day 1. React is so much quicker and more intuitive to build out than vanilla JS! This was also my first time really working with React Routing but that proved to be quite intuitive as well.

The thing that this project gave me the most difficulty with was working with the radio buttons for "locationNeighborhood" in my 'edit' form. I wanted the form to be automatically populated with the values from the special that the user was trying to edit, and I was able to do this pretty easily for all forms except for the radio buttons.

After some quick searched I found some info that said that a radio button would be checked by default if they had a property of "checked" with a value of "checked." Seemed easy enough. I build out a property with logic like this (in this case for the LoDo neighborhood):

checked={locationNeighborhood === "LoDo" ? "checked" : ""}

This accomplished part of what I was looking for - the correct radio button was selected by default, however clicking on other radio buttons would not change it from whatever was already set as the default. After at least an hour of playing around with it to no avail I went back to Google and found that a 'true' value will also set the radio button to be checked by default. So I was able to simplify my logic to be:

checked={locationNeighborhood === "LoDo"}

That ended up making everything work! Lesson learned -- don't rely on the first Google result you find.

My final issue was with an admin page I set up with a password. Submitting the correct password triggers a setState function that changes the jsx that is returned for the /admin route:

  function handlePassword(e) {
    e.preventDefault()
    if (e.target["password"].value === "admin") {
      setAdminPage(
        <>
          <HeaderAdmin handleHomeClick={handleHomeClick}/>
          <AdminPage specials={specials}/>
        </>
      )
    } else {window.alert("That is not the correct password")}
}

This all worked just fine except I had expected this state to persist, so that once you entered the correct password you wouldn't have to enter it again as long as the page didn't refresh. However when navigating elsewhere on the page and then returning to the admin page you would be shown the login screen again. It seems that navigating to a different route on the page does in fact trigger a page refresh. I played around with trying to fix this for awhile but ultimately decided it wasn't really worth it, as this password method isn't really something that would be used in a practical sense anyways as you wouldn't handle something like a password on your front-end.

All-in-all this was a very fun project for me not only because it was on a topic I was excited to work on but I also was able to get the core deliverables done so quickly that I could just focus on adding fun bells and whistles.