The Road From Frontend To Full Stack

By Jordan Brannan, Full Stack Engineer at Donut.

Hey, I’m Jordan, Full Stack Engineer (and big time crypto nerd) for the app team at Donut!

As a long term crypto fan, joining the Donut engineering team was a great opportunity. Donut is bridging the complexity of DeFi in the web3 ecosystem, making it more accessible. Before joining Donut, I spent three years working on my own startups. But I developed a strong preference for working on highly innovative products in a scrappy, startup work culture — so Donut’s the perfect fit. Plus, Donut’s vision to disrupt the current landscape of savings products is a great mission, which I want to contribute to.

Joining the team as a Frontend Engineer, I worked entirely on the visual elements on the app side for over a year. I led the Android launch back in February and our major v3 rebrand shortly after, plus a number of other popular features in the app. I recently moved into a full stack role, and wanted to discuss this experience. This could be helpful for engineers preparing to switch jobs from a more specialised area to a more general role, or those interested in understanding the other side of their engineering team.

What does full stack really mean?

In simple terms, the frontend is what the user sees and what they interact with in the app, and the backend is what the user doesn’t see. You know, all that behind the scenes stuff. Many backend engineers think frontend ones spend their days changing the colours of buttons, while frontend engineers think backend people spend their days querying the database. But the reality is that both parts work in unison and have a lot more crossover than an engineer may realise.

Let’s take an example. We recently re-launched our home screen, which was a mainly frontend update as most of the API calls we needed to use to get the relevant data already existed and were being used in other parts of the app. However, one area we did need a new API for was for the new dynamic Quick Actions section. As a whole feature, what it comprises of is an API call from the frontend to the backend via GraphQL, which then returns an array of QuickActions. If we break this down:

• Firstly the frontend calls a GraphQL query when visiting the home screen.
• This then calls one of our backend API endpoints, passing the user’s unique ID along with it.
• The backend then queries the database for the user a number of times to find all the information it needs. It then cycles through this data, comparing it to a number of different scenarios to determine which Quick Actions the user should see.
• The backend then returns this array of QuickActions on completion to the frontend.
• The frontend iterates over this array of QuickActions and displays the correct QuickAction card for each item in the array.

As you can see, both frontend and backend work in unison to help determine what the app looks like for the user. So to answer the question, a full stack engineer not only works on both the frontend and backend of an application, they can also take ownership over an entire feature. This minimizes the need to bring multiple engineers up to speed on the same thing. As a result, it also minimizes potential bugs that emerge with different approaches to the solution.

So, why go full stack?

Considering how rapidly technology changes, being able to adapt to new tech is one of the most important characteristics of a good engineer. When you consider that it wasn’t that long ago that the internet ran on the LAMP stack, you can see just how significantly it’s changed over the past 10 years. Now, with the introduction and requirement of being able to interact with Smart Contracts for web3 projects, we’re likely to continue to see further increments of the ideal tech stack going forward.

It’s not just about getting used to and picking up new tech quickly. When you have a team pushing to iterate and ship new features, there will be bottlenecks in development if you only have exclusively backend or frontend engineers working on it. Each engineer will have their own list of tickets they’re working on, and the frontend will only be able to work on certain tickets once the backend has finished their part. But when you go full stack, this is no longer an issue since you can now pick up a new feature and build out the backend and frontend simultaneously, without having to wait on other engineers.

Okay, how do I start?

Although it may seem a steep learning curve to pick up the other side of engineering, it’s actually not as difficult as you may expect. As long as you understand core development principles, you’ll be set. To get started, here’s a small list of what I believe are the most important parts for each side of engineering to be competent in.

Frontend

• HTML No need to be an expert but a solid understanding is useful
• CSS Hard requirement as no matter what framework you work with, you’ll need to have a good understanding. Don’t worry though, you don’t need to know how to center a div off the top of your head!
• JavaScript Very important as the majority of modern applications will use it. It’s also incredibly versatile, so once you understand JavaScript you can create web applications with a framework like React and mobile applications with React Native. It also gives you a head start if you choose Node.js as your first backend language.
• React Although there are other frameworks to consider like Vue or Angular, React is still the most commonly used and paves the way if you want to get into React Native mobile development.
• React Native Once you’ve got a good understanding of how to build web applications, you can now transfer those skills over and built out mobile applications using the experience you already have from learning React.

Backend

• Golang/Node.js Both great starting backend languages, but not a hard requirement. You could replace it with a different backend language like Java or Ruby, but I think Golang and Node are likely to become the next most commonly used backend languages.
• SQL Hard requirement so you know how to query a database and get the data you need for the feature you’re working on.
• REST/SOAP API Understanding how an API works is essential when building backends for web/mobile applications.

Once you’ve got a good understanding of these core areas, the next thing you can work on is getting to grips with DevOps, but we’ll leave that for another day.

Hello from the App Team!

I hope you enjoyed this brief introduction to what life as a full stack engineer at Donut is like, and that it’s helped anyone considering moving into a full stack role. If you have any questions or think it would be useful to go more in depth on life as a full stack engineer, feel free to leave a comment or get in touch!

If you think you might fit in with our hacky vibes then come and join us!