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.
|Apollo Client (GraphQL)||✓|
|Apollo Server (GraphQL)||✓|
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.
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.
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.
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.
If you are interested in creating a GraphQL API, Apollo Server is a helpful layer on top of Express.
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 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.
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.
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.
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 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 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 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 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.