9 Popular GitHub Repos For Every Web Developer
Tags: github, webdev, productivity, beginners
Published: 2020-12-02 10:56:01

GitHub is the one-stop-shop for everything related to (web) development these days. Frameworks, demos, collections of all sorts — there’s probably nothing you cannot find on GitHub. However, this huge quantity of things is the problem. There are cool things you’ll probably never hear about, simply because there are so many repositories available.

So, once again I’ve decided to bring to you some of the most popular GitHub repositories you should know about, each of them having at least ~30,000 stars.

---

## Realworld
![9r1](//images.ctfassets.net/28643bqnqgzl/3s9xwwlAkIb9sLbVJqrmbz/6438f60846ff27c647ef82420a364866/9r1.png)
The first repository in this list is <a href="https://github.com/gothinkster/realworld" target="_blank">Realworld</a>. Its creators call it nothing less than “The Mother of all Demo Apps.” A bold statement, for sure, but I don’t think it’s an exaggeration.

Realworld is an exemplary Medium.com clone. But not only that. The repository lets you choose between different front end and back end implementations, which you can happily mix.
Vue.js + Node/Express or React /Redux + Rust? They got it!

Realworld shows you how the exact same blog app is built on almost any popular language or framework. How awesome is that?

---

## You Don’t Know JS Yet
![9r2](//images.ctfassets.net/28643bqnqgzl/4fGOgq3yNeBm1Vgb5q4VXn/b674c78f799e23aa6707fda7a8611e6d/9r2.png)
This <a href="https://github.com/getify/You-Dont-Know-JS" target="_blank">repository</a> is a popular book series by Kyle Simpson who is widely known under his alias, Getify. The books dive deep into the mechanics of JavaScript and cover the following topics:

- Get Started
- Scope & Closures
- Objects & Classes
- Types & Grammar
- Sync & Async
- ES.Next & Beyond

The best thing? It’s completely free to read! It’s definitely one of the best series about JavaScript and it really helped me to understand what JS is really about. Even if you think you know JavaScript well — read the books! You will be surprised, I promise.

---

## Airbnb JavaScript Style Guide
*A mostly reasonable approach to JavaScript.*

The <a href="https://github.com/airbnb/javascript" target="_blank">Airbnb JavaScript Style Guide</a> is one of the most popular and commonly used style guides out there. It helps you write better JS code and is especially helpful in teams and in combination with ESLint.

Here is an example from the docs regarding the use of const instead of var:
![9r3](//images.ctfassets.net/28643bqnqgzl/5bFaKGFLqoTqjWipBUKrAJ/8c7f7ab6cacb46451413b55d0854e625/9r3.PNG)

---

## Storybook
![9r4](//images.ctfassets.net/28643bqnqgzl/1RstsUvx0TZ4JdqQDPL55I/ce289df5d53e13b9367cd8831a6eecf4/9r4.png)
<a href="https://github.com/storybookjs/storybook" target="_blank">Storybook</a> is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components. It supports React, Vue, Angular, React Native, Ember, Web Components, and more!

Storybook runs outside your app. This allows you to develop UI components in isolation, which can improve component reuse, testability, and development speed. You can build quickly without having to worry about application-specific dependencies.
You can find some great examples <a href="https://storybook.js.org/docs/examples/" target="_blank">here</a>.

---

## HTML5 Boilerplate
<a href="https://github.com/h5bp/html5-boilerplate" target="_blank">HTML5 Boilerplate</a> is a professional, and one of the most popular, front-end templates around the web. It helps you build fast, robust, and adaptable websites or apps. Companies like Microsoft, NASA, and Nike use it.

Here are some of the key features:
- HTML5 ready.
- Designed with progressive enhancement in mind.
- Includes:Normalize.css, jQuery, and Modernizer
- Configs that improve the website's performance and security.
- Placeholder CSS Media Queries.
- Default print styles, performance-optimized.
- An optimized version of the Google Universal Analytics snippet.

---

## Node.js Best Practices
![9r5](//images.ctfassets.net/28643bqnqgzl/5trRxZ1tWhIywcI4hygf9M/7f2299758296f839e33c9bc055313711/9r5.jpg)
This <a href="https://github.com/goldbergyoni/nodebestpractices" target="_blank">repository</a> is a comprehensive collection of various best practices regarding Node.js development. It currently consists of more than 80 best practices, style guides, and architectural tips.

You can find information about:

- Project Structure Practices
- Error Handling Practices
- Code Style Practices
- Testing And Overall Quality Practices
- Going To Production Practices
- Security Practices
- Performance Practices

It definitely is a great repo and source of information. If you are into Node.js development, check this one out!

---

## Front-End Checklist
![9r6](//images.ctfassets.net/28643bqnqgzl/54DqyRAcarYEiPizSbo2NV/e51b8b24fbe856720617cdcac726c896/9r6.png)
Have you ever asked yourself what you need to have or test in your web application before launching it? <a href="https://github.com/thedaviddias/Front-End-Checklist" target="_blank">The Front-End Checklist repository</a> has you covered!

Many of the items listed are mandatory for the majority of projects and organized as follows:
- Head
- HTML
- Webfonts
- CSS
- Images
- JavaScript
- Security
- Performance
- Accessibility
- SEO
- Translations

Here’s an example for the Apple Web App MetaData:
![9r7](//images.ctfassets.net/28643bqnqgzl/4GM5PKWMfNTnTUlLrQiQ0L/39858dcfe81d8bb256167c280f7b9039/9r7.PNG)

---

## NW.js
![9r8](//images.ctfassets.net/28643bqnqgzl/4k7jk1y6c4qZs7IRMXmiGv/86735f3ba5d155ddf1cbe86da20c5385/9r8.png)
<a href="https://github.com/nwjs/nw.js" target="_blank">NW.js</a> is an app runtime based on Chromium and node.js. You can write native apps in HTML and JavaScript with NW.js. It also lets you call Node.js modules directly from the DOM and enables a new way of writing native applications with all Web technologies.

Here are some of the key features:

- Apps written in modern HTML5, CSS3, JS and WebGL.
- Complete support for Node.js APIs and all its third-party modules.
- Good performance: Node and WebKit run in the same thread.
- Easy to package and distribute apps.
- Available on Linux, Mac OS X, and Windows.

---

## fullPage.js
![9r9](//images.ctfassets.net/28643bqnqgzl/63Y2JpSu9XAKTxJOzLgC8O/65248d22d36e77503b58172a70db5bc6/9r9.png)
<a href="https://alvarotrigo.com/fullPage/#examples" target="_blank">fullPage.js</a> by Alvaro Trigo is a simple and easy-to-use library that lets you create SPA (Single Page Applications) and landscape sliders. It’s available for Vue, React and Angular and is fully responsive for mobile devices.

You can find some great examples <a href="https://alvarotrigo.com/fullPage/#examples" target="_blank">here</a>.

The library is free to use in open source projects. However, if you want to use it in a commercial environment you have to buy a license.
It looks really cool so check it out!

---

I hope you can use some of these repositories for your projects or other purposes.

Here are some more [github repos for developers](https://thesmartcoder.dev/10-awesome-github-repos-every-web-developer-should-know/) if you want.

**If you like what I write and want to support me and my work, please follow me on [Twitter](https://twitter.com/simonholdorf) to learn more about programming, making, writing & careers🥰**