What's in the Handbook?Schedule of Events
All About Chingu
Your Voyage
Pre-Voyage - Solo Project
Voyage - Team Project
Pair Programming Guide
Technical Resources
Choosing Your TechstackFront-End TechnologiesHTML-CSSSassJavaScriptjQueryReactReduxAngularApollo Client ( GraphQL )Other popular technologies include Vue and Ember.Back-End TechnologiesNode.jsExpressApollo Server ( GraphQL )DatabasesPostgreSQL ( Relational )MongoDB ( Non-Relational, Document )DevOpsTravisCIDockerDeployment OptionsAWS ( Amazon Web Services )GitHub PagesGlitchHerokuNetlifyApp Mockup ToolsFonts, Icons, Images, & MoreSoftware LicensesGit - Defining a WorkflowGit - BranchesGit - CommitsGit - Pull Requests
Project Resources
Glossary

Choosing Your Techstack

A tech stack is a combination of software products and programming languages used to create a web or mobile application.

Products and languages in the tech stack are divided into four basic categories - frontend, backend, database, and DevOps. The components that make up web applications are also divided between two categories:

  • Frontend-only application - Composed of only frontend products and languages and runs exclusively in the user's browser.
  • Full stack application - Composed of at least a frontend and backend, but may optionally include database and DevOps components.

The following lists some of the more popular products and languages to provide a view of how they are categorized. Remember that there are literally thousands of products Web Developers may choose from in the JavaScript ecosystem.

TechnologyFrontendBackendDatabaseDevOps
Basic
HTML
CSS
JavaScript
Express
GitHub Pages
Intermediate
Sass
jQuery
Angular
React
VueJS
Apollo Client (GraphQL)
NodeJS
MongoDB
Heroku
Advanced
Redux
Apollo Server (GraphQL)
PostgreSQL
AWS
TravisCI
Docker

Front-End Technologies

See Front-End Technologies

HTML-CSS

HTML is a markup language used to format web pages. The browser interprets your HTML to determine how to format the content that makes up your web pages. CSS is used with HTML and defines the styling to be applied to the content. As an example, you would use HTML to specify which content elements are headers versus body text, and CSS to define that headers are rendered in a 24 point, bold, black, Sans Serif font.

Sass

CSS Pre-processors extend CSS functionality by allowing you to declare your CSS as reusable variables. We highly recommend this for development teams.

Why should you use this? For example, if you want to change the theme color for your Header, Buttons, Footers, and/or Links, do you really want to go through all of your stylesheets to manually change that one color? With Sass, you can set a variable $theme-color and have every developer use it. Changing the theme-color becomes a one-line effort.

JavaScript

JavaScript is a browser scripting language that makes web pages interactive.

For more information about JavaScript checkout these resources:

jQuery

JavaScript library that allows developers manipulate the DOM. While a lot of websites may still be running on jQuery, a lot of the web development world is leaving it behind and turning to new tools such as React or Angular. We do NOT recommend putting more time into learning jQuery.

React

React is a JavaScript library created by Facebook for making reusable user interfaces by adding JavaScript logic into HTML. Flexible and light-weight.

This is a great next step to learn after HTML/CSS and JavaScript. We highly recommend learning this as it is very popular in the front end world.

Redux

Redux is a state management library for React. It has a lot of initial work involved in setting it up, so we would only recommend it for larger projects with a complex state. The library itself also abstracts a lot of the concepts, so it may be difficult for a beginner to understand and troubleshoot in Redux.

Angular

Angular is a TypeScript (JavaScript + Enforced Types) framework created by Google. It has more overhead than React but as a result, it has more methods / functions provided, such as form validation and page routing. If you want to use this, start a project with it -- trying to use it in an existing project is not going to be easy.

Apollo Client (GraphQL)

For those interested in making a GraphQL API, Apollo Client is an abstraction layer designed to help you make GraphQL API calls on the frontend and works with your main JavaScript library such as React.

Back-End Technologies

See Back-End Technologies

Node.js

Node.js is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser. Essentially, JavaScript for non-browser environments. If you didn't use Node.js for backend, another option could be Python.

Express

Express is a web application framework for Node.js for building APIs. It acts as an intermediary level between your client-side (user-facing site) and your servers/databases.

For example, if you want to make a RESTful API, you would configure Express to expose numerous API endpoints from which it can create, read, update, or delete items from your chosen database.

Apollo Server (GraphQL)

If you are interested in creating a GraphQL API, Apollo Server is a helpful layer on top of Express.

Databases

PostgreSQL (Relational)

PostgreSQL is an open source relational database that is much more concerned with standards compliance and extensibility than with giving you freedom over how you store data. It uses both dynamic and static schemas and allows you to use it for relational data and normalized form storage. MongoDB, with its unstructured approach, can’t do that.

Most jobs will probably want relational database knowledge.

MongoDB (Non-Relational, Document)

MongoDB is an open source database. It’s designed to be agile and scalable, and it uses dynamic schemas so that you can create records without defining the structure first. It also supports hierarchical documentation of data.

DevOps

TravisCI

Continuous integration (CI) products such as TravisCI integrate with Git to both automate and validate procedures such as pull requests. This type of automation eliminates the need for manual processes and improves quality by ensuring that required steps aren't inadvertently skipped. For example, CI tools can run linters, test scripts, and halt a PR if any errors are detected.

Docker

Imagine a full stack project with a client-side (React), back-end (Express), and database (PostgreSQL). When you are developing in a team, it may be difficult to get all three items to run exactly the same way for each person. There are various reasons for this, such as different operating systems, different starter data in the databases, etc. Docker solves this problem by wrapping each part in a "container" and lifting it up into the cloud to give each developer access to the same exact thing.

A Docker container can be seen as a computer inside your computer. The cool thing about this virtual computer is that you can send it to your friends; when they start this "computer" and run your code, they will get exactly the same results as you did.

Deployment Options

AWS (Amazon Web Services)

AWS is a hosting solution for commercial web applications. Although some Chingus have used it for Voyage projects, it is primarily recommended for very large and complex projects that will be shipped to many people. It's not necessary just for a MVP.

GitHub Pages

GitHub provides this simple hosting solution for frontend-only applications. The advantages of GitHub Pages is that it's free, simple to use, and tightly integrated with the applications GitHub repo

Glitch

Glitch is a web-based interactive development environment similar to CodePen. It has both VSCode and GitHub integration and is simple to use. However, it is best suited for smaller projects.

Heroku

Heroku is an application hosting service similar to both AWS, Google Cloud Services, and Microsoft Azure. Heroku's main advantage is that unlike its competitors, it provides a free tier that is capable of hosting full-featured fullstack applications.

Netlify

Netlify is an application hosting service that is free of charge, easy to use, and integrated with GitHub repos. Netlify is a good solution for any size app.

Copyright2021 Chingu Cohorts