Building a Celebrity Birthday Calendar App: A Step-by-Step Tutorial for Bman11000 Coursework

Introduction

Welcome to this tutorial on building a celebrity birthday mobile app for the Bman11000 coursework. In this guide, we'll focus on the fan-facing features: displaying a birthday calendar, registering users, and allowing fans to select favorite celebrities for a personalized view. We'll use current trends like the viral app BeReal and the popularity of celebrity culture (e.g., Taylor Swift's Eras Tour, NBA playoffs) to make the concepts relatable. By the end, you'll have a solid implementation plan for requirements 5-8.

Understanding the Requirements

The assignment asks you to design and develop a mobile app for Celebrity News, a UK-based company. The key requirements are:

• Requirement 5 (10%): Display a birthday calendar of partner celebrities for the general public.
• Requirement 6 (20%): Allow fan registration and selection of favorite celebrities.
• Requirement 7 (15%): Customized calendar view showing only chosen birthdays.
• Requirement 8 (10%): Implementation quality and functionality.

We'll build this using React Native (or any framework you choose) and a backend API. For this tutorial, we'll use Firebase for authentication and database, as it's beginner-friendly and widely used in mobile app development.

Setting Up the Project

Start by creating a new React Native project. We'll use Expo for simplicity. Run:

npx create-expo-app CelebrityBirthdays
cd CelebrityBirthdays
npm install @react-navigation/native @react-navigation/stack firebase

Initialize Firebase in your app. Create a firebase.js file with your config. This is similar to how apps like Spotify use cloud services to manage user data.

Requirement 5: Birthday Calendar for General Public

First, create a calendar component that displays all celebrity birthdays. We'll fetch data from a Firestore collection called celebrities. Each document has fields: name, birthDate, category (sports, music, film, internet), and imageUrl.

Use a FlatList to render birthdays grouped by month. For example, list all celebrities born in January. This is like the NBA schedule app showing games by month. Here's a snippet:

import React, { useEffect, useState } from 'react';
import { FlatList, Text, View } from 'react-native';
import { db } from './firebase';

export default function CalendarScreen() {
  const [birthdays, setBirthdays] = useState([]);

  useEffect(() => {
    const unsubscribe = db.collection('celebrities')
      .orderBy('birthDate')
      .onSnapshot(snapshot => {
        setBirthdays(snapshot.docs.map(doc => doc.data()));
      });
    return unsubscribe;
  }, []);

  return (
     index.toString()}
      renderItem={({ item }) => (
        
          {item.name} - {item.birthDate.toDate().toDateString()}
        
      )}
    />
  );
}

This fulfills the basic public calendar. For better UI, add a calendar header showing the current month and navigation arrows – similar to the Google Calendar app.

Requirement 6: Fan Registration and Favorites

Now, we need user authentication and a way for fans to select favorite celebrities. Use Firebase Authentication for email/password sign-up. Create a SignUpScreen and LoginScreen. After login, navigate to a FavoritesScreen where fans can browse celebrities and tap to add them to their favorites.

Store favorites in a subcollection under the user's document in Firestore. For example:

// In FavoritesScreen
const addFavorite = async (celebrityId) => {
  const user = auth.currentUser;
  await db.collection('users').doc(user.uid).collection('favorites').add({
    celebrityId: celebrityId,
    addedAt: new Date()
  });
};

This is similar to how Twitter allows you to follow accounts. The key is to make the selection intuitive – use a heart icon that toggles on/off.

Requirement 7: Customized Calendar View

Once fans have selected favorites, the app should show only those birthdays. Create a MyCalendarScreen that queries the user's favorites and then fetches the corresponding celebrity data. Use a Promise.all to get all details:

const getFavoritesBirthdays = async () => {
  const user = auth.currentUser;
  const favSnapshot = await db.collection('users').doc(user.uid)
    .collection('favorites').get();
  const celebrityIds = favSnapshot.docs.map(doc => doc.data().celebrityId);
  const promises = celebrityIds.map(id => 
    db.collection('celebrities').doc(id).get()
  );
  const celebDocs = await Promise.all(promises);
  const birthdays = celebDocs.map(doc => doc.data());
  // sort by birthDate and render
};

This personalized view is like the My Mix feature on YouTube Music – it tailors content to user preferences. To optimize performance, consider using Firestore caching and pagination.

Requirement 8: Implementation Quality

Quality means clean code, error handling, and good UX. Use React Navigation for smooth screen transitions. Add loading indicators (e.g., ActivityIndicator) while fetching data. Handle errors with try-catch and display user-friendly messages. Also, ensure the app works offline by enabling Firestore offline persistence:

import { enableNetwork } from 'firebase/firestore';
// Enable offline persistence
firebase.firestore().enablePersistence()

Test your app on both iOS and Android. For a real-world feel, consider adding push notifications for upcoming birthdays – similar to how Snapchat reminds you of friends' birthdays.

Trend-Inspired Examples

To make your app engaging, think about current trends. For instance, with the Eurovision Song Contest happening this week (May 2026), you could feature a special section for music celebrities. Or, tie in the FIFA World Cup 2026 hype by highlighting sports celebrities. This not only makes the app timely but also shows you understand user engagement.

Conclusion

You've now implemented the core requirements for the Celebrity News mobile app. Remember to test thoroughly and document your code. This tutorial covered the essential steps, but you can extend it with features like search, filter by category, or social sharing. Good luck with your coursework!