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 - 🛠️ - 🐙 - 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.
• Jest - 🛠️ - 🐙 - A comprehensive, delightful JavaScript testing solution.
• eslint - 🛠️ - 🐙 - The pluggable linting utility for JavaScript and JSX.
• stylelint - 🛠️ - 🐙 - A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
• Docker - 🛠 - 🐙 A tool to create, deploy and run applications inside containers.

Resources

• wemake-vue-template

Nextjs Blog Starter ↗

A Nextjs Boilerplate code for creating a blog. The perfect solution to start a blog in React and use Tailwind CSS for styling.

• Next.js - 🛠 - 🐙 - The React Framework for server rendering, static websites, PWAs.
• React - 🛠 - 🐙 - React components can be used on the client and server side.
• TypeScript - 🛠️ - 🐙 - A typed superset of JavaScript that compiles to plain JavaScript.
• eslint - 🛠️ - 🐙 - The pluggable linting utility for JavaScript and JSX.
• Babel - 🛠️ - 🐙 - A JavaScript compiler; use next generation JavaScript, today.
• PostCSS - 🛠 - 🐙 - A tool for transforming CSS with JavaScript.
• Netlify - 🛠️ - Netlify is a global CDN that makes continuous deployments as simple as a few clicks.

Resources

• Nextjs Blog Starter
• Nextjs Blog Starter Demo

Full stack

MERN: Mongo Express React Node ↗

MERN stands for MongoDB, Express, React, Node. The four key technologies that make up the stack.

• React - 🛠 - 🐙 - React components can be used on the client and server side.
• MongoDB - 🛠️ - 🐙 - A document and JSON-oriented database.
• Express - 🛠️ - 🐙 - Fast, unopinionated, minimalist web framework for Node.js.
• Node.js - 🛠️ - 🐙 - Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine.

Resources

• Learn the MERN stack by building an exercise tracker — MERN Tutorial

GraphCMS React + Apollo ↗

Lightning fast starter for bloggers, content creators, and really anyone who wants to break free from WordPress.

• GraphCMS - 🛠️ - GraphCMS providing a backend to your app, giving you the tools to manage content.
• Create React App - 🛠 - 🐙 - Set up a modern web app by running one command.
• Apollo - 🛠️ - 🐙 - Apollo Client is the best way to use GraphQL to build client applications.

Resources

• GraphCMS starter blog with React & Apollo Client

Strapi CMS with Gatsby ↗

Use Strapi CMS to maintain and manage your Gatsby static site. Deploy to Heroku.

• Strapi CMS - 🐙 - Strapi is the Headless CMS developers love.
• Gatsby - 🛠 - 🐙 - Gatsby is a blazing fast modern site generator for React.
• Heroku - 🛠️ - Heroku is a powerful platform for deploying your apps.

Resources

• Building a Static Blog using Gatsby and Strapi
• Learn Gatsby with Strapi Headless CMS Video Series
• Deploying Strapi to Heroku

Algolia site search ↗

Add search to your JAMStack website, through a static site integration or by crawling the content.

• Algolia - 🛠 - Hosted search API, free up to 10,000 records.
• DocSearch - 🐙 - Crawls a website and uploads it to an index.
• gatsby-plugin-algolia - 🐙 - Use GraphQL to specify Gatsby object to index with Algolia (beta).
• hugo-algolia - 🐙 - Generate and send indices from Hugo static sites for use with Algolia.
• instantsearch.js - 🐙 - JavaScript library for building performant and instant search experiences.

Resources

• Static site search with Hugo + Algolia

MEVN: Mongo Express Vue Node ↗

This is a full stack web app boilerplate project with VueJS + ExpressJS + MongoDB.

• Vue.js - 🛠️ - 🐙 - An approachable core library that focuses on the view layer only.
• MongoDB - 🛠️ - 🐙 - A document and JSON-oriented database.
• Express - 🛠️ - 🐙 - A minimal and flexible Node.js web application framework.
• Node.js - 🛠️ - 🐙 - Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine.

Resources

• Welcome to Vue-Express-Mongo BoilerPlate

Rock Solid Modern Rails ↗

A Rails/JavaScript-based stack with modern/developer friendly technologies

• Rails - 🛠 - 🐙 - An established web app framework with a focus on simplicity and productivity.
• React - 🛠 - 🐙 - React components can be used on the client and server side.
• GraphQL Ruby - 🛠 - 🐙 - Ruby server implementation of the GraphQL specification.
• Apollo Client - 🛠 - 🐙 - A powerfully extensible GraphQL JavaScript client.
• Heroku - 🛠️ Developer friendly web app infrastructure provider with seamless Ruby/Rails support.

Resources

• A Rock Solid, Modern Web Stack—Rails 5 API + ActiveAdmin + Create React App on Heroku

Serverless Stack with React on AWS ↗

Learn how to build a full-stack production ready note taking app using Serverless and React on AWS from serverless-stack.com. Step-by-step open-source tutorials with screenshots and code samples included.

• Serverless Framework - 🛠️ - 🐙 - A toolkit for building serverless applications.
• AWS Lambda - 🛠️ - A compute service that runs your code in response to events.
• DynamoDB - 🛠️ - Fully managed NoSQL database service.
• Amazon Cognito - 🛠️ - Securely manage and synchronize app data for your users across their mobile devices.
• Amazon S3 - 🛠️ - Store and retrieve any amount of data, at any time, from anywhere on the web.
• AWS Amplify - 🛠️ - JavaScript Open Source Library with React, React Native Extensions.
• Amazon CloudFront - 🛠️ - Content delivery with low latency and high data transfer speeds.
• Create React App - 🛠 - 🐙 - Set up a modern web app by running one command.

Resources

• serverless-stack.com

Electron React Boilerplate ↗

A foundation for scalable cross-platform desktop apps all the way from development to distributing your app.

• Electron - 🛠️ - 🐙 - Build cross-platform desktop apps with JavaScript, HTML, and CSS.
• React - 🛠 - 🐙 - React components can be used on the client and server side.
• Redux - 🛠 - 🐙 - Predictable state container for JavaScript apps.
• electron-builder - 🐙 - A complete solution to package and build a ready for distribution Electron app with “auto update” support out of the box.

Resources

• Electron React Boilerplate website

Vue with Electron ↗

A foundation for scalable cross-platform desktop apps all the way from development to distributing your app using Vue and Electron.

• Electron - 🛠️ - 🐙 - Build cross-platform desktop apps with JavaScript, HTML, and CSS.
• Vue.js - 🛠️ - 🐙 - An approachable core library that focuses on the view layer only.
• Vuex - 🛠 - 🐙 - Predictable state container for JavaScript apps.
• Vue Router - 🐙 - Vue Router is the official router for Vue.js.
• Vue CLI - 🐙 - An approachable core library that focuses on the view layer only.
• electron-builder - 🐙 - A complete solution to package and build a ready for distribution Electron app with “auto update” support out of the box.

Resources

• Vue.js & Electron: The easy way. – Mikeal
• How to use Vue.js with Electron and Vuex

Code Coverage & CI ↗

Quickest way to get started with CI and Code Coverage.

• CircleCI - 🛠 - Popular managed CI server.
• Codecov - 🛠️ - Hosted coverage reports with awesome features to enhance your CI workflow.
• Bash - 🛠 - The Bourne Again SHell is an sh-compatible shell.
• GitHub - 🛠 - Powerful collaboration, review, and code management for open source and private development projects.

Resources

• Making code coverage easy to see with Codecov & CircleCI
• CI Provider Relationship
• Codecov Bash Uploader

Vue SPA with Laravel ↗

The best way to create a versatile and scalable PHP Web Application! It sure will make you fall in love with PHP (if not, Laravel). Laravel team has an official collaboration with the Vue, so Vue, Babel and Sass is already integrated before you even started!

• PHP 7 - 🛠 - 🐙 - A popular general-purpose scripting language that is especially suited for web development.
• Laravel - 🛠 - 🐙 - One of the most popular Object Oriented MVC PHP Framework with elegant syntax and golden standard software patterns.
• Vue.js - 🛠️ - 🐙 - An approachable core library that focuses on the view layer only.
• Laravel Mix - 🐙 - A build tool built on top of webpack, to easily compile any front end assets. (secret: works with or without Laravel)
• 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

• Building a Vue SPA with Laravel
• Laravel Tutorial: Step by Step Guide to Building Your First Laravel Application

FReMP: Flask ReactJS MongoDB Python ↗

FReMP stack is a highly scalable full stack framework, which can be used to build robust and modern web apps using Flask, ReactJS, MongoDB and Python.

• Flask - 🛠️ - 🐙 - The Python micro framework for building web applications.
• ReactJS - 🛠️ - 🐙 - A declarative, efficient, and flexible JavaScript library for building user interfaces.
• MongoDB - 🛠️ - 🐙 - A document and JSON-oriented database.
• Python - 🛠️ - 🐙 - A programming language that lets you work quickly.

Resources

• How to install FReMP Stack on Ubuntu?
• How to build a full stack web app using FReMP?
• How to deploy the app to Heroku?
• Official Website
• Github
• Boilerplate

Back-end

GCP Kubernetes Stack ↗

Stack used to deploy and manage a cluster of Docker containerized applications using Google Cloud services.

• GKE - 🛠 - Kubernetes cluster managed by Google.
• Kubernetes - 🐙 - 🛠 - Production-Grade Container Scheduling and Management.
• Docker - 🛠 - 🐙 - A tool to create, deploy and run applications inside containers.
• Stackdriver - 🛠️ - Stackdriver Logging allows you to store, search, analyze, monitor, and alert on log data and events.

Ethereum DApp ↗

A collection of tools for building decentralized applications on the Ethereum blockchain.

• Solidity - 🐙 - Solidity is an object-oriented, high-level language for implementing smart contracts.
• web3.js - 🐙 - Ethereum JavaScript API.
• Truffle - 🐙 - A world class development environment, testing framework and asset pipeline for blockchains using the Ethereum Virtual Machine (EVM).
• Ganache - 🐙 - Personal blockchain for Ethereum development.
• drizzle - 🐙 - A collection of front-end libraries that make writing dapp user interfaces easier and more predictable.

Rails Monitoring Stack ↗

Tools to use to monitor your Rails app in production.

• Skylight - 🛠 - The smart profiler for your Rails apps.
• New Relic - 🛠 - SaaS Application Performance Management for Ruby, PHP, .Net, Java, Python, and Node.js Apps.
• rack-mini-profiler - 🐙 - Profiler for your development and production Ruby rack apps.
• Sqreen - 🛠 - Security monitoring and protection for Ruby, PHP, Java, Go, Python, and Node.js Apps.

User Behavior Analytics via Segment ↗

Hosted tools to use to analyze user behavior for a web app.

• Segment - 🛠️ - A single hub to collect, translate and send your data with the flip of a switch.
• Google Analytics - 🛠️ - Enterprise-class web analytics.
• Amplitude - 🛠️ - User analytics to fuel explosive user growth.
• FullStory - 🛠️ - Capture all your customer experience data in one powerful, easy-to-use platform.

Streaming Analytics with Kafka, Spark, and Cassandra ↗

The Kafka-Spark-Cassandra pipeline for processing a firehose of incoming events.

• Kafka - 🛠 - 🐙 - Distributed, fault tolerant, high throughput pub-sub messaging system.
• Apache Spark - 🛠 - 🐙 - Fast and general engine for large-scale data processing.
• Cassandra - 🛠 - 🐙 - Highly-scalable partitioned row store.

Resources

• kafka-sparkstreaming-cassandra
• Applying the Lambda Architecture with Spark, Kafka, and Cassandra
• Streaming Analytics with Spark, Kafka, Cassandra, and Akka

Self-Hosted Devops and Collaboration ↗

Self-hosted open source devops and collaboration tools, suitable for enterprise.

• GitLab - 🛠 - 🐙 - Open source self-hosted Git management software.
• Zulip - 🛠 - 🐙 - Powerful open source team chat.
• Hubot - 🛠 - 🐙 - A customizable life embetterment robot.
• Sentry - 🛠 - 🐙 - Cross-platform application monitoring, with a focus on error reporting.
• Taiga.io - 🛠 - 🐙 - Project management web application with scrum in mind.
• Metabase - 🛠 - 🐙 - An open-source business intelligence tool.

Production Ready Django + Docker ↗

Bleeding edge Django template focused on code quality and security.

Build, test, and deploy pipelines are configured by default.

• Python 3 - 🛠 - 🐙 - A programming language that lets you work quickly.
• Django - 🛠 - 🐙 - The Web framework for perfectionists with deadlines.
• Docker - 🛠 - 🐙 - A tool to create, deploy and run applications inside containers.
• GitLab - 🛠 - 🐙 - Open source self-hosted Git management software.
• Caddy - 🛠 - 🐙 - The HTTP/2 Web Server with Automatic HTTPS.

Resources

• wemake-django-template

RESTful API with Java and Spring Boot ↗

Build a simple and robust RESTful API.

• Spring Boot - 🛠 - 🐙 - Spring Boot makes it easy to create stand-alone, production-grade Spring based Applications that you can "just run".
• Gradle - 🛠️ - 🐙- A build tool with a focus on build automation and support for multi-language development.
• Java - 🛠️ - Java is an Object-Oriented and one of the most used programming languages in the world.

Resources

• Building an Application with Spring Boot

Mobile

React Native with Expo and Hasura ↗

Hasura is an open source GraphQL engine that deploys instant, real-time GraphQL APIs on any Postgres database. This React Native stack uses Hasura droplets hosted on Digital Ocean.

• Hasura - 🛠️ - 🐙 - Blazing fast, instant real-time GraphQL APIs on Postgres with fine grained access control.
• React Native - 🛠️ - 🐙 - Build native mobile apps using JavaScript and React.
• Expo - 🛠️ - 🐙 - Build, deploy, and quickly iterate on native iOS and Android apps from the same JavaScript codebase.
• Digital Ocean - 🛠️ - 🐙 - Deploy an SSD cloud server in less than 55 seconds with a dedicated IP and root access.
• Auth0 - 🛠️ - A universal authentication & authorization platform for web, mobile and legacy applications.

Resources

• Udemy course: Learn the Newest and EASIEST React Native Stack
• Tutorial: Fullstack React Native with GraphQL and Authentication
• Guide: Hasura GraphQL Engine One-click App on DigitalOcean Marketplace

Unity Game Development boilerplate ↗

Unity is a game engine that connects to Plastic SCM to keep version control and large asset and huge repo management clean and frictionless.

• Unity - 🛠 - 🐙 - The C# part of the Unity engine and editor source code. May be used for reference purposes only.
• Plastic SCM - 🛠️ - 🐙 - PlasticSCM Docker image.
• TeamCity - 🛠 - A Java-based build management and continuous integration server from JetBrains.

Resources

• First steps with Plastic SCM in Unity
• Plastic SCM for Games

Workflow Automation with GitHub, Jira and Jenkins ↗

Boost your Productivity with GitHub, Jira and Jenkins.

• Jenkins - 🛠️ - 🐙 - Open source automation server for CI/CD.
• GitHub - 🛠 - The site to keep your code and open it to world.
• Jira - 🛠️ - Agile software development.
• Slack - 🛠️ - Where work flows.

Resources

• Integrating Jira, GitHub, Jenkins, and Slack in your workflow

Contributing

See CONTRIBUTING.md for information and guides on how to contribute stacks and tools.

License

To the extent possible under law, StackShare has waived all copyright and related or neighboring rights to this work README