Build A Full Stack App From Scratch!

--

Software engineering can seem daunting for beginners. There’s tons of articles, blogs, and YouTube videos about building various features but it can be quite a task to find a single tutorial that details frontend and backend knowledge together. For instance, it wouldn’t take long to find a step-by-step article on how to build a React app or one on how to connect a database. Finding one that describes both these tasks and how to combine technologies for one single app is a little more difficult.

This tutorial is meant to solve that very problem. Here, we will build a search directory web app for local businesses. This tutorial is an introduction to Javascript, Node.js, Express.js, React, React Router, MongoDB, Webpack, Sass/CSS, HTML and querying data from an API and from local storage. Because this is so much information, the tutorial will be broken into multiple parts. After reading each part, you’ll have a fundamental understanding of how to implement the above tech and create a full stack app.

The parts will describe building the app, starting from a blank file in your coding editor. We won’t spend too much time on styling — this tutorial is to help get the app up and running. While you follow along with the tutorial steps you can use my css styles to help get you started. Then, you can style it however you like!

The tutorial will teach you how to complete the below app:

View a video of the app -> here !

If you add the styling from the “advanced_styling” branch which uses material-ui, your app will look like the below:

View a video of the “advanced styling” version -> here !
and -> here !

Let me know if you have any questions or comments about the app!

Follow along with the code at this repo.

Get started with STEP 1 now!

--

--