The Making of Our Virtual Sobriety

December 15th, 2024

When I first started coding I knew I wanted to work on a website like this. I had made so many small projects while doing different tutorials and wanted to take on something bigger. My first stand alone project was for the fall 2024 React Game Jam. It was my first attempt at making a video game and I had no idea what I was in for. One week and 80+ hours later I had my game "complete". It wasn't much and honestly was as punishing as it was shitty. BUT it worked! As far as I could tell it was bug free and ran seemlessly. With my newfound confidence and knowledge from this experince I thought it was time to tackle something else.

I tried making a few other apps but nothing stuck. It was time to work on something bigger. Something that would really test me and what I had learned so far. I decided to learn Next.js so I could make a decent functioning website. I knew it was offically time for my virtual-sobriety community. I just had close to no idea where to start. So I bought a whiteboard, mapped out a few basic ideas and started coding.

Pretty much immediately I knew I bit off more than I could chew. Those of you who know me, know that that has never stopped me before. I knew how to make a landing page so I started with that so I could have some kind of digital business card. That is what ultimately became my about me page. I also thought it could be fun for users to have their own profile cards that they could customize and show off. They can exist within the community all while showing how many other people where involved. After making a card template I quickly realized I had NO IDEA how to make a user system. I had close to zero experience with databases and user authentication.

<div
  className="flex flex-col items-center
 justify-center"
>
  <img
    src={info.picture || { noPicture }}
    alt="Profile Picture of the user"
    className="w-32 h-32 object-cover
     rounded-full p-1 border-primary
      border-solid border-2"
  />
  <div
    className="text-center mt-2 text-lg 
  font-bold"
  >
    {info.name}
    {userName && userName !== info.name && (
      <div
        className="text-sm 
      font-semibold"
      >
        aka:
        {userName}
      </div>
    )}
    <div
      className="text-sm 
    font-semibold"
    >
      {info.location}
    </div>
    <div
      className="mt-3 
    font-light"
    >
      {info.about}
    </div>
  </div>
</div>

Thats when I found Clerk.com. Clerk was a HUGE game changer for me. It made user authentication as simple and painless as it could be. It was so cool to see how you could integrate authentication into a website/application. From changing what people can see and access to storing their data, it was just an insane amount of power at my fingertips. Clerk seriously made this entire process much easier than I thought it would be.

That all being said this was no easy task. To get this website up and running to what you see today took me about two months. That's two months of constant learning new things. Two months of trying to find different libraries and packages that would help me. Two months of trying to figure out how to make a website that was both functional and visually appealing. Two months of constant stress and second guessing myself and my abilities. There were entire days lost to debugging and fixing errors. Other days googling issues nonstop and begging chat GPT for an answer. This. Was. Tough.

This is really the culmination of everything I have learned up until today. My code for this isn't perfect. It's far from it. There are so many comments all over my files trying to remind myself of what I wanted to do and how I could do it. I have entire components completey left out in the end because they were not what I wanted. But, this is a showcase of how I have evolved in this last few months. It shows how I improved with my base knowledge of HTML, CSS, JavaScript and React. It showed my growth with finally using tailwind after putting it off for entirely too long. I even learned Next.js so I could make this. I orignally had this made in React and have to move EVERYTHING over to a Next.js project. This was a huge learning curve for me and I am so glad I did it.

I could go on and on about this project. Hell this post could be several pages long and I still wouldn't be able to convey exactly how this truly went. But I am going to leave this here by saying how proud I am of this. I am definitely not done yet. I have so much more I want to do here. So many more quality of life improvements and additions. I will also do my best to keep everything up to date on the homepage. Please be on the lookout for more and let me know if you could think of anything I should add...or if you want me to go more in depth about this process. Thank you for reading as always.

Take Care,
Craig

AKA: Virtual Sobriety