Building a Mean Stack Application from Scratch: Project Overview
Overview
Welcome to “Building a MEAN Stack Application from Scratch”. In this project/course we will be building a full stack mean application from start to finish and then deploying it to a production server in AWS. I have read a lot of articles over the years and watched a lot of videos, and one thing I noticed is that they all lack context and/or are simplified to demonstrate a particular feature. They don’t really represent something that would actually be built in the real world. I wanted to create this course to give a comprehensive, full picture of everything that goes into creating a complete application and how all of the different pieces fit together.
In this course, you will learn
- How to outline a project MVP
- How to build applications using Angular
- How to set up and configure an Express backend server
- How to build APIs, Routes, and Controllers,
- How to create Databases and Schema
- How to send email notifications using Node
- How to secure a backend server
- How to create your own authentication service using Jason Web Tokens
- How to create an image cropper, save, and service images
- How to deploy an Angular application to AWS Amplify
- How to deploy an Express application to AWS Lambda
- How to secure and connect front and backend environments using API Gateway
I try to edit my videos as little as possible to provide the most accurate representation of what developing is actually like. I hope this course is helpful for anyone looking to learn, and please feel free to reach out to me if you ever have any questions. Good luck!
Tools You Will Need
Required
These are required tools that you will need to complete this project. All of these tools are free or virtually free. You should be able to complete this project without spending any money.
A Text Editor
I will be working with Visual Studio Code so this is what I recommend but you can use whatever code editor you like the most.
Github
We will be working off of a Github repository, separating each feature into its own branch. You will need Github to follow along with this project.
MongoDB Compass & Atlas
We will be developing locally with MongoDB compass and then pushing the database to Atlas when we deploy our application to production
AWS Account
We will be storing our images in an AWS S3 Bucket as well as using Amplify, API Gateway, and Lambda to deploy our project to production.
Optional
These are optional tools that you can use to follow along but do require purchase. I use these tools to ensure proper project management, speed up development, and stay up to date with growing technologies.
Lancer
I outline my projects and plan them using Lancer’s project management software. Project management is critical for successful deployments but I will be showing my project board all the time.
ChatGPT
I will be using ChatGPT to ask questions and get feedback while we develop. It is a regular process of development and I try not to edit my videos too much to show what it’s really like and not skip steps. It is also a tool I am making a point to get familiar with and incorporate into my workflow.
Copilot
Similar to ChatGPT I will be using Coplilot to get experience using it and speed up the development process. These tools aren’t going anywhere and I feel it is important to use them.
What we will be building
For this project we are going to be building a MEAN stack application called Retail Leaders. The application will be based on a project where experts and creators are able to connect. For this project users will not be able to simply register and become a member of the site. Instead, users will need to request to become a member, and a request will be submitted to the admin of the site. An admin user will then need to log in to review the user’s request and either approve or deny them. Only once approved will the user be able to view the different speakers and opportunities featured on the site, complete their profile, and engage with content.
To successfully complete all this functionality we will need to create a marketing site for users to land on and see what the site is about, a authentication portal to handle the user authentication, and the main application which will contain all of our functionality.
The Marketing Site
The marketing site will be the initial landing page for all of our users. While it could be built using a platform such as WordPress, since this is a MEAN stack application project we will create it as its own Angular app. We are doing this because we want our marketing site to be server side rendered. This will allow us to create an application that will be SEO-friendly while not limiting the features we are able to implement on our actual application.
Our marketing site will be a few pages to host our marketing material about our project and most importantly see an option to log in and request to become a member. When users click to login, they will be directed to our login page which will be its own separate MEAN application. There will be no need for our marketing site to interact with our database layer, so this should be the simplest part of our project.
The Authentication Portal
The authentication portal will be its own Angular application and Express server. We do this because it decouples the actual application from needing to handle authentication and allows it to only focus on application-based tasks.
The way this will work is once user click to login on the marketing site they will be taken to the domain of our authentication portal, where they will enter their login information. Once they have submitted the information will be set to the backend Express server where they will be authenticated. To complete authentication we will use Jason Web Tokens (JWT), where a token will be created using a secret key and the user’s information, and then sent to the front end and stored in local storage. The user will then be directed to the actual application.
From this point, our main application will then use the JWT found in local storage and communicate with its own Express server. The Express server will decrypt the JWT using the same secret key to then validate that the user is authenticated and allow for the requested API calls to be processed.
The Main Application
The main application will contain the actual functionality we will be creating. It will contain an variety of pages and components ultimately allowing users to view a dashboard, and then based on their user roles, create and engage with different types of content. For example experts will be able to create an expert profile to be featured on the site and creators will be able to create events. Additionally, there will be pages to show and filter the different experts and opportunities on the site, pages to show individual experts and opportunities, and different components to allow users to connect. be