How I Made A Full Stack Angular Application

In this article I will talk about my process and progress regarding:

• Choosing a project
• Gathering requirements
• Designing the application
• Learning required skills
• Creating a prototype
• The final application
• Deploying the website

You may find this article helpful if you: Are trying to learn from how others create full stack applications, need inspiration, or are a recruiter looking to see my ability to learn new things and share them.

About the project:

• Technologies: MongoDB, Angular, NodeJS, Express, Angular Material, S3, Elastic Beanstalk
• Created REST API for database with Express.JS accepting CRUD commands on book data stored on MongoDB
• Optimized UI to be responsive to different screen sizes using media queries
• Implemented routing, auth guards, and interceptors in Angular to improve user experience

Choosing A Project

I have done many personal projects based on my interests, but I have known for a good while that I need move on to develop something for another group or company. Recruiters want to see the impact your project has and making a project requested by another company is a definite step in that direction.

So, I began asking around and found my in-laws were hoping to have a website created separate from NaNoWriMo (National Novel Writing Month) for communicating information about writing books for national writing month. This would have the impact that family members and friends will use the site and how well it performs can be measured and improved. In the case of a personal project it may benefit others but in my experience you need to ensure there are plenty of people that want to use your application.

I determined the project should…

1. Have someone that is counting on the website to fill their needs
2. Uses skills in my primary field of interest
3. Look good on my resume/application for the kind of job/company I was looking for
4. Be small enough that I can take the project through to completion and be fully functional

So I asked myself, how well does this book project fit?

1. Fills real need for my family.
2. Uses Angular which I had just learned through academind.
3. I wanted to get a React.JS or Angular Front end development job. This would be MEAN full stack.
4. Does not require many pages and uses primarily things I was already familiar with.

Here is my description for the project:

The project allows writers to record book details for National Novel Writing Month and see family members progress towards their word count goal.

Gathering Requirements

I asked a friendly programmer to help keep me accountable to developing the application. I started by gathering requirements from my in-laws and friends who intended to use the application in 2022. I then based my design requirements on their expectations to discover what the site should look like and how it should work.

Here is an example of how I formatted my design document:

One page of the design document

My design was separated by the pages they would cover. The page had one or more persona’s meaning representations of people from the target audience. That persona would expect the site to act in specific ways to best fit their use case. The components on that page would have requirements based on the persona’s expectations. I determined I needed the following pages: CreateBook, LogIn, SignUp, MyFamily, MyBooks, EditBooks, and Home.

Designing The Application

Using Figma I made a visual interface based on the requirements and showed it to my father-in-law (one of the stakeholders) who made some suggestions which I quickly implemented.

Learning Required Skills

While gathering requirements I learned there were some skills I had not yet gained enough confidence in using such as:

Connecting to a database

Posting and retrieving data

Altering the page to react to changes in the database

My programmer friends gave me some suggestions on what technologies could solve this problem such as PassportJS and MongoDB.

Creating A Prototype

Before I completed the full stack courses Writing month was quickly arriving so I made an attempt to put something minimal together that would do the deed using react. The library that I knew fairly decently at the time. The UI came together and looked about how I wanted it but the back end was not ready yet so not wanting to release an incomplete project decided to keep working on it in preparation for the next year.

The Final Application

In the end I abandoned the react prototype feeling more confident in Angular after having completed a course in using it. I completed a Full Stack BYU-I course and the Full Stack Bootcamp at Nucamp. Specifically, I used this Angular tutorial. Seeing as the project that I created in Angular called MyMessages following the tutorial fulfilled many of the requirements for the project I decided to use Angular.

I altered the messages app to take and store book data and family groups to mongoDB. I grabbed a lot of the UI formatting I had created in the React.JS prototype and converted it over to Angular.

The application can be found here.

Deploying The Website

I deployed the website as two separate deployments using S3 buckets for the backend and Elastic beanstalk for the front end as suggested by the tutorial I followed.

Thank you for reading! If you liked this article please check out some of the other projects I created in 2021 here.