Day 8: Implementing Social Features (Friend Challenges and Leaderboards)

#SocialFitness #FriendChallenges #Leaderboards

Welcome to Day 8! Today, you’ll add social features to your fitness app, enabling users to interact with friends, participate in challenges, and view leaderboards. Social features boost user engagement and create a sense of community around fitness goals.

Table of Contents

What You’ll Learn Today

Add a friend list to the app.
Create and manage fitness challenges.
Display a leaderboard based on user activity.

Step 1: Add a Friend List

1. Create Friend Data

Simulate a list of friends for demonstration purposes:

const friends = [
  { id: 1, name: 'Alice', steps: 12000 },
  { id: 2, name: 'Bob', steps: 8000 },
  { id: 3, name: 'Charlie', steps: 9500 },
];

2. Friend List UI

Create a FriendsList component to display the friend list:

import React from 'react';
import { View, Text, StyleSheet, FlatList } from 'react-native';

const FriendsList = ({ friends }) => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Friends</Text>
      <FlatList
        data={friends}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <View style={styles.friendCard}>
            <Text style={styles.name}>{item.name}</Text>
            <Text style={styles.steps}>Steps: {item.steps}</Text>
          </View>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#f9f9f9',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  friendCard: {
    backgroundColor: '#fff',
    padding: 15,
    marginVertical: 8,
    borderRadius: 10,
    elevation: 3,
  },
  name: {
    fontSize: 16,
    fontWeight: 'bold',
  },
  steps: {
    fontSize: 14,
    color: '#555',
    marginTop: 5,
  },
});

export default FriendsList;

3. Integrate Friend List in App

Update App.js to include the friend list:

import React from 'react';
import { View, StyleSheet } from 'react-native';
import FriendsList from './FriendsList';

const friends = [
  { id: 1, name: 'Alice', steps: 12000 },
  { id: 2, name: 'Bob', steps: 8000 },
  { id: 3, name: 'Charlie', steps: 9500 },
];

const App = () => {
  return (
    <View style={styles.container}>
      <FriendsList friends={friends} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#fff' },
});

export default App;

Step 2: Create and Manage Fitness Challenges

1. Simulate Challenge Data

Add challenge data for testing:

const challenges = [
  { id: 1, name: '5K Steps Challenge', participants: 5, progress: 80 },
  { id: 2, name: 'Weekend Marathon', participants: 8, progress: 60 },
];

2. Challenge List UI

Create a Challenges component:

import React from 'react';
import { View, Text, StyleSheet, FlatList } from 'react-native';

const Challenges = ({ challenges }) => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Challenges</Text>
      <FlatList
        data={challenges}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <View style={styles.challengeCard}>
            <Text style={styles.name}>{item.name}</Text>
            <Text style={styles.details}>
              Participants: {item.participants}
            </Text>
            <Text style={styles.details}>
              Progress: {item.progress}%
            </Text>
          </View>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#f9f9f9',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  challengeCard: {
    backgroundColor: '#fff',
    padding: 15,
    marginVertical: 8,
    borderRadius: 10,
    elevation: 3,
  },
  name: {
    fontSize: 16,
    fontWeight: 'bold',
  },
  details: {
    fontSize: 14,
    color: '#555',
    marginTop: 5,
  },
});

export default Challenges;

3. Integrate Challenges in App

Update App.js to include the challenges list:

import Challenges from './Challenges';

const challenges = [
  { id: 1, name: '5K Steps Challenge', participants: 5, progress: 80 },
  { id: 2, name: 'Weekend Marathon', participants: 8, progress: 60 },
];

const App = () => {
  return (
    <View style={styles.container}>
      <FriendsList friends={friends} />
      <Challenges challenges={challenges} />
    </View>
  );
};

Step 3: Add a Leaderboard

1. Sort Friend Data

Update FriendsList to sort by step count:

const sortedFriends = [...friends].sort((a, b) => b.steps - a.steps);

2. Display Ranking

Update the FriendsList component to include ranking:

renderItem={({ item, index }) => (
  <View style={styles.friendCard}>
    <Text style={styles.rank}>#{index + 1}</Text>
    <Text style={styles.name}>{item.name}</Text>
    <Text style={styles.steps}>Steps: {item.steps}</Text>
  </View>
)}

Step 4: Test the App

Run the app: npx react-native run-android npx react-native run-ios
Verify the Features:
- Check the friend list with step counts.
- View and manage challenges.
- Ensure the leaderboard ranks friends by step count.

Enhance Social Features (Optional)

Real-Time Updates: Sync friend data and challenges using Firebase.
Friend Invitations: Allow users to invite friends via email or social media.
Push Notifications for Challenges: Notify users about challenge progress or completion.

SEO Optimization for This Tutorial

Keywords: Fitness app social features, React Native leaderboard, friend challenges React Native, fitness app ranking, step tracking friends.

Meta Description: Add social features like friend challenges and leaderboards to your React Native fitness app. Engage users with rankings and activity comparisons.

Summary

Today, you implemented social features, including a friend list, fitness challenges, and a leaderboard. These features enhance user engagement by fostering competition and collaboration.

What’s Next: Tomorrow, you’ll add user authentication and profile management.

Stay tuned for Day 9: Adding User Authentication and Profile Management.

Post Views: 77