Creating a portfolio site using Angular 🛡️ and Firebase 🔥(Part 1)
Tags: angular, firebase, juniordev, tutorial
Published: 2020-06-14 16:27:32

Creating an online portfolio can be quite daunting, especially when you code it from scratch instead of using a content management system, such as WordPress. 

This is my attempt at creating a tutorial, on creating an [online portfolio](https://jayjohnson.co.za/), and my first attempt at creating a [github project](https://github.com/JohnsonJay/Ng-Portfolio) which I'd like other devs to collaborate on.

I had previously created a portfolio site in an attempt to showcase my skills while searching for a job... Unfortunately this site was created using only HTML and CSS (I wanted something done quick and dirty 😅). 

I recently decided to convert my portfolio to an Angular application, and I really enjoyed the process. This made me want to create an open-source version of my portfolio site for other developers to use.

You may be wondering why I chose Angular and Firebase?? 🤔
Well it's because I've been using Angular for a while now and it integrates well with Firebase (mostly thanks to [Angularfire](https://github.com/angular/angularfire)). Firebase will also allow us to store data and host our site (free of charge of course😬).

## 🔥🔥🔥 Create a Firebase project 🔥🔥🔥
Firstly you will need to set up a [Firebase account](https://console.firebase.google.com/). By default you should have one if you have a Google account, but I may be wrong. Follow the link and do the following:

1. Add a Firebase project.
![Add project](https://dev-to-uploads.s3.amazonaws.com/i/h6xsubfbngabm9f77qt6.png)
2. Provide a name for your project.
![Project name](https://dev-to-uploads.s3.amazonaws.com/i/d6adrn5nuwz86n9f7g41.png)
3. Create project (no need to enable analytics).
![Create project](https://dev-to-uploads.s3.amazonaws.com/i/1j5lrgdmcgkgp53az93k.png)
4. Done!
![Click continue](https://dev-to-uploads.s3.amazonaws.com/i/0f30gi5hnczsa3glzens.png)

### 🔑🔑🔑 Authentication 🔑🔑🔑
We'll need to enable authentication in order for us (or you... the admin) to view an admin dashboard for simple CRUD operations.
Let's keep it moving 🚶
1. Let's navigate to the Auth section.
![Authentication section](https://dev-to-uploads.s3.amazonaws.com/i/urs98x9yr6fm5p54jarr.png)
2. Check out a list of sign-in methods.
![Sign-in methods](https://dev-to-uploads.s3.amazonaws.com/i/p9gbxdrh5r6clqw0wcc3.png)
3. Enable Email/Password.
![Enable email/password](https://dev-to-uploads.s3.amazonaws.com/i/yajv0f65xsdfwv74j3t5.png)
4. Add a user (your email and password).
![Add user](https://dev-to-uploads.s3.amazonaws.com/i/vt1ysk4lgya0porwnvcs.png)

No need to worry about encrypting and storing passwords. Firebase does this for you and all you need to do is focus on the data.

### 📂📂📂 Database (Firestore) 📂📂📂
Let's start by setting up Firestore (if you're familiar with MongoDB then you'll notice that the structure is similar.)
1. Create database.
![Create Firestore Database](https://dev-to-uploads.s3.amazonaws.com/i/18fw87issz9rfqckl67i.png)
2. Start in test mode.
![Select Rules](https://dev-to-uploads.s3.amazonaws.com/i/eqxwzn7f46qin6b2i6jb.png)
3. Select a Cloud Firestore location.
![Select a Location](https://dev-to-uploads.s3.amazonaws.com/i/b81roo1l7suo1o5shhs1.png)


#### 🔒🔒🔒 Adding Firestore Rules 🔒🔒🔒
This section is completely optional, however you may want to add some precautionary measures to safeguard your application.

We add these rules to only allow an authenticated user to write, while unauthenticated users can only read from Firestore:
```
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
   	match /profile/{document=**} {
      allow read;
      allow write: if request.auth.uid != null;
    }
      
    match /email-list/{document=**} {
      allow create;
      allow read, write: if request.auth.uid != null;
    }

    match /profile/{document=**} {
      allow read;
      allow write: if request.auth.uid != null;
    }

    match /projects-list/{document=**} {
      allow read;
      allow write: if request.auth.uid != null;
    }

    match /skills-list/{document=**} {
      allow read;
      allow write: if request.auth.uid != null;
    }

    match /tools-list/{document=**} {
      allow read;
      allow write: if request.auth.uid != null;
    }
  }
}
```   
#### ➕➕➕ Adding Firestore Collection ➕➕➕
This step is only necessary for the ability to store messages which users send.
1. Start a collection named 'email-list'.
![Start Collection](https://dev-to-uploads.s3.amazonaws.com/i/6oue3vkvbo8z1qyu637e.png)
2. Add a document.

Ensure that the document fields and data types values matches what you see in the screenshot, this will ensure that our data source matches the data we expect in our application👍
![Add a Collection and Document](https://dev-to-uploads.s3.amazonaws.com/i/lk17tev12mi2ahume8gp.png)
3. Create another collection named 'profile'
This is so we can see the profile content
![profile](https://dev-to-uploads.s3.amazonaws.com/i/seg2ux59d2txq6dcosuc.png)
4. Create a composite index.
This will allow us to query the data based on specific conditions... I just thought it was cool, so I included this 😅
![Create composite index](https://dev-to-uploads.s3.amazonaws.com/i/37nxa7lyivho74i7ust6.png)

Be sure to use the 'email-list' as your Collection ID, and select the fields: 
* date
* read
* email

![Composite index fields](https://dev-to-uploads.s3.amazonaws.com/i/o5n5vmo8j2t16fo2pkxs.png)

### 💾💾💾 Storage 💾💾💾
Go ahead and set up Storage... by now you *SHOULD* be able to do this without me walking you through this 🙄. Don't worry about the rules, the default rules are fairly secure so there is no need to change anything.

While you're here, go ahead and upload your resume:
![Upload File](https://dev-to-uploads.s3.amazonaws.com/i/sxi8zzwztixxwcwj4wfr.png)
Right-click on the name of your file and copy the link address, this is the download URL... This will be used when we allow the user to download our resume in our application
 
### 🎉🎉🎉 AND THAT'S IT!!! 🎉🎉🎉
That concludes the first part of our Portfolio App! In the next section we will focus on the different components needed to bring our app together, and hosting it online 💪