Awesome Stacks

Tech stacks for building different applications and features.

Contents

• Front-end
• Full stack
• Back-end
• Mobile

Awesome Stacks is a community-curated list of tech stacks for building different applications and features. It is open source and inspired by the original awesome list.

Each stack in the list has a name, description, and list of a few of the key tools and technologies. Optionally, it links to a tutorial, starter kit or boilerplate that makes it easy to get started with.

Got a stack you think is a great way to build something? Please edit this file and add it! Check out CONTRIBUTING.md for more information.

Browsing the stacks

Stacks can be browsed in two places—on the README and on awesomestacks.dev. The site, built with Gatsby and React, displays logos and metrics about each tool listed in the README by pulling data from the GitHub and StackShare APIs.

Legend

🛠 - StackShare tool profile 🐙 - GitHub repository

Front-end

React Next Boilerplate ↗

A basis for reducing the configuration of your projects with Next.js, best development practices and popular libraries in the developer community.

• Next.js - 🛠 - 🐙 - The React Framework for server rendering, static websites, PWAs.
• React Testing Library - 🛠 - 🐙 - react-testing-library is a tool in the Testing Frameworks category of a tech stack.
• Emotion - 🛠 - 🐙 - CSS-in-JS library designed for high performance style composition.
• I18next - 🐙 - I18next is an internationalization-framework written in and for JavaScript. But it's much more than that.
• Redux Saga - 🐙 - is a library that aims to make application side effects (i.e. asynchronous things like data fetching and impure things like accessing the browser cache) easier to manage, more efficient to execute, easy to test, and better at handling failures.

Resources

• react-next-boilerplate

React starter kit ↗

React Starter Kit is an opinionated boilerplate for web development built on top of Node.js, Express, GraphQL and React, containing modern web development tools such as Webpack, Babel and Browsersync.

• React - 🛠 - 🐙 - React components can be used on the client and server side.
• Webpack - 🛠️ - 🐙 - A static module bundler for modern JavaScript applications.
• GraphQL - 🛠 - 🐙 - A query language for APIs and a runtime for fulfilling those queries with your existing data.
• Babel - 🛠️ - 🐙 - A JavaScript compiler; use next generation JavaScript, today.
• Express - 🛠️ - 🐙 - A minimal and flexible Node.js web application framework.
• Node.js - 🛠️ - 🐙 - A JavaScript runtime built on Chrome's V8 JavaScript engine.

Resources

• react-starter-kit

React Firebase starter ↗

React Starter Kit for Firebase is a popular project template (aka, boilerplate) for building modern, scalable web applications with React, Relay, and GraphQL using serverless infrastructure provided by Google Cloud (Cloud SQL, Cloud Functions, CDN hosting, and file storage).

• Firebase - 🛠️ - A cloud-hosted NoSQL database that lets you store and sync data between your users in real-time.
• Create React App - 🛠 - 🐙 - Set up a modern web app by running one command.
• Material UI - 🛠️ - 🐙 - React components that implement Google's Material Design.
• Relay - 🛠️ - 🐙 - A JavaScript framework for building data-driven React applications.
• GraphQL - 🛠 - 🐙 - A query language for APIs and a runtime for fulfilling those queries with your existing data.

Resources

• react-firebase-starter

vue-starter ↗

The most complete boilerplate for production-ready PWAs. With focus on performance, development speed, and best practices.

• Vue.js - 🛠️ - 🐙 - An approachable core library that focuses on the view layer only.
• TypeScript - 🛠️ - 🐙 - A typed superset of JavaScript that compiles to plain JavaScript.
• Jest - 🛠️ - 🐙 - A comprehensive, delightful JavaScript testing solution.
• Prettier - 🛠️ - 🐙 - An opinionated code formatter.
• Vuex - 🐙 - Centralized State Management for Vue.js.
• Vue Router - 🐙 - Vue Router is the official router for Vue.js.

Resources

• vue-starter

Vue Enterprise Boilerplate ↗

An ever-evolving and opinionated architecture and dev environment for new Vue SPA projects using Vue CLI 3.

• Vue.js - 🛠️ - 🐙 - An approachable core library that focuses on the view layer only.
• Vuex - 🐙 - Centralized State Management for Vue.js.
• Vue Router - 🐙 - Vue Router is the official router for Vue.js.
• Vue CLI - 🐙 - An approachable core library that focuses on the view layer only.
• Babel - 🛠️ - 🐙 - compiler for writing next generation JavaScript; Babel will turn your ES6+ code into ES5 friendly code, so you can start using it right now without waiting for browser support.
• Sass - 🛠️ - 🐙 - Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It's translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

Resources

• vue-enterprise-boilerplate

Progressive Web App with Gatsby ↗

Build a simple polling progressive web application with some great modern tech.

• Gatsby - 🛠 - 🐙 - Gatsby is a blazing fast modern site generator for React.
• Cloud Firestore - 🛠️ - A noSQL cloud database that exposes event listeners for real-time updates.
• Netlify - 🛠️ - Netlify is a global CDN that makes continuous deployments as simple as a few clicks.
• styled components - 🛠 - 🐙 - A react-specific css-in-js solution.
• Contentful - 🛠 - 🐙 - Contentful is a flexible and future-friendly content platform that helps editors to manage and developers to serve content into mobile or web applications. Last but not least a powerhouse when worked with Gatsby.

Resources

• JAMstack PWA — Let’s Build a Polling App. with Gatsby.js, Firebase, and Styled-components
• Learn how to easily build a GatsbyJS website powered by Contentful

Victor Hugo boilerplate ↗

A Hugo boilerplate for creating truly epic websites. This is a boilerplate for using Hugo as a static site generator and Webpack as your asset pipeline.

• Hugo - 🛠- 🐙 - The world’s fastest framework for building websites.
• Webpack - 🛠️ - 🐙 - A static module bundler for modern JavaScript applications.
• Babel - 🛠️ - 🐙 - A JavaScript compiler; use next generation JavaScript, today.
• PostCSS - 🛠 - 🐙 - A tool for transforming CSS with JavaScript.

Resources

• netlify-templates/victor-hugo

Nuxt, TypeScript + Docker ↗

Bleeding edge vue template focused on code quality and developer happiness.

Offers a complete setup for both small and enterprise-scale apps.

• Nuxt - 🛠 - 🐙 - Vue.js Meta Framework to create complex, fast & universal web applications quickly.
• TypeScript - 🛠️ - 🐙 - A typed superset of JavaScript that compiles to plain JavaScript.
• Sass - [🛠️](https://stacks