# Growth Frontend Interview

This interview has two parts: building a Next.js application and analyzing user engagement data with SQL.

## Part 1: Build the Application

Build a simple Next.js application that:
- Pulls song information from an API
- Allows users to search a song by ID
- Provides a song page where users can listen to the song
- Shows a sign-up modal after 10 seconds

**Design Reference:** [Figma Design](https://www.figma.com/design/zf3KnEZlbMGLCZfgfIXyIe/Growth-Eng-FE-Interview-Design?node-id=0-1&p=f&t=w5ucVCNXYoHLxxXF-11)

The goal is to prioritize getting something end-to-end working ASAP for demo purposes, then focus on improvements if time allows.

### Core Functionality
1. **Home Page Navigation** (`src/app/page.tsx`)
   - Connect the search input to capture song IDs
   - Make the "Go to Song" button navigate to the song page with the entered ID

2. **Song Page Display** (`src/app/song/[slug]/page.tsx`)
   - Use `https://apitest.suno.com/api/songs` to validate the song ID and fetch song data
   - Display the song title, creator handle, image, and audio player
   - Match the design shown in the Figma mockup

3. **Sign Up Modal Timer** (`src/app/song/[slug]/page.tsx`)
   - Show a modal 10 seconds after the user visits the song page
   - Modal should prompt user to "Sign up for free" with creator handle
   - Build the sign-up modal from scratch (match the Figma design)

### Tech Stack
- **Frontend**: Next.js 15 with React 19
- **Styling**: Tailwind CSS v4
- **TypeScript**: Full type safety

### Getting Started

Run the development server:

```bash
npm run dev
```

Open [http://localhost:3000](http://localhost:3000) to see the application.

The page auto-updates as you edit files, so you can see changes immediately.

## Part 2: Modal Effectiveness Analysis

Now we want to track how effective the modal is at driving users to sign up. We have an events table CSV that you'll analyze using SQL.

### Set up environment (should take <1min)

1. You will need to install `sqlite` if you want to run your SQL code. Install with:
    ```
    brew install sqlite
    ```
2. Then start a sqlite db session from this folder.
    ```
    sqlite3 interview.db
    ```
3. Run the following to load the csv into your db as the `events` table. You can run this anytime you want to load a new version of the csv as well.
    ```sql
    DROP TABLE IF EXISTS events;
    CREATE TABLE events (
        user_id INTEGER,
        device_id TEXT NOT NULL,
        event_name TEXT NOT NULL,
        element TEXT,
        timestamp TEXT NOT NULL
    );

    .mode csv
    .import 'data/events.csv' events

    -- Remove header row
    DELETE FROM events WHERE user_id = 'user_id';

    -- Load subscribers table
    DROP TABLE IF EXISTS subscribers;
    CREATE TABLE subscribers (
        user_id INTEGER NOT NULL
    );

    .mode csv
    .import 'data/subscribers.csv' subscribers

    -- Remove header row
    DELETE FROM subscribers WHERE user_id = 'user_id';

    -- Verify
    .mode box
    .headers on
    SELECT * FROM events;
    ```


### Interview Questions

1. Write a SQL query to get the count of events for each device and user.
2. The `subscribers` table contains a column of user ids who are current subcsribers. Write a SQL query that gets the count of events for each device and subscriber.
3. Find all users who have both clicked something AND signed up afterwards. Show their user_id and device_id