Codelab 1

 1. Overview

The app will look like this when done. 

2. Get the code

In this codelab, you build and deploy an app using  StackBlitz, an online editor that has several Firebase workflows integrated into it. Stackblitz requires no software installation or special StackBlitz account.

StackBlitz lets you share projects with others. Other people who have your StackBlitz project URL can see your code and fork your project, but they can't edit your StackBlitz project.

1. Go to this URL for the starting code:  **https://stackblitz.com/edit/firebase-gtk-web-**start

At the top of the StackBlitz page, click Fork: 

You now have a copy of the starting code as your own StackBlitz project. Since you didn't sign in, your account is called @anonymous, but the project has a unique name, along with a unique URL. All of your files and changes are saved in this StackBlitz project.

3. Edit the event

The starting materials for this codelab provide some structure for the web app, including some stylesheets and a couple of HTML containers for the app. Later in this codelab, you'll hook these containers up to Firebase.

To get started, let's get a bit more familiar with the StackBlitz interface.

1. In StackBlitz, open the index.html file.
2. Locate event-details-container and description-container, and try editing some event details.

As you edit the text, the automatic page reload in StackBlitz displays the new event details. Cool, yeah?

 4. Firebase

4. Create and set up a Firebase project

Displaying the event information is great for your guests, but just showing the events isn't very useful for anybody. Let's add some dynamic functionality to this app. For this, you'll need to hook Firebase up to your app. To get started with Firebase, you'll need to create and set up a Firebase project.

Create a Firebase project

1. Sign in to  Firebase.
2. In the Firebase console, click Add Project (or Create a project), and name your Firebase project Firebase Web Codelab.
   
   Click through the project creation options. Accept the Firebase terms if prompted. We are not using Google Analytics, but just keep it enabled anyway. 
   3. 
      
   
   
   
   Firebase will now provision all functions for the app.
   
   

   

   To allow users to sign in to the web app, you'll use the Email/Password sign-in method for this codelab:

   1. In the Firebase console, click Develop in the left panel.
   2. Click Authentication, and then click the Sign-in method tab (or  click here to go directly to the Sign-in method tab).
   3. Click Email/Password in the Sign-in providers list, set the Enable switch to the on position, and then click Save.
      
      Enable Firestore.