Members list using Bevy API

In this tutorial, we’ll create a simple webpage that fetches user data from the Bevy API and displays it in an organized manner. We’ll use Alpine.js for dynamic behavior and Bulma for styling. If you’re not familiar with these tools, don’t worry—I’ll guide you step by step.

Prerequisites

Before we dive in, make sure you have the following set up:

A basic understanding of HTML, CSS, and JavaScript.

What We’ll Build

Our demo webpage will have the following features:

Fetch user data from the Bevy API.
Display the user's full name, bio, and join date.
Implement pagination to navigate through the user list.
Style the page using Bulma classes.

Technologies Used

Bevy API: Bevy provides community management tools, and their API allows us to access user data.
Alpine.js: A lightweight JavaScript framework for adding interactivity to your HTML.
Bulma: A modern CSS framework that makes styling a breeze.

Let’s Get Started!

Let’s break down the steps for building your demo webpage that integrates the Bevy API for Users using Alpine.js and styles it with Bulma. I’ll provide a concise guideline to get you started:

Setting Up Your Project:

Create a new directory for your project.
Inside that directory, create 2 files called index.html and index.js

HTML Structure:

Create an HTML file (e.g., index.html) with the content:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Bevy site users</title>

    <!-- CSS library from https://bulma.io/documentation/start/installation/ -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css"
    />

    <!-- AlpineJS for interactivity - https://alpinejs.dev/essentials/installation -->
    <script
      defer
      src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.1/dist/cdn.min.js"
    ></script>
  </head>
  <body x-data="getData()">
    <nav class="navbar is-black" role="navigation" aria-label="main navigation">
      <div class="navbar-brand">
        <div class="navbar-item">
          <h1 class="title">My Bevy Site's Members</h1>
        </div>
      </div>
      <div class="navbar-end">
        <div class="navbar-item">
          <div class="field search is-horizontal">
            <div class="field-label is-small">
              <label class="label">Authorization API Token</label>
            </div>
            <div class="field-body">
              <div class="control">
                <input
                  class="input"
                  type="text"
                  placeholder="Token"
                  x-model="token"
                />
              </div>
            </div>
          </div>
        </div>
        <div class="navbar-item">
          <button
            class="button is-link"
            @click="fetchData()"
            :class="[ isLoading ? 'opacity-50 cursor-not-allowed' : 'hover:bg-blue-700' ]"
            :disabled="isLoading"
            disabled="disabled"
          >
            Get all members
          </button>
        </div>
      </div>
    </nav>
    <div class="container">
      <template x-if="users">
        <div class="section" data-reflect-root="">
          <h2 class="title is-2">Members</h2>
          <p class="subtitle is-5">
            Total members: <span x-text="total"></span>
          </p>
          <div class="grid is-col-min-16">
            <template x-for="user in users" key="user.id">
              <div class="card">
                <div class="card-content">
                  <div class="media-content">
                    <p class="title is-4" x-text="user.full_name"></p>
                  </div>
                  <div class="content">
                    <p x-text="user.bio"></p>
                    <time datetime="2016-1-1" x-text="user.date_joined"></time>
                  </div>
                </div>
              </div>
            </template>
          </div>
          <nav class="pagination" role="navigation" aria-label="pagination">
            <a
              href="#"
              class="pagination-previous"
              x-model="previousPage"
              @click="fetchData(previousPage)"
              >Previous</a
            >
            <a
              href="#"
              class="pagination-next"
              x-model="nextPage"
              @click="fetchData(nextPage)"
              >Next page</a
            >
          </nav>
        </div>
      </template>
    </div>
  </body>
  <script src="index.js"></script>
</html>

Fetching Data from Bevy API:

Use JavaScript (you can write this directly in your HTML or create a separate .js file), I've created an external index.js for this example.
Create an HTML file (e.g., index.js) with the content:

function getData() {
  return {
    page: 1,
    limit: 12,
    total: 10,
    users: null,
    token: "",
    isLoading: false,
    previousPage: 1,
    nextPage: null,
    lastPage: 0,
    fetchData(page = this.page) {
      this.page = page;
      this.isLoading = true;
      fetch(
        `https://demo.bevylabs.com/api/user/?page=${this.page}&page_size=${this.limit}&fields=full_name,date_joined,bio`,
        {
          headers: {
            Authorization: "Token " + this.token,
          },
        }
      )
        .then((res) => res.json())
        .then((data) => {
          this.isLoading = false;
          this.total = data.count;
          this.users = data.results;
          this.previousPage = data.pagination.previous_page || 1;
          this.nextPage = data.pagination.next_page || this.page;
          this.lastPage = Math.floor(this.total / this.limit);
        });
    },
  };
}

NOTE: Change https://demo.bevylabs.com site to your Bevy site's URL

Open the HTML file with your browser

When you option the HTML file with your browser, you'll be required to provide your authorization token to retrieve the information. Fill it in the corresponding field in the nav bar and click "Get all member". The result will render as the next page:

Please note that this example uses

How this works

You’ll need to read the Bevy API documentation to understand how to authenticate and make requests.

AlpineJS and Bulma are used for convenience in this example, they are not strictly required. If you fill comfortable writing JS, CSS and HTML, or using other library you can use them.

NOTE: This example is not a supported solution, it's just an example. You must always consider best practices for this kind of solution.

Community