How to create a Leaderboard screen

Ionic Design Kit, built on a design base of Ionic Framework components, simplifies app development by providing designers with a range of pre-made elements. Designers can effortlessly pick and place elements, eliminating the need to create components from scratch. For developers, this means no complex coding – all components are sourced from the Ionic Framework. The result is a speedy, efficient, and collaborative process, making the Ionic Design Kit essential for both designers and developers.

The Leaderboard Screen is a key feature in gaming, fitness, and social apps, showcasing a ranked list of users along with avatars and scores. A well-designed leaderboard encourages competition and engagement by clearly displaying user rankings, profile pictures, points or achievements, and progression indicators. Features such as filtering by time period, friends, or categories can further enhance the experience.

This guide will walk you through the steps to design and implement a Leaderboard Screen using the Ionic Design Kit. By leveraging its pre-built UI components and the Ionic Framework, you can create a visually appealing, interactive, and motivating leaderboard that keeps users engaged and striving for higher rankings.

1. Install Ionic CLI with the command

Creating a project with the Ionic CLI

npm i -g @ionic/cli

2. Create a new project

To create a new project, run the following command.

ionic start leaderboard blank --type=react

3. Get inside the project directory

cd leaderboard

4. Create a Tab bar component

Use this instruction to create a Tab bar component.

5. Create a Leaderboard page

Create page Leaderboard.tsx inside src/pages and add code.

import { IonPage } from '@ionic/react';

const Leaderboard: React.FC = () => {
  return (
    <IonPage></IonPage>
  );
};

export default Leaderboard;

Please make sure that you've added routing in src/App.tsx for the created page. All Ionic framework components that will be used below should be imported similarly to the IonPage component.

6. Select the layout structure

For convenience, we will be using the layout structure recommended by Ionic for all screens. This allows us to add header code and content inside the IonPage.

<IonPage>
  <IonHeader>
    <IonToolbar>
    ...
    </IonToolbar>
  </IonHeader>
  <IonContent>
  ...
  </IonContent>
</IonPage>

7. Import necessary components and setup data

At the top of your file, import all required components and assets. Set up state for segment selection and create arrays for user data and avatar images.

import {
  IonPage,
  IonHeader,
  IonToolbar,
  IonButtons,
  IonButton,
  IonIcon,
  IonContent,
  IonText,
  IonLabel,
  IonTitle,
  IonSegment,
  IonSegmentButton,
  IonList,
  IonItem,
  IonAvatar
} from '@ionic/react';
import { arrowBack, giftOutline } from 'ionicons/icons';
import avatar1 from '../assets/images/avatar-1.png';
import avatar2 from '../assets/images/avatar-2.png';
import avatar3 from '../assets/images/avatar-3.png';
import avatar4 from '../assets/images/avatar-4.png';
import avatar5 from '../assets/images/avatar-5.png';
import avatar6 from '../assets/images/avatar-6.png';
import avatar7 from '../assets/images/avatar-7.png';
import avatar8 from '../assets/images/avatar-8.png';
import { useState } from 'react';

const Leaderboard: React.FC = () => {
  const [selectedSegment, setSelectedSegment] = useState('month');
  const avatarImages = [avatar1, avatar2, avatar3, avatar4, avatar5, avatar6, avatar7, avatar8];

  const persons = [
    { name: 'Olivia Johnson', location: 'Chicago, USA', score: 81 },
    { name: 'Ethan Müller', location: 'Berlin, Germany', score: 72 },
    { name: 'Sofia Rossi', location: 'Milan, Italy', score: 60 },
    { name: 'Mason Tanaka', location: 'Osaka, Japan', score: 41 },
    { name: 'Aisha Khan', location: 'Karachi, Pakistan', score: 39 },
    { name: 'Lucas Dubois', location: 'Lyon, France', score: 22 },
    { name: 'Emma Lewis', location: 'Dublin, Ireland', score: 12 },
    { name: 'Noah Kim', location: 'Seoul, South Korea', score: 10 }
  ];
  
  return (
    <IonPage>...</IonPage>
  );
};

The component includes state for the selected segment with a default value of 'month', an array of avatar images imported from the assets folder, and an array of person objects containing name, location, and score data.

8. Add the header with navigation buttons

Create a header with back and gift icon buttons. The header uses an IonToolbar with buttons positioned at both ends and a centered title.

<IonHeader>
  <IonToolbar>
    <IonButtons slot='start'>
      <IonButton color='primary'>
        <IonIcon icon={arrowBack} />
      </IonButton>
    </IonButtons>
    <IonTitle>Leaderboard</IonTitle>
    <IonButtons slot='end'>
      <IonButton color='primary'>
        <IonIcon icon={giftOutline} />
      </IonButton>
    </IonButtons>
  </IonToolbar>
</IonHeader>

The slot='start' and slot='end' attributes position buttons at the left and right sides of the toolbar respectively. The primary color makes the buttons stand out with the app's theme color.

9. Create the main content with title and time segments

Add an IonContent component with a title, description, and time period segment control. The segment allows users to filter the leaderboard.

<IonContent className='ion-padding'>
  <IonText className='ion-text-center'>
    <h1>Best Answers</h1>
    <p>Answer community questions and be marked as the best answer!</p>
  </IonText>
  <IonSegment value={selectedSegment} onIonChange={(e) => setSelectedSegmentString((e.detail.value))}>
    <IonSegmentButton value="today">
      <IonLabel>Today</IonLabel>
    </IonSegmentButton>
    <IonSegmentButton value="week">
      <IonLabel>Week</IonLabel>
    </IonSegmentButton>
    <IonSegmentButton value="month">
      <IonLabel>Month</IonLabel>
    </IonSegmentButton>
    <IonSegmentButton value="all">
      <IonLabel>All-Time</IonLabel>
    </IonSegmentButton>
  </IonSegment>

The ion-padding class adds spacing around the content. The IonSegment component is bound to the selectedSegment state variable and updates it when the selection changes via the onIonChange event handler. This segmented control allows users to filter the leaderboard data by different time periods.

10. Build the leaderboard list with user details

Complete the content by adding a list of users with their ranks, avatars, names, locations, and scores. Each user is presented in an IonItem with multiple elements arranged horizontally.

<IonList lines='none' className='ion-margin-top'>
  {persons.map((person, index) => (
    <IonItem key={index}>
      <p>{index + 1}</p>
      <IonAvatar className='ion-margin-horizontal'>
        <img src={avatarImages[index]} alt="" />
      </IonAvatar>
      <IonLabel>
        <h2>{person.name}</h2>
        <p>{person.location}</p>
      </IonLabel>
      <IonText color='medium'>
        <p>{person.score}</p>
      </IonText>
    </IonItem>
  ))}
</IonList>

The lines='none' attribute removes dividing lines between items. We use map() to iterate through the persons array, creating a list item for each person. The IonAvatar component displays the user's profile picture with horizontal margin for spacing, while the remaining elements show the user's rank, name, location, and score.

Thank you for joining us on this exciting journey thus far. Stay tuned for more guides in our comprehensive series, where we'll not only delve into various aspects of mobile app development but also showcase how the Ionic Kit can be your game-changer.

Are you prepared to elevate your Ionic experience? Explore the advantages of incorporating the Ionic Design Kit for intuitive designs and seamless development. May your coding journey be marked by continual innovation and triumphant achievements!