Video Tutorials

Policy

Twitter LogoFacebook Logo
Project 1: Building a Social Media Site Part 1: Setup
Starting with this video, we’ll begin building our first project of the course.
By: King

Starting with this video, we’ll begin building our first project of the course. We’ll build a social media site for users to post their favorite stories. Users will be able to create and log in with their own account, post stories, and interact with other posts.


We’ll use everything we learned from this course up to this point while introducing new tools and concepts to help build this site. I will be using Angular, Angular Material, Firebase, and FirebaseTS. 

In the end, we will publish the website so everyone can access it. After the project we will continue with the course and dive deeper into the tools and concept used in the project.

All the things I mentioned is free.

If you are new to Angular Material, be sure to do the Angular Material UI Course and learn some of the components that I will be using before hand. I will also go over the basics of each component as we go.

And if you are new to Firebase and the FirebaseTS library, I will go over all the things you will need for this project as well. 

For this video, we will set up our environment.

Create a Firebase Project

If you reached this far into the course, you should have a Firebase account. Log into the console and create a project so we can host our web app and manage our users and data.

Image from Codeible.com

Create Angular Project

After, create a new Angular project. Open the command prompt or terminal and run the ng new command. 

ng new CodeibleCosialMediaProject

Once the Angular CLI finishes generating the files. Open the project on Visual Studio Code. 


Locate the project folder, open the command prompt to the path of that project, and run the code . command. 

code .

Add Angular Material

In Visual Studio code, open the terminal, press the CTRL+Tilde keys and then add Angular Material to your project. Run ng add @angular/material.

ng add @angular/material

Select a theme, set the Typography, and enable Angular animations. 

Add FirebaseTS

Angular Material, install FirebaseTS. Run npm install firebasets.

npm install firebasets

Connect the project with Firebase

Lastly, connect your project with Firebase.

Go to your Firebase console and create a web app project. 

Image from Codeible.com

Once you have your web app, go to the project settings page, click on the gear icon on the left and select Project Settings. 

Image from Codeible.com

Scroll down until you see your app and select the Config option. Copy the configuration code and go back to your Angular project.

Image from Codeible.com

Locate and expand the environments folder. Go into the environment.ts file and paste the configuration code inside.

Remove the const keyword, replace the equal symbol with a colon, and remove the semi colon.

Image from Codeible.com

export const environment = {

  production: false,

  firebaseConfig: {
    apiKey: "AIzaSyBfCzuD60v...,
    authDomain: "codeiblesocial...",
    projectId: "codeibles...",
    storageBucket: "codeibleso...",
    messagingSenderId: "4607...",
    appId: "1:460784609068:w...",
    measurementId: "G-X35..."
  }

};

Copy the configuration code again and do the same in the environment .prod TypeScript file. 

The reason why we should place the configuration code inside the environment files is because we do not want people to see it. Another reason is because, if you are developing a large application, you will have variables and values that are used specifically during the production and development environments. For our project, we will only have one Firebase project so we used the same config code in both environments.

Our next step is to go into the App Module file and use FirebaseTS to connect the project with Firebase.

Add the import statements for FirebaseTS and the environment variable.

...
import { FirebaseTSApp } from 'firebasets/firebasetsApp/firebaseTSApp';
import { environment } from 'src/environments/environment';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { 

}

Create a constructor for AppModule and call the init() method from the FirebaseTSApp class. For the parameter, pass in the firebase configuration from the environment object.

export class AppModule { 
   constructor(){

      FirebaseTSApp.init(
          environment.firebaseConfig
      );

   }
}

Downloading Resource Files

Then go to the browser and go to https://codeible.com/coursefiles/socialmediaapp to download the files that’s will be used in the project.

Image from Codeible.com

That is all for this tutorial.


Sign In