How to Overengineer a Website like a true professional?

If you’re learning to code, it likely means you have a billion-dollar startup idea in your head. But before you can execute that idea, you’ll need to choose a tech stack. And choosing wisely is important, because changing it later can be quite challenging. Every app is essentially just a technology sandwich, and in this article, we’ll walk through how to make that sandwich.

We’ll explore popular tech stacks like LAMP, MEAN, MERN, and then we’ll architect our own tech stack from scratch, diving into the decision-making process for each layer. By the end of this guide, you’ll know how to overengineer a website like a true professional.

What’s in a Tech Stack?

The original tech stack, LAMP, emerged in the late ’90s and stands for Linux, Apache, MySQL, and PHP. Building a web application back then was much more complicated, often requiring expensive commercial software. LAMP was free and open-sourc****e, leading to the rise of web frameworks like WordPress and Joomla. In modern times, building a web application is much easier, but tech stacks have become more complicated because of the many companies selling shovels in the startup gold rush.

So, what exactly is a tech stack? A tech stack refers to the combination of technologies, tools, and frameworks used to build a web or mobile application, but it can be broken down into three main parts:

1. Front-End Layer: This includes the tools required to build a user interface (UI) for the end user on the web. It typically involves a JavaScript framework, or for mobile, it could be iOS, Android, or a cross-platform tool like Flutter.
2. Back-End Layer: This consists of a server-side runtime like Node.js or Python, along with a database to store user-generated data. Additionally, this layer is often provided by a cloud service provider, which is often locked into the stack.
3. APIs: These are the tools used to connect the front-end to the back-end. They may include something like REST or GraphQL that you roll out yourself, but more often, they include essential third-party services like Stripe for payments, Twilio for text messaging, and SendGrid for emails. These tools often do tasks that span both the back-end and front-end categories, so they are placed in the middle.

Popular Tech Stacks

Let’s take a look at some common tech stacks you might have heard of, starting with MEAN, which stands for MongoDB, Express, Angular, and Node. The popularity of this stack comes from its catchy acronym. Having a memorable acronym can give the impression that you know what you’re doing in the tech field.

Others have noticed this with the MEAN stack and created variations like MERN and MEVAN, using React and Vue, respectively. However, these acronyms don’t capture everything you truly need in a tech stack. To see what other successful companies are using, you can visit StackShare.io, where you can see the most popular technologies and which companies are using them.

Building Our Own Tech Stack

Now, let’s build our own tech stack from scratch. For this first round, we’ll use the hottest technology at every point, regardless of cost or complexity. Don’t worry — by the end of the guide, we’ll simplify things in a much more practical way.

Front-End Architecture

Let’s imagine we’re building the next MySpace, an app that requires user authentication, a database to store user-generated data, and the ability to scale globally. The first question is, where will customers consume the application? Is it on the web, iOS, Android, desktop, IoT, or something else? For this app, we’ll assume that most customers are on the web, but we might want to build a mobile app later.

For the web, the programming language for the front-end will almost always be JavaScript. While there are tools that can help you avoid JavaScript, I recommend embracing it for building the best web app. However, we need this app to scale, so instead of vanilla JavaScript, we’ll use TypeScript. This adds a type system on top of JavaScript, which helps catch bugs earlier and deliver more reliable code.

Next, we need a UI framework. Building a complex UI with vanilla JavaScript is painful, so we need a framework. After analyzing many options, you’ve chosen React. Not necessarily because it’s the best or the fastest, but because it’s the most popular. Popularity matters because it gives you a larger pool of developers to hire from in the future. Plus, React Native can easily be added to build a mobile app.

React alone isn’t enough, though. To scale our app, we’ll need a state management solution. There are dozens of state management libraries for React, but we’ll choose Redux. It’s popular, though it’s also widely disliked for requiring a lot of boilerplate code. But more code equals better quality apps, right?

We also need to address the issue of styling. Vanilla CSS isn’t enough, so we’ll use Tailwind CSS. This provides pre-built utility classes to style elements quickly, though it can result in messy HTML. For a more efficient CSS workflow, we’ll add a pre-processor like SASS. Additionally, we’ll use PostCSS to purge unused styles and optimize our CSS for production.

To bundle our front-end code, we’ll use Webpack. While it can be tricky to configure, Webpack is the most popular option for bundling JavaScript files.

Back-End Architecture

Now let’s go into the back-end, which is the more complex part of our tech stack. The most important decision here is choosing the database for user-generated data. A NoSQL document database like MongoDB or Firebase Firestore could work well because they’re easy to learn, inexpensive, and scale easily. However, they struggle with certain relationships, like the social graph we might need for our MySpace clone.

Relational databases like MySQL or PostgreSQL are the gold standard for handling relationships, though they can be more expensive and less flexible when dealing with changing requirements. For this demo, we’ll choose MySQL.

Since MySQL may not be fast enough at scale, we’ll add Redis as a second database for caching. Redis stores data in memory, making it much faster to read than from disk.

Next, we need a server-side runtime. There are many options to choose from, but if you are a JavaScript developer, you should go with Node.js. For the server-side framework, you should use NestJS, which supports TypeScript out of the box.

To interact with the database, use an Object-Relational Mapper (ORM) like TypeORM. We also need a web server to make our application accessible on the internet, so we’ll add Nginx to the stack.

Deployment and Infrastructure

To deploy our application, we need to standardize the environment using Docker. This will create a consistent Linux environment for deploying to any cloud server. As our app scales, we’ll need to orchestrate multiple containers, so we’ll add Kubernetes to manage that.

We’ll choose Amazon Web Services (AWS) as our cloud provider, but to make it more manageable, we’ll use Terraform to programmatically create and version our infrastructure. For version control, we’ll host our source code on GitHub, and use GitHub Actions to automate continuous integration and deployment.

APIs and Third-Party Services

Many of the tasks our app needs to do are too complex to handle on our own. For the front-end and back-end to communicate, we’ll use GraphQL, along with Apollo to help us build a secure API. For payments, we’ll use Stripe. For user authentication, we’ll use Auth0. To prevent inappropriate content, we’ll integrate Amazon Rekognition for image analysis. For text messaging, we’ll use Twilio.

At this point, we have a nearly complete tech stack. But it’s likely far more complicated than necessary. The key takeaway is that end users don’t care about the technology you use — they just want a good experience. Overengineering your stack may be a waste of time, especially if it complicates the user experience.

Simplifying the Tech Stack
Now, let’s throw all that complexity out the window and simplify our stack. We’ll start from a plain HTML file, and for interactivity, we’ll use Petite Vue, a lightweight alternative to Vue.js that can be added via a script tag. For CSS, we’ll use Bootstrap, which is quick and easy to get a decent UI.

For the back-end, we’ll use Firebase, which provides a document database that scales automatically, handles user authentication, and allows us to write serverless code using Firebase Cloud Functions. We won’t worry about containerization, Kubernetes, or Terraform. For continuous integration, we’ll skip it unless we’re deploying updates every day.

This simplified stack, which I call the Petite Fire Stack, is possibly the easiest way to build a full-stack web application.

Conclusion

By now, you should have a clear understanding of how to architect a tech stack, from the front-end to the back-end, and how to make decisions based on your app’s needs. The key takeaway is that you don’t need to overcomplicate things.

A well-chosen tech stack should serve your project’s goals without overcomplicating the development process. Focus on delivering a great user experience, and the technology will support that goal.

Give this list many hearts as possible if you think I added value to your knowledge, and follow for more.

Thanks for reading, and I’ll see you in the next one!

Don’t forget to follow me on following:
LinkedIn | Medium | Bluesky