Demo Application

This lesson shows a simple web application built using Bootstrap and Blogger API with the JavaScript-based frontend library React. We also create a backend server using Express.js to make API calls to the Blogger API server. This application allows us to view our blogs, blog pages, and blog posts. It also allows us to create and delete blog pages and blog posts.

Run the application

Step 1: Click the "Run" button to start the application. Then, click the URL next to "Your app can be found at:" in the widget below to open the application in a new tab.

Step 2: After the application starts, we see a Google sign-in button on the homepage. Click the button and sign in using your Google account credentials.

Step 3 (only for first-time sign-ins): We authorize the app after signing in to our Google account. Click the "Allow" button.

Step 4: We now see the application's homepage, which displays a list of all the blogs created by the specified user. Each blog card contains three buttons to redirect to the blog's URL, pages, and posts.

• The "URL" button redirects to the published page of the blog.

• The "Pages" button redirects to a page that displays the blog pages of all the blogs. It also displays a button to redirect to page creation and a button to redirect back to the homepage. Click any blog to view its details. We may delete a page by clicking the delete button given inside the page details tab.

• Similarly, the "Posts" button redirects to a page that displays the blog posts of all the blogs. It also displays a button to redirect to post creation and a button to redirect back to the homepage. Click any post to view its details. We may delete a post by clicking the delete button given inside the post details tab.

• We can sign out of the application by clicking the "Sign out" button in the top navigation bar.

Application code