TL;DR Choosing a tech stack is like preparing a homemade burger. It takes time. there is a TL;DR at the very end of this guide if you are more on the McDonalds side of things. There is also a shortcut tech stack suggestion in the according sections depending on the purpose of your cooking process. Enjoy!
When it comes to choosing a tech stack the possibilities today are endless. I wasn't a programmer 15 years ago (although I had a C++ for dummies book on my bookshelf). But from what I hear, the LAMP stack was kind of the GOTO strategy when it came to choosing a tech stack for a web app. You couldn't do anything wrong with that.
If you were to go less technical, you’d the one and only WordPress. How do you like that? 20 seconds for making your tech stack decision 😁
Now things are different. And while you still won't do anything technically wrong by choosing the LAMP stack or WordPress for a regular web app, nowadays there are so many more factors that will influence the choice of your personal project.
1 - Deciding Your Purpose
To start your research in a good direction, you’ll need to define the purpose of the project.
For this post I’ll simplify just a little bit and assume that the 4 main reasons for starting a personal project are:
A. Learning (prepare for interviews, get better at your job/university, etc.)
B. Showing Off (blog, CV, portfolio page, etc.)
C. Testing an Idea quickly (business, MVP, fun project, etc.)
D. Build a mature idea
Depending on your preference you will go into different directions with your initial research. In any case, I recommend that you get started with your project on the right foot, by investing a bit of time in preparing it.
After reading this, you should have a good idea about the thing you are going to build, its requirements, and why you want to build it.
But before diving in you should grab yourself a beetroot juice and reflect for a few moments about the fundamental technical questions for choosing a tech stack.
Fundamental Technical Questions
Static or Dynamic?
There are different types and degrees of dynamicity for a web application. Here just a little sip to give you a feeling:
A blog is normally a fairly static page. Its pages are generated from the contents that usually lie in your CMS system.
On the other hand, a multiplayer card game is highly dynamic. Things are changing all the time and need to be updated in real-time.
You could also generate every blog post dynamically as the user request comes in, however, if your posts are not pre-generated statically, they will be hidden in the database and there is a good chance that Google won't index it.
Frontend and/or backend web framework?
I'd suggest that most of the time it's a good idea to refer to frameworks on both sides if projects are somewhat bigger or set up for collaboration. Otherwise, you or your colleagues will be building your own frameworks which are most of the time not necessarily a good thing, and even project-killing.
For a personal project, you can get frustrated quickly when you see that your solution turn into spaghetti code.
For a professional project, having frameworks provides a guideline of how things are built, so that colleagues will have an easier time understanding your code.
Self-hosted, managed hosting, or serverless?
Do you want maximum flexibility being in charge of the server and all the liabilities that come with it, like the need to update, manage security, and all the installations yourself?
Do you want to use a managed platform solution like Heroku or firebase being restricted to what they define as their platform's standards?
Or do you want to get into serverless because you like to enjoy the flexibility of a server without the burden of maintaining it?
CSS framework or not?
I am a desperate bootstrap user, a CSS framework that gives you an acceptable and responsive look without much effort. Anywhere I go, bootstrap follows me for my personal and professional projects (I really feel haunted by it).
It can look quite nice too. But it's always generic (at least from what I've seen in the last 5 years). Sometimes you just need something extra. A real design or fancy interfaces. In this case, it's time to brush up your CSS skills or take some frontend framework with an accordingly beautiful components collection.
1. A - Learning
Sometimes your biggest motivation to rock a project is to prepare for a job or to get better at what you are doing at work or at university. You are not in a hurry and can take your time for more thorough research and understanding as well as for building the thing from the ground up.
If at the end of this process you’ll have a usable application on top, that’d be a great result, right?
Still, your main goal is to learn about Full Stack development and a good chunk of your time will actually go into understanding the big picture of what you are about to build.
LEARNING ABOUT TECH STACKS SHORTCUT TIP:
Follow this step by step tutorial: serverless-stack.com You’ll have learned a ton and you’ve built a real serverless full stack application in the end including all best practices. You’ll also have maximum flexibility on how to continue your project. I’m offering a coaching package to guide you through the process if you’d like to max out on learning.
I’ve got to be honest, I didn’t do much research back in 2016 when I built my first web app. I did it with a technology that we worked with at my first job.
In retrospect, it wasn’t particularly cool tech (CakePHP, the Ruby on Rails for PHP) but I had my purpose for learning it and I needed to understand how things work.
But if I worked a little bit smarter than harder, I could have put in a bit more thought into preparing it, and then into understanding how CakePHP and the LAMP stack work in comparison to other stacks.
I’d had learned much more. I’d also be creating useful products right from the start and my portfolio by now, would be more mature with more projects actually running in production, instead of tutorials lying around in my GitHub account.
So, here is what you can do. First of all, understand the ecosystem, only then start building.
To understand the ecosystem, you can try these 3 exercises. But you should already have put some thought into preparing your web app project, before doing them.
To get an overview of the different technologies available to a full stack developer, first, have a look at techstacks.io/top/. As a little exercise, you can try to destructure the LAMP anagram and view the current popularity of its technologies in isolation as well as their alternatives.
- Can you really substitute L?
- What does A mean?
- Why is M so popular and which is the even more popular alternative today?
- Is P dying?
Also, try to interview Google about the problem you are trying to solve with questions like “Best tech stack for [YOUR USE CASE]”...
Other Google attacks that will come handy:
- Serverful vs serverless
- Best cloud provider for XXX
- How to choose a backend for a web app?
- Best frontend framework 202X
Having gotten a good overview over tech stacks and with an arsenal of quality Google knowledge you’ve probably learned enough to skip over to step 2.
1. B - Showing Off
By showing off, I mean giving people a window to peek into what you are doing or about to do.
You'll want to keep such a window as clean and as beautiful as possible.
But at the same time, you don't want to spend tons of resources on building the frame and adjusting the axes (there are window construction services who do all of that much better).
The main goal here is to present your understanding of what is esthetic and user-friendly. For a full stack dev, it doesn't matter that much if you built everything from the ground up or if you used existing solutions to power you up.
In fact, it is a good sign of your technical understanding, when you know when to use solutions that bring you up to market fast, even if they don't require much code at all (you’ll be surprised, what you can do with low code tools only in today’s awesome tech times!)
The impact that you have with your solution is often much more important than the amount of time and technical sophistication that you are putting into it.
SHOWING OFF SHORTCUTS
If it’s a simple site like a portfolio/CV/business card page use webflow and its free plan.
If you need a CMS because you’d like to run a blog or something, and you are not willing to pay 20 bucks for the webflow design & developer features, then check out webflow alternatives or get a bit more technical with some netlify templates. Netlify hosting will be certainly free for your personal site or you can set up WordPress and Wix for less money as well.
Let's say you'd like to build your CV portfolio website. Do you really need to spend a lot of time on it as a full stack developer?
Or should you have it up and running in no time, create the content, add some fancy styles, and then focus on the actual portfolio projects that will bring you the actual skill, fame, and money?
As a Full Stack dev, it's quite nice to have a project that shows your understanding of web design and UX.
So, choose a technology that will make the set up as painless and as fast as possible. A technology, that will encourage you to learn about web design best practices instead of fiddling with technical problems.
Otherwise either your content, your web designs, or your time will suffer.
As an example, take my first developer blog. I decided to use a static site generator called Jekyll that would run on my own Ubuntu server. Because I wanted the challenge and because I didn’t know how to make a better decision than running a few Google searches on “Best programming language for a developer blog”.
It was said that Jekyll is a cool developer blog technology, so I went with it. Yes, it was a learning short term, setting it all up for a few weekends. But guess what suffered most?
In the long-term, I had quite a barrier doing anything in terms of styles, because I didn't have enough of a grasp about how things work together. So the styles suffered...
And then hosting it on your own server might require a few automations that you will maybe never come to do in your busy life. So bringing in new content was slower than needed...
My next blog experiment was running on WordPress. I spent a day or two to set it all up. But somehow I don't feel that I belong to WordPress.
All those weird templates and plugins and subscriptions trying to sell you up on some funny service they offer because it is needed because WordPress has happened to create an environment of stuff around it.
Also, WordPress encapsulates me in its weird PHP environment. I don't feel free to pack up the code I've drag'n'dropped so far and leave the platform for good if I want at some point.
And I'm not gonna touch here on WordPress' favorite topics, like security and performance...
To sum it up, you probably want something that looks nice but is less of a technical challenge.
So don’t hesitate to Google up some no-code and low-code tools.
My personal preference for a static or CMS-driven website would be webflow.io. The fullstack.coach is built on it. It has a great focus on Design, but will also solidify your understanding of frontend stuff like HTML and CSS best practices like flexbox, because it’s very developer-friendly and actually generates readable exportable code.
If you care a lot about the budget, you can look for similar tools, for example here. Webflow’s simple site builder is free but if you need a bigger blog or a shop, you should be comfortable spending a bit of money (personally, I also prefer to spend some money upfront for an all in one solution and nice design capabilities on webflow or Wix instead of my decision muscles being bombarded by paid templates and plugins on Wordpress).
1. C - Testing an Idea
My entrepreneur friend Lance would say that you don't need anything more for testing an idea than sales appointments and a clickable PowerPoint prototype. Got some credit cards charged? Voila, idea tested and validated! Now start building!
But I totally get if the business side of your project is not that important to you yet. Or maybe you are not even sure if you can build that thing at all? And still, you'd like to get to the product quickly. In this case, I'd recommend something that is set up quickly. And at the same time it should have 2 main purposes:
It should still encourage you to develop good quality software including best practices because you’d probably like to work on it further after you’ve validated your idea, right?
TESTING IDEAS SHORTCUTS
Use the bento-starter.netlify.app, this will give you a running application within a few hours. you will have set up a progressive serverless web application including authentication, a database, a CI/CD pipeline on CircleCI, an automated testing environment, awesomely ESLinted code in VScode, and much more.
If you have experience setting up stuff and need more flexibility than firebase can offer you, then check out the serverless-nodejs-starter for your backend and on the frontend create-react-app hosted on netlify.
It should also be usable by the end-user right away. You just add functionality on top. However, you should probably have some grasp of software development.
The set up of that thing should not take much longer than 2-3 hours (or maybe a day if you have less experience or are more skewed towards digging into stuff).
Yes, a few hours is all it takes to get you up and running with a modern tech stack including all the relevant features like hosting, authentication, and routing.
On top, software engineering best practices are often included in these pre-baked solutions so that you'll be right away running with CI/CD, automated testing, framework-based frontends, and well-structured backends.
A good resource for such solutions is awesomestacks.dev. Check out some stacks that cover your use case and head over to the next section.
1. D - Production-ready Applications
There is no real shortcut for choosing a tech stack for a production-ready website.
The most important point here is that you are clear about the requirements of your application and its future use.
If you are serious about it but have no idea where to start, you might find interesting points in all sections from 1. A to 1. C and then continue with 2.
2. Get Advice from the Tech Stack Community
Ideally, you already defined some requirements early on by preparing your web app creation process and now is the time to bring them to action with what you have learned from the overview of the previous step.
So, you know what you want and what you need and you also have gotten a few suggestions from my side that might help you.
But you don’t have to stop here. Getting even more input will solidify your decision.
At stackshare.io you will see many real-life examples and people talking why they chose different stacks. You can also get advice about your particular case.
Now you will do something crazy:
Register at stackshare.io with your GitHub account and become part of the feed with the Get Advice feature.
Send me the link to your stackshare inquiry or post it in the comments below this post, then someone from fullstack.coach will take a look and comment on your inquiry. After all, thinking about awesome full stack products is our passion ;)
Make sure to answer the following questions to get good advice from the community:
- Why do you want to get your project up and running? What is the purpose of it?
- How many users will you potentially have?
- How will be your potential data throughput?
- What kind of computations will your app need to run?
- Which tech have you considered so far and why?
- Do you already have top candidates on your list?
- Which questions do you need to clarify, before you can get started?
3. Reflect and Decide
Now you are at the final step. You’ve done your own research and you’ve asked the experts.
All there is left to do is to compare proposed solutions and make a decision.
Take one more look on this curated list of proven stacks that solve particular problems with guided setups and tutorials at awesomestacks.dev.
Check out what could be a good fit for you and regarding what you’ve got to know so far.
TL;DR - Start Creating!
I hope you excuse the circumstances that we are not in 2005 and that the LAMP stack and WordPress are not the only solutions anymore. And that reading this guide took longer than 20 seconds.
This guide and all the decisions along the way might even have caused you headaches.
On the other hand, the solution might be simpler than your decision muscles are willing to admit.
Are you looking to go deep and max out on Learning?
Does it have to look cool in order to Show it Off?
Or do you want to get your web app started Testing Your Ideas quickly and keeping maximum flexibility?
---> When you know what you want, you can zoom into the right type of research.
------> Then you will be best prepared to ask the experts about your concrete use case.
--------> After getting in some feedback, you’ll have another shot on making some research on that and finally choosing your stack.
Having done all that, you have learned a lot! Don’t overthink and don’t overcomplicate the final decision. It’s not that ”final” after all. You can always change and mix up things in tech. Sometimes you will have to throw away your creations, too. Keep agile and open-minded!
Most important is that you get started building that thing!
