Community created guides allow you to pick up programming skills, tips and tricks.
Guides are powered by a capable Markdown renderer, supporting formatting, images and even syntax highlighting.
Discussions allow users to express questions, feedback and more on guides with comments.
The guide editor lets you preview your changes in real time, even before you publish.
All guides created on Stackhub are listed, and can be filtered by tags...
...which help organise and categorise guides by topics, making it easier for users to find content.
Content from all over Stackhub, including guides, tags and users can be searched and filtered easily.

What is Stackhub?

Watch the Showcase video · A quick demo

Stackhub is essentially Reverse StackOverflow. That's the simplest way to put it.

In more words, Stackhub allows you to post tutorials (answers) and have others ask you questions (comments, in discussions). It's the opposite of StackOverflow, where you ask questions and others answer you.

All content on Stackhub is user-created. This approach differs from that of conventional programming educational websites, where people are hired to come up with and write course content and tutorials.

The core features of Stackhub are as follows:

1. Guides

Guides are arguably the most important part of Stackhub. It's the user-created content that people come here for.

Every guide's content is powered by a capable Markdown editor and renderer. Markdown is a simple, memorable markup language that renders to clean HTML. Many sites use Markdown, from documentation to blogging and writing, allowing for text formatting, headers, images, tables, code and more. Simply put, Markdown makes it easy to express yourself.

Guides can be tagged with topics to increase discoverability.

1a. Code syntax highlighting

Since this is a programming-focused application, we have put a strong emphasis on code. The Markdown renderer uses syntax highlighting (just like IDEs), supporting almost 200 different programming and markup languages, to make code easy to read, understand, and look at.

2. Discussions

Discussions is what turns Stackhub from content-only to a community. Users can post comments to express feedback, ask questions and more on guides. Just like guides, users can compose their comments with Markdown.

Discussions are currently structured in a forum-style single threaded layout, and leverage the power of Markdown for quoted replies and more.

3. Users

A community isn't a community without users. Stackhub features a robust user system with roles, customisable details and security built-in. Sensitive user details such as passwords are hashed and salted with bcrypt, and small details are implemented along the way to improve security and enhance the user experience.

Why Stackhub?

Stackhub is built on, and is free and open-source software (GPL3). This means anyone will be free to inspect the code (once we launch it publicly), submit feedback and improve it.

Stackhub is also privacy friendly. By default, we do not ship advertising or analytics scripts, and we do not collect more personally identifiable details than what is necessary.

Lastly, Stackhub aims to be self-hostable, meaning you can one day download and run it on your own servers (not just Heroku or Netlify!), give it your own branding, and host it behind your own domain. With this, you can be in full control of your data and run Stackhub by your own rules.

Stackhub's versatility and self-hostability makes it useful for other use-cases as well, such as a general-purpose forum and even a Learning Management System (LMS), and for organizations and institutions to host it on-premises.

Stackhub is still in its early stages of development, but with your help we can turn this into a reality.

The project is managed through Git (GitHub).

Inspiration

Stackhub was inspired by similar programming forums and blogging sites, such as StackOverflow (and Stack Exchange), Medium, dev.to, WordPress and many more. These websites have assisted us greatly in the development process, and given us much inspiration for the features and ideas we have implemented.

In particular, StackOverflow's community-centric style served as a major source of inspiration for Stackhub.

Technologies

Stackhub is written in JavaScript, HTML and CSS. We have also used the following:

Node.js (runtime)
Express (web framework)
Bootstrap (CSS framework)
PostgreSQL (database)
Handlebars (templating engine)
Marked.js (Markdown parser)
Highlight.js (Markdown syntax highlighting)
DOMPurify (DOM sanitization)

For code quality, static analysis and testing, we use:

ESLint (static analysis, code quality)
Prettier (code quality, formatting)
Mocha (testing)
Chai (assertion)

Interface styling uses values derived from GitHub's Primer Design System, made to work with to Bootstrap 5.2. The icons we use are Octicons, which are part of Primer.

Accomplishments

As a team we have implemented plenty of features using skills and libraries picked up in our own time, including Handlebars, Marked.js, Highlight.js, Prettier, Mocha and Chai. We've also been able to (thanks to Syauqi) implement additional security features such as password hashing and salting with bcrypt.

What we learned

The last few months have been a learning experience for us. Besides picking up coding tips and tricks from one another, we understood that teamwork did not necessarily mean evenly split work, but rather us contributing what we could based on our strengths. The importance of communication, planning and working together stood out to us too, and how much of a role it played in producing a satisfactory end product.

We also learnt that the best way to produce a good product was to enjoy the process, every step of the way. The sense of achievement can really motivate you to finish the job, and finish it well.

Challenges

No project is without its challenges. Here are some notable ones, and how we managed to overcome them.

Syauqi

One of the hardest challenges that I consistently faced was applying the knowledge learned to practical use. Having little to no background in coding certainly did not help me when it came to Git, React as well as libraries used such as bcrypt. Thus, it made my learning curve a little steeper than expected. I managed to pull through in the end with help from StackOverflow and Youtube, as well as my friends.

Though there is still one part that stumped me, bcrypt.compare(). It failed and I could not get to the source of it before the submission deadline. Despite that, I was still able to learn a lot of different things such as version control and hashing. Although not solving the problem might have brought down the mood a little, I was still proud and satisfied with what my team and I managed to accomplish during this semester.

Jonathan

Stackhub has been a rather interesting project to work on. In development, I implemented many new features taught outside the curriculum such as Handlebars, Markdown rendering and even GitHub Actions (for CI). GitHub Actions was probably the biggest challenge for me as initially we weren't checking against the pull request when doing automatic tests on contributions but rather the existing codebase. That led to quite a bit of head scratching and confusion (not to mention unformatted, untested code!) until finally some research showed me how to fix it.

If anyone has the same issue as we did, set the checkout ref to ${{ github.event.pull_request.head.sha }}.

Lincoln

Stackhub has been one of the most challenging projects I have worked on. I have encountered many challenges and emotions while working on this project, from getting frustrated when my code was not working to being delighted when I finally managed to get my code to function as intended. Other challenges I faced included learning to how use frameworks which I was not familiar with, such as React.

I overcame this challenge by researching online (e.g W3Schools) on how to work with React. Another challenge I faced was balancing out my time while working on this project. I also had other projects which required my attention but, I resolved this by splitting my time properly so that I did not need to rush on any project.

Jared

Stackhub has certainly been a huge learning experience for me. Not having the strongest amount of coding experience and being put into this group meant I had to catch up on my lacking knowledge of Javascript, while simultaneously catching up with the numerous amount of new features and changes added to the code everyday. From learning how to use GitHub, learning how to fetch data from the backend to frontend, or formatting my code before sending it in, I cannot deny it was a huge struggle to climb through the project with the limited amount of knowledge I had.

But, in the end, with the assistance of my lecturers and groupmates, I managed to pull through and add some features that will hopefully benefit the website in the long run, as well as learn about a whole spectrum of coding information that I definitely could not have learnt by myself.