Repository files navigation

This is a demo app that shows to build a movie review and recommendation app using Firebase and Next.js.

This project demonstrates how to use Firebase Data Connect and Vertex AI for personalized movie recommendations.

Explore a detailed walkthrough of the demo and its key concepts on the solutions page athttps://developers.google.com/solutions/learn/data-connect-grounded-agents

This project is intended for demonstration purposes only. It is not intended for use in a production environment.

We recommend trying out this project in Firebase Studio. Click this button to launch the project in Firebase Studio and follow the steps below to get started.

The demo can be run in Firebase Studio using the built-in Firebase emulators.

However, for singing in and AI movie recommendations you need to set up a Firebase project, enable Vertex AI and the recommended APIs:

1. A new Firebase project
   • We recommended using a new Firebase project for this demo. Thissimplifies cleanup to avoid incurring on-going costs after trying out this demo app.
2. Update the filesrc/config/firebaseConfig.ts with yourFirebase project configuration.
3. Activate billing on your Google Cloud / Firebase Project
4. Enable Vertex AI and recommended APIs in the Google Cloud console.
5. Enable Firebase Data Connect API in the Google Cloud console.
6. Enable Firebase Authentication and enable a sign-in provider in the Firebase console.
   1. Configure the domain where you'll be accessing the app. If you are not sure, you can find the domain in the error message returned in the console log when clicking the "Sign In" button. ("The current domain is not authorized for OAuth operations"). Add the domain in the Firebase console: Authentication -> Settings -> Authorized domains.

1. Follow the prerquisite steps above to set up your Firebase project.
2. Open the project in Firebase Studio.
3. When prompted, select your Firebase project.
4. If you want to sign in and use AI movie recommendations, copy yourFirebase config for a web app into the the file src/config/firebaseConfig.ts.
5. The app is now ready! Switch to theWeb Preview to see it in action.

You can run the application locally and access Firebase and Google Cloud directly.

In addition to thegeneral prerequisites, follow these steps to set up your development environment:

1. Set up theGoogle Cloud SDK.
2. Set up theFirebase CLI.
3. Set upApplication Default Credentials (ADC) for a local development environment
4. Set up yourdevelopment environment for Firebase Data Connect

1. Prepare seed data (movies, actors, reviews) for the Firebase Data Connect Emulator. Theseed-data.zip file contains the requireddataconnect/.dataconnect/ directory structure. Extract the zip file at the top level of the project, and the files will be placed in the correct directory to be picked up by the emulator.

   unzip seed-data.zip

2. If you want to sign in and use AI movie recommendations, copy yourFirebase config for a web app into the the file src/config/firebaseConfig.ts.
3. Start the Firebase Emulators.

   firebase emulators:start

4. Run the Next.js development server with the Firebase Data Connect emulator.

   pnpm run dev:emulator

5. Open your browser and navigate to the local URL provided in the terminal output (typicallyhttp://localhost:3000).

This project can be configured to use theFirebase Data Connect emulator for local development. To use the emulator, you need to set theDATA_CONNECT_EMULATOR_HOST environment variable to the hostname of the emulator (e.g.,localhost) and ensure the emulator is listening on port9399.

Thedev:emulator run script (pnpm run dev:emulator) is configured to use the emulator listening onlocalhost:9399.

When running this application in Firebase Studio, the Firebase Data Connect emulator is used by default.

Once your application is running locally, you can deploy it to the cloud. Follow the steps to deploy theData Connect backend and theNext.JS app using Firebase App Hosting.

This project demonstrates the following key features:

• Firebase Data Connect: The backend for this application is built using Firebase Data Connect. The schema and data models are defined indataconnect/.
• Vertex AI for Recommendations: Personalized movie recommendations are generated using Vertex AI. The recommendation logic is implemented insrc/ai/recommender.ts.
• Next.js Frontend: The user interface is built with Next.js in thesrc/components directory.
• Firebase Authentication: Users can sign in and manage their profiles using Firebase Authentication.
• Firebase Storage: Movie posters and other assets are stored in Firebase Storage.

To avoid continued billing for the resources that you have created as part of trying out this demo app, delete the Firebase project or disable the deployed services.If you have created a new project to test this app, followthese steps to delete the project through the Firebase console.Alternatively, if you followed the steps to deploy Firebase Data Connect and Firebase App Hosting to an existing project, follow these steps to remove them manually through the console:

• Administer Cloud SQL instances that back Firebase Data Connect
• Manage Firebase App Hosting backends

This app is not an officially supported Google Product.