New developers find it hard to decide on what to use and/or learn when starting a new full-stack project.
“A Full Stack Developer is someone who can work on both the back-end and front-end of systems.”
Understanding the big picture
Before you start developing or creating an app, you need to understand the big picture first, so that you know what it will take and what things you need to learn.
There might be things that you already understand and know how to do, but you don’t know how these skills play in the big picture.
So what does an app need?
Generally speaking, a full-stack app has a few components that are working together.
- Database ⇒ to store data
- Storage ⇒ to store assets
- API ⇒ to process request
- User Interface ⇒ to let users interact with your app
One thing to note is that hosting won’t be covered in this article. While it is an essential aspect of distributing your apps to your users, it is not something you need to worry about when you’re in development.
Most likely, you’ll be developing on a local machine (i.e. your laptop) in localhost. However, the main thing you need to know about hosting is it’s a place where all of the components live.
You probably have heard of the terms frontend and backend. In this case, the database, the storage, and the API collectively are called the backend, and the user interface is called the frontend.
Most, if not all, full-stack apps must have at least a database, an API, and a user interface. Storage is optional depending on the requirements of the system you’re building.
Explanation On The Component
User Interface (UI)
The user interface is what the users are interacting with. This might be a website, a mobile app, or a desktop app.
Database
A database is a component that stores the data of the app. It can be a user’s email and password, a price of an item, a user’s address, and so on.
Application Programming Interface (API)
This is a big one. You might have heard of it but you have no idea what it is and how it works.
In the context of building a full-stack app, an API usually is the server-side code that handles the request made by the client (i.e. the user interface of your project). For example, if a user wants to buy an item in an e-commerce store, the transaction needs to be processed by the API or the server-side code. This process is done through HTTP protocol.
Processes that can be handled by the API may include updating the stock count of an item, creating a new order for the purchase, send a confirmation email to the customer, notify the seller, and many more.
In a nutshell, the API acts like the operator of the app. It does all of the work.
Processes that can be handled by the API may include updating the stock count of an item, creating a new order for the purchase, send a confirmation email to the customer, notify the seller, and many more.
In a nutshell, the API acts like the operator of the app. It does all of the work.
Storage
You might be confused with this one because it seems like the role is the same as the database right?
Well, not exactly.
Storage is a place to store assets such as photos, files, and videos. All of these assets can’t be stored in a database because it is not in a text or string format. The database usually stores the location reference of the assets in the storage.
An example of storage is simply the folder on your Desktop right now, which is called a file system. There is usually a dedicated folder in the project that is used to store user-generated assets.
Apps like Instagram and YouTube need a place to store those files that will be fetched later. However, with big platforms like Instagram and YouTube, they usually will use external cloud storage.
Services like AWS S3, Firebase Cloud Storage, and Cloudinary, are some of the examples of it. These services offer a dedicated server just to manage and store assets. You can explore and learn more about them later, but all of those are a part of the storage component.
The most common use case for storage is to store user-generated assets. If your app does not have a feature that allows the user to upload files, photos, or videos you can get away with having no storage.
I hope that clears things up.
How Everything Work Together?
To explain this, I will use the MERN stack as an example. MERN stands for MongoDB, Express, React, and Node.js
This stack consists of all of the components I talked about previously except for the storage.
- Database ⇒ MongoDB
- API ⇒ Express & Node.js
- User Interface ⇒ React
Imagine a to-do list app built with this stack. Features include: users can add, delete, edit, and view a task. They can also see a list of all the tasks.
When a user opens your app for the first time, the React app will make a GET request to the API to fetch all of the user’s tasks. The API will then fetch all of the data needed from the database, process it, and send it back to the React app.
From here, the React app will render the data provided by the API and the user will see their task on the home page.
The user can also add, delete, and edit by making a POST, DELETE, and PUT request respectively.
As you can see from the example, every component has its own role.
Now imagine the to-do app that lets the user upload a photo to a task. The React app will need to send the photo to the API via POST request, the API will then store it in the file system or upload it to an external file storage. The API will also store the location reference of the photo in the database.
Next, to display the photo in the UI, the React app will reference it using the location reference stored by the database and fetch the photo from the storage. It may look something like this in a React app.
<image src="https://www.vets4pets.com/globalassets/close-up-of-cat-looking-up.jpg" />I hope by now you have a clearer understanding of how everything works together. By the way, you can always replace the MERN stack with any framework combination of your choice. The important thing to note is you know which components does the framework satisfy.
Wrapping Up
Learning how to create a full-stack app is a long journey. It will take time to master every aspect of it. Even then, you won’t be able to catch up with all the available technologies and services provided.
The good news is, you don’t need to know everything!
Just understand the core principle of how it works, then pick and choose whatever frameworks, technologies, or services that you need to make it work.
Remember that the important thing is your ability to put things together, and solve a problem – tools are not important.
