Watchlist Movie App

React Native Android App with Appwrite Backend

TypeScript • React Native • Appwrite • TMDB api • Nativewind

SiteView1
SiteView2
SiteView3

Core Features

  • Developed a cross-platform watchlist management app using React Native, TailwindCSS, and Appwrite as the backend.
  • Implemented user authentication and account management with Appwrite’s Account API.
  • Created CRUD operations for watchlists, movies, and members, with Appwrite’s Database API.

Watchlist Functionality

  • Users can create, edit, and delete watchlists with a customizable limit per user.
  • Ability to join multiple watchlists via invitation and manage watchlist members.

Movie Management

  • Fetch movies from The Movie Database (TMDB) API.
  • Add movies to one or multiple watchlists, with metadata such as title, poster, vote average, and release date.

                                        
export const createUser = async ({email, password, name}: CreateUserParams) => {
    try{
        const newAccount = await account.create(ID.unique(), email, password, name);
        if(!newAccount) throw Error;

        await signIn({email, password});

        const avatarUrl = avatars.getInitialsURL(name);

        return await database.createDocument(
            appwriteConfig.databaseId, 
            appwriteConfig.userCollectionId, 
            ID.unique(),
            {email, name, accountId: newAccount.$id, avatar: avatarUrl}
        )
        
    } catch(e) {
        throw new Error(e as string);
    }
}
                                        
                                    
                                        
export const addUserToWatchlistWithMail = 
async (watchlistId: string, userMail: string, addAdmin: boolean) => {
    try {
        const requestedUser = 
        await database.listDocuments(
            appwriteConfig.databaseId, appwriteConfig.userCollectionId, [Query.equal("email", userMail)]
        );

        const userDoc = requestedUser.documents[0];

        if (!userDoc) {
            console.log("User not found with given email");
            Alert.alert("User not found with given email");
            return;
        }

        addUserToWatchlist(watchlistId, userDoc?.accountId ?? "unknown user", addAdmin);

    } catch (error){
        console.log(error);
        throw error;
    }
}
                                        
                                    
                                        
export const getWatchlistName = async (watchlist_id: string): Promise => {
    try{

        const watchlist = await database.getDocument(
            appwriteConfig.databaseId,
            appwriteConfig.watchlistCollectionId,
            watchlist_id
        );

    return watchlist.name;
    }   catch (error){
        console.log(error);
        return undefined;
    }
}
                                        
                                    
                                        
FlatList
    scrollEnabled={false}
    data={watchlistMovies}
    numColumns={3}
    keyExtractor={(item) => item.$id}
    renderItem={renderMovie}
    contentContainerStyle={{ paddingBottom: 20, paddingTop: 10, gap: 16 }}
    columnWrapperStyle={{justifyContent: 'flex-start', gap: 15, paddingRight: 5, marginBottom: 10,  marginLeft: 2,}}
    className="pb-32 "
        ListHeaderComponent={
        Watchlist:
    }
          
                                        
                                    

Get in Touch

Contact Me