New developers find it hard to decide on what to use and/or learn when starting a new full-stack project. Not only that, but when I was starting, I was also struggling thinking with what it takes to create a full stack app. What do I need to learn? How does it all work together? Are my skills currently enough or do I need to learn more? Is using Bootstrap okay? Or am I cheating? The project might be a side-project, university assignment, final year project, business idea, or hackathon project. 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. So what are these components? Let's start with the easy one, the user interface. 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. I'm sure many of you here have a pretty good idea of what a user interface is and what role does it play. So let's move on to the next one. Database Again a pretty straightforward one. 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. This one is also pretty easy to understand. You might not know how to use and set it up, but most probably you know how it works — it stores data. Next is API. 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. If that's the case, don't worry because I was in the same spot when I was starting. 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. If you have no idea what HTTP protocol is, you can watch this video by Traversy Media. I highly recommend you watch the video to understand this topic. HTTP Crash Course 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. To understand what I meant by location reference, try to go to this link of a , the URL of the photo is the location reference. This URL is the thing that will be stored in the database. I'll explain how you can use this link to show it in your app later. cat photo 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 , , and , 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. AWS S3 Firebase Cloud Storage Cloudinary 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. But how does everything work together? When I was starting, I did know some of the components needed to build an app. But I really had no clue how they worked together. To explain this, I will use the MERN stack as an example. MERN stands for ongoDB, xpress, eact, and ode.js M E R N 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 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. GET 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 , , and request respectively. POST DELETE PUT 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 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. POST 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. Conclusion 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. Finally, I wish you all the best in your journey of learning to build a full-stack app. If you have any questions, feel free to , I will try my best to answer your questions. dm me on Twitter

Fetch

Google

Instagram

Twitter

YouTube

How To Know If You Are Ready For Internship?

Read My Stories

Too Long; Didn't Read

Boost your HackerNoon story @ $159.99! 🚀

How to Get Started with Fullstack App Development

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

How To Know If You Are Ready For Internship?

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

How To Know If You Are Ready For Internship?

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps