<aside> ❓

1. Build a web-app. This webapp should support sign-in using Google Auth. (i.e. Clicking on Login-button should take me thru the google login process).
2. Once successfully logged in, I should get to the page which should display logged-in user's email, name and photo if available.
3. When user comes to your website for the first time, you should ask them for their favorite movie. You need to store this information in the database.
4. Once user is logged in, they should get to a page, which should display following information:
   1. User's name (pulled from google login)
   2. User's email (pulled form google login)
   3. User's photo (pulled from google login)
   4. One interesting fact about the Movie that user initially provided as their favorite movie. (You should use OpenAI's completion APIs to generate a new interesting fact about this movie
   5. Every time I refresh the page, I should get a new fun fact about the movie.
5. Provide a logout button too. Once logged out, if I go to the page, I should be redirected to login page.

Technologies to use:

1. Typescript
2. React/Next.js
3. Postgres
4. Prisma (as SDK for database interface) </aside>

Project Documentation

1. Prototype

• Created a low-fidelity prototype

2. Requirements Gathering

• Google Cloud Client ID → Google OAuth credentials
• PostgreSQL as the relational database management system: → I utilized Supabase as the cloud-hosted backend service.
• Database Migrations → Prisma to define the database schema and manage migrations, ensuring consistent and version-controlled database structure changes.
• LLM Capabilities → Gemini API Key

3. Development Setup

• Started the project by creating a Next.js React app
• Set up initial pages and project structure
• Adapted to changes introduced in Next.js 14+ for project structure
• Organized API and authentication logic inside the /api folder under apps

4. Key Components

• Developed three major page components:
  1. Login page
  2. Movie page
  3. Dashboard page