Demo Application

Learn how the Facebook Graph API can be used in an actual application.

We'll cover the following

In the previous lessons, we gained hands-on experience with the Facebook Graph API endpoints. Let's integrate those endpoints into a functional application.

Workflow

The workflow of the application is as follows:

  • When we run the application, the landing page is rendered, which consists of an introduction of the application and a “Get Started” button.

  • When we click the “Get Started” button, we are taken to the login page.

  • After logging in, we are taken to the dashboard. On the dashboard, there are options to publish test posts, photo posts, and video posts on the page and group.

  • We can view the user's feed if we click on “User Account” in the vertical navigation bar. The same applies to “Page Account” and “Group Account.”

  • We can log out by clicking the “Log Out” button on the top right of the page.

The widget below contains the code for our application. Click the “Run” button and the link at the end of the widget to see the React application in action.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

import Landing from './components/Landing';
import Login from './components/Login';
import Dashboard from './components/Dashboard';
import User from './components/User';
import Group from './components/Group';
import Page from './components/Page';

export { Landing, Login, Dashboard, User, Group, Page };

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <App />
);
Demo application

Code explanation

Let’s dive into the code and see how we’ve integrated different Facebook Graph API endpoints into our React application. Our application contains various components, each of which performs a specific function, as described below:

  • The Landing component displays the landing page.

  • The Login component renders the login page.

  • The Navbar component displays the vertical and horizontal navigation bars.

    • The horizontal navbar contains the application name and the "Log Out" button.

    • The vertical navbar consists of the “Dashboard,” “User Account,” “Page Account,” and “Group Account” items.

  • The Spinner component renders the customized spinner and spinner text.

  • The Dashboard component is responsible for displaying the dashboard of the application. This dashboard allows users to make text posts simultaneously on pages and groups.

  • The User, Page, and Group components display the user, page, and group feed, respectively.

Note: We have used Tailwind CSS (an open-source CSS framework) to design the webpages.