👋 Introduction

Since I am a community person, I am often helping people within several developer discords as well as running my own server called devcord. There is not a single day were I don't find myself linking some resource, as many beginners are asking how to do "that" in flexbox for example.

On our server we even have a bot command to just send an embed saying "Hey want to learn flexbox? Checkout https://flexboxfroggy.com". But sometimes I feel like a particular member might not want to use flexboxfroggy but is looking for a documented approach, so I sent them the link to the css-tricks flexbox guide.

💡 The idea

That brought me to the idea to create a website for beginners, that are looking for resources which will help them get started in the big and chaotic domain of webdevelopment.

As always I started to look out for a domain first, before even thinking about how I would actually implement this site itself. It was the 10th of may that I started to bug my friends asking what they think about this particular domain name. It's just a small flaw of mine, thinking good domain first and then comes the project (but that actually just changed recently - more on that soon).

Here is the list of domains I was running through, until I found the perfect match (with the help of my friends, looking at you Jacob): webgems 💎, "the best gems out there for developers". If you are lucky, you might be still able to register any of these. IMO those are some good domains :)

webbin.io - webbin.dev - sourcebin.io - webcollect.io - devbucket.io - webrepo.io - devcollect.io - devbin.? - resourcebin.io

💻 Starting to dev

Anyhow, once I was settled on the domain, I quickly registered it since you should never wait too long - the domain can be gone anytime. It was now time to decide what stack would be fitting for this site - since Vue is usually my goto framework and just recently I started to rewrite my own website in Nuxt, I decided to use NUXT for webgems as well.

I am not sure how deep I should go into the dev process, I'd only like to highlight that one particular thing has been costing me some nerves:

Being able to click on a copy button that will highlight the card and put a reference in your clipboard.

That's how it looks like now:

It worked completely fine on localhost, but when I pushed it to prod using Netlify, the reference and routing would just break. I was so hyped about this project but this one issue frustrated me a lot. After some hours researching about this issue I found some references about Nuxt+Netlify and Netlify adding trailing slashes. Quickly I decided to spin up my very own server to verify if it was either me or Netlify's issue.

At that time I was kinda sad since I thought i could not use Netlify, even if I enjoyed their whole workflow that much.

I guess that message makes it quite clear?

Well after I came down a bit, I wasn't happy with the current situation and wanted to find out if there was another solution to the problem. It took me some days but I found the solution - here is the final code snipped. I actually forgot how I fixed it, but I will make sure to dig through the commits and come back later with the answer for you!

  methods: {
     async createCopyUrl() {
      try {
        let currentPath = this.$router.history.current.path
        let reference =  this.createReferenceTag(this.$props.title)
        await this.$copyText(`https://webgems.io${currentPath}?card=${reference}`)
        this.$router.push(`${currentPath}?card=${reference}`)
      } catch (e) {
        console.error(e);
      }
    },
}

✅ IT'S LIVE

As that was out of the way and I was now able again to work with Netlify, I continued to add more resources and fix some small things here and there. Several streams on my twitch and one month later, it was finally done. I pushed the last commit and decided to tweet about it, even if I am not a twitter person that much.

Not thinking what would happen, the tweet actually blew up. It was the first time for me that anything I tweeted actually reached that many people.

About 120.000 people saw this tweet and the site itself got about 10k visits within the first week of the launch. I was completely astonished that I'd actually get that support.

Shortly after the launch, S3BAS a friend from the devcord server chimed in on the project and helped me out a bit, refactoring the code and what not. We had some late night shifts but it was well worth it.

This project was also published on producthunt, but I kinda failed the launch there, assuming not posting at the right time.

📖 Skill++

While working on this project I had so much fun and learned/fixed my git and git flow skills. Thanks to the people that sent me messages on how much they appreciated what I and the contributors of this project did. Even today, some weeks after the launch people still thank me for this project. And it means so much to me, that it does exactly what I wanted - help other people (and ofc that I don't have to send individual links anymore :D).

It has been a road of emotions and just recently webgems was mentioned in one of my favorite podcasts "Syntax.fm". I can highly recommend listening to their podcasts and this particular one, where webgems was mentioned -> click here.

I didn't even notice at first it was mentioned there, but yet another friend told me about it. I was actually close to crying, hearing that I made it on there. I was shaking at least and had to tell my friends about it, even if they don't know anything about web development at all and couldn't understand what was going on. But they were happy for me at least, so i appreaciate that.

💾 The Conclusion

Even if your project is nothing completely new, people that may not believe in your idea, the issues you face or any other reason should never stop you form doing what you are passionate about.

The web domain is quite toxic sometimes and even more for beginners - that's why I wrote this story about this small project, that still had an impact.

If you are looking for a friendly community with like minded devs and are in need of help or want to help people, come join us over at devcord - we would love to have you there.

If you want to checkout the source of this project, feel free to do so it's on github. I'd love if you share it when someone is in need of some resources as well as contributing to the project - just shoot a PR or open an issue if you think something is missing.

.