Search⌘ K
Home
Courses
Building Real-time Applications with Phoenix & Elixir

Assemble the Admin Dashboard

Explore how to create a real-time admin dashboard that tracks shopping carts using Phoenix Presence. Understand how to count active shoppers, page views, and cart items dynamically and update the interface as actions occur across multiple sessions and tabs.

We'll cover the following...

Admin dashboard

At this point in the project, our CartTracker is working from end to end. The Presence updates flow through our application and make their way to the admin dashboard. The final step in this chapter is to piece together the Presence state into a format that completes our requirements.

To make a visually appealing dashboard, we need to work with our CSS and HTML.

HTML
sneakers_23_admin/lib/sneakers_23_web/templates/admin/dashboard/index.html.eex
<div class="admin-container">
  <h1>Admin Dashboard</h1>
  <div id="total-shoppers">
    <h2>Unique Shoppers</h2>
    <div class="target">
      <div class="admin-item-list">
        <div class="admin-item-entry">
          <span id="shopper-count" class="admin-item-entry__number">&mdash;</span>
          <span class="admin-item-entry__path">total</span>
        </div>
      </div>
    </div>
  </div>
  <div id="shoppers-by-page">
    <h2>Shoppers By Page</h2>
    <div class="target"></div>
  </div>
  <main>
    <h2>Item Breakdown</h2>
    <%= for product <- @products do %>
      <div class="product-listing" data-product-id="<%= product.id %>">
        <div class="product-listing__image-wrap" style="height: 350px;">
          <img src="<%= product.main_image_url %>" />
        </div>
        <div class="product-listing__details">
          <h4 class="product-listing__detail-header"><%= product.name %></h4>
          <div>by <%= product.brand %></div>
          <div><%= product.color %></div>
          <div>$<%= product.price_usd %></div>
          <%= if product.released do %>
            <%= for item <- product.items do %>
              <div>
                <strong>Size <%= item.size %>:</strong>
                <span class="admin-item-cart-count" id="admin-item-cart-count-<%= item.id %>">0</span> in cart / <%= item.available_count %> available
              </div>
            <% end %>
          <% else %>
            <h4 class="product-soon-<%= product.id %>">
              Not released.
            </h4>
          <% end %>
        </div>
      </div>
    <% end %>
  </main>
</div>
<script type="text/javascript">
  window.adminToken = "<%= @admin_token %>"
</script>

To check that everything is set up correctly, let’s start our server with mix phx.server and visit our webpage/admin. We will see a page that looks like the following image.

Shopper count

The first feature that we’ll tackle is the shopper count. In our Presence ...