My 2021 Web Development Stack
Beginning your web development journey? Take a deep dive into what frameworks might help you build your dream Web App.
The world of web development is vast and rapidly advancing. Today, there are myriad possible combinations of choosing the frameworks and technologies to help you build your web application. Gone are the days where the go-to option was as simple as firing up a Linux/Apache/MySQL/PHP environment to build your application and serving static HTML pages with basic CSS styling. The entire look and feel of the Web have changed drastically over the last 2 decades. Millions of developers and Silicon Valley forces like Facebook and Google have been at play for years in improving the state of web development- the look, feel, performance, security, and a whole lot more.
Most people are so used to seeing today’s lightning-fast and aesthetic sites with modern-day UI elements such as Modals, Carousels, Breadcrumbs, Sliders, etc. that they forget how far the state of the Web has come in the last 2 decades. Here’s an image of Thefacebook (pre-cursor to Facebook) in its early days.
Over the past three years, I’ve spent countless hours learning different frameworks and exploring different stacks along my journey in the world of Full-stack web dev. I’ve explored different front-end frameworks such as React, Angular. I’ve messed around with different Backend frameworks such as Ruby on Rails, Node.js. I’ve tried different database providers such as MySQL, MongoDB, Google Firebase. A lot of these choices were shaped by what’s easy to learn (though courses on Udemy, Coursera, etc), the number of tutorials available on sites such as Medium and StackOverflow, my experience working at a startup where I worked on a MERN-stack app. For those who are not familiar, MERN stands for MongoDB, Express.js, React, and Node.js.
Furthermore, my interest in learning new dev frameworks was also heavily influenced by my desire to build consumer-focused applications. For instance, one of my biggest side projects was building a full-fledged Resell Marketplace for Sneakers and Apparel (similar to StockX or GOAT). Here is a preview of what it looks like:
Through trial-and-error, I’ve finally reached a point where I’m extremely comfortable with the tech stack that I use on my current projects (stay tuned and follow for updates ;). Without further ado, here are the different frameworks I use today as part of my own personal stack for web dev. As I run through each one in detail, I shall also explain my reason for using it and what I particularly like about it.
Contents:
· Front-end:
∘ React.js:
∘ Next.js:
∘ Redux:
∘ Tailwind CSS:
· Back-end:
∘ Next.js:
∘ GraphQL:
· Database:
∘ MongoDB Atlas:
· Authentication:
∘ Next-Auth:
· Additional Services/APIs I use:
∘ Amazon S3:
∘ Amazon SES:
∘ Algolia:
∘ Stripe:
Front-end:
React.js:
I’m a big React.js fan. Today, React.js ranks as the most favored Front-end framework. React.js makes it seamless to code UI components. I won’t dive deep into the performance, flexibility, speed, and other benefits. There are a plethora of articles online doing that already (here is one).
However, I will talk about the thing that I love the most is the React community and the extensive 3rd party bundles that can be integrated with React to help you build modern UI (whether it is full-fledged UI libraries, such as Google’s Material UI and React-bootstrap), or a small library build to customize Dropdown menus such as React-select). There is some library out there to help you achieve anything you wish to add to your app’s look or functionality.
Next.js:
Probably, the most underrated of the lot. Next.js is a React Framework that adds a lot to React by enabling Server-side rendering, Static Generation of pages, Serverless endpoints, and a lot of other benefits.
React is great, but when used by itself, may not be sufficient for production-level applications. As I mentioned earlier, my interests lie in building consumer-focused applications which may be used by a lot of users and may need to be optimized for Search Engine Display. Ever wondered when you search for a Netflix movie, how Google shows you a link to the movie itself on Netflix?
This is possible through Search Engine Optimization (SEO). I won’t explain a lot about this but the fact that this is possible only through Server-side Rendering or Static Generation, where your frontend code in HTML is delivered from the server itself and not loaded on the client-side every time you send a request. This is precisely what Next.js enables you to do seamlessly. Trust me, you don’t want to try server-side rendering a React app (too many hassles).
If you are wondering what the difference is between Server-Side Rendering and Client-Side Rendering, here is a great article to read.
Next.js is also great in that you can use it to build serverless apps. Earlier, I used to use an Express.js server to make custom endpoints to handle my backend logic. Thanks to Next.js, not anymore. More on this under the Backend Section.
Redux:
Redux acts as a centralized home for all your data in a React app. This makes it extremely easy to handle the flow of data within your application and access it at any level. No need to pass data down multiple layers of components. Furthermore, Redux makes it extremely easy to debug and trace the flow of state changes in your application.
Setting up Redux in a Next.js app might seem stressful since there are not many developers integrating these together. A lot of Next.js users choose React-context or some other storage library. However, for complex web apps, the extra step is worth it. A lot of tech companies such as Airbnb, GOAT, have integrated Redux in their frontend application.
Tailwind CSS:
As a full-stack web developer, one of my biggest challenges is to keep my codebase lean. This is especially difficult to do when every react component has an additional CSS or SCSS module to go along with it. This was until I discovered Tailwind CSS. Tailwind CSS allows you to style HTML elements without ever having to leave your HTML code.
Tailwind is a utility-first CSS framework. Unlike other CSS frameworks like Bootstrap or Material UI, it doesn’t come with predefined components. Instead, Tailwind CSS operates on a lower level and provides you with a set of CSS helper classes. Furthermore, unlike Bootstrap and other UI libraries, it doesn’t add unnecessary performance hindrance to your app by requiring heavy data requests to load in the library components on the client-side, a large chunk of which is not even be implemented in your app.
Tailwind also makes styling a lot easier and faster. Take a look at the following example:
# CSS Class:.container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
margin-bottom: 2rem;
}# Same styling with Tailwind CSS directly in HTML:<div classname="flex justify-between items-center p-4 mb-8"> ... </div>
Which one would you prefer to use on a daily basis? For me, it’s a no-brainer.
Here is a tutorial on how to integrate Tailwind CSS in your app.
The authors of Tailwind CSS have also built a repository full of UI elements already styled in Tailwind CSS, known as Tailwind UI. Easily add complex components such as modals and Grids without having to learn the CSS.
Back-end:
Next.js:
As I already mentioned, earlier I used to create a custom Express.js server with endpoints as part of my backend. This would require maintaining two different code bases- one for front-end and backend each. Ever since I switched to Next.js, I don’t need to create a custom Express.js server anymore and can do with only one codebase. This is enabled by the API Routes feature of Next.js. Next.js allows us to create custom endpoint /api within the same app to handle backend functions and create endpoints.
Here is an excerpt from the Next.js website:
“API routes provide a solution to build your API with Next.js.
Any file inside the folder pages/api is mapped to /api/* and will be treated as an API endpoint instead of a page.”
I can still integrate all my Node.js packages which I used to integrate into my Expess.js server. For people who wish to create an Express.js server, Next.js allows you to do so.
GraphQL:
GraphQL is one of my favorite additions to API development. It is a query language that allows you to customize your HTTP requests by requesting only the data you might actually need.
For instance, if you were returning hundreds of thousands of objects of a type User from your API, while you only need to fetch their name and ids for your functionality, you would be compromising on speed. This is especially important for slower networks. With GraphQL, you can specify exactly what fields you want to fetch as shown below:
# GraphQL query to fetch the users name and ids only{
getUsers {
id
name
}
}
GraphQL provides a complete and understandable description of the data in your API, making it easier to maintain over time. GraphQL clients are also available for iOS, Android, and other client-side frameworks.
Database:
MongoDB Atlas:
MongoDB is an extremely reliable and easy-to-scale database for your web app. It also comes with a free tier which is really useful for development. MongoDB has a lot of advanced features such as auto-sharding, aggregation, etc. which are important for scaling complex applications.
Using MongoDB also guarantees high performance and it is really easy to set up with any tech stack.
Authentication:
Next-Auth:
With Next-Auth, it only takes a few lines of codes to add authentication with emails, Google, Facebook, and a whole lot of other Auth Providers. As the name suggests, the library is built around Next.js and works with its server API routes.
Additional Services/APIs I use:
Amazon S3:
I use Amazon S3 to store images and serve them on my app. S3 is the perfect cloud storage option out there.
Amazon SES:
If you wish to send marketing or notification emails directly from your app, Amazon SES one of the best tools for that.
Algolia:
Algolia is a Search and discovery API used to build complex e-commerce apps (where you need to display thousands of products) or media platforms (such as blog sites or even something like Twitch). Algolia lets you build rich content displays such as for products with features such as Sorting, Filtering, Pagination, and so on. It handles all the logic for you that goes along with building a smooth search and discovery experience for your app saving you thousands of lines of additional code.
Stripe:
API for integrating payments into your app. Really user-friendly and what I like particularly is their customer support.
While these are frameworks I recommend you integrate into your stack, one must realize, that when it comes to choosing your stack there is no right or wrong (unless the framework is simply incapable of fulfilling the required functionality). Every web developer has their own journey and along this journey, you might mess around and pick up new frameworks that you may personally like or find easier to understand.
Lastly, tech frameworks keep evolving and new ones keep emerging. My 2021 stack is very different from my 2020 stack. Hence, the title of the article explicitly states the 2021 edition. Look out for more content and tutorials on implementing different functions and features in each of the aforementioned frameworks in my upcoming entries.
Till next time, happy coding :)
